4 Commits
dhr ... lx

Author SHA1 Message Date
febbcb3241 fix: 修复样式和组件问题并增强数据图表功能
修复多个组件中的::v-deep语法错误和el-row的gutter属性绑定
将el-button的type="text"更新为link类型
在AppMain.vue中添加div包裹keep-alive以解决过渡问题
增强DataAnalysis组件的数据处理能力,添加计算属性和默认值
添加fetchChuRuKuCountBarData调用以完善库存管理功能
2025-10-09 20:22:04 +08:00
94cd3f867d feat(物资管理): 新增备件出入库总览功能并优化采购计划单
添加备件出入库总览API接口及前端展示
在采购计划单中增加设备类型字段及相关展示逻辑
优化文件上传组件处理逻辑
修复采购计划单表单验证及数据统计问题
移除备件管理页面多余操作按钮
2025-09-30 17:40:31 +08:00
6ee935ccb6 feat(采购管理): 新增供应商名称字段并优化表单校验
refactor(出入库管理): 添加产品ID字段并调整默认单据类型

fix(备品配件): 修正库存数量输入类型为数字并移除调试日志

feat(文件上传): 支持后端文件格式转换并暴露清空方法

style(库存管理): 调整单据类型默认值及表单字段顺序

perf(采购计划): 优化供应商选择及文件上传处理逻辑
2025-09-29 20:09:20 +08:00
321c3fce49 feat: 更新采购计划和出入库管理功能
添加清除所有草稿功能
扩展采购计划和出入库接口类型定义
新增出入库统计和产品列表接口
重写计划详情页面数据展示逻辑
改进数据分析组件支持动态数据
优化库存管理页面查询和展示逻辑
完善详情信息组件展示和文件预览功能
2025-09-28 20:04:30 +08:00
41 changed files with 2537 additions and 2478 deletions

View File

@ -5,7 +5,7 @@ VITE_APP_TITLE = 新能源场站智慧运维平台
VITE_APP_ENV = 'development'
# 开发环境
VITE_APP_BASE_API = 'http://192.168.110.210:18899'
VITE_APP_BASE_API = 'http://192.168.110.149:18899'
# 应用访问路径 例如使用前缀 /admin/
VITE_APP_CONTEXT_PATH = '/'

View File

@ -61,3 +61,16 @@ export const delBeipinBeijian = (id: string | number | Array<string | number>) =
method: 'delete'
});
};
/**
* 运维-物资-备件-查询总览
* @param query
* @returns {*}
*/
export const chuRuKuTotal = (data:any): AxiosPromise<any> => {
return request({
url: '/ops/beipinBeijian/getCount',
method: 'get',
params: data
});
};

View File

@ -54,3 +54,45 @@ export const caigouPlanDetail = (id: string | number): AxiosPromise<CaigouPlanVO
method: 'get'
});
};
/**
* 更新运维-物资-采购计划单
* @param data
* @returns {*}
*/
export const updateCaigouPlan = (data: CaigouPlanForm): AxiosPromise<CaigouPlanVO> => {
return request({
url: '/ops/caigouPlan',
method: 'put',
data: data
});
};
// /**
// * 查询运维-物资-采购计划单年度金额
// * @param query
// * @returns {*}
// */
// export const getJinE = (query?: CaigouPlanQuery): AxiosPromise<any> => {
// return request({
// url: '/ops/caigouPlan/getJinE',
// method: 'get',
// params: query
// });
// };
/**
* 查询运维-物资-采购计划单年度金额
* @param id
* @returns {*}
*/
export const getCount = (id: string | number): AxiosPromise<CaigouPlanVO> => {
return request({
url: '/ops/caigouPlan/getJinE',
method: 'get',
params: {
projectId: id
}
});
};

View File

@ -178,6 +178,18 @@ export interface CaigouPlanVO {
* 采购申请计划文件 查询
*/
opsCaigouPlanFilesVos?: Array<any>;
/**
* 申请原因
*/
reason?: string;
/**
* 供应商名称
*/
gonyingshangName?: string;
/**
* 设备类型
*/
shebeiType?: string;
}
@ -360,8 +372,18 @@ export interface CaigouPlanForm extends BaseEntity {
* 出货时间
*/
chouhuoTime?: string;
/**
* 申请原因
*/
reason?: string;
/**
* 供应商名称
*/
gonyingshangName?: string;
/**
* 设备类型
*/
shebeiType?: string;
}
export interface CaigouPlanQuery extends PageQuery {
@ -545,6 +567,18 @@ export interface CaigouPlanQuery extends PageQuery {
* 出货时间
*/
chouhuoTime?: string;
/**
* 申请原因
*/
reason?: string;
/**
* 供应商名称
*/
gonyingshangName?: string;
/**
* 设备类型
*/
shebeiType?: string;
}

View File

@ -62,15 +62,43 @@ export const delChurukudan = (id: string | number | Array<string | number>) => {
});
};
/**
* 运维-物资-出入库单折现图
* @param query
* @returns {*}
*/
export const getChuRuKuCountLine = (data:any): AxiosPromise<any> => {
return request({
url: '/ops/churukudan/getChuRuKuDayCount',
method: 'get',
params: data
});
};
/**
* 运维-物资-出入库单柱状图
* @param query
* @returns {*}
*/
export const getChuRuKuCountBar = (data:any): AxiosPromise<any> => {
export const getChuRuKuDayCountBar = (data:any): AxiosPromise<any> => {
return request({
url: '/ops/churukudan/getChuRuKuCount',
method: 'get',
params: data
});
};
/**
* 运维-物资-出入库单-查询产品名称列表
* @param query
* @returns {*}
*/
export const getChanpinLists = (data:any): AxiosPromise<any> => {
return request({
url: '/ops/caigouPlan/getChanpinList',
method: 'get',
params: data
});
};

View File

@ -47,6 +47,18 @@ export interface ChurukudanVO {
*/
danjvType: string;
/**
* 审核状态
*/
auditStatus?: string;
/**
* 产品名称
*/
chanpinName?: string;
/**
* 产品id
*/
chanpinId?: string | number;
}
export interface ChurukudanForm extends BaseEntity {
@ -102,6 +114,14 @@ export interface ChurukudanForm extends BaseEntity {
* 审核状态
*/
auditStatus?: string;
/**
* 产品名称
*/
chanpinName?: string;
/**
* 产品id
*/
chanpinId?: string | number;
}
@ -139,11 +159,18 @@ export interface ChurukudanQuery extends PageQuery {
* 开始日期
*/
startDate?: string;
/**
* 产品名称
*/
chanpinName?: string;
/**
* 结束日期
*/
endDate?: string;
/**
* 产品id
*/
chanpinId?: string | number;
/**
* 日期范围参数
*/

View File

@ -1,5 +1,16 @@
<template>
<div class="upload-file">
<!-- 文件列表 -->
<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
<li v-for="(file, index) in fileList" :key="file.uid" class="el-upload-list__item ele-upload-list__item-content">
<el-link :href="`${file.url}`" :underline="false" target="_blank">
<span class="el-icon-document"> {{ getFileName(file.name) }} </span>
</el-link>
<div class="ele-upload-list__item-content-action">
<el-button type="danger" v-if="!disabled" link @click="handleDelete(index)">删除</el-button>
</div>
</li>
</transition-group>
<el-upload
ref="fileUploadRef"
multiple
@ -37,17 +48,6 @@
</template>
的文件
</div>
<!-- 文件列表 -->
<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
<li v-for="(file, index) in fileList" :key="file.uid" class="el-upload-list__item ele-upload-list__item-content">
<el-link :href="`${file.url}`" :underline="false" target="_blank">
<span class="el-icon-document"> {{ getFileName(file.name) }} </span>
</el-link>
<div class="ele-upload-list__item-content-action">
<el-button type="danger" v-if="!disabled" link @click="handleDelete(index)">删除</el-button>
</div>
</li>
</transition-group>
</div>
</template>
@ -55,7 +55,7 @@
import { propTypes } from '@/utils/propTypes';
import { delOss, listByIds } from '@/api/system/oss';
import { globalHeaders } from '@/utils/request';
import { ref } from 'vue';
const props = defineProps({
modelValue: {
type: [String, Object, Array],
@ -89,7 +89,6 @@ const showTip = computed(() => props.isShowTip && (props.fileType || props.fileS
const fileUploadRef = ref<ElUploadInstance>();
// 监听 fileType 变化,更新 fileAccept
const fileAccept = computed(() => props.fileType.map((type) => `.${type}`).join(','));
@ -200,7 +199,6 @@ const uploadedSuccessfully = () => {
uploadList.value = [];
number.value = 0;
emit('update:modelValue', listToString(fileList.value));
emit('update:fileList', fileList.value);
proxy?.$modal.closeLoading();
}
};

View File

@ -2,9 +2,11 @@
<section class="app-main">
<router-view v-slot="{ Component, route }">
<transition :enter-active-class="animate" mode="out-in">
<keep-alive :include="tagsViewStore.cachedViews">
<div>
<keep-alive :include="tagsViewStore.cachedViews">
<component :is="Component" v-if="!route.meta.link" :key="route.path" />
</keep-alive>
</div>
</transition>
</router-view>
<iframe-toggle />

View File

@ -70,11 +70,18 @@ export const useProcurementDraftStore = defineStore('procurementDraft', () => {
return false;
};
// 清除所有草稿
const clearAllDrafts = (): void => {
draftList.value = [];
saveDraftsToStorage(draftList.value);
};
return {
draftList,
saveDraft,
getDraftList,
getDraft,
deleteDraft
deleteDraft,
clearAllDrafts
};
});

View File

@ -365,9 +365,9 @@ export const getStepStatusText = (status: string | number): string => {
const statusMap: Record<string, string> = {
'1': '待执行',
'2': '执行中',
'3': '失败',
'3': '已完成',
'4': '已延期',
'5': '已完成'
'5': '失败'
};
return statusMap[statusStr] || '未知状态';
};

View File

@ -2,7 +2,7 @@
<div class="manage-form-container">
<!-- 搜索和筛选区域 -->
<div class="search-filter-section">
<el-row gutter="12" align="middle">
<el-row :gutter="12" align="middle">
<el-col :span="2">
<el-select v-model="searchForm.deviceType" placeholder="设备类型" clearable>
<el-option label="全部类型" value="" />

View File

@ -38,7 +38,7 @@
</div>
</div>
<div class="left_title_item">
<div>升压站数量</div>
<div>站数量</div>
<div>
<span style="font-size: 24px; color: rgba(29, 214, 255, 1); padding-right: 10px">{{ data?.operatingRate ?? '0' }}</span>
<span style="color: rgba(156, 163, 175, 1)"></span>

View File

@ -19,9 +19,29 @@
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
import * as echarts from 'echarts';
// 定义props
const props = defineProps({
lineData: {
type: Object,
default: () => ({
days: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
rukuCounnts: [5, 40, 20, 75, 60, 80, 40, 55, 30, 65, 5, 80],
chukuCounnts: [30, 40, 30, 30, 30, 15, 55, 50, 40, 60, 25, 90]
})
},
barData: {
type: Object,
default: () => ({
shebeiTypes: ['光伏组件', '逆变器', '汇流箱', '支架', '电缆'],
rukuCount: [5, 40, 20, 75, 60],
chukuCount: [30, 40, 30, 30, 30]
})
}
});
// 图表容器引用
const lineChartRef = ref(null);
const barChartRef = ref(null);
@ -30,6 +50,53 @@ const barChartRef = ref(null);
let lineChart = null;
let barChart = null;
// 计算属性处理传入的lineData确保数据有效
const processedLineData = computed(() => {
// 检查传入的数据是否有效
if (!props.lineData ||
!props.lineData.days ||
props.lineData.days.length === 0 ||
!Array.isArray(props.lineData.rukuCounnts) ||
!Array.isArray(props.lineData.chukuCounnts)) {
return {
days: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
rukuCounnts: [5, 40, 20, 75, 60, 80, 40, 55, 30, 65, 5, 80],
chukuCounnts: [30, 40, 30, 30, 30, 15, 55, 50, 40, 60, 25, 90]
};
}
// 检查rukuCounnts和chukuCounnts是否全为0
const isRukuAllZero = props.lineData.rukuCounnts.every(item => item === 0);
const isChukuAllZero = props.lineData.chukuCounnts.every(item => item === 0);
if (isRukuAllZero && isChukuAllZero) {
return {
days: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
rukuCounnts: [5, 40, 20, 75, 60, 80, 40, 55, 30, 65, 5, 80],
chukuCounnts: [30, 40, 30, 30, 30, 15, 55, 50, 40, 60, 25, 90]
};
}
return props.lineData;
});
// 计算属性处理传入的barData确保数据有效
const processedBarData = computed(() => {
// 检查传入的数据是否有效
if (!props.barData ||
!props.barData.shebeiTypes ||
props.barData.shebeiTypes.length === 0 ||
!Array.isArray(props.barData.rukuCount) ||
!Array.isArray(props.barData.chukuCount)) {
return {
shebeiTypes: ['光伏组件', '逆变器', '汇流箱', '支架', '电缆'],
rukuCount: [5, 40, 20, 75, 60],
chukuCount: [30, 40, 30, 30, 30]
};
}
return props.barData;
});
onMounted(() => {
// 初始化折线图
initLineChart();
@ -77,7 +144,7 @@ const initLineChart = () => {
},
xAxis: {
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
data: processedLineData.value.days
},
yAxis: {
type: 'value'
@ -86,7 +153,7 @@ const initLineChart = () => {
{
name: '入库数量',
type: 'line',
data: [5, 40, 20, 75, 60, 80, 40, 55, 30, 65, 5, 80],
data: processedLineData.value.rukuCounnts,
symbol: 'none',
smooth: true,
lineStyle: {
@ -105,7 +172,7 @@ const initLineChart = () => {
{
name: '出库数量',
type: 'line',
data: [30, 40, 30, 30, 30, 15, 55, 50, 40, 60, 25, 90],
data: processedLineData.value.chukuCounnts,
symbol: 'none',
smooth: true,
lineStyle: {
@ -155,7 +222,7 @@ const initBarChart = () => {
},
xAxis: {
type: 'category',
data: ['电器部件', '机械部件', '电子元件', '控制模块', '结构部件', '其他'],
data: processedBarData.value.shebeiTypes,
axisLabel: {
interval: 0, // 强制显示所有标签
rotate: 30, // 标签旋转30度
@ -171,7 +238,7 @@ const initBarChart = () => {
{
name: '入库数量',
type: 'bar',
data: [650, 480, 510, 280, 650, 220],
data: processedBarData.value.rukuCount,
itemStyle: {
color: 'rgba(22, 93, 255, 1)' // 入库数量颜色
},
@ -182,7 +249,7 @@ const initBarChart = () => {
{
name: '出库数量',
type: 'bar',
data: [850, 400, 770, 590, 540, 310],
data: processedBarData.value.chukuCount,
itemStyle: {
color: 'rgba(15, 198, 194, 1)' // 出库数量颜色
},
@ -205,6 +272,12 @@ const handleResize = () => {
barChart.resize();
}
};
// 监听数据变化,更新图表
watch([() => props.lineData, () => props.barData], () => {
initLineChart();
initBarChart();
}, { deep: true });
</script>
<style scoped>

View File

@ -1,84 +1,37 @@
<template>
<div class="approval-form">
<!-- 基础信息 -->
<el-card class="card" shadow="hover">
<template #header>
<h3>基础信息</h3>
</template>
<el-form :model="detailInfo" label-width="120px">
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="采购单号">
<el-input v-model="detailInfo.id" disabled />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="创建时间">
<el-input v-model="detailInfo.createTime" disabled />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="经办人">
<el-input v-model="detailInfo.jingbanrenName" disabled />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="所属部门">
<el-select v-model="detailInfo.caigouDanweiName" placeholder="请选择">
<el-option label="运维部" value="运维部" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="采购类型">
<el-select v-model="detailInfo.caigouType" placeholder="请选择">
<el-option label="项目业务" value="项目业务" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="申请原因">
<el-input v-model="basicInfo.applyReason" type="textarea" :rows="2" placeholder="请输入申请原因" />
</el-form-item>
</el-form>
<el-card class="card" shadow="hover" style="margin-top: 20px">
<el-descriptions title="基础信息" direction="vertical" :column="3" border size="large" class="infoClass">
<el-descriptions-item label="采购单编号">{{ props.detailInfo.id }}</el-descriptions-item>
<el-descriptions-item label="创建时间">{{ props.detailInfo.createTime }}</el-descriptions-item>
<el-descriptions-item label="经办人">{{ props.detailInfo.jingbanrenName }}</el-descriptions-item>
<el-descriptions-item label="所属部门">{{ props.detailInfo.caigouDanweiName }}</el-descriptions-item>
<el-descriptions-item label="采购类型">{{ getTagLabel(wz_purchase_type, props.detailInfo.caigouType)
}}</el-descriptions-item>
<el-descriptions-item label="申请原因">{{ props.detailInfo.reason }}</el-descriptions-item>
</el-descriptions>
</el-card>
<!-- 供应商信息 -->
<el-card class="card" shadow="hover" style="margin-top: 20px">
<template #header>
<h3>供应商信息</h3>
</template>
<el-form :model="detailInfo" label-width="120px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="供应商单位">
<el-select v-model="detailInfo.gonyingshangId" placeholder="请选择">
<el-option label="AAAA精密仪器制造有限公司" value="AAAA精密仪器制造有限公司" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="出货时间">
<el-select v-model="detailInfo.chouhuoTime" placeholder="请选择">
<el-option label="2年零4个月" value="2年零4个月" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-descriptions title="供应商信息" direction="vertical" :column="2" border size="large">
<el-descriptions-item label="供应商单位">{{ props.detailInfo.gonyingshangName }}</el-descriptions-item>
<el-descriptions-item label="出货时间">{{ props.detailInfo.chuhuoTime }}</el-descriptions-item>
</el-descriptions>
</el-card>
<!-- 产品信息 -->
<el-card class="card" shadow="hover" style="margin-top: 20px">
<template #header>
<h3>产品信息</h3>
</template>
<el-table :data="detailInfo.opsCaigouPlanChanpinVos" border style="width: 100%">
<div slot="header" class="infoTitle">产品信息</div>
<el-table :data="props.detailInfo.opsCaigouPlanChanpinVos || []" border style="width: 100%">
<el-table-column prop="chanpinName" label="产品名称" />
<el-table-column prop="chanpinType" label="产品型号" />
<el-table-column prop="chanpinMonovalent" label="产品单价" align="center" :cell-style="{ background: 'pink' }" />
<el-table-column prop="shebeiType" label="设备类型">
<template #default="scope">
{{ getTagLabel(wz_device_type, scope.row.shebeiType) }}
</template>
</el-table-column>
<el-table-column prop="chanpinMonovalent" label="产品单价" align="center"
:cell-style="{ background: 'pink' }" />
<el-table-column prop="goumaiNumber" label="购买数量" align="center" :cell-style="{ background: 'pink' }" />
<el-table-column prop="yontu" label="用途" />
<el-table-column prop="totalPrice" label="合计" />
@ -87,163 +40,89 @@
<!-- 合同条款 -->
<el-card class="card" shadow="hover" style="margin-top: 20px">
<template #header>
<h3>合同条款</h3>
</template>
<el-form :model="contractInfo" label-width="120px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="付款条件">
<el-select v-model="detailInfo.fukuantiaojian" placeholder="请选择">
<el-option label="银行卡" value="银行卡" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="发票开具方式">
<el-select v-model="detailInfo.fapiaoKjfs" placeholder="请选择">
<el-option label="请选择" value="请选择" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-descriptions title="合同条款" direction="vertical" :column="3" border size="large">
<el-descriptions-item label="付款条件">{{ getTagLabel(wz_payment_terms, props.detailInfo.fukuantiaojian)
}}</el-descriptions-item>
<el-descriptions-item label="发票开具方式">{{ getTagLabel(wz_invoicing_way, props.detailInfo.fapiaoKjfs)
}}</el-descriptions-item>
<el-descriptions-item label="合同类型">{{
getTagLabel(wz_contract_type, props.detailInfo.hetonType) }}</el-descriptions-item>
</el-descriptions>
</el-card>
<!-- 附件 -->
<el-card class="card" shadow="hover" style="margin-top: 20px">
<template #header>
<h3>附件</h3>
</template>
<el-upload class="upload-demo" action="#" :file-list="fileList" :auto-upload="false"
:on-preview="handlePreview">
<el-table :data="fileList" border style="width: 100%">
<el-table-column prop="name" label="文件名" width="300" />
<el-table-column prop="size" label="大小" width="100" />
<el-table-column label="操作" width="100">
<template #default="scope">
<!-- <el-link type="primary" @click="handlePreview(scope.row)"> -->
<el-link type="primary">
预览
</el-link>
</template>
</el-table-column>
</el-table>
</el-upload>
<div slot="header" class="infoTitle">附件</div>
<el-table :data="props.detailInfo.opsCaigouPlanFilesVos || []" border>
<el-table-column prop="fileName" label="文件名" width="300" />
<el-table-column label="文件类型" width="200">
<template #default="scope">
{{ getFileType(scope.row.fileName) }}
</template>
</el-table-column>
<el-table-column label="操作" width="200">
<template #default="scope">
<el-link type="primary" @click="handlePreview(scope.row)">
预览
</el-link>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, getCurrentInstance, toRefs } from 'vue';
import { useRoute } from 'vue-router';
import { ref, computed, onMounted, getCurrentInstance, toRefs } from 'vue';
import { defineProps } from 'vue';
import type { ComponentInternalInstance } from 'vue';
const route = useRoute();
import type { CaigouPlanVO } from '@/api/wuziguanli/caigouPlan/types';
// 定义props
const props = defineProps<{
detailInfo: CaigouPlanVO
}>();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { wz_invoicing_way, wz_payment_terms, wz_purchase_type, wz_contract_type, wz_caigou_examine } = toRefs<any>(proxy?.useDict('wz_invoicing_way', 'wz_payment_terms', 'wz_purchase_type', 'wz_contract_type', 'wz_caigou_examine'));
const { wz_invoicing_way, wz_payment_terms, wz_purchase_type, wz_contract_type, wz_device_type } = toRefs<any>(proxy?.useDict('wz_device_type','wz_invoicing_way', 'wz_payment_terms', 'wz_purchase_type', 'wz_contract_type', 'wz_caigou_examine', 'wz_device_type'));
import { caigouPlanDetail } from '@/api/wuziguanli/caigouPlan';
import { CaigouPlanVO, CaigouPlanQuery, CaigouPlanForm } from '@/api/wuziguanli/caigouPlan/types';
// 存储计划详情数据
const detailInfo = ref<CaigouPlanVO>({} as CaigouPlanVO);
// 存储计划编号
const id = ref('');
const getDetailInfo = async () => {
const res = await caigouPlanDetail(id.value);
if (res.code === 200) {
detailInfo.value = res.data;
console.log(detailInfo.value);
}
// 根据字典数组和值获取标签文本
const getTagLabel = (dictArray: any[], value: any): string => {
if (!dictArray || !value) return '';
const item = dictArray.find(item => item.value === value);
return item?.label || value;
}
onMounted(() => {
// 接收路由参数
id.value = route.query.id as string;
getDetailInfo();
});
// 基础信息数据
const basicInfo = ref({
orderNo: '0035455',
createTime: '2023-11-02 16:32',
handler: '李四',
dept: '运维部',
purchaseType: '项目业务',
applyReason:
'随着业务拓展光伏电站业务负责增加现有设备已运行5年部分出现效率下降情况。为保证电站正常运行计划采购一批新的逆变器替换老旧设备并补充备件库存。',
});
// 供应商信息数据
const supplierInfo = ref({
supplierName: 'AAAA精密仪器制造有限公司',
deliveryTime: '2年零4个月',
remark: '',
});
// 产品信息数据
const productInfo = ref({
tableData: [
{
productName: 'AAABBBCCC',
productModel: '15-42',
productPrice: 500,
buyQuantity: 10,
usage: '组件',
total: 5000,
},
],
remark: '',
});
// 合同条款数据
const contractInfo = ref({
paymentCondition: '银行卡',
invoiceWay: '请选择',
remark: '',
});
// 附件数据
const fileList = ref([
{
name: 'MWwwwww.jpg',
size: '30kb',
url: '',
},
{
name: '231234124w.zip',
size: '50kb',
url: '',
},
{
name: '12451asdas.doc',
size: '80kb',
url: '',
},
{
name: '21seasda.xls',
size: '29kb',
url: '',
},
{
name: '12kjaklskw.png',
size: '16kb',
url: '',
},
]);
// 获取文件类型(后缀名)
const getFileType = (fileName: string): string => {
if (!fileName) return '';
const lastDotIndex = fileName.lastIndexOf('.');
if (lastDotIndex === -1) return '';
return fileName.substring(lastDotIndex + 1).toLowerCase();
};
// 预览文件
const handlePreview = (file) => {
console.log('预览文件:', file);
// 实际场景可在这里处理文件预览逻辑,如打开新窗口等
window.open(file.fileUrl, '_blank');
};
</script>
<style scoped>
.infoTitle {
font-size: 16px;
font-weight: bold;
margin-bottom: 20px;
}
.approval-form {
padding: 20px;
}
@ -258,7 +137,7 @@ const handlePreview = (file) => {
margin-top: 5px;
}
::v-deep(.el-input__inner) {
:v-deep(.el-input__inner) {
color: red;
}
</style>

View File

@ -1,261 +0,0 @@
<template>
<div class="approval-form">
<!-- 基础信息 -->
<el-card class="card" shadow="hover">
<template #header>
<h3>基础信息</h3>
</template>
<el-form :model="basicInfo" label-width="120px">
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="订单编号">
<el-input v-model="basicInfo.orderNo" disabled />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="创建时间">
<el-input v-model="basicInfo.createTime" disabled />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="经办人">
<el-input v-model="basicInfo.handler" disabled />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="所属部门">
<el-select v-model="basicInfo.dept" placeholder="请选择">
<el-option label="运维部" value="运维部" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="采购类型">
<el-select v-model="basicInfo.purchaseType" placeholder="请选择">
<el-option label="项目业务" value="项目业务" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="申请原因">
<el-input v-model="basicInfo.applyReason" type="textarea" :rows="2" placeholder="请输入申请原因" />
</el-form-item>
</el-form>
</el-card>
<!-- 供应商信息 -->
<el-card class="card" shadow="hover" style="margin-top: 20px">
<template #header>
<h3>供应商信息</h3>
</template>
<el-form :model="supplierInfo" label-width="120px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="供应商单位">
<el-select v-model="supplierInfo.supplierName" placeholder="请选择">
<el-option label="AAAA精密仪器制造有限公司" value="AAAA精密仪器制造有限公司" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="出货时间">
<el-select v-model="supplierInfo.deliveryTime" placeholder="请选择">
<el-option label="2年零4个月" value="2年零4个月" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
<!-- 产品信息 -->
<el-card class="card" shadow="hover" style="margin-top: 20px">
<template #header>
<h3>产品信息</h3>
</template>
<el-table :data="productInfo.tableData" border style="width: 100%">
<el-table-column prop="productName" label="产品名称" />
<el-table-column prop="productModel" label="产品型号" />
<el-table-column prop="productPrice" label="产品单价" align="center" :cell-style="{ background: 'pink' }" />
<el-table-column prop="buyQuantity" label="购买数量" align="center" :cell-style="{ background: 'pink' }" />
<el-table-column prop="usage" label="用途" />
<el-table-column prop="total" label="合计" />
</el-table>
</el-card>
<!-- 合同条款 -->
<el-card class="card" shadow="hover" style="margin-top: 20px">
<template #header>
<h3>合同条款</h3>
</template>
<el-form :model="contractInfo" label-width="120px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="付款条件">
<el-select v-model="contractInfo.paymentCondition" placeholder="请选择">
<el-option label="银行卡" value="银行卡" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="发票开具方式">
<el-select v-model="contractInfo.invoiceWay" placeholder="请选择">
<el-option label="请选择" value="请选择" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
<!-- 附件 -->
<el-card class="card" shadow="hover" style="margin-top: 20px">
<template #header>
<h3>附件</h3>
</template>
<el-upload class="upload-demo" action="#" :file-list="fileList" :auto-upload="false"
:on-preview="handlePreview">
<el-table :data="fileList" border style="width: 100%">
<el-table-column prop="name" label="文件名" width="300" />
<el-table-column prop="size" label="大小" width="100" />
<el-table-column label="操作" width="100">
<template #default="scope">
<!-- <el-link type="primary" @click="handlePreview(scope.row)"> -->
<el-link type="primary">
预览
</el-link>
</template>
</el-table-column>
</el-table>
</el-upload>
</el-card>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, getCurrentInstance, toRefs } from 'vue';
import { useRoute } from 'vue-router';
import type { ComponentInternalInstance } from 'vue';
const route = useRoute();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { wz_invoicing_way, wz_payment_terms, wz_purchase_type, wz_contract_type, wz_caigou_examine } = toRefs<any>(proxy?.useDict('wz_invoicing_way', 'wz_payment_terms', 'wz_purchase_type', 'wz_contract_type', 'wz_caigou_examine'));
import { caigouPlanDetail } from '@/api/wuziguanli/caigouPlan';
import { CaigouPlanVO, CaigouPlanQuery, CaigouPlanForm } from '@/api/wuziguanli/caigouPlan/types';
// 存储计划编号
const id = ref('');
const getDetailInfo = async () => {
const res = await caigouPlanDetail(id.value);
if (res.code === 200) {
console.log(res);
}
}
onMounted(() => {
// 接收路由参数
id.value = route.query.id as string;
getDetailInfo();
});
// 基础信息数据
const basicInfo = ref({
orderNo: '0035455',
createTime: '2023-11-02 16:32',
handler: '李四',
dept: '运维部',
purchaseType: '项目业务',
applyReason:
'随着业务拓展光伏电站业务负责增加现有设备已运行5年部分出现效率下降情况。为保证电站正常运行计划采购一批新的逆变器替换老旧设备并补充备件库存。',
});
// 供应商信息数据
const supplierInfo = ref({
supplierName: 'AAAA精密仪器制造有限公司',
deliveryTime: '2年零4个月',
remark: '',
});
// 产品信息数据
const productInfo = ref({
tableData: [
{
productName: 'AAABBBCCC',
productModel: '15-42',
productPrice: 500,
buyQuantity: 10,
usage: '组件',
total: 5000,
},
],
remark: '',
});
// 合同条款数据
const contractInfo = ref({
paymentCondition: '银行卡',
invoiceWay: '请选择',
remark: '',
});
// 附件数据
const fileList = ref([
{
name: 'MWwwwww.jpg',
size: '30kb',
url: '',
},
{
name: '231234124w.zip',
size: '50kb',
url: '',
},
{
name: '12451asdas.doc',
size: '80kb',
url: '',
},
{
name: '21seasda.xls',
size: '29kb',
url: '',
},
{
name: '12kjaklskw.png',
size: '16kb',
url: '',
},
]);
// 预览文件
const handlePreview = (file) => {
console.log('预览文件:', file);
// 实际场景可在这里处理文件预览逻辑,如打开新窗口等
};
</script>
<style scoped>
.approval-form {
padding: 20px;
}
.card {
border-radius: 8px;
}
.error-tip {
color: red;
font-size: 12px;
margin-top: 5px;
}
::v-deep(.el-input__inner) {
color: red;
}
</style>

View File

@ -0,0 +1,278 @@
<template>
<div class="upload-file">
<!-- 文件列表 -->
<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
<li v-for="(file, index) in fileList" :key="file.uid" class="el-upload-list__item ele-upload-list__item-content">
<el-link :href="`${file.url}`" :underline="false" target="_blank">
<span class="el-icon-document"> {{ getFileName(file.name) }} </span>
</el-link>
<div class="ele-upload-list__item-content-action">
<el-button type="danger" v-if="!disabled" link @click="handleDelete(index)">删除</el-button>
</div>
</li>
</transition-group>
<el-upload
ref="fileUploadRef"
multiple
:drag="isDrag"
:action="uploadFileUrl"
:before-upload="handleBeforeUpload"
:file-list="fileList"
:limit="limit"
:accept="fileAccept"
:on-error="handleUploadError"
:on-exceed="handleExceed"
:on-success="handleUploadSuccess"
:show-file-list="false"
:headers="headers"
class="upload-file-uploader"
v-if="!disabled"
>
<!-- 上传按钮 -->
<el-button type="primary" v-if="!isDrag">选取文件</el-button>
<div v-else>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
拖拽文件到此处 <em>点击上传</em>
</div>
</div>
</el-upload>
<!-- 上传提示 -->
<div v-if="showTip && !disabled" class="el-upload__tip">
请上传
<template v-if="fileSize">
大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
</template>
<template v-if="fileType">
格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b>
</template>
的文件
</div>
</div>
</template>
<script setup lang="ts">
import { propTypes } from '@/utils/propTypes';
import { delOss, listByIds } from '@/api/system/oss';
import { globalHeaders } from '@/utils/request';
import { ref } from 'vue';
const props = defineProps({
modelValue: {
type: [String, Object, Array],
default: () => []
},
// 数量限制
limit: propTypes.number.def(5),
// 大小限制(MB)
fileSize: propTypes.number.def(5),
// 文件类型, 例如['png', 'jpg', 'jpeg']
fileType: propTypes.array.def(['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf']),
// 是否显示提示
isShowTip: propTypes.bool.def(true),
// 禁用组件(仅查看文件)
disabled: propTypes.bool.def(false),
// 是否开启拖拽上传
isDrag: propTypes.bool.def(false)
});
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const emit = defineEmits(['update:modelValue', 'update:fileList']);
const number = ref(0);
const uploadList = ref<any[]>([]);
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const uploadFileUrl = ref(baseUrl + '/resource/oss/upload'); // 上传文件服务器地址
const headers = ref(globalHeaders());
const fileList = ref<any[]>([]);
const showTip = computed(() => props.isShowTip && (props.fileType || props.fileSize));
const fileUploadRef = ref<ElUploadInstance>();
// 暴露方法给父组件
defineExpose({
// 清空所有文件
clearAllFiles: () => {
fileList.value = [];
emit('update:modelValue', '');
emit('update:fileList', []);
}
});
// 监听 fileType 变化,更新 fileAccept
const fileAccept = computed(() => props.fileType.map((type) => `.${type}`).join(','));
watch(
() => props.modelValue,
async (val) => {
if (val) {
let temp = 1;
// 首先将值转为数组
let list: any[] = [];
if (Array.isArray(val)) {
// 如果是数组,检查第一个元素的格式
if (val.length > 0 && val[0].fileName && val[0].fileId && val[0].fileUrl) {
// 处理后端返回的格式 [{fileName,fileId,fileUrl}]
list = val.map(item => ({
name: item.fileName,
url: item.fileUrl,
ossId: item.fileId
}));
} else {
// 处理组件内部格式 [{name,url,ossId}]
list = val;
}
} else {
// 处理字符串格式逗号分隔的ossId
const res = await listByIds(val);
list = res.data.map((oss) => {
return { name: oss.originalName, url: oss.url, ossId: oss.ossId };
});
}
// 然后将数组转为对象数组
fileList.value = list.map((item) => {
item = { name: item.name, url: item.url, ossId: item.ossId };
item.uid = item.uid || new Date().getTime() + temp++;
return item;
});
} else {
fileList.value = [];
return [];
}
},
{ deep: true, immediate: true }
);
// 上传前校检格式和大小
const handleBeforeUpload = (file: any) => {
// 校检文件类型
if (props.fileType.length) {
const fileName = file.name.split('.');
const fileExt = fileName[fileName.length - 1];
const isTypeOk = props.fileType.indexOf(fileExt) >= 0;
if (!isTypeOk) {
proxy?.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join('/')}格式文件!`);
return false;
}
}
// 校检文件名是否包含特殊字符
if (file.name.includes(',')) {
proxy?.$modal.msgError('文件名不正确,不能包含英文逗号!');
return false;
}
// 校检文件大小
if (props.fileSize) {
const isLt = file.size / 1024 / 1024 < props.fileSize;
if (!isLt) {
proxy?.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
return false;
}
}
proxy?.$modal.loading('正在上传文件,请稍候...');
number.value++;
return true;
};
// 文件个数超出
const handleExceed = () => {
proxy?.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
};
// 上传失败
const handleUploadError = () => {
proxy?.$modal.msgError('上传文件失败');
};
// 上传成功回调
const handleUploadSuccess = (res: any, file: UploadFile) => {
if (res.code === 200) {
uploadList.value.push({
name: res.data.fileName,
url: res.data.url,
ossId: res.data.ossId
});
uploadedSuccessfully();
} else {
number.value--;
proxy?.$modal.closeLoading();
proxy?.$modal.msgError(res.msg);
fileUploadRef.value?.handleRemove(file);
uploadedSuccessfully();
}
};
// 删除文件
const handleDelete = (index: number) => {
const ossId = fileList.value[index].ossId;
delOss(ossId);
fileList.value.splice(index, 1);
// 转换为后端需要的格式 [{fileName,fileId,fileUrl}]
const formattedList = fileList.value.map(file => ({
fileName: file.name,
fileId: file.ossId,
fileUrl: file.url
}));
emit('update:modelValue', formattedList);
};
// 上传结束处理
const uploadedSuccessfully = () => {
if (number.value > 0 && uploadList.value.length === number.value) {
fileList.value = fileList.value.filter((f) => f.url !== undefined).concat(uploadList.value);
uploadList.value = [];
number.value = 0;
// 转换为后端需要的格式 [{fileName,fileId,fileUrl}]
const formattedList = fileList.value.map(file => ({
fileName: file.name,
fileId: file.ossId,
fileUrl: file.url
}));
emit('update:modelValue', formattedList);
emit('update:fileList', fileList.value);
proxy?.$modal.closeLoading();
}
};
// 获取文件名称
const getFileName = (name: string) => {
// 如果是url那么取最后的名字 如果不是直接返回
if (name.lastIndexOf('/') > -1) {
return name.slice(name.lastIndexOf('/') + 1);
} else {
return name;
}
};
</script>
<style lang="scss" scoped>
.upload-file-uploader {
margin-bottom: 5px;
}
.upload-file-list .el-upload-list__item {
border: 1px solid #e4e7ed;
line-height: 2;
margin-bottom: 10px;
position: relative;
}
.upload-file-list .ele-upload-list__item-content {
display: flex;
justify-content: space-between;
align-items: center;
color: inherit;
}
.ele-upload-list__item-content-action .el-link {
margin-right: 10px;
}
</style>

View File

@ -8,8 +8,8 @@
<div class="top">
<div class="title">单据列表</div>
<div class="button-actions">
<button :class="{ active: type === 'chuku' }" @click="changeType('chuku')">出库单</button>
<button :class="{ active: type === 'ruku' }" @click="changeType('ruku')">入库单</button>
<button :class="{ active: type === 'chuku' }" @click="changeType('chuku')">出库单</button>
</div>
</div>
<div class="content" style="height: 100%;flex: 1;">
@ -23,20 +23,20 @@
<el-input v-model="queryParams.danjvNumber" placeholder="请输入单据编号"
clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="设备类型" prop="shebeiType">
<!-- <el-form-item label="设备类型" prop="shebeiType">
<el-select v-model="queryParams.shebeiType" placeholder="请选择设备类型"
clearable>
<el-option v-for="dict in wz_device_type" :key="dict.value"
:label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="审核状态" prop="auditStatus">
</el-form-item> -->
<!-- <el-form-item label="审核状态" prop="auditStatus">
<el-select v-model="queryParams.auditStatus" placeholder="请选择审核状态"
clearable>
<el-option v-for="dict in shenheStatus" :key="dict.value"
:label="dict.label" :value="dict.value" />
</el-select>
</el-form-item>
</el-form-item> -->
<el-form-item label="开始日期" prop="startDate">
<el-date-picker v-model="queryParams.startDate" type="date"
placeholder="请选择开始日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
@ -63,21 +63,17 @@
<el-table v-loading="loading" border :data="churukudanList"
style="width: 100%;margin-top: 15px;">
<el-table-column label="单据编号" align="center" prop="danjvNumber" />
<el-table-column label="设备类型" align="center" prop="shebeiType">
<template #default="scope">
<span>{{ getTagLabel(wz_device_type, scope.row.shebeiType) }}</span>
</template>
</el-table-column>
<el-table-column label="经手人" align="center" prop="jingshourenName" />
<el-table-column label="产品名称" align="center" prop="chanpinName"></el-table-column>
<el-table-column label="经手人" align="center" prop="jingshourenName" width="80px" />
<el-table-column label="操作时间" align="center" prop="updateTime" />
<el-table-column label="总数量" align="center" prop="zonNumber" width="80px" />
<el-table-column label="审核状态" align="center" prop="shenheStatus">
<!-- <el-table-column label="审核状态" align="center" prop="shenheStatus">
<template #default="scope">
<el-tag :type="getTagType(shenheStatus, scope.row.shenheStatus)" as="span">
{{ getTagLabel(shenheStatus, scope.row.shenheStatus) }}
</el-tag>
</template>
</el-table-column>
</el-table-column> -->
<el-table-column label="单据类型" align="center" prop="danjvType">
<template #default="scope">
<el-tag :type="getTagType(danjvType, scope.row.danjvType)">
@ -87,8 +83,8 @@
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" @click="handleUpdate(scope.row)"
v-hasPermi="['personnel:churukudan:edit']">修改</el-button>
<!-- <el-button link type="primary" @click="handleUpdate(scope.row)"
v-hasPermi="['personnel:churukudan:edit']">修改</el-button> -->
<el-button link type="primary" @click="handleDetail(scope.row)"
v-hasPermi="['personnel:churukudan:query']">详情</el-button>
<el-button link type="primary" @click="handleDelete(scope.row)"
@ -118,7 +114,7 @@
<div class="item-box">
<div class="title">数据分析</div>
<div class="content">
<DataAnalysis />
<DataAnalysis :lineData="lineData" :barData="barData" />
</div>
</div>
</el-card>
@ -133,14 +129,17 @@
:value="dict.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="单据编号" prop="danjvNumber">
<el-input v-model="form.danjvNumber" placeholder="请输入单据编号" />
</el-form-item>
<el-form-item label="设备类型" prop="shebeiType">
<!-- <el-form-item label="设备类型" prop="shebeiType">
<el-select v-model="form.shebeiType" placeholder="请选择设备类型">
<el-option v-for="dict in wz_device_type" :key="dict.value" :label="dict.label"
:value="dict.value"></el-option>
</el-select>
</el-form-item> -->
<el-form-item label="产品名称" prop="chanpinName">
<el-select v-model="form.chanpinName" placeholder="请选择产品名称">
<el-option v-for="dict in chanpinSelect" :key="dict.value" :label="dict.label"
:value="dict.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="经手人id" prop="jingshourenId">
<el-input v-model="form.jingshourenId" placeholder="请输入经手人id" />
@ -152,7 +151,7 @@
<el-input v-model="form.contactNumber" placeholder="请输入联系电话" />
</el-form-item>
<el-form-item label="总数量" prop="zonNumber">
<el-input v-model="form.zonNumber" placeholder="请输入总数量" />
<el-input v-model="form.zonNumber" placeholder="请输入总数量" type="number" min="0"/>
</el-form-item>
</el-form>
<template #footer>
@ -316,7 +315,7 @@
padding: 12px 0;
}
::v-deep(.el-card__body) {
:v-deep(.el-card__body) {
height: 100%;
}
</style>
@ -325,7 +324,7 @@ import SystemInfo from './components/SystemInfo.vue';
import DataAnalysis from './components/DataAnalysis.vue';
import { ref, computed } from 'vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { listChurukudan, getChurukudan, delChurukudan, addChurukudan, updateChurukudan, getChuRuKuCountBar } from '@/api/wuziguanli/churuku/index';
import { listChurukudan, getChurukudan, delChurukudan, addChurukudan, updateChurukudan, getChuRuKuCountLine, getChuRuKuDayCountBar, getChanpinLists } from '@/api/wuziguanli/churuku/index';
import { ChurukudanVO, ChurukudanQuery, ChurukudanForm } from '@/api/wuziguanli/churuku/types';
const { wz_device_type } = toRefs<any>(proxy?.useDict('wz_device_type'));
@ -342,8 +341,8 @@ const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const total = ref(0);
// 单据类型切换变量 - 默认库单
const type = ref<string>('chuku');
// 单据类型切换变量 - 默认库单
const type = ref<string>('ruku');
/** 切换单据类型 */
const changeType = (newType: string) => {
@ -427,6 +426,8 @@ const initFormData: ChurukudanForm = {
danjvType: undefined,
updateTime: undefined,
auditStatus: undefined,
chanpinName: undefined,
chanpinId: undefined,
}
const data = reactive<PageData<ChurukudanForm, ChurukudanQuery>>({
form: { ...initFormData },
@ -440,13 +441,18 @@ const data = reactive<PageData<ChurukudanForm, ChurukudanQuery>>({
startDate: undefined,
endDate: undefined,
auditStatus: undefined,
danjvType: '1', // 默认显示出库单
chanpinName: undefined,
chanpinId: undefined,
danjvType: '2', // 默认显示入库单
params: {
}
},
rules: {
shebeiType: [
{ required: true, message: "设备类型不能为空", trigger: "change" }
// shebeiType: [
// { required: true, message: "设备类型不能为空", trigger: "change" }
// ],
chanpinName: [
{ required: true, message: "产品名称不能为空", trigger: "change" }
],
jingshourenId: [
{ required: true, message: "经手人id不能为空", trigger: "blur" }
@ -460,10 +466,34 @@ const data = reactive<PageData<ChurukudanForm, ChurukudanQuery>>({
danjvType: [
{ required: true, message: "单据状态不能为空", trigger: "change" }
],
// 手机号码格式校验
contactNumber: [
{ pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码格式", trigger: "blur" }
]
}
});
const { queryParams, form, rules } = toRefs(data);
// 查询产品名称列表
const chanpinList = ref<any[]>([]);
const chanpinSelect = ref<any[]>([]);
// 查询产品名称列表
const getChanpinList = async () => {
try {
const res = await getChanpinLists({ projectId: userStore.selectedProject.id });
chanpinList.value = res.data || [];
chanpinSelect.value = chanpinList.value.map(item => ({
label:item.caigouPlanName +'-'+item.chanpinName,
value: item.id
}));
console.log('chanpinSelect.value', chanpinSelect.value);
} catch (error) {
console.error('获取产品名称列表失败:', error);
proxy?.$modal.msgError("获取产品名称列表失败,请稍后重试");
chanpinList.value = [];
}
}
/** 查询运维-物资-出入库单管理列表 */
const getList = async () => {
@ -526,23 +556,23 @@ const handleAdd = () => {
}
/** 修改按钮操作 */
const handleUpdate = async (row?: ChurukudanVO) => {
reset();
const _id = row?.id || ids.value[0];
if (!_id) {
proxy?.$modal.msgWarning("请选择要修改的数据");
return;
}
try {
const res = await getChurukudan(_id);
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = "修改运维-物资-出入库单管理";
} catch (error) {
console.error('获取出入库单详情失败:', error);
proxy?.$modal.msgError("获取数据失败,请稍后重试");
}
}
// const handleUpdate = async (row?: ChurukudanVO) => {
// reset();
// const _id = row?.id || ids.value[0];
// if (!_id) {
// proxy?.$modal.msgWarning("请选择要修改的数据");
// return;
// }
// try {
// const res = await getChurukudan(_id);
// Object.assign(form.value, res.data);
// dialog.visible = true;
// dialog.title = "修改运维-物资-出入库单管理";
// } catch (error) {
// console.error('获取出入库单详情失败:', error);
// proxy?.$modal.msgError("获取数据失败,请稍后重试");
// }
// }
/** 提交按钮 */
const submitForm = () => {
@ -550,6 +580,7 @@ const submitForm = () => {
if (valid) {
buttonLoading.value = true;
try {
form.value.chanpinId = form.value.chanpinName
if (form.value.id) {
await updateChurukudan(form.value);
proxy?.$modal.msgSuccess("修改成功");
@ -607,7 +638,29 @@ const handleDelete = async (row?: ChurukudanVO) => {
}
}
// 折线图数据获取
const lineData = ref<any>();
const fetchChuRuKuCountLineData = async () => {
if (!queryParams.value.projectId) {
return;
}
let data = {
projectId: queryParams.value.projectId,
startDate: currentMonthDates[0].fullDate,
endDate: currentMonthDates[currentMonthDates.length - 1].fullDate,
}
try {
const res = await getChuRuKuCountLine(data);
if (res.code === 200) {
lineData.value = res.data;
}
// 这里可以添加数据处理和图表更新的逻辑
} catch (error) {
proxy?.$modal.msgError("获取统计数据失败");
}
}
// 柱状图数据获取
const barData = ref<any>();
const fetchChuRuKuCountBarData = async () => {
if (!queryParams.value.projectId) {
return;
@ -618,16 +671,15 @@ const fetchChuRuKuCountBarData = async () => {
endDate: currentMonthDates[currentMonthDates.length - 1].fullDate,
}
try {
const res = await getChuRuKuCountBar(data);
console.log(res);
const res = await getChuRuKuDayCountBar(data);
if (res.code === 200) {
barData.value = res.data;
}
// 这里可以添加数据处理和图表更新的逻辑
} catch (error) {
console.error('获取柱状图数据失败:', error);
// 可以选择是否显示错误提示根据UI需求决定
// proxy?.$modal.msgError("获取统计数据失败");
proxy?.$modal.msgError("获取统计数据失败");
}
}
// 监听用户选择的项目变化
watch(() => userStore.selectedProject, (newProject) => {
if (newProject && newProject.id) {
@ -638,12 +690,16 @@ watch(() => userStore.selectedProject, (newProject) => {
}
// 调用getList刷新数据
getList();
fetchChuRuKuCountLineData();
fetchChuRuKuCountBarData();
}
}, { immediate: true, deep: true });
onMounted(() => {
getList();
fetchChuRuKuCountLineData();
fetchChuRuKuCountBarData();
// 查询产品名称列表
getChanpinList();
});
// 组件卸载时清空projectId

View File

@ -9,15 +9,15 @@
<ArrowLeft />
</el-icon>
</span>
<h2>Q2风电轴承采购计划</h2>
<h2>{{ Info.jihuaName }}</h2>
</div>
</el-card>
</el-col>
</el-row>
<el-row gutter="10">
<el-row :gutter="10">
<el-col :span="18">
<el-card>
<detailInfo />
<detailInfo :detail-info="Info" />
</el-card>
</el-col>
<el-col :span="6" style="flex-grow: 1;">
@ -46,12 +46,66 @@
cursor: pointer;
}
</style>
<script setup>
<script setup lang="ts">
import detailInfo from './components/detailInfo.vue';
import DetailsProcess from './components/DetailsProcess.vue';
import { ref, onMounted, getCurrentInstance, toRefs, watch } from 'vue';
import { useRoute } from 'vue-router';
import type { ComponentInternalInstance } from 'vue';
const route = useRoute();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { caigouPlanDetail } from '@/api/wuziguanli/caigouPlan';
import { CaigouPlanVO, CaigouPlanQuery, CaigouPlanForm } from '@/api/wuziguanli/caigouPlan/types';
// 存储计划详情数据
const Info = ref<CaigouPlanVO>({} as CaigouPlanVO);
// 存储计划编号
const id = ref('');
// 获取详细信息
const getDetailInfo = async () => {
const res = await caigouPlanDetail(id.value);
if (res.code === 200) {
Info.value = res.data;
console.log(Info.value);
}
}
onMounted(() => {
// 接收路由参数
id.value = route.query.id as string || '';
console.log('组件挂载时路由参数id:', id.value);
// 确保id不为空时才调用接口
if (id.value) {
getDetailInfo();
} else {
proxy.$modal.msgError('未获取到详细信息')
setTimeout(() => {
router.back();
}, 800);
}
});
// 监听路由参数变化
watch(
() => route.query.id,
(newId) => {
id.value = newId as string || '';
if (id.value) {
getDetailInfo();
}
},
{ immediate: true }
);
const router = useRouter();
const handleBack = () => {
router.back();
}
</script>

File diff suppressed because it is too large Load Diff

View File

@ -214,7 +214,7 @@
<dict-tag :options="wz_inventory_type" :value="scope.row.kucunStatus"></dict-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-button type="text" @click="handleUpdate(scope.row)"
v-hasPermi="['personnel:beipinBeijian:edit']">编辑</el-button>
@ -223,7 +223,7 @@
<el-button type="text" @click="handleDelete(scope.row)"
v-hasPermi="['personnel:beipinBeijian:remove']">删除</el-button>
</template>
</el-table-column>
</el-table-column> -->
</el-table>
<div class="pagination-section">
<div class="pagination-info">
@ -252,7 +252,7 @@
<el-input v-model="form.guigexinghao" placeholder="请输入规格型号" />
</el-form-item>
<el-form-item label="库存数量" prop="kucunCount">
<el-input v-model="form.kucunCount" placeholder="请输入库存数量" />
<el-input v-model="form.kucunCount" placeholder="请输入库存数量" type="number" min="0" />
</el-form-item>
<el-form-item label="库存状态" prop="kucunStatus">
<el-select v-model="form.kucunStatus" placeholder="请选择库存状态">
@ -260,12 +260,12 @@
:value="dict.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="设备类型" prop="shebeiType">
<!-- <el-form-item label="设备类型" prop="shebeiType">
<el-select v-model="form.shebeiType" placeholder="请选择设备类型">
<el-option v-for="dict in wz_device_type" :key="dict.value" :label="dict.label"
:value="dict.value"></el-option>
</el-select>
</el-form-item>
</el-form-item> -->
</el-form>
<template #footer>
<div class="dialog-footer">
@ -408,7 +408,7 @@ const userStore = useUserStore();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { listBeipinBeijian, getBeipinBeijian, delBeipinBeijian, updateBeipinBeijian } from '@/api/wuziguanli/beijian';
import { listBeipinBeijian, getBeipinBeijian, delBeipinBeijian, updateBeipinBeijian,chuRuKuTotal } from '@/api/wuziguanli/beijian';
import { BeipinBeijianVO, BeipinBeijianQuery, BeipinBeijianForm } from '@/api/wuziguanli/beijian/types';
@ -502,6 +502,18 @@ const getDictLabel = (dictType, value) => {
return option?.label || value;
};
//查询总览
const getTotalView= async () => {
try {
const res = await chuRuKuTotal({projectId: queryParams.value.projectId});
console.log(res);
total.value = res.total;
} catch (error) {
proxy?.$modal.msgError('获取数据失败,请重试');
}
}
/** 查询运维-物资-备品配件列表 */
const getList = async () => {
loading.value = true;
@ -511,7 +523,6 @@ const getList = async () => {
total.value = res.total;
} catch (error) {
proxy?.$modal.msgError('获取数据失败,请重试');
console.error('获取备品配件列表失败:', error);
} finally {
loading.value = false;
}
@ -555,7 +566,6 @@ const handleUpdate = async (row?: BeipinBeijianVO) => {
dialog.visible = true;
} catch (error) {
proxy?.$modal.msgError('获取数据失败,请重试');
console.error('获取备品配件详情失败:', error);
}
}
@ -572,7 +582,6 @@ const handleDetail = async (row?: BeipinBeijianVO) => {
detailDialogVisible.value = true;
} catch (error) {
proxy?.$modal.msgError('获取数据失败,请重试');
console.error('获取备品配件详情失败:', error);
}
}
@ -595,7 +604,6 @@ const submitForm = () => {
await getList();
} catch (error) {
proxy?.$modal.msgError('操作失败,请重试');
console.error('提交表单失败:', error);
} finally {
buttonLoading.value = false;
}
@ -620,7 +628,6 @@ const handleDelete = async (row?: BeipinBeijianVO) => {
// 如果是用户取消确认,则不显示错误信息
if (error !== 'cancel') {
proxy?.$modal.msgError('删除失败,请重试');
console.error('删除数据失败:', error);
}
} finally {
loading.value = false;
@ -644,6 +651,8 @@ watch(() => userStore.selectedProject, (newProject) => {
onMounted(() => {
getList();
// 初始化查询总览
getTotalView();
});
// 组件卸载时清空projectId

View File

@ -64,9 +64,9 @@
<!-- 主开关 -->
<g :class="{ 'switch-closed': devices[0].status === 'closed' }">
<circle cx="200" cy="200" r="15" :fill="devices[0].status === 'closed' ? '#10b981' : '#ef4444'" />
<text x="200" y="250" text-anchor="middle" font-size="5">主开关</text>
<text x="200" y="270" text-anchor="middle" font-size="4" fill="#666">220kV</text>
<text x="200" y="285" text-anchor="middle" font-size="4"
<text x="200" y="250" text-anchor="middle" font-size="12">主开关</text>
<text x="200" y="270" text-anchor="middle" font-size="10" fill="#666">220kV</text>
<text x="200" y="285" text-anchor="middle" font-size="10"
:fill="devices[0].status === 'closed' ? '#10b981' : '#ef4444'">
{{ devices[0].statusText }}
</text>
@ -78,15 +78,15 @@
<line x1="315" y1="190" x2="345" y2="190" stroke="#666" stroke-width="2" />
<line x1="315" y1="210" x2="345" y2="210" stroke="#666" stroke-width="2" />
<line x1="315" y1="230" x2="345" y2="230" stroke="#666" stroke-width="2" />
<text x="330" y="285" text-anchor="middle" font-size="5" fill="#10b981">已完成</text>
<text x="330" y="285" text-anchor="middle" font-size="10" fill="#10b981">已完成</text>
</g>
<!-- 母线开关 -->
<g :class="{ 'switch-closed': devices[1].status === 'closed' }">
<circle cx="440" cy="200" r="15" :fill="devices[1].status === 'closed' ? '#10b981' : '#ef4444'" />
<text x="440" y="250" text-anchor="middle" font-size="5">母线开关</text>
<text x="440" y="270" text-anchor="middle" font-size="4" fill="#666">110kV</text>
<text x="440" y="285" text-anchor="middle" font-size="4"
<text x="440" y="250" text-anchor="middle" font-size="12">母线开关</text>
<text x="440" y="270" text-anchor="middle" font-size="10" fill="#666">110kV</text>
<text x="440" y="285" text-anchor="middle" font-size="10"
:fill="devices[1].status === 'closed' ? '#10b981' : '#ef4444'">
{{ devices[1].statusText }}
</text>
@ -98,8 +98,8 @@
<!-- 馈线开关A -->
<g :class="{ 'switch-closed': devices[2].status === 'closed' }">
<circle cx="600" cy="100" r="15" :fill="devices[2].status === 'closed' ? '#10b981' : '#ef4444'" />
<text x="600" y="60" text-anchor="middle" font-size="5">馈线开关A</text>
<text x="600" y="80" text-anchor="middle" font-size="5"
<text x="600" y="60" text-anchor="middle" font-size="12">馈线开关A</text>
<text x="600" y="80" text-anchor="middle" font-size="10"
:fill="devices[2].status === 'closed' ? '#10b981' : '#ef4444'">
{{ devices[2].statusText }}
</text>
@ -107,14 +107,14 @@
<!-- 负载A -->
<circle cx="680" cy="100" r="20" fill="#3b82f6" stroke="#1e40af" stroke-width="2" />
<text x="680" y="105" text-anchor="middle" fill="white" font-size="5">负载A</text>
<text x="680" y="135" text-anchor="middle" font-size="5" fill="#10b981">已完成</text>
<text x="680" y="105" text-anchor="middle" fill="white" font-size="12">负载A</text>
<text x="680" y="135" text-anchor="middle" font-size="10" fill="#10b981">已完成</text>
<!-- 馈线开关B -->
<g :class="{ 'switch-closed': devices[3].status === 'closed' }">
<circle cx="600" cy="300" r="15" :fill="devices[3].status === 'closed' ? '#10b981' : '#ef4444'" />
<text x="600" y="340" text-anchor="middle" font-size="5">馈线开关B</text>
<text x="600" y="360" text-anchor="middle" font-size="5"
<text x="600" y="340" text-anchor="middle" font-size="12">馈线开关B</text>
<text x="600" y="360" text-anchor="middle" font-size="10"
:fill="devices[3].status === 'closed' ? '#10b981' : '#ef4444'">
{{ devices[3].statusText }}
</text>
@ -123,8 +123,8 @@
<!-- 保护开关 -->
<g :class="{ 'switch-closed': devices[4].status === 'closed' }">
<circle cx="720" cy="300" r="15" :fill="devices[4].status === 'closed' ? '#10b981' : '#ef4444'" />
<text x="720" y="340" text-anchor="middle" font-size="5">保护开关</text>
<text x="720" y="360" text-anchor="middle" font-size="5"
<text x="720" y="340" text-anchor="middle" font-size="12">保护开关</text>
<text x="720" y="360" text-anchor="middle" font-size="10"
:fill="devices[4].status === 'closed' ? '#10b981' : '#ef4444'">
{{ devices[4].statusText }}
</text>

View File

@ -1,10 +1,10 @@
<template>
<el-card style="border-radius: 15px;">
<el-row gutter="35">
<el-row :gutter="35">
<el-col :span="8" class="status-card">
<div class="title">设备状态</div>
<!-- gutter设置为20创建左右间隙 -->
<el-row gutter="20" style="width: 100%;">
<el-row :gutter="20" style="width: 100%;">
<!-- 一行2个每个占12格24/2=12 -->
<el-col :span="12">
<div class="item">
@ -120,7 +120,7 @@
}
.red {
::v-deep::before {
:v-deep::before {
position: absolute;
content: '';
background-color: rgba(227, 39, 39, 1);
@ -133,7 +133,7 @@
}
.yellow {
::v-deep::before {
:v-deep::before {
position: absolute;
content: '';
background-color: rgba(255, 208, 35, 1);

View File

@ -132,7 +132,7 @@
position: relative;
margin: 10px 0;
::v-deep::before {
:v-deep::before {
position: absolute;
width: 5px;
height: 5px;

View File

@ -1005,35 +1005,35 @@ const handleEnable = async (row) => {
// 导航相关方法
const handleInspection1 = () => {
router.push('/znxj/rili');
router.push('/rili/rili');
};
const handleInspection2 = () => {
router.push('/znxj/xjgl/InspectionManagement');
router.push('/rili/InspectionManagement');
};
const handleInspection3 = () => {
router.push('/znxj/sygl/shiyanguanli');
router.push('/rili/shiyanguanli');
};
const handleInspection4 = () => {
router.push('/znxj/bxgl/baoxiuguanli');
router.push('/rili/baoxiuguanli');
};
const handleInspection5 = () => {
router.push('/znxj/qxgl/qiangxiuguanli');
router.push('/rili/qiangxiuguanli');
};
const handleInspection6 = () => {
router.push('/znxj/gdgl/gongdanliebiao');
router.push('/rili/gongdanliebiao');
};
const handleInspection7 = () => {
router.push('/znxj/ywzz/renyuanzhuangtai');
router.push('/rili/renyuanzhuangtai');
};
const handleInspectionManagement1 = () => {
router.push('/znxj/xjgl/InspectionManagement');
router.push('/rili/InspectionManagement');
};
const handleInspectionManagement2 = () => {
router.push('/znxj/xjgl/xunjianrenwu');
router.push('/rili/xunjianrenwu');
};
const handleInspectionManagement3 = () => {
router.push('/znxj/xjgl/xunjianjihua');
router.push('/rili/xunjianjihua');
};
</script>

View File

@ -22,37 +22,17 @@
</div>
<!-- 搜索和筛选区 -->
<transition :enter-active-class="'el-zoom-in-center'" :leave-active-class="'el-zoom-out-center'">
<div v-show="showSearch" class="search-filter">
<div class="search-container">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="班组名称" prop="teamName">
<el-input v-model="queryParams.teamName" placeholder="请输入班组名称" clearable @keyup.enter="handleQuery"></el-input>
</el-form-item>
<el-form-item label="负责区域" prop="region">
<el-input v-model="queryParams.region" placeholder="请输入负责区域" clearable @keyup.enter="handleQuery"></el-input>
</el-form-item>
<el-form-item label="组长" prop="leader">
<el-input v-model="queryParams.leader" placeholder="请输入组长姓名" clearable @keyup.enter="handleQuery"></el-input>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
<el-option label="正常运行" value="正常运行"></el-option>
<el-option label="人员紧张" value="人员紧张"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="search-filter">
<div class="search-container">
<el-input
v-model="searchKeyword"
placeholder="搜索班组名称或编号"
class="search-input"
suffix-icon="el-icon-search"
@keyup.enter="handleSearch"
></el-input>
<el-button type="primary" class="new-team-btn" @click="handleCreateTeam"> <i class="el-icon-plus"></i> 新增班组 </el-button>
</div>
</transition>
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px">
<el-button type="primary" class="new-team-btn" @click="handleCreateTeam"> <i class="el-icon-plus"></i> 新增班组 </el-button>
<right-toolbar v-model:show-search="showSearch" @query-table="handleQuery"></right-toolbar>
</div>
<!-- 班组卡片和图表区域 -->
@ -197,35 +177,13 @@
</template>
<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick, reactive, toRefs } from 'vue';
import router from '@/router';
import * as echarts from 'echarts'; // 导入ECharts
import renwuImage from '@/assets/images/renwu.png';
import { getCurrentInstance } from 'vue';
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue';
import router from '@/router';
import * as echarts from 'echarts'; // 导入ECharts
import renwuImage from '@/assets/images/renwu.png';
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
// 搜索条件
const searchKeyword = ref('');
const showSearch = ref(true);
const queryFormRef = ref();
// 搜索参数
const data = reactive({
queryParams: {
teamName: '',
region: '',
leader: '',
status: ''
}
});
const { queryParams } = toRefs(data);
// 班组数据
const rawTeamData = ref([
@ -293,24 +251,12 @@ const total = ref(rawTeamData.value.length);
const filteredTeams = computed(() => {
let teams = [...rawTeamData.value];
// 使用queryParams进行过滤
if (queryParams.value.teamName) {
const keyword = queryParams.value.teamName.toLowerCase();
teams = teams.filter((team) => team.name.toLowerCase().includes(keyword));
}
if (queryParams.value.region) {
const keyword = queryParams.value.region.toLowerCase();
teams = teams.filter((team) => team.region.toLowerCase().includes(keyword));
}
if (queryParams.value.leader) {
const keyword = queryParams.value.leader.toLowerCase();
teams = teams.filter((team) => team.leader.toLowerCase().includes(keyword));
}
if (queryParams.value.status) {
teams = teams.filter((team) => team.status === queryParams.value.status);
if (searchKeyword.value) {
const keyword = searchKeyword.value.toLowerCase();
teams = teams.filter(
(team) =>
team.name.toLowerCase().includes(keyword) || team.region.toLowerCase().includes(keyword) || team.leader.toLowerCase().includes(keyword)
);
}
return teams;
@ -349,19 +295,6 @@ const handleSearch = () => {
currentPage.value = 1; // 重置到第一页
};
// 执行搜索
const handleQuery = () => {
currentPage.value = 1;
};
// 重置搜索
const resetQuery = () => {
if (queryFormRef.value) {
queryFormRef.value.resetFields();
}
currentPage.value = 1;
};
// 分页事件
const handleSizeChange = (val) => {
pageSize.value = val;
@ -400,34 +333,34 @@ const handleCreateTeam = () => {
// 导航路由跳转
const handleInspection1 = () => {
router.push('/znxj/rili');
router.push('/rili/rili');
};
const handleInspection2 = () => {
router.push('/znxj/xjgl/InspectionManagement');
router.push('/rili/InspectionManagement');
};
const handleInspection3 = () => {
router.push('/znxj/sygl/shiyanguanli');
router.push('/rili/shiyanguanli');
};
const handleInspection4 = () => {
router.push('/znxj/bxgl/baoxiuguanli');
router.push('/rili/baoxiuguanli');
};
const handleInspection5 = () => {
router.push('/znxj/qxgl/qiangxiuguanli');
router.push('/rili/qiangxiuguanli');
};
const handleInspection6 = () => {
router.push('/znxj/gdgl/gongdanliebiao');
router.push('/rili/gongdanliebiao');
};
const handleInspection7 = () => {
router.push('/znxj/ywzz/renyuanzhuangtai');
router.push('/rili/renyuanzhuangtai');
};
const handleInspectionManagement1 = () => {
router.push('/znxj/ywzz/renyuanzhuangtai');
router.push('/rili/renyuanzhuangtai');
};
const handleInspectionManagement2 = () => {
router.push('/znxj/ywzz/cheliangzhuangtai');
router.push('/rili/cheliangzhuangtai');
};
const handleInspectionManagement3 = () => {
router.push('/znxj/ywzz/banzhuzhuangtai');
router.push('/rili/banzhuzhuangtai');
};
// ECharts实例

View File

@ -23,30 +23,29 @@
<div class="filter-bar">
<div class="filter-container">
<div class="filter-item">
<el-input v-model="searchParams.keyword" placeholder="关键字(名称/报修人/维修人)" clearable @keyup.enter="handleSearch" />
</div>
<div class="filter-item">
<el-select v-model="searchParams.taskStatus" placeholder="任务状态">
<el-option label="待处理" value="1"></el-option>
<el-option label="处理中" value="2"></el-option>
<el-option label="已完成" value="3"></el-option>
<el-select v-model="taskStatus" placeholder="任务状态">
<el-option label="待执行" value="pending"></el-option>
<el-option label="执行中" value="executing"></el-option>
<el-option label="已延期" value="delayed"></el-option>
<el-option label="已完成" value="completed"></el-option>
</el-select>
</div>
<div class="filter-item">
<el-select v-model="searchParams.type" placeholder="报修类型">
<el-option label="硬件故障" value="1"></el-option>
<el-option label="软件故障" value="2"></el-option>
<el-select v-model="planType" placeholder="全部计划">
<el-option label="每日巡检计划" value="daily"></el-option>
<el-option label="每周巡检计划" value="weekly"></el-option>
<el-option label="每月巡检计划" value="monthly"></el-option>
</el-select>
</div>
<div class="filter-item">
<el-select v-model="searchParams.sendPerson" placeholder="执行人">
<el-option label="全部" value="" />
<el-option v-for="user in usersList" :key="user.id" :label="user.name" :value="user.id" />
<el-select v-model="executor" placeholder="执行人">
<el-option label="张明" value="zhangming"></el-option>
<el-option label="李华" value="lihua"></el-option>
<el-option label="王强" value="wangqiang"></el-option>
</el-select>
</div>
<div class="filter-actions">
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
<el-button type="primary" icon="Plus" class="create-btn" @click="handleCreateTask"> 手动创建任务 </el-button>
</div>
</div>
@ -389,19 +388,12 @@ import { baoxiulist, baoxiuDetail, updatebaoxiu, addbaoxiu } from '@/api/zhineng
import { xunjianUserlist } from '@/api/zhinengxunjian/xunjian';
import { ElMessage, ElLoading } from 'element-plus';
// 激活的选项卡
const activeTab = ref('all');
const activeTab = ref('task');
// 统一搜索参数对象
const searchParams = ref({
keyword: '',
taskStatus: '',
type: '',
sendPerson: ''
});
// 执行人列表相关
const usersList = ref([]);
const loadingUsers = ref(false);
// 筛选条件
const taskStatus = ref('');
const planType = ref('');
const executor = ref('');
// 详情弹窗相关
const detailDialogVisible = ref(false);
@ -431,46 +423,17 @@ const assignTaskRules = {
};
const assignTaskFormRef = ref(null);
// 获取用户列表
async function getUsersList() {
loadingUsers.value = true;
try {
const res = await xunjianUserlist();
// 根据接口返回格式成功码是200用户数据在rows数组中
if (res.code === 200 && res.rows && Array.isArray(res.rows)) {
// 映射用户数据使用userId字段作为唯一标识并转换为字符串以避免大整数精度问题
usersList.value = res.rows.map((user) => ({
id: String(user.userId || ''),
name: user.userName || '未知用户'
}));
} else {
usersList.value = [];
console.error('获取用户列表失败:', res.msg || '未知错误');
}
} catch (error) {
console.error('获取用户列表异常:', error);
usersList.value = [];
} finally {
loadingUsers.value = false;
}
}
// 获取报修任务列表
defineExpose({ getTaskList });
async function getTaskList() {
loading.value = true;
try {
// 确保用户列表已加载
if (usersList.value.length === 0) {
await getUsersList();
}
const res = await baoxiulist({
pageNum: currentPage.value,
pageSize: pageSize.value,
status: searchParams.value.taskStatus || undefined,
type: searchParams.value.type || undefined,
sendPerson: searchParams.value.sendPerson || undefined,
keyword: searchParams.value.keyword
status: taskStatus.value,
type: planType.value,
executor: executor.value
});
if (res.code === 200 && res.rows) {
@ -617,24 +580,12 @@ const statusOrder = {
// 分页处理后的数据(含排序)
const pagedTasks = computed(() => {
// 先关键词过滤
let filtered = [...tasks.value];
if (searchParams.value.keyword && searchParams.value.keyword.trim()) {
const kw = searchParams.value.keyword.trim();
filtered = filtered.filter(
(t) =>
(t.title && t.title.includes(kw)) ||
(t.reporter && t.reporter.includes(kw)) ||
(t.maintainer && t.maintainer.includes(kw)) ||
(t.id && String(t.id).includes(kw))
);
}
// 先按状态排序
const sortedTasks = [...tasks.value].sort((a, b) => {
return statusOrder[a.status] - statusOrder[b.status];
});
// 按状态排序
const sortedTasks = filtered.sort((a, b) => statusOrder[a.status] - statusOrder[b.status]);
// 更新总数并分页
total.value = sortedTasks.length;
// 再进行分页
const startIndex = (currentPage.value - 1) * pageSize.value;
const endIndex = startIndex + pageSize.value;
return sortedTasks.slice(startIndex, endIndex);
@ -671,6 +622,33 @@ const createTaskRules = {
contactPhone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }]
};
// 用户列表(维修人)
const usersList = ref([]);
const loadingUsers = ref(false);
// 获取用户列表
const getUsersList = async () => {
loadingUsers.value = true;
try {
const res = await xunjianUserlist();
// 根据接口返回格式成功码是200用户数据在rows数组中
if (res.code === 200 && res.rows && Array.isArray(res.rows)) {
// 映射用户数据使用userId字段作为唯一标识并转换为字符串以避免大整数精度问题
usersList.value = res.rows.map((user) => ({
id: String(user.userId || ''),
name: user.userName || '未知用户'
}));
} else {
usersList.value = [];
console.error('获取用户列表失败:', res.msg || '未知错误');
}
} catch (error) {
console.error('获取用户列表异常:', error);
usersList.value = [];
} finally {
loadingUsers.value = false;
}
};
const isSubmitting = ref(false); // 防止重复提交的状态标记
// 创建任务
@ -1069,32 +1047,32 @@ const handleSaveResult = async () => {
}
};
const handleInspectionManagement1 = () => {
router.push('/znxj/bxgl/baoxiuguanli');
router.push('/rili/baoxiuguanli');
};
const handleInspectionManagement2 = () => {
router.push('/znxj/bxgl/baoxiujilu');
router.push('/rili/baoxiujilu');
};
const handleInspection1 = () => {
router.push('/znxj/rili');
router.push('/rili/rili');
};
const handleInspection2 = () => {
router.push('/znxj/xjgl/InspectionManagement');
router.push('/rili/InspectionManagement');
};
const handleInspection3 = () => {
router.push('/znxj/sygl/shiyanguanli');
router.push('/rili/shiyanguanli');
};
const handleInspection4 = () => {
router.push('/znxj/bxgl/baoxiuguanli');
router.push('/rili/baoxiuguanli');
};
const handleInspection5 = () => {
router.push('/znxj/qxgl/qiangxiuguanli');
router.push('/rili/qiangxiuguanli');
};
const handleInspection6 = () => {
router.push('/znxj/gdgl/gongdanliebiao');
router.push('/rili/gongdanliebiao');
};
const handleInspection7 = () => {
router.push('/znxj/ywzz/renyuanzhuangtai');
router.push('/rili/renyuanzhuangtai');
};
// 组件挂载时获取数据

View File

@ -23,34 +23,25 @@
<!-- 筛选栏 -->
<div class="filter-bar">
<div class="filter-container">
<div class="filter-item">
<el-input v-model="keyword" placeholder="关键字(单号/内容/报修人/维修人)" clearable @keyup.enter="handleSearch" />
</div>
<div class="filter-item">
<el-select v-model="taskStatus" placeholder="任务状态">
<el-option label="待处理" value="1"></el-option>
<el-option label="待执行" value="1"></el-option>
<el-option label="处理中" value="2"></el-option>
<el-option label="已完成" value="3"></el-option>
</el-select>
</div>
<div class="filter-item">
<el-select v-model="priority" placeholder="优先级">
<el-option label="优先级" value="1"></el-option>
<el-option label="优先级" value="1"></el-option>
<el-option label="中优先级" value="2"></el-option>
<el-option label="优先级" value="3"></el-option>
<el-option label="优先级" value="3"></el-option>
</el-select>
</div>
<div class="filter-item">
<el-select v-model="executor" placeholder="处理人员" :loading="loadingUsers">
<el-option label="全部人员" value=""></el-option>
<el-option v-for="user in usersList" :key="user.id" :label="user.name" :value="user.id" />
</el-select>
</div>
<div class="filter-item">
<el-select v-model="repairType" placeholder="报修类型">
<el-option label="全部类型" value=""></el-option>
<el-option label="硬件故障" value="1"></el-option>
<el-option label="软件故障" value="2"></el-option>
<el-select v-model="executor" placeholder="处理人员">
<el-option label="全部人员" value="all"></el-option>
<el-option label="李阳" value="liyang"></el-option>
<el-option label="张明" value="zhangming"></el-option>
</el-select>
</div>
<div class="filter-item">
@ -65,7 +56,6 @@
</div>
<div class="filter-actions">
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
<el-button icon="Refresh" class="create-btn" @click="resetFilters"> 重置 </el-button>
</div>
</div>
</div>
@ -388,13 +378,7 @@ const statsLoading = ref(false);
const taskStatus = ref('');
const priority = ref('');
const executor = ref('');
const repairType = ref('');
const dateRange = ref([]);
const keyword = ref('');
// 执行人列表相关
const usersList = ref([]);
const loadingUsers = ref(false);
// 分页相关
const currentPage = ref(1);
@ -419,7 +403,6 @@ const statsData = ref({
onMounted(() => {
fetchRepairRecords();
fetchStatsData();
getUsersList();
});
// 从接口获取报修记录
@ -428,13 +411,11 @@ const fetchRepairRecords = async () => {
try {
// 构建请求参数
const params = {
pageNum: currentPage.value,
pageSize: pageSize.value,
page: currentPage.value,
limit: pageSize.value,
status: taskStatus.value || undefined,
level: priority.value || undefined,
executor: executor.value || undefined,
type: repairType.value || undefined,
keyword: keyword.value.trim() || undefined
level: priority.value || undefined
// 可以根据需要添加更多筛选参数
};
// 调用接口获取数据
@ -457,13 +438,8 @@ const fetchRepairRecords = async () => {
// 筛选后的记录
const filteredRecords = computed(() => {
const kw = keyword.value.trim().toLowerCase();
if (!kw) return repairRecords.value;
return repairRecords.value.filter((r) =>
[r.id, r.reportInfo, r.reportName, r.sendPersonVo?.userName, getStatusText(r.status)]
.filter(Boolean)
.some((v) => String(v).toLowerCase().includes(kw))
);
// 实际应用中这里会根据筛选条件过滤数据
return repairRecords.value;
});
// 搜索处理
@ -472,18 +448,6 @@ const handleSearch = () => {
fetchRepairRecords(); // 重新获取数据
};
// 重置筛选
const resetFilters = () => {
taskStatus.value = '';
priority.value = '';
executor.value = '';
repairType.value = '';
dateRange.value = [];
keyword.value = '';
currentPage.value = 1;
fetchRepairRecords();
};
// 分页事件
const handleSizeChange = (val) => {
pageSize.value = val;
@ -510,6 +474,8 @@ const reportFinal = ref('');
const assignDialogVisible = ref(false);
const currentAssignTaskId = ref('');
const selectedUserId = ref('');
const usersList = ref([]);
const loadingUsers = ref(false);
// 维修类型映射
function mapRepairType(type) {
@ -919,33 +885,36 @@ const handleEvaluateTask = (record) => {
// 导航事件
const handleInspectionManagement1 = () => {
router.push('/znxj/bxgl/baoxiuguanli');
router.push('/rili/baoxiuguanli');
};
const handleInspectionManagement2 = () => {
router.push('/znxj/bxgl/baoxiujilu');
router.push('/rili/baoxiujilu');
};
const handleInspection1 = () => {
router.push('/znxj/rili');
router.push('/rili/rili');
};
const handleInspection2 = () => {
router.push('/znxj/xjgl/InspectionManagement');
router.push('/rili/InspectionManagement');
};
const handleInspection3 = () => {
router.push('/znxj/sygl/shiyanguanli');
router.push('/rili/shiyanguanli');
};
const handleInspection4 = () => {
router.push('/znxj/bxgl/baoxiuguanli');
router.push('/rili/baoxiuguanli');
};
const handleInspection5 = () => {
router.push('/znxj/qxgl/qiangxiuguanli');
router.push('/rili/qiangxiuguanli');
};
const handleInspection6 = () => {
router.push('/znxj/gdgl/gongdanliebiao');
router.push('/rili/gongdanliebiao');
};
const handleInspection7 = () => {
router.push('/znxj/ywzz/renyuanzhuangtai');
router.push('/rili/renyuanzhuangtai');
};
</script>

View File

@ -71,11 +71,6 @@
<el-input v-model="plateNumber4" maxlength="1" class="plate-char"></el-input>
<el-input v-model="plateNumber5" maxlength="1" class="plate-char"></el-input>
</div>
<div style="margin-top: 10px; display: flex; gap: 8px; justify-content: flex-end">
<el-input v-model="searchKeyword" placeholder="关键字(编号/类型/车牌)" clearable @keyup.enter="handleSearch" style="max-width: 220px" />
<el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
<el-button icon="Refresh" @click="resetFilters">重置</el-button>
</div>
</div>
</div>
</div>
@ -304,34 +299,34 @@ const handleDispatch = (row) => {
// 导航路由跳转
const handleInspection1 = () => {
router.push('/znxj/rili');
router.push('/rili/rili');
};
const handleInspection2 = () => {
router.push('/znxj/xjgl/InspectionManagement');
router.push('/rili/InspectionManagement');
};
const handleInspection3 = () => {
router.push('/znxj/sygl/shiyanguanli');
router.push('/rili/shiyanguanli');
};
const handleInspection4 = () => {
router.push('/znxj/bxgl/baoxiuguanli');
router.push('/rili/baoxiuguanli');
};
const handleInspection5 = () => {
router.push('/znxj/qxgl/qiangxiuguanli');
router.push('/rili/qiangxiuguanli');
};
const handleInspection6 = () => {
router.push('/znxj/gdgl/gongdanliebiao');
router.push('/rili/gongdanliebiao');
};
const handleInspection7 = () => {
router.push('/znxj/ywzz/renyuanzhuangtai');
router.push('/rili/renyuanzhuangtai');
};
const handleInspectionManagement1 = () => {
router.push('/znxj/ywzz/renyuanzhuangtai');
router.push('/rili/renyuanzhuangtai');
};
const handleInspectionManagement2 = () => {
router.push('/znxj/ywzz/cheliangzhuangtai');
router.push('/rili/cheliangzhuangtai');
};
const handleInspectionManagement3 = () => {
router.push('/znxj/ywzz/banzhuzhuangtai');
router.push('/rili/banzhuzhuangtai');
};
</script>

View File

@ -190,8 +190,7 @@
}
/* 步骤状态样式 - 已完成 */
.task-detail-container .step-status.status-completed,
.task-detail-container .step-status.tag-completed {
.task-detail-container .step-status.status-completed {
background-color: #f6ffed;
color: #52c41a;
border: 1px solid #b7eb8f;
@ -204,20 +203,6 @@
border: 1px solid #ffccc7;
}
/* 步骤状态样式 - 未完成 */
.task-detail-container .step-status.status-unknown {
background-color: #f5f5f5;
color: #999;
border: 1px solid #d9d9d9;
}
/* 步骤状态样式 - 失败 */
.task-detail-container .step-status.status-failed {
background-color: #fff2f0;
color: #ff4d4f;
border: 1px solid #ffccc7;
}
/* 通用状态颜色样式 */
.status-pending {
color: #e6a23c;

View File

@ -22,9 +22,6 @@
<!-- 筛选栏 -->
<div class="filter-bar">
<div class="filter-container">
<div class="filter-item">
<el-input v-model="keyword" placeholder="关键字(标题/描述/创建人/编号)" clearable @keyup.enter="handleSearch" />
</div>
<div class="filter-item">
<el-select v-model="workOrderType" placeholder="工单类型" clearable>
<el-option label="全部类型" value="all"></el-option>
@ -37,8 +34,8 @@
<div class="filter-item">
<el-select v-model="workOrderStatus" placeholder="全部状态" clearable>
<el-option label="全部状态" value="all"></el-option>
<el-option label="待派单" value="pending"></el-option>
<el-option label="已派单" value="accepted"></el-option>
<el-option label="已接单" value="accepted"></el-option>
<el-option label="待处理" value="pending"></el-option>
<el-option label="执行中" value="executing"></el-option>
<el-option label="已完成" value="completed"></el-option>
</el-select>
@ -56,7 +53,6 @@
</div>
<div class="filter-actions">
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch">搜索</el-button>
<el-button icon="Refresh" class="create-btn" @click="resetFilters">重置</el-button>
<el-button type="primary" icon="Plus" class="create-btn" @click="handleCreateWorkOrder">发起工单任务</el-button>
</div>
</div>
@ -238,6 +234,13 @@
<el-form-item label="工单描述">
<el-input v-model="createForm.resultDescription" type="textarea" :rows="3" placeholder="请描述该工单完成后预期达成的成果" />
</el-form-item>
<el-form-item label="是否需要执行人" prop="needAssignee">
<el-radio-group v-model="createForm.needAssignee">
<el-radio label="true">指定执行人</el-radio>
<el-radio label="false">由系统分配</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
@ -376,7 +379,7 @@
<div v-if="node.remark" class="step-remark">备注{{ node.remark }}</div>
</div>
<div class="step-status" :class="getStatusClass(node.status)">
{{ node.status === '2' ? '未执行' : node.status === '3' ? '失败' : '已完成' }}
{{ node.status === '2' ? '未完成' : '已完成' }}
</div>
</div>
</div>
@ -458,12 +461,21 @@ import { ElMessageBox } from 'element-plus';
const activeTab = ref('list');
// 筛选条件
const keyword = ref('');
const workOrderType = ref('all');
const workOrderStatus = ref('all');
const priority = ref('all');
const createDate = ref('');
// 优先级转类名
const mapPriorityToClass = (priority) => {
const priorityMap = {
1: 'high',
2: 'medium',
3: 'low'
};
return priorityMap[priority] || 'low';
};
// 工单数据
const rawTableData = ref([]);
@ -481,9 +493,6 @@ const fetchWorkOrderList = async () => {
pageSize: pageSize.value
};
// 调试输出,检查参数是否正确
console.log('请求参数:', params);
const response = await gongdanlist(params);
if (response.code === 200 && response.rows) {
@ -515,38 +524,6 @@ const fetchWorkOrderList = async () => {
}
};
// 类型映射函数 - 页面类型转接口code
const mapTypeToTypeCode = (type) => {
const typeMap = {
'maintenance': 1, // 维护保养
'inspection': 2, // 检查检测
'installation': 3, // 安装调试
'upgrade': 4 // 升级改造
};
return typeMap[type] || null;
};
// 状态映射函数 - 页面状态转接口code
const mapStatusToStatusCode = (status) => {
const statusMap = {
'pending': 1, // 待派单
'accepted': 2, // 已派单
'executing': 3, // 执行中
'completed': 4 // 已完成
};
return statusMap[status] || null;
};
// 优先级映射函数 - 页面优先级转接口code
const mapPriorityToLevelCode = (priority) => {
const priorityMap = {
'high': 3, // 高
'medium': 2, // 中
'low': 1 // 低
};
return priorityMap[priority] || null;
};
// 类型映射函数 - 页面类型转接口code
const mapTypeToCode = (type) => {
const typeMap = {
@ -634,83 +611,10 @@ const formatDate = (dateString) => {
// 初始化加载数据
fetchWorkOrderList();
// 分页处理后的数据(前端筛选+分页)
// 分页处理后的数据
const pagedTableData = computed(() => {
let filteredData = [...rawTableData.value];
if (keyword.value && keyword.value.trim()) {
const kw = keyword.value.trim();
filteredData = filteredData.filter(
(item) =>
(item.title && item.title.includes(kw)) ||
(item.description && item.description.includes(kw)) ||
(item.creator && item.creator.includes(kw)) ||
(item.orderNo && item.orderNo.includes(kw))
);
}
if (workOrderType.value !== 'all') {
let typeText = '';
switch (workOrderType.value) {
case 'maintenance':
typeText = '维护保养';
break;
case 'inspection':
typeText = '检查检测';
break;
case 'installation':
typeText = '安装调试';
break;
case 'upgrade':
typeText = '升级改造';
break;
}
filteredData = filteredData.filter((item) => item.type === typeText);
}
if (workOrderStatus.value !== 'all') {
let statusText = '';
switch (workOrderStatus.value) {
case 'accepted':
statusText = '已派单';
break;
case 'pending':
statusText = '待派单';
break;
case 'executing':
statusText = '执行中';
break;
case 'completed':
statusText = '已完成';
break;
}
filteredData = filteredData.filter((item) => item.status === statusText);
}
if (priority.value !== 'all') {
let priorityText = '';
switch (priority.value) {
case 'high':
priorityText = '高';
break;
case 'medium':
priorityText = '中';
break;
case 'low':
priorityText = '低';
break;
}
filteredData = filteredData.filter((item) => item.priority === priorityText);
}
if (createDate.value) {
filteredData = filteredData.filter((item) => item.createTime && item.createTime.includes(createDate.value));
}
total.value = filteredData.length;
const startIndex = (currentPage.value - 1) * pageSize.value;
const endIndex = startIndex + pageSize.value;
return filteredData.slice(startIndex, endIndex);
// 由于接口已经处理了分页和筛选,这里直接返回全部数据
return rawTableData.value;
});
// 获取类型标签样式
@ -755,10 +659,10 @@ const getStatusClass = (status) => {
// 处理可能的数字输入
const statusStr = status?.toString() || '';
const statusClassMap = {
'1': 'status-pending', // 待执行 - 蓝色
'2': 'status-unknown', // 未完成 - 灰色
'3': 'status-failed', // 失败 - 红色
'4': 'status-completed' // 已完成 - 绿色
'1': 'status-pending',
'2': 'status-delayed',
'3': 'status-executing',
'4': 'status-completed'
};
return statusClassMap[statusStr] || 'status-unknown';
};
@ -793,27 +697,19 @@ const getStepStatusText = (status) => {
const handleSearch = () => {
currentPage.value = 1; // 重置到第一页
fetchWorkOrderList(); // 触发API请求获取数据
};
// 重置筛选
const resetFilters = () => {
keyword.value = '';
workOrderType.value = 'all';
workOrderStatus.value = 'all';
priority.value = 'all';
createDate.value = '';
currentPage.value = 1;
fetchWorkOrderList(); // 重新获取数据
};
// 分页事件
const handleSizeChange = (val) => {
pageSize.value = val;
currentPage.value = 1;
fetchWorkOrderList(); // 重新获取数据
};
const handleCurrentChange = (val) => {
currentPage.value = val;
fetchWorkOrderList(); // 重新获取数据
};
// 选项卡点击
@ -1380,35 +1276,35 @@ const handleSaveDraft = () => {
// 导航路由跳转
const handleInspection1 = () => {
router.push('/znxj/rili');
router.push('/rili/rili');
};
const handleInspection2 = () => {
router.push('/znxj/xjgl/InspectionManagement');
router.push('/rili/InspectionManagement');
};
const handleInspection3 = () => {
router.push('/znxj/sygl/shiyanguanli');
router.push('/rili/shiyanguanli');
};
const handleInspection4 = () => {
router.push('/znxj/bxgl/baoxiuguanli');
router.push('/rili/baoxiuguanli');
};
const handleInspection5 = () => {
router.push('/znxj/qxgl/qiangxiuguanli');
router.push('/rili/qiangxiuguanli');
};
const handleInspection6 = () => {
router.push('/znxj/gdgl/gongdanliebiao');
router.push('/rili/gongdanliebiao');
};
const handleInspection7 = () => {
router.push('/znxj/ywzz/renyuanzhuangtai');
router.push('/rili/renyuanzhuangtai');
};
const handleInspectionManagement1 = () => {
router.push('/znxj/gdgl/gongdanliebiao');
router.push('/rili/gongdanliebiao');
};
const handleInspectionManagement2 = () => {
router.push('/znxj/gdgl/paidanjilu');
router.push('/rili/paidanjilu');
};
const handleInspectionManagement3 = () => {
router.push('/znxj/gdgl/zhixingjilu');
router.push('/rili/zhixingjilu');
};
</script>
@ -1650,7 +1546,46 @@ const handleInspectionManagement3 = () => {
}
/* 导航栏样式 */
/* 已注释的导航栏样式移除 */
.navigation-tabs {
display: flex;
margin-bottom: 20px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
padding: 2px;
}
.nav-tab {
padding: 12px 24px;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 4px;
font-size: 14px;
color: #606266;
border-right: 1px solid #f0f0f0;
flex: 1;
text-align: center;
}
.nav-tab:last-child {
border-right: none;
}
.nav-tab:hover {
color: #409eff;
background-color: #ecf5ff;
}
.nav-tab.active {
background-color: #409eff;
color: #fff;
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}
.nav-tab {
cursor: pointer;
user-select: none;
}
/* 弹窗样式 */
.create-dialog {

View File

@ -560,25 +560,25 @@ const handleDelete = (id) => {
};
const handleInspection1 = () => {
router.push('/znxj/rili');
router.push('/rili/rili');
};
const handleInspection2 = () => {
router.push('/znxj/xjgl/InspectionManagement');
router.push('/rili/InspectionManagement');
};
const handleInspection3 = () => {
router.push('/znxj/sygl/shiyanguanli');
router.push('/rili/shiyanguanli');
};
const handleInspection4 = () => {
router.push('/znxj/bxgl/baoxiuguanli');
router.push('/rili/baoxiuguanli');
};
const handleInspection5 = () => {
router.push('/znxj/qxgl/qiangxiuguanli');
router.push('/rili/qiangxiuguanli');
};
const handleInspection6 = () => {
router.push('/znxj/gdgl/gongdanliebiao');
router.push('/rili/gongdanliebiao');
};
const handleInspection7 = () => {
router.push('/znxj/ywzz/renyuanzhuangtai');
router.push('/rili/renyuanzhuangtai');
};
</script>

View File

@ -24,9 +24,6 @@
<!-- 筛选栏 -->
<div class="filter-bar">
<div class="filter-container">
<div class="filter-item">
<el-input v-model="keyword" placeholder="关键字(标题/描述/创建人/编号)" clearable @keyup.enter="handleSearch" />
</div>
<div class="filter-item">
<el-select v-model="workOrderType" placeholder="工单类型" clearable>
<el-option label="全部类型" value="all"></el-option>
@ -39,8 +36,8 @@
<div class="filter-item">
<el-select v-model="workOrderStatus" placeholder="全部状态" clearable>
<el-option label="全部状态" value="all"></el-option>
<el-option label="待派单" value="pending"></el-option>
<el-option label="已派单" value="accepted"></el-option>
<el-option label="待派单" value="accepted"></el-option>
<el-option label="待处理" value="pending"></el-option>
<el-option label="执行中" value="executing"></el-option>
<el-option label="已完成" value="completed"></el-option>
</el-select>
@ -58,7 +55,6 @@
</div>
<div class="filter-actions">
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch">搜索</el-button>
<el-button icon="Refresh" class="create-btn" @click="resetFilters">重置</el-button>
</div>
</div>
</div>
@ -434,7 +430,7 @@
<div v-if="node.remark" class="step-remark">备注{{ node.remark }}</div>
</div>
<div class="step-status" :class="getStatusClass(node.status)">
{{ node.status === '2' ? '未执行' : node.status === '3' ? '失败' : '已完成' }}
{{ node.status === '2' ? '未完成' : '已完成' }}
</div>
</div>
</div>
@ -513,7 +509,6 @@ import ImageUpload from '@/components/ImageUpload/index.vue';
import { ElMessageBox, ElMessage } from 'element-plus';
// 筛选条件
const keyword = ref('');
const workOrderType = ref('all');
const workOrderStatus = ref('all');
const priority = ref('all');
@ -706,10 +701,10 @@ const getStatusClass = (status) => {
// 处理可能的数字输入
const statusStr = status?.toString() || '';
const statusClassMap = {
'1': 'status-pending', // 待执行 - 蓝色
'2': 'status-unknown', // 未执行 - 灰色
'3': 'status-failed', // 失败 - 红色
'4': 'status-completed' // 已完成 - 绿色
'1': 'status-pending',
'2': 'status-delayed',
'3': 'status-executing',
'4': 'status-completed'
};
return statusClassMap[statusStr] || 'status-unknown';
};
@ -755,18 +750,6 @@ const pagedTableData = computed(() => {
// 筛选逻辑
let filteredData = [...rawTableData.value];
if (keyword.value && keyword.value.trim()) {
const kw = keyword.value.trim();
filteredData = filteredData.filter((item) => {
return (
(item.title && item.title.includes(kw)) ||
(item.description && item.description.includes(kw)) ||
(item.creator && item.creator.includes(kw)) ||
(item.orderNo && item.orderNo.includes(kw))
);
});
}
if (workOrderType.value !== 'all') {
// 转换筛选条件为显示文本进行匹配
let typeText = '';
@ -792,10 +775,10 @@ const pagedTableData = computed(() => {
let statusText = '';
switch (workOrderStatus.value) {
case 'accepted':
statusText = '已单';
statusText = '已单';
break;
case 'pending':
statusText = '待派单';
statusText = '待处理';
break;
case 'executing':
statusText = '执行中';
@ -879,16 +862,6 @@ const handleSearch = () => {
currentPage.value = 1; // 重置到第一页
};
// 重置筛选
const resetFilters = () => {
keyword.value = '';
workOrderType.value = 'all';
workOrderStatus.value = 'all';
priority.value = 'all';
createDate.value = '';
currentPage.value = 1;
};
// 分页事件
const handleSizeChange = (val) => {
pageSize.value = val;
@ -1432,35 +1405,35 @@ const cancelCreate = () => {
// 导航路由跳转
const handleInspection1 = () => {
router.push('/znxj/rili');
router.push('/rili/rili');
};
const handleInspection2 = () => {
router.push('/znxj/xjgl/InspectionManagement');
router.push('/rili/InspectionManagement');
};
const handleInspection3 = () => {
router.push('/znxj/sygl/shiyanguanli');
router.push('/rili/shiyanguanli');
};
const handleInspection4 = () => {
router.push('/znxj/bxgl/baoxiuguanli');
router.push('/rili/baoxiuguanli');
};
const handleInspection5 = () => {
router.push('/znxj/qxgl/qiangxiuguanli');
router.push('/rili/qiangxiuguanli');
};
const handleInspection6 = () => {
router.push('/znxj/gdgl/gongdanliebiao');
router.push('/rili/gongdanliebiao');
};
const handleInspection7 = () => {
router.push('/znxj/ywzz/renyuanzhuangtai');
router.push('/rili/renyuanzhuangtai');
};
const handleInspectionManagement1 = () => {
router.push('/znxj/gdgl/gongdanliebiao');
router.push('/rili/gongdanliebiao');
};
const handleInspectionManagement2 = () => {
router.push('/znxj/gdgl/paidanjilu');
router.push('/rili/paidanjilu');
};
const handleInspectionManagement3 = () => {
router.push('/znxj/gdgl/zhixingjilu');
router.push('/rili/zhixingjilu');
};
// 关闭详情弹窗
@ -1790,7 +1763,46 @@ const handleCloseDetailDialog = () => {
}
/* 导航栏样式 */
/* 已注释的导航栏样式移除 */
.navigation-tabs {
display: flex;
margin-bottom: 20px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
padding: 2px;
}
.nav-tab {
padding: 12px 24px;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 4px;
font-size: 14px;
color: #606266;
border-right: 1px solid #f0f0f0;
flex: 1;
text-align: center;
}
.nav-tab:last-child {
border-right: none;
}
.nav-tab:hover {
color: #409eff;
background-color: #ecf5ff;
}
.nav-tab.active {
background-color: #409eff;
color: #fff;
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}
.nav-tab {
cursor: pointer;
user-select: none;
}
/* 弹窗样式 */
.create-dialog {

View File

@ -22,9 +22,6 @@
<!-- 筛选栏 -->
<div class="filter-bar">
<div class="filter-container">
<div class="filter-item">
<el-input v-model="keyword" placeholder="关键字(名称/报修人/维修人/位置)" clearable @keyup.enter="handleSearch" />
</div>
<div class="filter-item">
<el-select v-model="taskStatus" placeholder="任务状态">
<el-option label="待执行" value="pending"></el-option>
@ -33,16 +30,25 @@
<el-option label="已完成" value="completed"></el-option>
</el-select>
</div>
<div class="filter-item">
<el-select v-model="sendPerson" placeholder="维修人" :loading="loadingUsers">
<el-option label="全部维修人" value="all"></el-option>
<el-option v-for="user in usersList" :key="user.id" :label="user.name" :value="user.id"></el-option>
<el-select v-model="planType" placeholder="全部计划">
<el-option label="全部计划" value="all"></el-option>
<el-option label="每日巡检计划" value="daily"></el-option>
<el-option label="每周巡检计划" value="weekly"></el-option>
<el-option label="每月巡检计划" value="monthly"></el-option>
<el-option label="每季度巡检计划" value="quarterly"></el-option>
</el-select>
</div>
<div class="filter-item">
<el-select v-model="executor" placeholder="执行人">
<el-option label="全部人员" value="all"></el-option>
<el-option label="张明" value="zhangming"></el-option>
<el-option label="李华" value="lihua"></el-option>
<el-option label="王强" value="wangqiang"></el-option>
</el-select>
</div>
<div class="filter-actions">
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
<el-button icon="Refresh" class="create-btn" @click="resetFilters"> 重置 </el-button>
<el-button type="primary" icon="Plus" class="create-btn" @click="handleCreateTask"> 手动创建任务 </el-button>
</div>
</div>
@ -417,10 +423,9 @@ import router from '@/router';
import { ElMessage } from 'element-plus';
import { qiangxiuDetail, qiangxiulist, addqiangxiu, updateqiangxiu } from '@/api/zhinengxunjian/qiangxiu';
import { xunjianUserlist } from '@/api/zhinengxunjian/xunjian';
const taskStatus = ref('');
const taskStatus = ref('all');
const planType = ref('all');
const sendPerson = ref('all');
const keyword = ref('');
const executor = ref('all');
// 任务数据 - 添加了更多字段以展示滚动效果
const tasks = ref([]);
// 分页相关
@ -453,16 +458,6 @@ const handleSearch = () => {
getTaskList(); // 调用接口获取数据
};
// 重置筛选
const resetFilters = () => {
taskStatus.value = 'all';
planType.value = 'all';
sendPerson.value = 'all';
keyword.value = '';
currentPage.value = 1;
getTaskList();
};
// 创建紧急抢修任务弹窗相关
const createTaskDialogVisible = ref(false);
const createTaskFormRef = ref(null); // 表单引用
@ -703,32 +698,32 @@ const handleView = async (task) => {
};
const handleInspectionManagement1 = () => {
router.push('/znxj/qxgl/qiangxiuguanli');
router.push('/rili/qiangxiuguanli');
};
const handleInspectionManagement2 = () => {
router.push('/znxj/qxgl/qiangxiujilu');
router.push('/rili/qiangxiujilu');
};
const handleInspection1 = () => {
router.push('/znxj/rili');
router.push('/rili/rili');
};
const handleInspection2 = () => {
router.push('/znxj/xjgl/InspectionManagement');
router.push('/rili/InspectionManagement');
};
const handleInspection3 = () => {
router.push('/znxj/sygl/shiyanguanli');
router.push('/rili/shiyanguanli');
};
const handleInspection4 = () => {
router.push('/znxj/bxgl/baoxiuguanli');
router.push('/rili/baoxiuguanli');
};
const handleInspection5 = () => {
router.push('/znxj/qxgl/qiangxiuguanli');
router.push('/rili/qiangxiuguanli');
};
const handleInspection6 = () => {
router.push('/znxj/gdgl/gongdanliebiao');
router.push('/rili/gongdanliebiao');
};
const handleInspection7 = () => {
router.push('/znxj/ywzz/renyuanzhuangtai');
router.push('/rili/renyuanzhuangtai');
};
// 加载状态
@ -977,13 +972,12 @@ const handleSaveResult = async () => {
}
};
// 状态映射辅助函数 - 严格匹配JSON数据中的status字段
// 状态映射辅助函数
function mapStatusToKey(status) {
const statusMap = {
'1': 'pending', // 待处理
'2': 'executing', // 处理中
'3': 'completed', // 已完成
'4': 'delayed' // 已延期
'3': 'completed' // 已完成
};
return statusMap[status] || 'pending';
}
@ -1074,51 +1068,31 @@ async function getTaskList() {
// 构建请求参数,包含筛选条件
const requestParams = {
projectId: 1,
pageNum: parseInt(currentPage.value, 10),
pageSize: parseInt(pageSize.value, 10)
pageNum: currentPage.value,
pageSize: pageSize.value
};
// 添加任务状态筛选条件 - 严格匹配JSON数据中的status字段
// 添加任务状态筛选条件
if (taskStatus.value && taskStatus.value !== 'all') {
// 状态映射pending -> 1(待处理), executing -> 2(处理中), completed -> 3(已完成), delayed -> 4(已延期)
const statusMap = {
'pending': '1',
'executing': '2',
'completed': '3',
'delayed': '4'
};
requestParams.status = String(statusMap[taskStatus.value] || taskStatus.value);
requestParams.status = taskStatus.value;
}
// 添加故障类型筛选条件 - 严格匹配JSON数据中的type字段
// 添加计划类型筛选条件
if (planType.value && planType.value !== 'all') {
// 类型映射electric -> 1(电力故障), device -> 2(设备故障), software -> 3(软件故障), network -> 4(网络故障), environment -> 5(环境问题)
const typeMap = {
'electric': '1',
'device': '2',
'software': '3',
'network': '4',
'environment': '5'
};
requestParams.type = String(typeMap[planType.value] || planType.value);
requestParams.planType = planType.value;
}
// 添加维修人员筛选条件 - 严格匹配JSON数据中的sendPerson字段
if (sendPerson.value && sendPerson.value !== 'all' && sendPerson.value !== '') {
// 转换为数字类型以匹配API期望的格式
requestParams.sendPerson = parseInt(sendPerson.value, 10);
}
// 添加关键词搜索条件
if (keyword.value && keyword.value.trim()) {
requestParams.keyword = keyword.value.trim();
// 添加执行人筛选条件
if (executor.value && executor.value !== 'all') {
requestParams.executor = executor.value;
}
const res = await qiangxiulist(requestParams);
if (res.code === 200 && res.rows) {
total.value = res.total || 0;
// 将API返回的数据转换为前端显示所需的格式
const mapped = res.rows.map((item) => ({
tasks.value = res.rows.map((item) => ({
id: item.id,
title: item.name || '未命名抢修任务',
status: mapStatusToKey(item.status),
@ -1126,49 +1100,30 @@ async function getTaskList() {
leftLineClass: getLeftLineClass(item.status, item.level),
priorityClass: getPriorityClass(item.level),
priority: getPriorityText(item.level),
// 严格匹配JSON数据中的createTime字段
// 修复报修时间字段名,使用与模板一致的createTime
createTime: formatDate(item.createTime),
// 严格匹配JSON数据中的reportName字段
// 修复报修人字段,使用reportName
reporter: item.reportName || '未知报修人',
// 严格匹配JSON数据中的sendPerson和sendPersonVo字段
maintainer: item.sendPersonVo?.userName || (item.sendPerson ? `用户ID: ${item.sendPerson}` : '未分配'),
// 修复维修人字段,从sendPersonVo对象中获取用户名
maintainer: item.sendPersonVo?.userName || '未分配',
completeTime: item.reportFinishTime ? formatDate(item.reportFinishTime) : '',
actionText: getActionText(item.status),
actionClass: getActionClass(item.status),
reportInfo: item.reportInfo || '',
position: item.position || '',
fileUrl: item.fileUrl || '',
reportInfo: item.reportInfo,
position: item.position,
fileUrl: item.fileUrl,
reportPhone: item.reportPhone || '',
type: item.type || '',
// 保留原始数据用于详情查看
sendPersonVo: item.sendPersonVo,
faultType: getFaultTypeText(item.type),
// 严格匹配JSON数据中的expectedTime字段
expectedTime: item.expectedTime ? formatDate(item.expectedTime) : '',
// 严格匹配JSON数据中的support字段
needSupport: item.support || '',
// 添加额外的原始字段用于筛选和展示
sendPerson: item.sendPerson,
level: item.level,
createBy: item.createBy
// 保留expectedTime字段用于任务修改
expectedTime: item.expectedTime || '',
// 添加needSupport字段确保从API返回数据中获取实际值
needSupport: item.support || ''
}));
// 关键词过滤
const kw = keyword.value.trim().toLowerCase();
const filtered = kw
? mapped.filter((t) =>
[t.title, t.reporter, t.maintainer, t.position, t.statusText].filter(Boolean).some((v) => String(v).toLowerCase().includes(kw))
)
: mapped;
tasks.value = filtered;
if (res.total !== undefined) {
total.value = kw ? filtered.length : res.total;
} else {
total.value = filtered.length;
}
} else {
tasks.value = [];
total.value = 0;
@ -1198,7 +1153,6 @@ function getFaultTypeText(type) {
// 初始化时调用接口获取数据
setTimeout(() => {
getTaskList();
getUsersList(); // 获取用户列表用于维修人筛选
}, 0);
</script>
@ -1624,8 +1578,7 @@ setTimeout(() => {
.detail-value {
flex: 1;
color: #4e5969;
word-break: break-word;
line-height: 1.5;
word-break: break-all;
}
.task-result {
@ -1642,7 +1595,13 @@ setTimeout(() => {
align-items: center;
padding-top: 12px;
border-top: 1px solid #f0f2f5;
position: absolute;
bottom: 16px;
right: 16px;
left: 16px;
background-color: #fff;
padding: 12px 0 0 0;
z-index: 10;
}
.action-btn {
@ -1746,11 +1705,10 @@ setTimeout(() => {
}
.task-title {
font-size: 16px;
font-size: 14px;
font-weight: 500;
color: #1d2129;
line-height: 1.4;
word-break: break-word;
flex: 1;
margin-right: 8px;
}
@ -1763,32 +1721,35 @@ setTimeout(() => {
border: 1px solid transparent;
}
/* 优先级标签背景色样式 - 与保修管理页面保持一致 */
.priority-high {
/* 不同故障类型的颜色 */
/* 电力,设备故障为红色 */
.task-type-tag.electric,
.task-type-tag.equipment {
background-color: #fff2f0;
color: #ff4d4f;
border-color: #ffccc7;
}
.priority-medium {
/* 供水,设备损坏为黄色 */
.task-type-tag.water,
.task-type-tag.damage {
background-color: #fffbe6;
color: #fa8c16;
border-color: #ffe58f;
}
.priority-low {
background-color: #e6f7ff;
color: #1890ff;
border-color: #91d5ff;
/* 其余为绿色 */
.task-type-tag {
background-color: #f6ffed;
color: #52c41a;
border-color: #b7eb8f;
}
.task-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
/* 左侧状态线样式 - 与保修管理页面保持一致 */
.task-card::before {
.task-card[data-v-2668390e]::before {
content: '';
position: absolute;
left: 0;
@ -1796,22 +1757,6 @@ setTimeout(() => {
bottom: 0;
width: 4px;
}
.left-line-high::before {
background-color: #ff4d4f;
}
.left-line-medium::before {
background-color: #fa8c16;
}
.left-line-low::before {
background-color: #1677ff;
}
.left-line-completed::before {
background-color: #52c41a;
}
.task-details {
margin-bottom: 16px;
}
@ -1824,9 +1769,8 @@ setTimeout(() => {
}
.detail-label {
flex: 0 0 85px;
flex: 0 0 70px;
color: #86909c;
margin-right: 4px;
}
.detail-value {

View File

@ -19,12 +19,9 @@
</div>
</div>
<!-- 筛选栏 -->
<!-- 筛选栏 (默认隐藏) -->
<div class="filter-bar">
<div class="filter-container">
<div class="filter-item">
<el-input v-model="keyword" placeholder="关键字(单号/内容/报修人/维修人)" clearable @keyup.enter="handleSearch" />
</div>
<div class="filter-item">
<el-select v-model="taskStatus" placeholder="任务状态">
<el-option label="待执行" value="pending"></el-option>
@ -39,9 +36,10 @@
</el-select>
</div>
<div class="filter-item">
<el-select v-model="executor" placeholder="抢修人员" :loading="loadingUsers">
<el-select v-model="executor" placeholder="抢修人员">
<el-option label="全部人员" value="all"></el-option>
<el-option v-for="user in executors" :key="user.userId" :label="user.userName" :value="user.userId"></el-option>
<el-option label="李明" value="liming"></el-option>
<el-option label="王伟" value="wangwei"></el-option>
</el-select>
</div>
<div class="filter-item">
@ -56,7 +54,6 @@
</div>
<div class="filter-actions">
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
<el-button icon="Refresh" class="create-btn" @click="resetFilters"> 重置 </el-button>
</div>
</div>
</div>
@ -67,9 +64,7 @@
<div class="stat-info">
<p class="stat-label">本月抢修总数</p>
<p class="stat-value">{{ isCardLoading ? '加载中...' : statisticsData.totalCount }}</p>
<p class="stat-trend" :class="statisticsData.monthChangeClass">
较上月{{ statisticsData.monthChangeClass === 'warning' ? '无增长' : ':' + statisticsData.monthChange }}
</p>
<p class="stat-trend up">较上月:{{ statisticsData.monthChange }}</p>
</div>
<div class="stat-icon">
<img src="@/assets/images/qiangxiu.png" alt="本月抢修总数" class="stat-image" />
@ -80,9 +75,7 @@
<div class="stat-info">
<p class="stat-label">平均抢修时长</p>
<p class="stat-value">{{ isCardLoading ? '加载中...' : statisticsData.avgDuration }}</p>
<p class="stat-trend" :class="statisticsData.durationChangeClass">
较上月{{ statisticsData.durationChangeClass === 'warning' ? '无增长' : ':' + statisticsData.durationChange }}
</p>
<p class="stat-trend down">较上月:{{ statisticsData.durationChange }}</p>
</div>
<div class="stat-icon">
<img src="@/assets/images/qiangxiushijian.png" alt="平均抢修时长" class="stat-image" />
@ -104,9 +97,7 @@
<div class="stat-info">
<p class="stat-label">按时完成率</p>
<p class="stat-value">{{ isCardLoading ? '加载中...' : statisticsData.completionRate }}</p>
<p class="stat-trend" :class="statisticsData.rateChangeClass">
{{ statisticsData.rateChangeClass === 'warning' ? '较上月无增长' : statisticsData.rateChange }}
</p>
<p class="stat-trend up">{{ statisticsData.rateChange }}</p>
</div>
<div class="stat-icon success">
<img src="@/assets/images/qiangxiuwancheng.png" alt="按时完成率" class="stat-image" />
@ -369,7 +360,6 @@ const priority = ref('');
const executor = ref('');
const dateRange = ref([]);
const showFilter = ref(false);
const keyword = ref('');
// 表单验证规则
const assignTaskRules = {
@ -425,58 +415,19 @@ const getTaskList = async () => {
try {
isLoading.value = true;
// 构建查询参数严格匹配JSON数据结构
// 构建查询参数
const params = {
projectId: 1,
pageNum: currentPage.value,
pageSize: pageSize.value
};
// 添加任务状态筛选条件 - 严格匹配JSON数据中的status字段
if (taskStatus.value && taskStatus.value !== 'all') {
// 状态映射pending -> 1(待处理), processing -> 2(处理中), completed -> 3(已完成)
const statusMap = {
'pending': '1',
'processing': '2',
'completed': '3'
};
params.status = statusMap[taskStatus.value] || taskStatus.value;
}
// 添加紧急程度筛选条件 - 严格匹配JSON数据中的level字段
if (priority.value && priority.value !== 'all') {
// 优先级映射normal -> 1(常规), urgent -> 2(紧急), fatal -> 3(致命)
const priorityMap = {
'normal': '1',
'urgent': '2',
'fatal': '3'
};
params.level = priorityMap[priority.value] || priority.value;
}
// 添加维修人员筛选条件 - 严格匹配JSON数据中的sendPerson字段
if (executor.value && executor.value !== 'all') {
// 确保用户ID为字符串类型与接口期望格式一致
params.sendPerson = executor.value.toString();
}
// 添加时间范围筛选条件
if (dateRange.value && dateRange.value.length === 2) {
params.startTime = dateRange.value[0];
params.endTime = dateRange.value[1];
}
// 添加关键词搜索条件
if (keyword.value && keyword.value.trim()) {
params.keyword = keyword.value.trim();
}
// 调用接口获取数据
const res = await qiangxiulist(params);
if (res && res.code === 200) {
// 更新表格数据,将接口返回的字段映射到表格期望的字段
const mapped = Array.isArray(res.rows)
repairRecords.value = Array.isArray(res.rows)
? res.rows.map((item) => ({
// 映射抢修单号
reportNo: `R-${item.id || '000'}`,
@ -503,17 +454,7 @@ const getTaskList = async () => {
originalData: item
}))
: [];
// 关键词过滤
const kw = keyword.value.trim().toLowerCase();
const filtered = kw
? mapped.filter((r) =>
[r.reportNo, r.content, r.reporter, r.handler, r.status].filter(Boolean).some((v) => String(v).toLowerCase().includes(kw))
)
: mapped;
repairRecords.value = filtered;
total.value = kw ? filtered.length : res.total || filtered.length;
total.value = res.total || 0;
} else {
ElMessage.error(`获取抢修记录失败:${res?.msg || '未知错误'}`);
repairRecords.value = [];
@ -645,33 +586,15 @@ const getStatisticsData = async () => {
const res = await qiangxiuRecord({ projectId: 1 });
if (res && res.code === 200) {
// API返回的实际数据在data字段中
const data = res.data || {};
// 更新统计卡片数据 - 映射新的API返回字段
// 解析百分比数据并添加判断逻辑
const bxsPercent = parseFloat(data.bxsjszzzl) || 0;
const clscPercent = parseFloat(data.clscjszzzl) || 0;
const wclPercent = parseFloat(data.wcljszzzl) || 0;
// 判断并设置变化率样式类
const getChangeClass = (percent) => {
if (percent > 100) return 'up';
if (percent < 100 && percent !== 0) return 'down';
return 'warning'; // 等于100或0时显示为灰色无变化
};
// 更新统计卡片数据
statisticsData.value = {
totalCount: data.byzbxs || 0, // 本月报修总数
avgDuration: `${data.pjclsc || 0}分钟`, // 平均处理时长
pendingCount: data.dclbx || 0, // 待处理报修
completionRate: `${data.wcl || 0}%`, // 完成率
monthChange: `${bxsPercent > 0 ? '+' : ''}${bxsPercent}%`, // 报修数较上月变化
monthChangeClass: getChangeClass(bxsPercent), // 报修数变化率样式类
durationChange: `${clscPercent > 0 ? '+' : '-'}${Math.abs(clscPercent)}分钟`, // 处理时长较上月变化
durationChangeClass: getChangeClass(clscPercent), // 处理时长变化率样式类
rateChange: `${wclPercent > 0 ? '+' : ''}${wclPercent}%`, // 完成率较上月变化
rateChangeClass: getChangeClass(wclPercent) // 完成率变化率样式类
totalCount: res.totalCount || 0,
avgDuration: res.avgDuration || '0分钟',
pendingCount: res.pendingCount || 0,
completionRate: res.completionRate || '0%',
monthChange: res.monthChange || '+0%',
durationChange: res.durationChange || '-0分钟',
rateChange: res.rateChange || '+0%'
};
} else {
ElMessage.error(`获取统计数据失败:${res?.msg || '未知错误'}`);
@ -686,7 +609,7 @@ const getStatisticsData = async () => {
// 初始化数据
const initData = async () => {
await Promise.all([getTaskList(), getStatisticsData(), getUsersList()]);
await Promise.all([getTaskList(), getStatisticsData()]);
};
// 组件挂载时初始化数据
@ -726,27 +649,6 @@ const selectedExecutor = ref('');
const executors = ref([]);
const assignLoading = ref(false);
// 获取用户列表函数
const getUsersList = async () => {
try {
loadingUsers.value = true;
const res = await xunjianUserlist();
if (res && res.code === 200) {
// 过滤无效数据+统一userId为字符串
executors.value = (res.rows || [])
.filter((item) => item.userId && item.userName)
.map((item) => ({
userId: item.userId.toString(), // 使用userId字段
userName: item.userName || '未知用户'
}));
}
} catch (error) {
console.error('获取用户列表失败:', error);
} finally {
loadingUsers.value = false;
}
};
// 跟进弹窗相关
const followDialogVisible = ref(false);
const reportFinal = ref('');
@ -830,8 +732,16 @@ const handleAction = (record) => {
const handleAssign = async (record) => {
currentRecord.value = { ...record };
try {
// 重新获取用户列表以确保最新数据
await getUsersList();
const res = await xunjianUserlist();
if (res && res.code === 200) {
// 过滤无效数据+统一userId为字符串
executors.value = (res.rows || [])
.filter((item) => item.userId && item.userName)
.map((item) => ({
userId: item.userId.toString(), // 使用userId字段
userName: item.userName || '未知用户'
}));
}
} catch (error) {
console.error('获取人员列表失败:', error);
ElMessage.error('获取人员列表失败,请稍后重试');
@ -1033,38 +943,43 @@ const handleTaskTab = () => {
};
const handleRecordTab = () => {
router.push('/znxj/qiangxiujiilu');
router.push('/rili/qiangxiujiilu');
};
// 导航事件
const handleInspection1 = () => {
router.push('/znxj/rili');
router.push('/rili/rili');
};
const handleInspection2 = () => {
router.push('/znxj/xjgl/InspectionManagement');
router.push('/rili/InspectionManagement');
};
const handleInspection3 = () => {
router.push('/znxj/sygl/shiyanguanli');
router.push('/rili/shiyanguanli');
};
const handleInspection4 = () => {
router.push('/znxj/bxgl/baoxiuguanli');
router.push('/rili/baoxiuguanli');
};
const handleInspection5 = () => {
router.push('/znxj/qxgl/qiangxiuguanli');
router.push('/rili/qiangxiuguanli');
};
const handleInspection6 = () => {
router.push('/znxj/gdgl/gongdanliebiao');
router.push('/rili/gongdanliebiao');
};
const handleInspection7 = () => {
router.push('/znxj/ywzz/renyuanzhuangtai');
router.push('/rili/renyuanzhuangtai');
};
const handleInspectionManagement1 = () => {
router.push('/znxj/qxgl/qiangxiuguanli');
router.push('/rili/qiangxiuguanli');
};
const handleInspectionManagement2 = () => {
router.push('/znxj/qxgl/qiangxiujilu');
router.push('/rili/qiangxiujilu');
};
</script>
@ -1212,7 +1127,7 @@ const handleInspectionManagement2 = () => {
}
.stat-trend.warning {
color: #999;
color: #fa8c16;
}
.stat-icon {
@ -1300,53 +1215,39 @@ const handleInspectionManagement2 = () => {
}
.status-tag {
padding: 4px 10px;
border-radius: 6px;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.status-processing {
.status-tag.processing {
background-color: #fffbe6;
color: #fa8c16;
border: 1px solid #ffe58f;
color: #faad14;
border: 1px solid #fff1b8;
}
.status-completed {
background-color: #f6ffed;
.status-tag.completed {
background-color: #f0f9eb;
color: #52c41a;
border: 1px solid #b7eb8f;
}
.status-pending {
background-color: #e6f7ff;
color: #1677ff;
border: 1px solid #91d5ff;
border: 1px solid #e1f3d8;
}
.priority-tag {
padding: 4px 10px;
border-radius: 6px;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.priority-urgent {
background-color: #fff2f0;
.priority-tag.urgent {
background-color: #ffebe6;
color: #ff4d4f;
border: 1px solid #ffccc7;
}
.priority-normal {
.priority-tag.normal {
background-color: #e6f7ff;
color: #1677ff;
border: 1px solid #91d5ff;
}
.priority-fatal {
background-color: #fff2f0;
color: #ff4d4f;
border: 1px solid #ffccc7;
color: #1890ff;
border: 1px solid #b3d8ff;
}
.detail-btn {
@ -1357,10 +1258,6 @@ const handleInspectionManagement2 = () => {
color: #fa8c16;
}
.evaluate-btn {
color: #52c41a;
}
/* 分页区域样式 */
.pagination-section {
display: flex;

View File

@ -397,34 +397,34 @@ const assignTask = (person) => {
// 导航路由跳转
const handleInspection1 = () => {
router.push('/znxj/rili');
router.push('/rili/rili');
};
const handleInspection2 = () => {
router.push('/znxj/xjgl/InspectionManagement');
router.push('/rili/InspectionManagement');
};
const handleInspection3 = () => {
router.push('/znxj/sygl/shiyanguanli');
router.push('/rili/shiyanguanli');
};
const handleInspection4 = () => {
router.push('/znxj/bxgl/baoxiuguanli');
router.push('/rili/baoxiuguanli');
};
const handleInspection5 = () => {
router.push('/znxj/qxgl/qiangxiuguanli');
router.push('/rili/qiangxiuguanli');
};
const handleInspection6 = () => {
router.push('/znxj/gdgl/gongdanliebiao');
router.push('/rili/gongdanliebiao');
};
const handleInspection7 = () => {
router.push('/znxj/ywzz/renyuanzhuangtai');
router.push('/rili/renyuanzhuangtai');
};
const handleInspectionManagement1 = () => {
router.push('/znxj/ywzz/renyuanzhuangtai');
router.push('/rili/renyuanzhuangtai');
};
const handleInspectionManagement2 = () => {
router.push('/znxj/ywzz/cheliangzhuangtai');
router.push('/rili/cheliangzhuangtai');
};
const handleInspectionManagement3 = () => {
router.push('/znxj/ywzz/banzhuzhuangtai');
router.push('/rili/banzhuzhuangtai');
};
</script>
@ -443,6 +443,9 @@ const handleInspectionManagement3 = () => {
margin-bottom: 16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
/* */
/* 内容容器样式 */
.content-container {
display: flex;

View File

@ -24,26 +24,18 @@
<!-- 4. 筛选和操作区域与试验系统filter-and-actions结构一致 -->
<div class="filter-and-actions">
<div class="filters">
<el-input v-model="keyword" placeholder="关键字(计划名/编号)" clearable @keyup.enter="handleSearch" style="width: 220px" />
<el-select v-model="filterStatus" placeholder="试验状态" clearable>
<el-select v-model="filterStatus" placeholder="巡检状态" clearable>
<el-option label="全部状态" value="all"></el-option>
<el-option label="已批准" value="1"></el-option>
<el-option label="进行中" value="2"></el-option>
<el-option label="已完成" value="3"></el-option>
<el-option label="未通过" value="4"></el-option>
<el-option label="正常" value="normal"></el-option>
<el-option label="需关注" value="attention"></el-option>
<el-option label="有问题" value="problem"></el-option>
</el-select>
<el-select v-model="filterType" placeholder="实验对象类型" clearable>
<el-select v-model="filterType" placeholder="巡检类型" clearable>
<el-option label="全部类型" value="all"></el-option>
<el-option label="安全试验" value="1"></el-option>
<el-option label="网络实验" value="2"></el-option>
<el-option label="性能试验" value="3"></el-option>
<el-option label="其他试验" value="4"></el-option>
</el-select>
<el-select v-model="filterManager" placeholder="负责人" clearable>
<el-option label="全部负责人" value="all"></el-option>
<el-option v-for="user in userList" :key="user.value" :label="user.label" :value="user.value" />
<el-option label="数据库" value="database"></el-option>
<el-option label="服务器" value="server"></el-option>
<el-option label="网络设备" value="network"></el-option>
</el-select>
<el-date-picker
@ -57,8 +49,7 @@
></el-date-picker>
</div>
<div class="action-buttons">
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
<el-button icon="Refresh" class="search-btn" @click="resetFilters"> 重置 </el-button>
<el-button type="primary" icon="Search" class="search-btn"> 搜索 </el-button>
<el-button type="primary" icon="Plus" class="create-btn" @click="openRecordDialog"> <i class="fas fa-plus"></i> 新增实验记录 </el-button>
</div>
</div>
@ -590,10 +581,8 @@ const activeTab = ref('plan'); // 默认为"巡检计划"
const timeRange = ref('month'); // 统计时间范围:月/周/日
// 2. 筛选条件
const keyword = ref('');
const filterStatus = ref('all');
const filterType = ref('all');
const filterManager = ref('all');
const dateRange = ref([]);
// 分页参数
@ -611,14 +600,8 @@ const fetchExperimentData = async () => {
const queryParams = {
projectId: 1,
pageSize: pageSize.value,
pageNum: currentPage.value,
// 根据筛选条件构建查询参数
keyword: keyword.value || undefined,
testStatus: filterStatus.value === 'all' ? undefined : filterStatus.value,
testObject: filterType.value === 'all' ? undefined : filterType.value,
personCharge: filterManager.value === 'all' ? undefined : filterManager.value,
beginTime: dateRange.value.length > 0 ? dateRange.value[0] : undefined,
endTime: dateRange.value.length > 0 ? dateRange.value[1] : undefined
pageNum: currentPage.value
// 其他参数...
};
const response = await shiyanlist(queryParams);
@ -645,23 +628,6 @@ const fetchExperimentData = async () => {
}
};
// 搜索与重置(当前数据主要来自接口,保留前端筛选入口)
const handleSearch = () => {
// 可根据项目需要将 keyword/filter 传给接口;当前保持页内刷新
currentPage.value = 1;
fetchExperimentData();
};
const resetFilters = () => {
keyword.value = '';
filterStatus.value = 'all';
filterType.value = 'all';
filterManager.value = 'all';
dateRange.value = [];
currentPage.value = 1;
fetchExperimentData();
};
// 辅助方法
const getTestObjectText = (type) => {
const typeMap = {
@ -722,34 +688,43 @@ const recentRecords = ref([]);
// 9. 方法:切换顶部导航
const handleInspection1 = () => {
router.push('/znxj/rili');
router.push('/rili/rili');
};
const handleInspection2 = () => {
router.push('/znxj/xjgl/InspectionManagement');
router.push('/rili/InspectionManagement');
};
const handleInspection3 = () => {
router.push('/znxj/sygl/shiyanguanli');
router.push('/rili/shiyanguanli');
};
const handleInspection4 = () => {
router.push('/znxj/bxgl/baoxiuguanli');
router.push('/rili/baoxiuguanli');
};
const handleInspection5 = () => {
router.push('/znxj/qxgl/qiangxiuguanli');
router.push('/rili/qiangxiuguanli');
};
const handleInspection6 = () => {
router.push('/znxj/gdgl/gongdanliebiao');
router.push('/rili/gongdanliebiao');
};
const handleInspection7 = () => {
router.push('/znxj/ywzz/renyuanzhuangtai');
router.push('/rili/renyuanzhuangtai');
};
const handleInspectionManagement1 = () => {
router.push('/znxj/sygl/shiyanguanli');
router.push('/rili/shiyanguanli');
};
const handleInspectionManagement2 = () => {
router.push('/znxj/sygl/shiyanrenwu');
router.push('/rili/shiyanrenwu');
};
const handleInspectionManagement3 = () => {
router.push('/znxj/sygl/shiyanjilu');
router.push('/rili/shiyanjilu');
};
// 10. 方法:切换功能选项卡
const switchTab = (tab) => {
activeTab.value = tab;
// 实际应用中需根据选项卡加载对应数据
if (tab === 'record') {
// 加载统计数据
updateStatData(timeRange.value);
}
};
// 11. 方法:更新统计数据(根据时间范围)
@ -811,6 +786,12 @@ const getRecordStatusText = (status) => {
return statusMap[status] || '';
};
// 进度条颜色
const getProgressColor = (status) => {
const colorMap = { 'drafted': '#ccc', 'in-progress': '#3b82f6', 'completed': '#10b981', 'paused': '#9e9e9e' };
return colorMap[status] || '#ccc';
};
// 18. 新增实验记录弹窗相关
const showRecordDialog = ref(false);
const saveLoading = ref(false); // 保存加载状态
@ -1123,6 +1104,21 @@ const handleEditRecord = async (row) => {
loading.value = false;
}
};
// 添加新步骤
const addStep = () => {
formData.value.steps.push({ name: '', intendedPurpose: '', intendedTime: '' });
};
// 删除步骤
const deleteStep = (index) => {
// 确保至少保留一个步骤
if (formData.value.steps.length <= 1) {
ElMessage.warning('至少需要保留一个步骤');
return;
}
// 从数组中删除指定索引的步骤
formData.value.steps.splice(index, 1);
};
// 添加新设备
const addEquipment = () => {
@ -1218,6 +1214,19 @@ const formatDate = (dateString) => {
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
// 日期时间格式化函数
const formatDateTime = (dateString) => {
if (!dateString) return '';
const date = new Date(dateString);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
</script>
<style scoped>
@ -1228,7 +1237,41 @@ const formatDate = (dateString) => {
background-color: #f9fbfd;
min-height: 100vh;
}
/* 已注释的导航栏样式移除 */
.navigation-tabs {
display: flex;
margin-bottom: 20px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
padding: 2px;
}
.nav-tab {
padding: 12px 24px;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 4px;
font-size: 14px;
color: #606266;
border-right: 1px solid #f0f0f0;
flex: 1;
text-align: center;
}
.nav-tab:last-child {
border-right: none;
}
.nav-tab:hover {
color: #409eff;
background-color: #ecf5ff;
}
.nav-tab.active {
background-color: #409eff;
color: #fff;
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}
/* 3. 页面标题 */
.page-header {

View File

@ -23,21 +23,18 @@
<!-- 筛选和操作区域 -->
<div class="filter-and-actions">
<div class="filters">
<el-input v-model="keyword" placeholder="关键字(计划名/编号)" clearable @keyup.enter="handleSearch" style="width: 220px" />
<el-select v-model="status" placeholder="试验状态" clearable>
<el-select v-model="filterStatus" placeholder="巡检状态" clearable>
<el-option label="全部状态" value="all"></el-option>
<el-option label="待执行" value="1"></el-option>
<el-option label="执行中" value="2"></el-option>
<el-option label="已完成" value="3"></el-option>
<el-option label="失败" value="4"></el-option>
<el-option label="正常" value="normal"></el-option>
<el-option label="需关注" value="attention"></el-option>
<el-option label="有问题" value="problem"></el-option>
</el-select>
<el-select v-model="filterType" placeholder="实验对象类型" clearable>
<el-select v-model="filterType" placeholder="巡检类型" clearable>
<el-option label="全部类型" value="all"></el-option>
<el-option label="安全试验" value="1"></el-option>
<el-option label="网络实验" value="2"></el-option>
<el-option label="性能试验" value="3"></el-option>
<el-option label="其他试验" value="4"></el-option>
<el-option label="数据库" value="database"></el-option>
<el-option label="服务器" value="server"></el-option>
<el-option label="网络设备" value="network"></el-option>
</el-select>
<el-date-picker
@ -50,8 +47,7 @@
class="date-picker"
></el-date-picker>
<el-button icon="Search" type="primary" class="search-btn" @click="handleSearch"> 搜索 </el-button>
<el-button icon="Refresh" @click="resetFilters"> 重置 </el-button>
<el-button icon="Search" type="primary" class="search-btn"> 搜索 </el-button>
</div>
</div>
@ -136,17 +132,17 @@
<div class="test-records">
<!-- 动态生成试验记录卡片 -->
<div
v-for="(record, recordIndex) in filteredTestRecords"
v-for="(record, recordIndex) in testRecords"
:key="record.id"
class="test-record-card"
:class="{ 'passed': record.status === 'completed', 'failed': record.status === 'failed' }"
>
<div class="record-header">
<h3 class="record-title">{{ record.taskName || record.testPlan?.planName || '试验任务' }}</h3>
<h3 class="record-title">{{ record.taskName || '试验任务' }}</h3>
<p class="record-date">
开始时间
{{ formatDate(record.beginTime) }}
<span class="record-time">计划完成时间: {{ record.endTime ? formatDate(record.endTime) : '未知' }}</span>
<span class="record-time">计划完成时间: {{ record.planFinishTime ? formatDate(record.planFinishTime) : '未知' }}</span>
</p>
<span class="status-tag" :class="getStatusClass(record.status)">
{{ getStatusText(record.status) }}
@ -174,11 +170,11 @@
<!-- 试验结果 -->
<div class="test-result" :class="{ 'failure-analysis': record.status === 'failed' }">
<h4 class="result-title">
{{ record.status === '4' ? '失败原因分析' : '试验结果' }}
{{ record.status === '3' ? '失败原因分析' : '试验结果' }}
</h4>
<p class="result-content">
{{ record.status === '4' ? record.failReason || '未提供失败原因' : record.testFinal || '试验未完成,未提供详细结果' }}
{{ record.status === '3' ? record.failReason || '未提供失败原因' : record.testFinal || '试验未完成,未提供详细结果' }}
</p>
<p class="result-details" v-if="record.status !== 'failed'">
@ -187,7 +183,7 @@
</p>
<!-- 改进建议仅失败时显示 -->
<div class="improvement-suggestion" v-if="record.status === '4' && record.faileTips">
<div class="improvement-suggestion" v-if="record.status === 'failed' && record.faileTips">
<i class="fas fa-lightbulb"></i>
<p>建议: {{ record.faileTips }}</p>
</div>
@ -362,7 +358,7 @@
<div v-if="node.remark" class="step-remark">备注{{ node.remark }}</div>
</div>
<div class="step-status" :class="getStatusClass(node.status)">
{{ node.status === '2' ? '未完成' : node.status === '3' ? '失败' : '已完成' }}
{{ node.status === '2' ? '未完成' : '已完成' }}
</div>
</div>
</div>
@ -400,8 +396,7 @@ import { syrenwulist, syrenwujilu, syrenwuDetail } from '@/api/zhinengxunjian/sh
const activeTab = ref('record'); // 默认显示"试验记录"
// 2. 筛选条件
const keyword = ref('');
const status = ref('all');
const filterStatus = ref('all');
const filterType = ref('all');
const dateRange = ref([]);
@ -435,33 +430,18 @@ const currentPage = ref(1);
const pageSize = ref(20);
const totalRecords = ref(0);
// 7. 方法:获取试验记录数据根据提供的JSON数据结构优化参数
// 7. 方法:获取试验记录数据
const getTestRecords = async () => {
try {
// 构建与JSON数据结构匹配的查询参数
const queryParams = {
const response = await syrenwulist({
projectId: 1,
pageNum: currentPage.value,
pageSize: pageSize.value,
// 筛选条件
keyword: keyword.value || undefined,
status: status.value === 'all' ? undefined : status.value,
testObject: filterType.value === 'all' ? undefined : filterType.value,
beginTime: dateRange.value.length > 0 ? dateRange.value[0] : undefined,
endTime: dateRange.value.length > 0 ? dateRange.value[1] : undefined
};
const response = await syrenwulist(queryParams);
page: currentPage.value,
size: pageSize.value
});
console.log('syrenwulist API响应:', response);
if (response && response.code === 200 && response.rows) {
// 处理返回的数据确保ID是字符串避免大整数精度问题
testRecords.value = response.rows.map((item) => ({
...item,
id: String(item.id), // 强制转换为字符串
// 处理personInfo字段确保与页面显示匹配
personInfo: item.person || item.persons?.[0] || null
}));
testRecords.value = response.rows;
totalRecords.value = response.total;
}
} catch (error) {
@ -469,53 +449,6 @@ const getTestRecords = async () => {
}
};
// 前端过滤后的试验记录与JSON数据结构匹配
const filteredTestRecords = computed(() => {
let data = [...testRecords.value];
// 关键字过滤 - 匹配planName/planCode/负责人姓名
if (keyword.value && keyword.value.trim()) {
const kw = keyword.value.trim();
data = data.filter((rec) => {
return (
(rec.planName && rec.planName.includes(kw)) ||
(rec.planCode && rec.planCode.includes(kw)) ||
(rec.personInfo?.userName && rec.personInfo.userName.includes(kw)) ||
(rec.id && String(rec.id).includes(kw))
);
});
}
// 状态过滤 - 匹配返回数据中的status字段
if (status.value !== 'all') {
data = data.filter((rec) => rec.status === status.value);
}
// 类型过滤
if (filterType.value !== 'all') {
data = data.filter((rec) => rec.testObject === filterType.value);
}
return data;
});
// 搜索与重置
const handleSearch = () => {
// 重置为第一页并重新获取数据
currentPage.value = 1;
getTestRecords();
};
const resetFilters = () => {
keyword.value = '';
status.value = 'all';
filterType.value = 'all';
dateRange.value = [];
currentPage.value = 1;
// 重置后重新获取数据
getTestRecords();
};
// 8. 方法:获取统计数据
const getStatisticsData = async () => {
try {
@ -625,13 +558,14 @@ const getProgressColor = (status) => {
return colorMap[status] || '#e5e7eb';
};
// 15. 辅助方法:获取状态文本 - 根据返回数据更新状态映射
// 15. 辅助方法:获取状态文本
const getStatusText = (status) => {
const statusMap = {
'1': '待执行',
'2': '执行中',
'3': '已完成',
'4': '失败',
'4': '执行中',
'2': '已延期',
'5': '已完成',
'3': '失败',
'completed': '已完成',
'failed': '失败',
'paused': '已延期',
@ -660,13 +594,14 @@ const getTaskStatusText = (status) => {
return statusMap[status] || '未知状态';
};
// 17. 辅助方法:获取状态类名 - 根据返回数据更新状态类映射
// 17. 辅助方法:获取状态类名
const getStatusClass = (status) => {
const classMap = {
'1': 'tag-pending', // 待执行
'2': 'tag-executing', // 执行中
'3': 'tag-completed', // 已完成
'4': 'status-failed', // 失败
'4': 'tag-executing', // 执行中
'2': 'tag-delayed', // 已延期
'5': 'tag-completed', // 已完成
'3': 'status-failed', // 失败
'completed': 'tag-completed',
'failed': 'status-failed',
'paused': 'tag-delayed',
@ -694,37 +629,37 @@ const handleSizeChange = (size) => {
// 19. 导航方法
const handleInspection1 = () => {
router.push('/znxj/rili');
router.push('/rili/rili');
};
const handleInspection2 = () => {
router.push('/znxj/xjgl/InspectionManagement');
router.push('/rili/InspectionManagement');
};
const handleInspection3 = () => {
router.push('/znxj/sygl/shiyanguanli');
router.push('/rili/shiyanguanli');
};
const handleInspection4 = () => {
router.push('/znxj/bxgl/baoxiuguanli');
router.push('/rili/baoxiuguanli');
};
const handleInspection5 = () => {
router.push('/znxj/qxgl/qiangxiuguanli');
router.push('/rili/qiangxiuguanli');
};
const handleInspection6 = () => {
router.push('/znxj/gdgl/gongdanliebiao');
router.push('/rili/gongdanliebiao');
};
const handleInspection7 = () => {
router.push('/znxj/ywzz/renyuanzhuangtai');
router.push('/rili/renyuanzhuangtai');
};
const handleInspectionManagement1 = () => {
activeTab.value = 'plan';
router.push('/znxj/sygl/shiyanguanli');
router.push('/rili/shiyanguanli');
};
const handleInspectionManagement2 = () => {
activeTab.value = 'task';
router.push('/znxj/sygl/shiyanrenwu');
router.push('/rili/shiyanrenwu');
};
const handleInspectionManagement3 = () => {
activeTab.value = 'record';
router.push('/znxj/sygl/shiyanjilu');
router.push('/rili/shiyanjilu');
};
// 20. 详情弹窗相关
@ -780,7 +715,41 @@ onMounted(async () => {
min-height: 100vh;
}
/* 已注释的导航栏样式移除 */
.navigation-tabs {
display: flex;
margin-bottom: 20px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
padding: 2px;
}
.nav-tab {
padding: 12px 24px;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 4px;
font-size: 14px;
color: #606266;
border-right: 1px solid #f0f0f0;
flex: 1;
text-align: center;
}
.nav-tab:last-child {
border-right: none;
}
.nav-tab:hover {
color: #409eff;
background-color: #ecf5ff;
}
.nav-tab.active {
background-color: #409eff;
color: #fff;
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}
/* 3. 选项卡样式 */
.tabs-wrapper {
@ -895,12 +864,6 @@ onMounted(async () => {
border-color: #b7eb8f;
}
.tag-incomplete {
background-color: #f5f5f5;
color: #999;
border-color: #d9d9d9;
}
/* 保留原有的部分样式以确保兼容性 */
.status-in-progress {
background-color: #fffbe6;

View File

@ -24,19 +24,24 @@
<!-- 筛选栏 -->
<div class="filter-bar">
<div class="filter-container">
<div class="filter-item">
<el-input v-model="keyword" placeholder="关键字(任务名/测试对象/执行人)" clearable @keyup.enter="handleSearch" />
</div>
<div class="filter-item">
<el-select v-model="taskStatus" placeholder="任务状态">
<el-option label="待执行" value="1"></el-option>
<el-option label="执行中" value="4"></el-option>
<el-option label="已延期" value="2"></el-option>
<el-option label="已完成" value="5"></el-option>
<el-option label="失败" value="3"></el-option>
</el-select>
</div>
<div class="filter-item">
<el-select v-model="planType" placeholder="全部计划">
<el-option label="每日巡检计划" value="1"></el-option>
<!-- 对应接口testPlanId -->
<el-option label="每周巡检计划" value="2"></el-option>
<el-option label="每月巡检计划" value="3"></el-option>
</el-select>
</div>
<div class="filter-item">
<el-select v-model="executor" placeholder="执行人">
<el-option label="全部人员" value="all"></el-option>
@ -45,7 +50,6 @@
</div>
<div class="filter-actions">
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
<el-button icon="Refresh" class="create-btn" @click="resetFilters"> 重置 </el-button>
<el-button type="primary" icon="Plus" class="create-btn" @click="handleCreateTask"> 手动创建任务 </el-button>
</div>
</div>
@ -368,7 +372,7 @@
<div v-if="node.remark" class="step-remark">备注{{ node.remark }}</div>
</div>
<div class="step-status" :class="getStatusClass(node.status)">
{{ node.status === '2' ? '未执行' : node.status === '3' ? '失败' : '已完成' }}
{{ node.status === '2' ? '未完成' : '已完成' }}
</div>
</div>
</div>
@ -436,7 +440,7 @@ import router from '@/router';
import { syrenwulist, syrenwuDetail, addsyrenwu, updatesyrenwu } from '@/api/zhinengxunjian/shiyan/renwu';
import { shiyanlist } from '@/api/zhinengxunjian/shiyan';
import { xunjianUserlist } from '@/api/zhinengxunjian/xunjian/index';
import { addjiedian, updatejiedian } from '@/api/zhinengxunjian/jiedian/index';
import { addjiedian } from '@/api/zhinengxunjian/jiedian/index';
// 引入Element Plus组件提示/空状态/骨架屏/弹窗)
import { ElMessage, ElEmpty, ElSkeleton, ElForm, ElMessageBox, ElDialog } from 'element-plus';
@ -475,7 +479,6 @@ const loading = ref(false);
// 筛选条件(与接口参数对应)
const taskStatus = ref(''); // 任务状态1=待执行2=暂停已延期3=失败4=执行中5=已完成
const planType = ref(''); // 关联计划ID1=每日2=每周3=每月
const keyword = ref(''); // 关键词
/**
* 将节点数据按模块分组
@ -545,11 +548,10 @@ const getStatusClass = (status) => {
// 处理可能的数字输入
const statusStr = status?.toString() || '';
const statusClassMap = {
'1': 'status-pending', // 待执行
'2': 'status-unknown', // 未完成 - 灰色
'3': 'status-failed', // 失败 - 红色
'4': 'status-executing', // 执行中
'5': 'status-completed' // 已完成 - 绿色
'1': 'status-pending',
'2': 'status-delayed',
'3': 'status-executing',
'4': 'status-completed'
};
return statusClassMap[statusStr] || 'status-unknown';
};
@ -584,7 +586,7 @@ const getStepStatusText = (status) => {
const statusMap = {
'1': '待执行',
'2': '执行中',
'3': '失败',
'3': '已完成',
'4': '已延期'
};
return statusMap[statusStr] || '未知状态';
@ -698,14 +700,14 @@ const getExperimentPlanList = async () => {
const getTaskList = async () => {
try {
loading.value = true;
// 1. 构造接口请求参数(严格匹配返回的JSON数据结构)
// 1. 构造接口请求参数(严格匹配createDept结构)
const requestParams = {
pageNum: currentPage.value,
pageSize: pageSize.value,
projectId: 1, // 项目ID必需字段
status: taskStatus.value || undefined, // 任务状态(对应JSON中的status字段
testPlanId: planType.value || undefined, // 关联计划ID对应JSON中的testPlanId字段
person: executor.value === 'all' ? undefined : executor.value // 执行人ID对应JSON中的person字段
projectId: 1, // 项目ID必需字段,需从全局状态/路由获取真实值
status: taskStatus.value || undefined, // 任务状态(为空不传递
testPlanId: planType.value || undefined, // 关联计划ID筛选条件
person: executor.value === 'all' ? undefined : executor.value // 执行人ID筛选条件
};
// 2. 调用接口已引入的syrenwulist函数
@ -714,18 +716,8 @@ const getTaskList = async () => {
if (response.code === 200) {
// 3. 接口数据映射为页面展示格式
const mapped = (response.rows || []).map((item) => mapApiToView(item));
// 4. 前端关键词过滤
const kw = keyword.value.trim();
const filtered = kw
? mapped.filter((t) =>
[t.title, t.target, t.executor, t.relatedPlan, t.statusText]
.filter(Boolean)
.some((v) => String(v).toLowerCase().includes(kw.toLowerCase()))
)
: mapped;
tasks.value = filtered;
total.value = kw ? filtered.length : response.total || filtered.length; // 同步总条数
tasks.value = (response.rows || []).map((item) => mapApiToView(item));
total.value = response.total || 0; // 同步总条数
} else {
ElMessage.error('获取任务列表失败:' + (response.msg || '未知错误'));
tasks.value = [];
@ -757,9 +749,9 @@ const mapApiToView = (apiData) => {
result: '-'
},
'2': {
statusText: '未完成',
statusText: '已延期',
cardClass: 'card-delayed',
tagClass: 'status-unknown',
tagClass: 'tag-delayed',
actionText: '重新安排',
actionClass: 'reschedule-btn',
result: '-'
@ -767,7 +759,7 @@ const mapApiToView = (apiData) => {
'3': {
statusText: '失败',
cardClass: 'card-failed',
tagClass: 'status-failed',
tagClass: 'tag-failed',
actionText: '重新执行',
actionClass: 'reschedule-btn',
result: '失败',
@ -839,45 +831,16 @@ const mapApiToView = (apiData) => {
// 生成试验阶段信息
const getTestStage = () => {
try {
// 优先查找nodes数组中处于执行中或失败的节点来确定当前试验阶段
// 优先查找nodes数组中status为2的第一条数据
if (apiData && apiData.nodes && Array.isArray(apiData.nodes)) {
// 优先查找失败状态的节点根据需求优先显示status为3的数据
const failedNode = apiData.nodes.find((node) => {
if (!node || node.status === undefined) return false;
return node.status === '3' || node.status === 3;
});
// 如果有失败的节点根据code判断阶段
if (failedNode && failedNode.code !== undefined) {
const stepName = failedNode.name || '未命名步骤';
return `${failedNode.code}步(${stepName})`;
}
// 查找执行中状态的节点
const executingNode = apiData.nodes.find((node) => {
const firstStatusTwoNode = apiData.nodes.find((node) => {
// 确保node存在且有status属性
if (!node || node.status === undefined) return false;
// 处理status可能是字符串或数字的情况
return node.status === '2' || node.status === 2;
});
// 如果有执行中的节点根据code判断阶段
if (executingNode && executingNode.code !== undefined) {
const stepName = executingNode.name || '未命名步骤';
return `${executingNode.code}步(${stepName})`;
}
// 查找已完成的节点,确定最后完成的阶段
const completedNodes = apiData.nodes.filter((node) => {
if (!node || node.status === undefined) return false;
return node.status === '4' || node.status === 4;
});
if (completedNodes.length > 0) {
// 按code排序取最大的code
completedNodes.sort((a, b) => Number(b.code) - Number(a.code));
if (completedNodes[0].code !== undefined) {
const stepName = completedNodes[0].name || '未命名步骤';
return `${completedNodes[0].code}步(${stepName})`;
}
if (firstStatusTwoNode && firstStatusTwoNode.name) {
return firstStatusTwoNode.name;
}
}
// 如果没有找到符合条件的nodes数据检查是否有明确的试验阶段信息
@ -929,16 +892,6 @@ const handleSearch = () => {
getTaskList();
};
// 重置筛选条件
const resetFilters = () => {
taskStatus.value = '';
planType.value = '';
executor.value = 'all';
keyword.value = '';
currentPage.value = 1;
getTaskList();
};
/**
* 每页条数变化
* @param {number} val - 新的每页条数
@ -1061,34 +1014,9 @@ const handleAction = async (task) => {
return node.status === '2' || node.status === 2;
});
if (firstUnfinishedNode) {
// 使用updatejiedian接口更新节点状态构造完整的节点信息数组
const nodeUpdateParams = [
{
...firstUnfinishedNode,
status: '3',
updateTime: new Date().toISOString(),
// 确保包含所有必需字段
createDept: firstUnfinishedNode.createDept || 0,
createBy: firstUnfinishedNode.createBy || 0,
createTime: firstUnfinishedNode.createTime || new Date().toISOString(),
updateBy: firstUnfinishedNode.updateBy || 0,
params: firstUnfinishedNode.params || {
property1: 'string',
property2: 'string'
},
module: firstUnfinishedNode.module || 'string',
orderId: firstUnfinishedNode.orderId || 0,
code: firstUnfinishedNode.code || 0,
name: firstUnfinishedNode.name || 'string',
intendedPurpose: firstUnfinishedNode.intendedPurpose || 'string',
intendedTime: firstUnfinishedNode.intendedTime || new Date().toISOString(),
finishTime: firstUnfinishedNode.finishTime || '',
remark: firstUnfinishedNode.remark || ''
}
];
await updatejiedian(nodeUpdateParams);
// 更新本地数据以反映最新状态
firstUnfinishedNode.status = '3';
// 确保更新到updateParams中
updateParams.nodes = taskDetails.nodes;
}
}
} catch (innerError) {
@ -1116,45 +1044,19 @@ const handleAction = async (task) => {
case '3': // 失败 → 重试状态改为1
updateParams.status = '1';
// 清空失败相关字段,使用适合各字段数据类型的默认值
updateParams.failReason = null;
updateParams.failTime = null; // 时间类型字段使用null
updateParams.failPhase = null; // 整数类型字段使用0
updateParams.failReason = '';
updateParams.failTime = ''; // 时间类型字段使用null
updateParams.failPhase = ''; // 整数类型字段使用0
// 将失败的步骤状态改回2未完成
if (taskDetails.nodes && Array.isArray(taskDetails.nodes)) {
const failedNodes = taskDetails.nodes.filter((node) => {
return node.status === '3' || node.status === 3;
taskDetails.nodes.forEach((node) => {
if (node.status === '3' || node.status === 3) {
node.status = '2';
}
});
// 构造包含所有失败节点的完整信息数组
const nodeUpdateParams = failedNodes.map((failedNode) => ({
...failedNode,
status: '2',
updateTime: new Date().toISOString(),
// 确保包含所有必需字段
createDept: failedNode.createDept || 0,
createBy: failedNode.createBy || 0,
createTime: failedNode.createTime || new Date().toISOString(),
updateBy: failedNode.updateBy || 0,
params: failedNode.params || {
property1: 'string',
property2: 'string'
},
module: failedNode.module || 'string',
orderId: failedNode.orderId || 0,
code: failedNode.code || 0,
name: failedNode.name || 'string',
intendedPurpose: failedNode.intendedPurpose || 'string',
intendedTime: failedNode.intendedTime || new Date().toISOString(),
finishTime: failedNode.finishTime || '',
remark: failedNode.remark || ''
}));
// 一次性调用updatejiedian接口更新所有节点
await updatejiedian(nodeUpdateParams);
// 更新本地数据以反映最新状态
for (const failedNode of failedNodes) {
failedNode.status = '2';
}
// 确保更新到updateParams中
updateParams.nodes = taskDetails.nodes;
}
break;
default:
@ -1359,34 +1261,34 @@ const handleCancelCreateTask = () => {
// ============== 5. 导航栏跳转逻辑(保持原有) ==============
const handleInspectionManagement1 = () => {
router.push('/znxj/sygl/shiyanguanli');
router.push('/rili/shiyanguanli');
};
const handleInspectionManagement2 = () => {
router.push('/znxj/sygl/shiyanrenwu');
router.push('/rili/shiyanrenwu');
};
const handleInspectionManagement3 = () => {
router.push('/znxj/sygl/shiyanjilu');
router.push('/rili/shiyanjilu');
};
const handleInspection1 = () => {
router.push('/znxj/rili');
router.push('/rili/rili');
};
const handleInspection2 = () => {
router.push('/znxj/xjgl/InspectionManagement');
router.push('/rili/InspectionManagement');
};
const handleInspection3 = () => {
router.push('/znxj/sygl/shiyanguanli');
router.push('/rili/shiyanguanli');
};
const handleInspection4 = () => {
router.push('/znxj/bxgl/baoxiuguanli');
router.push('/rili/baoxiuguanli');
};
const handleInspection5 = () => {
router.push('/znxj/qxgl/qiangxiuguanli');
router.push('/rili/qiangxiuguanli');
};
const handleInspection6 = () => {
router.push('/znxj/gdgl/gongdanliebiao');
router.push('/rili/gongdanliebiao');
};
const handleInspection7 = () => {
router.push('/znxj/ywzz/renyuanzhuangtai');
router.push('/rili/renyuanzhuangtai');
};
// ============== 6. 页面初始化(加载任务列表和用户列表) ==============
@ -1600,12 +1502,6 @@ const getTaskStatusClass = (status) => {
border-color: #ffccc7;
}
.tag-incomplete {
background-color: #f5f5f5;
color: #999;
border-color: #d9d9d9;
}
.task-details {
margin-bottom: 16px;
}
@ -1886,12 +1782,8 @@ const getTaskStatusClass = (status) => {
color: #f56c6c;
}
.status-unknown {
color: #909399;
}
.status-failed {
color: #f56c6c;
color: #909399;
}
/* 响应式设计 */

View File

@ -145,7 +145,7 @@
</div> -->
<div>
<div class="flex justify-between text-sm mb-1">
<span class="text-gray-600">问题解决效率</span>
<span class="text-gray-600">解决效率</span>
<span class="font-medium text-gray-800">{{ timelinessRate }}%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
@ -394,7 +394,7 @@ const initPieChart = () => {
},
data: [
{ value: completionRate.value, name: '巡检完成率', itemStyle: { color: '#409eff' } },
{ value: timelinessRate.value, name: '问题解决效率', itemStyle: { color: '#67c23a' } }
{ value: timelinessRate.value, name: '解决效率', itemStyle: { color: '#67c23a' } }
]
}
]
@ -434,12 +434,12 @@ const fetchDashboardData = async () => {
// 根据时间范围确定type参数1是月2是周3是日
let type;
if (timeRange.value === 'month') {
type = 3;
type = 1;
} else if (timeRange.value === 'week') {
type = 2;
} else {
// day
type = 1;
type = 3;
}
// 构建查询参数
@ -603,34 +603,34 @@ onUnmounted(() => {
// 导航方法
const handleInspection1 = () => {
router.push('/znxj/rili');
router.push('/rili/rili');
};
const handleInspection2 = () => {
router.push('/znxj/xjgl/InspectionManagement');
router.push('/rili/InspectionManagement');
};
const handleInspection3 = () => {
router.push('/znxj/sygl/shiyanguanli');
router.push('/rili/shiyanguanli');
};
const handleInspection4 = () => {
router.push('/znxj/bxgl/baoxiuguanli');
router.push('/rili/baoxiuguanli');
};
const handleInspection5 = () => {
router.push('/znxj/qxgl/qiangxiuguanli');
router.push('/rili/qiangxiuguanli');
};
const handleInspection6 = () => {
router.push('/znxj/gdgl/gongdanliebiao');
router.push('/rili/gongdanliebiao');
};
const handleInspection7 = () => {
router.push('/znxj/ywzz/renyuanzhuangtai');
router.push('/rili/renyuanzhuangtai');
};
const handleInspectionManagement1 = () => {
router.push('/znxj/xjgl/InspectionManagement');
router.push('/rili/InspectionManagement');
};
const handleInspectionManagement2 = () => {
router.push('/znxj/xjgl/xunjianrenwu');
router.push('/rili/xunjianrenwu');
};
const handleInspectionManagement3 = () => {
router.push('/znxj/xjgl/xunjianjihua');
router.push('/rili/xunjianjihua');
};
</script>
@ -654,7 +654,46 @@ const handleInspectionManagement3 = () => {
}
/* 导航栏样式 */
/* 已移除未使用的导航样式(模板中为注释状态) */
.navigation-tabs {
display: flex;
margin-bottom: 20px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
padding: 2px;
}
.nav-tab {
padding: 12px 24px;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 4px;
font-size: 14px;
color: #606266;
border-right: 1px solid #f0f0f0;
flex: 1;
text-align: center;
}
.nav-tab:last-child {
border-right: none;
}
.nav-tab:hover {
color: #409eff;
background-color: #ecf5ff;
}
.nav-tab.active {
background-color: #409eff;
color: #fff;
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}
.nav-tab {
cursor: pointer;
user-select: none;
}
/* 选项卡样式 */
.tabs-wrapper {

View File

@ -23,25 +23,26 @@
<!-- 筛选栏 -->
<div class="filter-bar">
<div class="filter-container">
<div class="filter-item">
<el-input v-model="keyword" placeholder="关键字(任务名/对象/执行人)" clearable @keyup.enter="handleSearch" />
</div>
<div class="filter-item">
<el-select v-model="taskStatus" placeholder="任务状态">
<el-option label="待处理" value="1"></el-option>
<el-option label="处理中" value="3"></el-option>
<el-option label="已完成" value="4"></el-option>
<el-option label="已延期" value="2"></el-option>
<el-option label="待执行" value="pending"></el-option>
<el-option label="执行中" value="executing"></el-option>
<el-option label="已延期" value="delayed"></el-option>
<el-option label="已完成" value="completed"></el-option>
</el-select>
</div>
<div class="filter-item">
<el-select v-model="executor" placeholder="执行人" :disabled="loadingUsers">
<el-option v-for="user in usersList" :key="user.id" :label="user.name" :value="user.id" />
<el-select v-model="planType" placeholder="全部计划">
<el-option label="每日巡检计划" value="daily"></el-option>
<el-option label="每周巡检计划" value="weekly"></el-option>
<el-option label="每月巡检计划" value="monthly"></el-option>
</el-select>
</div>
<div class="filter-item">
<el-input v-model="executor" placeholder="执行人"></el-input>
</div>
<div class="filter-actions">
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
<el-button icon="Refresh" class="create-btn" @click="resetFilters"> 重置 </el-button>
<el-button type="primary" icon="Plus" class="create-btn" @click="handleCreateTask"> 手动创建任务 </el-button>
</div>
</div>
@ -386,7 +387,7 @@
<div v-if="node.remark" class="step-remark">备注{{ node.remark }}</div>
</div>
<div class="step-status" :class="getStatusClass(node.status)">
{{ node.status === '2' ? '未执行' : node.status === '3' ? '失败' : '已完成' }}
{{ node.status === '2' ? '未完成' : '已完成' }}
</div>
</div>
</div>
@ -428,17 +429,11 @@ import { xjrenwuDetail, xjrenwulist, addxjrenwu, updatexjrenwu } from '@/api/zhi
import { xunjianUserlist, xunjianlist } from '@/api/zhinengxunjian/xunjian/index';
import { addjiedian } from '@/api/zhinengxunjian/jiedian/index';
import { ElMessage, ElLoading, ElForm } from 'element-plus';
import { formatDate } from '@/utils/index';
// 筛选条件
const taskStatus = ref('');
const planType = ref('');
const executor = ref('');
const keyword = ref('');
// 执行人列表相关
const usersList = ref([]);
const loadingUsers = ref(false);
// 任务数据 - 初始为空数组通过API获取
const tasks = ref([]);
@ -467,9 +462,9 @@ const getStatusClass = (status) => {
const statusStr = status?.toString() || '';
const statusClassMap = {
'1': 'status-pending',
'2': 'status-unknown', // 未完成状态显示为灰色
'3': 'status-failed', // 失败状态显示为红色
'4': 'status-completed' // 已完成状态显示为绿色
'2': 'status-delayed',
'3': 'status-executing',
'4': 'status-completed'
};
return statusClassMap[statusStr] || 'status-unknown';
};
@ -548,17 +543,16 @@ const getTaskList = async () => {
const params = {
pageSize: pageSize.value,
pageNum: currentPage.value,
projectId: 1,
status: taskStatus.value || undefined,
planType: planType.value || undefined,
personId: executor.value || undefined,
keyword: keyword.value.trim() || undefined
personId: 1,
taskType: taskStatus.value || undefined, // 任务状态
planType: planType.value || undefined, // 计划类型
personName: executor.value || undefined // 执行人
};
const response = await xjrenwulist(params);
if (response.code === 200 && response.rows) {
const mapped = response.rows.map((item) => {
tasks.value = response.rows.map((item) => {
// 获取原始数据中的id
const taskId = item.id || '';
if (!taskId) {
@ -609,16 +603,13 @@ const getTaskList = async () => {
return task;
});
const kw = keyword.value.trim();
const filtered = kw
? mapped.filter((t) =>
[t.title, t.target, t.executor, t.relatedPlan, t.statusText]
.filter(Boolean)
.some((v) => String(v).toLowerCase().includes(kw.toLowerCase()))
)
: mapped;
tasks.value = filtered;
total.value = kw ? filtered.length : response.total || filtered.length;
total.value = response.total || tasks.value.length;
// 搜索后如果没有结果,显示提示信息
if (tasks.value.length === 0) {
ElMessage.info('未找到符合条件的任务');
}
}
} catch (error) {
console.error('获取巡检任务数据失败:', error);
@ -632,7 +623,6 @@ const getTaskList = async () => {
// 页面加载时获取数据
onMounted(() => {
getTaskList();
getUsersList();
});
// 分页相关
@ -819,7 +809,7 @@ const handleSaveTask = async () => {
createTime: new Date().toISOString(),
updateTime: new Date().toISOString(),
startTime: formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss'),
startTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
params: {
property1: 'string',
property2: 'string'
@ -884,13 +874,11 @@ const planList = ref([]);
// 获取负责人列表
const getUsersList = async () => {
loadingUsers.value = true;
try {
const response = await xunjianUserlist();
// 适配新接口格式检查code为200且rows为数组
const userRows = response.code === 200 && response.rows && Array.isArray(response.rows) ? response.rows : [];
// 更新userList变量用于创建任务弹窗
userList.value = userRows
.filter((item) => item && typeof item === 'object')
.map((item) => ({
@ -898,27 +886,12 @@ const getUsersList = async () => {
value: String(item.userId || '') // 使用userId作为唯一标识
}));
// 同时更新usersList变量用于筛选栏
usersList.value = userRows
.filter((item) => item && typeof item === 'object')
.map((item) => ({
id: String(item.userId || ''),
name: item.userName || '未知用户'
}));
// 空数据处理
if (userList.value.length === 0) {
userList.value = [{ label: '默认用户', value: 'default' }];
}
if (usersList.value.length === 0) {
usersList.value = [{ id: 'default', name: '默认用户' }];
}
} catch (error) {
console.error('获取负责人列表失败:', error);
userList.value = [{ label: '默认用户', value: 'default' }];
usersList.value = [{ id: 'default', name: '默认用户' }];
} finally {
loadingUsers.value = false;
}
};
@ -1019,35 +992,35 @@ const handleCloseDetailDialog = () => {
};
const handleInspectionManagement1 = () => {
router.push('/znxj/xjgl/InspectionManagement');
router.push('/rili/InspectionManagement');
};
const handleInspectionManagement2 = () => {
router.push('/znxj/xjgl/xunjianrenwu');
router.push('/rili/xunjianrenwu');
};
const handleInspectionManagement3 = () => {
router.push('/znxj/xjgl/xunjianjihua');
router.push('/rili/xunjianjihua');
};
const handleInspection1 = () => {
router.push('/znxj/rili');
router.push('/rili/rili');
};
const handleInspection2 = () => {
router.push('/znxj/xjgl/InspectionManagement');
router.push('/rili/InspectionManagement');
};
const handleInspection3 = () => {
router.push('/znxj/sygl/shiyanguanli');
router.push('/rili/shiyanguanli');
};
const handleInspection4 = () => {
router.push('/znxj/bxgl/baoxiuguanli');
router.push('/rili/baoxiuguanli');
};
const handleInspection5 = () => {
router.push('/znxj/qxgl/qiangxiuguanli');
router.push('/rili/qiangxiuguanli');
};
const handleInspection6 = () => {
router.push('/znxj/gdgl/gongdanliebiao');
router.push('/rili/gongdanliebiao');
};
const handleInspection7 = () => {
router.push('/znxj/ywzz/renyuanzhuangtai');
router.push('/rili/renyuanzhuangtai');
};
// 处理任务操作按钮点击事件
@ -1072,7 +1045,7 @@ const handleAction = async (task) => {
const updateData = {
...originalTask.rawData,
id: task.id,
startTime: formatDate(new Date().toString()),
startTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
taskType: '3', // 3表示执行中
status: 'executing',
taskProgress: 0
@ -1099,7 +1072,14 @@ const handleAction = async (task) => {
const originalTask = tasks.value[taskIndex];
const finishTime = formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss');
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
const finishTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
const updateData = {
...originalTask.rawData,
@ -1483,6 +1463,166 @@ const handleAction = async (task) => {
}
}
/* 任务详情弹窗样式 */
.task-detail-container {
max-height: 600px;
overflow-y: auto;
}
/* 步骤条展示样式 */
.step-item {
display: flex;
align-items: flex-start;
margin-bottom: 12px;
padding: 12px;
background-color: #fafafa;
border-radius: 6px;
transition: all 0.3s ease;
}
.step-item:hover {
background-color: #f5f7fa;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.step-number {
width: 28px;
height: 28px;
background-color: #409eff;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
font-size: 14px;
font-weight: bold;
flex-shrink: 0;
}
.step-info {
flex: 1;
}
.step-name {
font-weight: 500;
color: #1d2129;
margin-bottom: 4px;
font-size: 14px;
}
.step-purpose {
color: #606266;
margin-bottom: 4px;
font-size: 13px;
}
.step-time,
.step-finish-time,
.step-remark {
color: #909399;
font-size: 12px;
margin-bottom: 2px;
}
.step-status {
padding: 4px 12px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
flex-shrink: 0;
margin-top: 4px;
}
/* 步骤状态样式 */
.step-status.status-pending {
background-color: #e6f7ff;
color: #1677ff;
border: 1px solid #91d5ff;
}
.step-status.status-executing {
background-color: #fffbe6;
color: #fa8c16;
border: 1px solid #ffe58f;
}
.step-status.status-completed {
background-color: #f6ffed;
color: #52c41a;
border: 1px solid #b7eb8f;
}
.step-status.status-delayed {
background-color: #fff2f0;
color: #ff4d4f;
border: 1px solid #ffccc7;
}
.detail-card {
margin-bottom: 20px;
padding: 20px;
background-color: #fafafa;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.card-title {
margin: 0 0 16px 0;
padding-bottom: 12px;
border-bottom: 2px solid #409eff;
font-size: 16px;
font-weight: 600;
color: #303133;
}
.card-content {
display: flex;
flex-direction: column;
gap: 12px;
}
.info-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.info-item {
flex: 1;
min-width: 280px;
}
.info-item.full-width {
min-width: 100%;
}
.info-label {
display: inline-block;
width: 100px;
color: #606266;
font-weight: 500;
}
.info-value {
color: #303133;
word-break: break-word;
}
.fail-reason {
color: #f56c6c;
}
.no-info {
color: #909399;
font-style: italic;
padding: 10px 0;
}
.loading-details {
padding: 20px 0;
}
/* 状态颜色样式 */
.status-pending {
color: #e6a23c;

View File

@ -24,9 +24,6 @@
<!-- 筛选栏 -->
<div class="filter-bar">
<div class="filter-container">
<div class="filter-item">
<el-input v-model="keyword" placeholder="关键字(标题/描述/创建人)" clearable @keyup.enter="handleSearch" />
</div>
<div class="filter-item">
<el-select v-model="workOrderType" placeholder="工单类型" clearable>
<el-option label="全部类型" value="all"></el-option>
@ -39,8 +36,8 @@
<div class="filter-item">
<el-select v-model="workOrderStatus" placeholder="全部状态" clearable>
<el-option label="全部状态" value="all"></el-option>
<el-option label="待派单" value="pending"></el-option>
<el-option label="已派单" value="accepted"></el-option>
<el-option label="待派单" value="accepted"></el-option>
<el-option label="待处理" value="pending"></el-option>
<el-option label="执行中" value="executing"></el-option>
<el-option label="已完成" value="completed"></el-option>
</el-select>
@ -58,7 +55,6 @@
</div>
<div class="filter-actions">
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch">搜索</el-button>
<el-button icon="Refresh" class="create-btn" @click="resetFilters">重置</el-button>
</div>
</div>
</div>
@ -87,54 +83,26 @@
</div>
</div>
<!-- 进度条设计 -->
<div class="tracking-progress-container" v-if="currentTrackedWorkOrder">
<!-- 进度条整体容器 -->
<div class="progress-bar-wrapper">
<!-- 进度条背景 -->
<div class="progress-bar-background"></div>
<!-- 进度条填充 -->
<div class="progress-bar-fill" :style="{ width: getProgressPercentage() + '%' }"></div>
<!-- 进度条节点 -->
<div class="progress-bar-nodes">
<div
v-for="(step, index) in trackingSteps"
:key="step.id"
class="progress-node"
:class="getStepStatusClass(index)"
:style="{ left: getNodePosition(index) + '%' }"
>
<div class="node-circle">
<div class="node-icon">{{ step.code || index + 1 }}</div>
</div>
</div>
</div>
</div>
<!-- 步骤信息显示 -->
<div class="progress-steps-info">
<div v-for="(step, index) in trackingSteps" :key="step.id" class="step-info-card" :class="getStepStatusClass(index)">
<div class="step-header">
<div class="step-number">{{ step.code || index + 1 }}</div>
<div class="step-name">{{ step.name }}</div>
</div>
<div class="step-details">
<div class="step-person">
<i class="el-icon-user"></i>
{{ step.executor || (step.getOrderPersonVo && step.getOrderPersonVo.userName) || '待分配' }}
</div>
<template v-if="step.intendedTime">
<div class="step-time">
<i class="el-icon-time"></i>
预期时间{{ formatDateTime(step.intendedTime) }}
</div>
</template>
<div class="step-purpose">
<i class="el-icon-document"></i>
预期目的{{ step.intendedPurpose || '-' }}
</div>
</div>
</div>
<!-- 横向进度时间线 - 使用Element Plus的Steps组件 -->
<div class="progress-timeline-container">
<div class="progress-timeline">
<el-steps direction="horizontal" :active="activeStepIndex" align-center class="custom-steps" :progress-dot="false">
<template v-if="trackingSteps.length > 0">
<el-step v-for="(step, index) in trackingSteps" :key="step.id" :title="step.name" :status="getStatusByIndex(index)">
<template #description>
<div class="step-description">
<div class="step-person-time">
{{ step.executor || (step.getOrderPersonVo && step.getOrderPersonVo.userName) || '待分配' }}
</div>
<template v-if="step.intendedTime">
<div class="step-person-time">预期时间{{ formatDateTime(step.intendedTime) }}</div>
</template>
<div class="step-content">预期目的{{ step.intendedPurpose || '-' }}</div>
</div>
</template>
</el-step>
</template>
</el-steps>
</div>
</div>
@ -172,11 +140,6 @@
</template>
</el-table-column>
<el-table-column align="center" prop="creator" label="创建人" min-width="100"></el-table-column>
<el-table-column align="center" prop="progress" label="工单进度" min-width="100">
<template #default="scope">
<el-progress :percentage="parseFloat(scope.row.progress) || 0" show-text />
</template>
</el-table-column>
<el-table-column align="center" prop="createTime" label="创建时间" min-width="140"></el-table-column>
<el-table-column align="center" prop="deadline" label="截止时间" min-width="140"></el-table-column>
<el-table-column align="center" prop="status" label="状态" min-width="100">
@ -333,6 +296,13 @@
<el-form-item label="工单描述">
<el-input v-model="createForm.resultDescription" type="textarea" :rows="3" placeholder="请描述该工单完成后预期达成的成果" />
</el-form-item>
<el-form-item label="是否需要执行人" prop="needAssignee">
<el-radio-group v-model="createForm.needAssignee">
<el-radio label="true">指定执行人</el-radio>
<el-radio label="false">由系统分配</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
@ -475,7 +445,7 @@
<div v-if="node.remark" class="step-remark">备注{{ node.remark }}</div>
</div>
<div class="step-status" :class="getStatusClass(node.status)">
{{ node.status === '2' ? '未执行' : node.status === '3' ? '失败' : '已完成' }}
{{ node.status === '2' ? '未完成' : '已完成' }}
</div>
<!-- 连接线 -->
<div v-if="index < detailData.nodes.length - 1" class="step-connector" :class="{ 'connector-completed': node.status !== '2' }"></div>
@ -556,7 +526,6 @@ import ImageUpload from '@/components/ImageUpload/index.vue';
import { ElMessageBox, ElMessage } from 'element-plus';
// 筛选条件
const keyword = ref('');
const workOrderType = ref('all');
const workOrderStatus = ref('all');
const priority = ref('all');
@ -599,8 +568,7 @@ const fetchWorkOrderList = async () => {
getOrderTime: item.getOrderTime ? formatDate(item.getOrderTime) : '',
finishiOrderTime: item.finishiOrderTime ? formatDate(item.finishiOrderTime) : '',
position: item.position || '',
device: item.device || '',
progress: item.progress // 添加进度字段
device: item.device || ''
}));
// 更新总条数
@ -645,8 +613,7 @@ const updateCurrentTrackedOrder = () => {
intendedTime: node.intendedTime,
finishTime: node.finishTime,
intendedPurpose: node.intendedPurpose || '-',
remark: node.remark || '',
status: node.status || '' // 添加status字段
remark: node.remark || ''
}));
} else {
// 如果nodes数组为空创建一些默认的步骤数据
@ -654,12 +621,13 @@ const updateCurrentTrackedOrder = () => {
}
// 设置当前激活步骤索引
// 根据status字段判断status='1'表示完成status='2'表示未完成status='3'表示失败
// 如果有实际的完成时间,我们可以基于此设置激活步骤
// 否则默认设置为第一个步骤
activeStepIndex.value = 0;
// 检查是否有已完成的步骤,如果有,将激活步骤设置为最后一个已完成步骤的下一个
for (let i = trackingSteps.value.length - 1; i >= 0; i--) {
if (trackingSteps.value[i].status === '1') {
if (trackingSteps.value[i].finishTime) {
activeStepIndex.value = Math.min(i + 1, trackingSteps.value.length - 1);
break;
}
@ -829,10 +797,8 @@ const refreshTrackingSteps = async () => {
// 根据索引获取步骤状态
const getStatusByIndex = (index) => {
if (!currentTrackedWorkOrder.value) return 'wait';
if (index < activeStepIndex.value) {
return 'finish';
return 'success';
} else if (index === activeStepIndex.value) {
return 'process';
} else {
@ -840,101 +806,6 @@ const getStatusByIndex = (index) => {
}
};
// 试验记录页面步骤条状态判断 - 重点跟踪区域专用
const getStepStatusClass = (index) => {
if (!currentTrackedWorkOrder.value) return 'pending';
const step = trackingSteps.value[index];
if (step) {
// 优先根据status字段判断状态
const status = step.status?.toString() || '';
if (status === '1') {
return 'completed'; // 完成状态 - 绿色
} else if (status === '3') {
return 'delayed'; // 失败状态 - 红色
} else if (status === '2') {
return 'pending'; // 未完成状态 - 灰色
}
}
// fallback到基于索引的判断逻辑
if (index < activeStepIndex.value) {
return 'completed';
} else if (index === activeStepIndex.value) {
return 'active';
} else {
return 'pending';
}
};
// 获取进度线状态 - 重点跟踪区域专用
const getLineStatusClass = (index) => {
if (!currentTrackedWorkOrder.value) return 'pending';
// 进度线状态与前一个步骤状态保持一致
const prevStepIndex = index;
const prevStep = trackingSteps.value[prevStepIndex];
if (prevStep) {
const status = prevStep.status?.toString() || '';
if (status === '1') {
return 'completed'; // 前一步骤已完成 - 绿色
} else if (status === '3') {
return 'delayed'; // 前一步骤失败 - 红色
}
}
// fallback到基于索引的判断逻辑
if (index < activeStepIndex.value) {
return 'completed';
} else {
return 'pending';
}
};
// 计算进度百分比
const getProgressPercentage = () => {
if (!currentTrackedWorkOrder.value || trackingSteps.value.length === 0) return 0;
// 优先使用API返回的progress字段值
if (currentTrackedWorkOrder.value.progress) {
try {
// 将字符串类型的progress转换为数字
const progressValue = parseFloat(currentTrackedWorkOrder.value.progress);
// 确保进度值在0-100之间
return Math.min(Math.max(progressValue, 0), 100);
} catch (error) {
console.warn('解析progress字段失败使用默认计算逻辑:', error);
// 解析失败时使用原有逻辑
}
}
// 计算已完成步骤数
const completedSteps = trackingSteps.value.filter((step) => step.status === '1').length;
// 如果没有已完成步骤,但有活跃步骤,则使用活跃步骤的位置
if (completedSteps === 0 && activeStepIndex.value >= 0) {
return (activeStepIndex.value / trackingSteps.value.length) * 100;
}
// 计算进度百分比
const percentage = (completedSteps / trackingSteps.value.length) * 100;
// 确保最大为100%
return Math.min(percentage, 100);
};
// 计算节点位置百分比
const getNodePosition = (index) => {
if (!currentTrackedWorkOrder.value || trackingSteps.value.length <= 1) return 0;
// 等距分布节点
const position = (index / (trackingSteps.value.length - 1)) * 100;
return position;
};
// 将状态码转换为可读的状态文本
const getStatusText = (statusCode) => {
const statusMap = {
@ -966,18 +837,6 @@ const pagedTableData = computed(() => {
// 筛选逻辑
let filteredData = [...rawTableData.value];
if (keyword.value && keyword.value.trim()) {
const kw = keyword.value.trim();
filteredData = filteredData.filter((item) => {
return (
(item.title && item.title.includes(kw)) ||
(item.description && item.description.includes(kw)) ||
(item.creator && item.creator.includes(kw)) ||
(item.orderNo && item.orderNo.includes(kw))
);
});
}
if (workOrderType.value !== 'all') {
// 转换筛选条件为显示文本进行匹配
let typeText = '';
@ -1003,10 +862,10 @@ const pagedTableData = computed(() => {
let statusText = '';
switch (workOrderStatus.value) {
case 'accepted':
statusText = '已单';
statusText = '已单';
break;
case 'pending':
statusText = '待派单';
statusText = '待处理';
break;
case 'executing':
statusText = '执行中';
@ -1090,10 +949,10 @@ const getStatusClass = (status) => {
// 处理可能的数字输入
const statusStr = status?.toString() || '';
const statusClassMap = {
'1': 'status-pending', // 待执行 - 蓝色
'2': 'status-unknown', // 未执行 - 灰色
'3': 'status-failed', // 失败 - 红色
'4': 'status-completed' // 已完成 - 绿色
'1': 'status-pending',
'2': 'status-delayed',
'3': 'status-executing',
'4': 'status-completed'
};
return statusClassMap[statusStr] || 'status-unknown';
};
@ -1131,16 +990,6 @@ const handleSearch = () => {
currentPage.value = 1; // 重置到第一页
};
// 重置筛选
const resetFilters = () => {
keyword.value = '';
workOrderType.value = 'all';
workOrderStatus.value = 'all';
priority.value = 'all';
createDate.value = '';
currentPage.value = 1;
};
// 分页事件
const handleSizeChange = (val) => {
pageSize.value = val;
@ -1433,25 +1282,6 @@ const handleEdit = async (row) => {
createForm.resultDescription = workOrderDetail.results || '';
createForm.needAssignee = !!workOrderDetail.executor;
// 根据工单状态设置进度
// 1: 待派单, 2: 已派单, 3: 执行中, 4: 已完成, 5: 已拒绝
switch (workOrderDetail.status) {
case '1':
createForm.progress = 0;
break;
case '2':
createForm.progress = 25;
break;
case '3':
createForm.progress = 50;
break;
case '4':
createForm.progress = 100;
break;
default:
createForm.progress = 0;
}
// 填充步骤数据从nodes数组中提取并按code排序
if (workOrderDetail.nodes && Array.isArray(workOrderDetail.nodes)) {
// 复制nodes数组并按code升序排序
@ -1513,8 +1343,7 @@ const createForm = reactive({
file: '',
fileList: [],
resultDescription: '',
needAssignee: 'false',
progress: 0
needAssignee: 'false'
});
const createFormRules = {
@ -1644,8 +1473,7 @@ const submitCreate = async () => {
createBy: '',
handlerDept: '',
handler: '',
handlerName: '',
progress: createForm.progress || 0
handlerName: ''
};
// 编辑操作调用updategongdan接口
@ -1665,8 +1493,6 @@ const submitCreate = async () => {
createForm[key] = [{ name: '', intendedPurpose: '', intendedTime: '' }];
} else if (key === 'fileList') {
createForm[key] = [];
} else if (key === 'progress') {
createForm[key] = 0;
} else {
createForm[key] = '';
}
@ -1697,8 +1523,6 @@ const cancelCreate = () => {
createForm[key] = [{ name: '', intendedPurpose: '', intendedTime: '' }];
} else if (key === 'fileList') {
createForm[key] = [];
} else if (key === 'progress') {
createForm[key] = 0;
} else {
createForm[key] = '';
}
@ -1709,35 +1533,35 @@ const cancelCreate = () => {
// 导航路由跳转
const handleInspection1 = () => {
router.push('/znxj/rili');
router.push('/rili/rili');
};
const handleInspection2 = () => {
router.push('/znxj/xjgl/InspectionManagement');
router.push('/rili/InspectionManagement');
};
const handleInspection3 = () => {
router.push('/znxj/sygl/shiyanguanli');
router.push('/rili/shiyanguanli');
};
const handleInspection4 = () => {
router.push('/znxj/bxgl/baoxiuguanli');
router.push('/rili/baoxiuguanli');
};
const handleInspection5 = () => {
router.push('/znxj/qxgl/qiangxiuguanli');
router.push('/rili/qiangxiuguanli');
};
const handleInspection6 = () => {
router.push('/znxj/gdgl/gongdanliebiao');
router.push('/rili/gongdanliebiao');
};
const handleInspection7 = () => {
router.push('/znxj/ywzz/renyuanzhuangtai');
router.push('/rili/renyuanzhuangtai');
};
const handleInspectionManagement1 = () => {
router.push('/znxj/gdgl/gongdanliebiao');
router.push('/rili/gongdanliebiao');
};
const handleInspectionManagement2 = () => {
router.push('/znxj/gdgl/paidanjilu');
router.push('/rili/paidanjilu');
};
const handleInspectionManagement3 = () => {
router.push('/znxj/gdgl/zhixingjilu');
router.push('/rili/zhixingjilu');
};
// 关闭详情弹窗
@ -1914,6 +1738,10 @@ const handleCloseDetailDialog = () => {
transition: all 0.3s ease;
}
.step-connector.connector-completed {
background: linear-gradient(to bottom, #52c41a, #73d13d);
}
/* 动画效果 */
@keyframes fadeInUp {
from {
@ -2218,7 +2046,46 @@ const handleCloseDetailDialog = () => {
}
/* 导航栏样式 */
/* 导航栏相关样式移除(对应模板已注释) */
.navigation-tabs {
display: flex;
margin-bottom: 20px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
padding: 2px;
}
.nav-tab {
padding: 12px 24px;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 4px;
font-size: 14px;
color: #606266;
border-right: 1px solid #f0f0f0;
flex: 1;
text-align: center;
}
.nav-tab:last-child {
border-right: none;
}
.nav-tab:hover {
color: #409eff;
background-color: #ecf5ff;
}
.nav-tab.active {
background-color: #409eff;
color: #fff;
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}
.nav-tab {
cursor: pointer;
user-select: none;
}
/* 弹窗样式 */
.create-dialog {
@ -2699,7 +2566,17 @@ const handleCloseDetailDialog = () => {
}
/* 动画效果 */
/* 重复的 pulse 动画移除(下方已存在统一定义) */
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(22, 93, 255, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(22, 93, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(22, 93, 255, 0);
}
}
.custom-steps {
padding: 20px 10px;
@ -3100,7 +2977,17 @@ const handleCloseDetailDialog = () => {
position: relative;
overflow: hidden;
}
/* 去重:自定义步骤条顶部装饰在下方统一块中定义 */
.custom-steps::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #165dff, #409eff, #69c0ff);
z-index: 0;
border-radius: 4px 4px 0 0;
}
/* 重点跟踪区域样式 */
.tracking-section {
@ -3318,7 +3205,17 @@ const handleCloseDetailDialog = () => {
}
/* 顶部装饰条 */
/* 去重:自定义步骤条顶部装饰重复定义移除 */
.custom-steps::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, #165dff, #409eff, #69c0ff);
border-radius: 6px 6px 0 0;
box-shadow: 0 2px 12px rgba(22, 93, 255, 0.2);
}
/* 背景装饰 */
.custom-steps::after {
@ -3334,10 +3231,30 @@ const handleCloseDetailDialog = () => {
}
/* 左侧装饰 */
/* 去重:重复 before 装饰定义移除 */
.custom-steps::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, #165dff, #409eff, #69c0ff);
border-radius: 6px 6px 0 0;
box-shadow: 0 2px 12px rgba(22, 93, 255, 0.2);
}
/* 右侧装饰 */
/* 去重:重复 before 装饰定义移除 */
.custom-steps::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, #165dff, #409eff, #69c0ff);
border-radius: 6px 6px 0 0;
box-shadow: 0 2px 12px rgba(22, 93, 255, 0.2);
}
/* 左侧装饰球 */
.custom-steps::before {
@ -3379,299 +3296,13 @@ const handleCloseDetailDialog = () => {
position: relative;
}
/* 重点跟踪区域进度条样式 */
.tracking-progress-container {
padding: 20px;
background-color: #fff;
}
/* 进度条包装器 */
.progress-bar-wrapper {
position: relative;
height: 40px;
margin-bottom: 30px;
display: flex;
align-items: center;
}
/* 进度条背景 */
.progress-bar-background {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 6px;
background-color: #e5e7eb;
border-radius: 3px;
transform: translateY(-50%);
}
/* 进度条填充 */
.progress-bar-fill {
position: absolute;
top: 50%;
left: 0;
height: 6px;
background: linear-gradient(90deg, #00b42a, #95de64);
border-radius: 3px;
transition: width 0.6s ease;
transform: translateY(-50%);
}
/* 进度条节点容器 */
.progress-bar-nodes {
position: relative;
width: 100%;
height: 100%;
}
/* 进度条节点 */
.progress-node {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
/* 节点圆圈 */
.node-circle {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #fff;
border: 2px solid #e5e7eb;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
z-index: 2;
}
/* 节点图标/数字 */
.node-icon {
font-size: 14px;
font-weight: 600;
color: #6b7280;
}
/* 步骤信息卡片容器 */
.progress-steps-info {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
/* 单个步骤信息卡片 */
.step-info-card {
flex: 1;
min-width: 160px;
max-width: 250px;
padding: 12px;
border-radius: 6px;
border: 1px solid #f0f0f0;
background-color: #fff;
transition: all 0.3s ease;
}
/* 步骤卡片头部 */
.step-header {
display: flex;
align-items: center;
margin-bottom: 8px;
}
/* 步骤数字 */
.step-info-card .step-number {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #e5e7eb;
color: #6b7280;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
margin-right: 6px;
}
/* 步骤名称 */
.step-name {
font-size: 16px;
font-weight: 600;
color: #1f2937;
}
/* 步骤详情 */
.step-details {
display: flex;
flex-direction: column;
gap: 8px;
font-size: 14px;
}
.step-details > div {
display: flex;
align-items: center;
color: #6b7280;
}
.step-details i {
margin-right: 6px;
font-size: 14px;
}
/* 已完成状态样式 - 绿色 */
.step-info-card.completed {
border-color: #00b42a;
background-color: #f6ffed;
}
.step-info-card.completed .step-number {
background-color: #00b42a;
color: white;
}
.progress-node.completed .node-circle {
border-color: #00b42a;
background-color: #fff;
}
.progress-node.completed .node-icon {
background-color: #00b42a;
color: white;
border-radius: 50%;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
}
/* 进行中状态样式 */
.step-info-card.active {
border-color: #165dff;
background-color: #f0f7ff;
box-shadow: 0 4px 12px rgba(22, 93, 255, 0.1);
}
.step-info-card.active .step-number {
background-color: #165dff;
color: white;
}
.progress-node.active .node-circle {
border-color: #165dff;
background-color: #fff;
animation: pulse 2s infinite;
}
.progress-node.active .node-icon {
background-color: #165dff;
color: white;
border-radius: 50%;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
}
/* 待处理状态样式 */
.step-info-card.pending {
border-color: #e5e7eb;
background-color: #fff;
}
/* 失败/逾期状态样式 */
.step-info-card.delayed {
border-color: #ff4d4f;
background-color: #fff2f0;
}
.step-info-card.delayed .step-number {
background-color: #ff4d4f;
color: white;
}
.progress-node.delayed .node-circle {
border-color: #ff4d4f;
background-color: #fff;
}
.progress-node.delayed .node-icon {
background-color: #ff4d4f;
color: white;
border-radius: 50%;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
}
/* 脉冲动画 */
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(22, 93, 255, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(22, 93, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(22, 93, 255, 0);
}
}
.tracking-progress-timeline .progress-step.completed .step-number {
background-color: #00b42a;
color: white;
}
.tracking-progress-timeline .progress-line.completed {
background-color: #00b42a;
}
.tracking-progress-timeline .progress-step.delayed .step-number {
background-color: #dc2626;
color: white;
}
.tracking-progress-timeline .progress-line.delayed {
background-color: #dc2626;
}
.tracking-progress-timeline .step-name {
font-size: 14px;
font-weight: 500;
color: #1f2329;
margin-bottom: 8px;
text-align: center;
}
.tracking-progress-timeline .step-info {
font-size: 12px;
color: #6b7280;
text-align: center;
}
.tracking-progress-timeline .step-person-time {
margin-bottom: 4px;
}
.tracking-progress-timeline .step-purpose {
margin-top: 4px;
line-height: 1.4;
}
.custom-step:hover {
transform: translateY(-8px);
filter: brightness(1.03);
}
/* 步骤连接线 - 默认(进行中) */
.custom-step:not(:last-child):not(.is-wait)::after {
/* 步骤连接线 */
.custom-step:not(:last-child)::after {
content: '';
position: absolute;
top: 32px;
@ -3683,12 +3314,6 @@ const handleCloseDetailDialog = () => {
box-shadow: 0 2px 8px rgba(22, 93, 255, 0.3);
}
/* 已完成步骤连接线 */
.custom-step.completed:not(:last-child)::after {
background: linear-gradient(90deg, #00b42a 0%, #95de64 100%);
box-shadow: 0 2px 8px rgba(0, 180, 42, 0.3);
}
/* 待处理步骤连接线 */
.custom-step.is-wait:not(:last-child)::after {
background: linear-gradient(90deg, #dcdfe6 0%, #e4e7ed 100%);