taoge_xiaodi/maintenance_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(物料管理): 新增采购计划、出入库管理及相关组件

Browse Source 
添加物料管理模块，包括采购计划、出入库管理功能及相关组件
新增审批流程、系统信息、数据分析等子组件
添加相关图片资源及样式调整
This commit is contained in:
tcy
2025-09-20 20:38:57 +08:00
parent 0521eb62ee
commit f84503b620
14 changed files with 2126 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

234
src/views/materialManagement/components/DataAnalysis.vue Normal file
View File

@ -0,0 +1,234 @@
<template>
<div class="dashboard-container">
<!-- 第一个图表：本月出入库统计 -->
<div class="chart-item">
<div class="title">
本月出入库统计
</div>
<div ref="lineChartRef" class="chart-container"></div>
</div>
<!-- 第二个图表：出入库类型分布 -->
<div class="chart-item">
<div class="title">
出入库类型分布
</div>
<div ref="barChartRef" class="chart-container"></div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';
// 图表容器引用
const lineChartRef = ref(null);
const barChartRef = ref(null);
// 图表实例
let lineChart = null;
let barChart = null;
onMounted(() => {
// 初始化折线图
initLineChart();
// 初始化柱状图
initBarChart();
// 监听窗口大小变化，自适应图表
window.addEventListener('resize', handleResize);
});
onUnmounted(() => {
// 销毁图表实例
if (lineChart) {
lineChart.dispose();
}
if (barChart) {
barChart.dispose();
}
// 移除事件监听
window.removeEventListener('resize', handleResize);
});
// 初始化折线图
const initLineChart = () => {
if (lineChartRef.value) {
lineChart = echarts.init(lineChartRef.value);
const option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['入库数量', '出库数量'],
icon: 'circle',
itemWidth: 10,
itemHeight: 10,
top: 0
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
},
yAxis: {
type: 'value'
},
series: [
{
name: '入库数量',
type: 'line',
data: [5, 40, 20, 75, 60, 80, 40, 55, 30, 65, 5, 80],
symbol: 'none',
smooth: true,
lineStyle: {
color: 'rgba(22, 93, 255, 1)'
},
itemStyle: {
color: 'rgba(22, 93, 255, 1)'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(22, 93, 255, 0.2)' },
{ offset: 1, color: 'rgba(22, 93, 255, 0)' }
])
}
},
{
name: '出库数量',
type: 'line',
data: [30, 40, 30, 30, 30, 15, 55, 50, 40, 60, 25, 90],
symbol: 'none',
smooth: true,
lineStyle: {
color: 'rgba(255, 153, 0, 1)'
},
itemStyle: {
color: 'rgba(255, 153, 0, 1)'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(59, 179, 70, 0.2)' },
{ offset: 1, color: 'rgba(59, 179, 70, 0)' }
])
}
}
]
};
lineChart.setOption(option);
}
};
// 初始化柱状图
const initBarChart = () => {
if (barChartRef.value) {
barChart = echarts.init(barChartRef.value);
const option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['入库数量', '出库数量'],
icon: 'circle',
itemWidth: 10,
itemHeight: 10,
top: 0
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['电器部件', '机械部件', '电子元件', '控制模块', '结构部件', '其他'],
axisLabel: {
interval: 0, // 强制显示所有标签
rotate: 30, // 标签旋转30度
margin: 15, // 增加与轴线的距离
align: 'right', // 文字右对齐
verticalAlign: 'top' // 垂直方向顶部对齐
}
},
yAxis: {
type: 'value'
},
series: [
{
name: '入库数量',
type: 'bar',
data: [650, 480, 510, 280, 650, 220],
itemStyle: {
color: 'rgba(22, 93, 255, 1)' // 入库数量颜色
},
barWidth: '45%',
barGap: '0' // 柱子之间的间距
},
{
name: '出库数量',
type: 'bar',
data: [850, 400, 770, 590, 540, 310],
itemStyle: {
color: 'rgba(15, 198, 194, 1)' // 出库数量颜色
},
barWidth: '45%',
barGap: '0' // 柱子之间的间距
}
]
};
barChart.setOption(option);
}
};
// 处理窗口大小变化，让图表自适应
const handleResize = () => {
if (lineChart) {
lineChart.resize();
}
if (barChart) {
barChart.resize();
}
};
</script>
<style scoped>
.dashboard-container {
padding: 20px;
}
.chart-item {
background-color: #fff;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.title {
color: rgba(29, 33, 41, 1);
font-weight: bold;
font-size: 16px;
margin-bottom: 16px;
}
.chart-container {
width: 100%;
height: 300px;
}
</style>

146
src/views/materialManagement/components/DetailsProcess.vue Normal file
View File

@ -0,0 +1,146 @@
<template>
<div class="approval-process-container">
<div class="approval-process-card">
<h2>审批流程</h2>
<!-- 时间线组件：展示审批步骤 -->
<el-timeline class="custom-timeline">
<!-- 步骤1：创建采购单 -->
<el-timeline-item timestamp="11月1日 10:18" placement="top" :icon="renderCustomIcon('/assets/yes.png')"
color="green" type="danger" class="timeline-item">
<h3 style="color: rgba(24, 109, 245, 1);font-weight: bold;">创建采购单</h3>
<p>申请人张三：提交采购单</p>
<p>计划：Q2风电轴承采购计划</p>
<p>附件：<a href="#" class="attachment-link">一个图片.jpg</a></p>
</el-timeline-item>
<!-- 步骤2：审批未通过 -->
<el-timeline-item timestamp="11月1日 10:18" placement="top" :icon="renderCustomIcon('/assets/no.png')"
color="red" class="timeline-item">
<h3 style="color: rgba(24, 109, 245, 1);font-weight: bold;">审批未通过</h3>
<p>部门经理李四：审批不通过</p>
<p>计划：Q2风电轴承采购计划</p>
<p>不通过原因：</p>
<ul class="reason-list">
<li>1. 出货时间过长</li>
<li>2. 单价高于市场价</li>
<li>3. 损耗重新评估</li>
<li>4. 付款方式更改</li>
<li>5. 发票开具方式更改</li>
</ul>
</el-timeline-item>
<!-- 步骤3：未进行（财务主管） -->
<el-timeline-item timestamp="" placement="top" :icon="renderCustomIcon('/assets/re.png')" color="gray"
class="timeline-item">
<h3>未进行</h3>
<p>财务主管王五：</p>
<p>计划：Q2风电轴承采购计划</p>
<p>备注：——</p>
</el-timeline-item>
<!-- 步骤4：未进行（总经理） -->
<el-timeline-item timestamp="" placement="top" :icon="renderCustomIcon('/assets/re.png')" color="gray"
class="timeline-item">
<h3>未进行</h3>
<p>总经理赵六：</p>
<p>计划：Q2风电轴承采购计划</p>
<p>备注：——</p>
</el-timeline-item>
</el-timeline>
</div>
</div>
</template>
<script setup>
import { Check, Close, Clock } from '@element-plus/icons-vue'; // 引入Element Plus图标
const renderCustomIcon = (iconSrc) => {
return h('img', { src: iconSrc, class: 'custom-icon' });
};
</script>
<style scoped>
.approval-process-container {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: flex-start;
/* padding: 40px 20px; */
}
.approval-process-card {
padding: 30px;
width: 100%;
max-width: 800px;
transition: transform 0.3s ease;
}
.approval-process-card:hover {
transform: translateY(-5px);
}
h2 {
margin-bottom: 30px;
font-size: 24px;
color: #333;
text-align: center;
position: relative;
}
h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background-color: #409eff;
}
.custom-timeline {
margin-top: 20px;
}
.timeline-item {
margin-bottom: 25px;
transition: all 0.3s ease;
}
.timeline-item:hover {
transform: translateX(5px);
}
.el-timeline-item__content {
padding-top: 15px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 8px;
padding: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
ul.reason-list {
margin: 0;
padding-left: 20px;
color: red;
list-style: none;
}
li {
margin: 8px 0;
line-height: 1.6;
}
.attachment-link {
color: #409eff;
text-decoration: none;
transition: all 0.3s ease;
display: inline-block;
}
.attachment-link:hover {
text-decoration: underline;
transform: translateY(-2px);
}
</style>

142
src/views/materialManagement/components/SystemInfo.vue Normal file
View File

@ -0,0 +1,142 @@
<template>
<div class="bill-list">
<!-- 循环渲染单据列表 -->
<div v-for="(bill, index) in billList" :key="index" class="bill-item">
<!-- 左侧图标 + 单据类型 + 编号 -->
<div class="left">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40"
height="40" viewBox="0 0 40 40" fill="none">
<circle cx="20" cy="20" r="20" fill="#186DF5"></circle>
<path fill="rgba(255, 255, 255, 1)"
d="M15.1666 18.3333L15.1666 22.5L14.1666 22.5L14.1666 21.5L25.8333 21.5L25.8333 22.5L24.8333 22.5L24.8333 18.3333L25.8333 18.3333L24.8333 18.3333C24.8333 15.664 22.6693 13.5 20 13.5L20 13.5C17.3306 13.5 15.1666 15.664 15.1666 18.3333L15.1666 18.3333ZM13.1666 18.3333L14.1666 18.3333L13.1666 18.3333C13.1666 14.5594 16.226 11.5 20 11.5L20 12.5L20 11.5C23.7739 11.5 26.8333 14.5594 26.8333 18.3333L26.8333 18.3333L26.8333 22.5L25.8333 23.5L14.1666 23.5L13.1666 22.5L13.1666 18.3333ZM13.1666 22.5L14.1666 22.5L14.1666 23.5C13.8921 23.4961 13.6564 23.3985 13.4595 23.2071C13.2681 23.0102 13.1705 22.7745 13.1666 22.5ZM25.8333 23.5L25.8333 22.5L26.8333 22.5C26.8294 22.7745 26.7318 23.0102 26.5404 23.2071C26.3435 23.3985 26.1078 23.4961 25.8333 23.5Z">
</path>
<path fill="rgba(255, 255, 255, 1)"
d="M13.5 23.75C13.5 23.8881 13.6119 24 13.75 24L13.75 25L13.75 24L26.25 24L26.25 25L26.25 24C26.3881 24 26.5 23.8881 26.5 23.75L27.5 23.75L26.5 23.75C26.5 23.6119 26.3881 23.5 26.25 23.5L26.25 23.5L13.75 23.5L13.75 22.5L13.75 23.5C13.6119 23.5 13.5 23.6119 13.5 23.75L13.5 23.75ZM11.5 23.75L12.5 23.75L11.5 23.75C11.5 22.5074 12.5074 21.5 13.75 21.5L13.75 21.5L26.25 21.5L26.25 22.5L26.25 21.5C27.4926 21.5 28.5 22.5074 28.5 23.75L28.5 23.75C28.5 24.9926 27.4926 26 26.25 26L26.25 26L13.75 26L13.75 26C12.5074 26 11.5 24.9926 11.5 23.75Z">
</path>
<path stroke="rgba(255, 255, 255, 1)" stroke-width="2" stroke-linejoin="round"
stroke-linecap="round"
d="M22.5 25C22.5 26.3807 21.3807 27.5 20 27.5C18.6193 27.5 17.5 26.3807 17.5 25"></path>
</svg>
</div>
<div class="info">
<div class="type">{{ bill.type }}</div>
<div class="number">{{ bill.number }}</div>
</div>
</div>
<!-- 右侧时间 + 状态 -->
<div class="right">
<div class="time">{{ bill.time }}</div>
<div class="status" :class="{
'approved': bill.status === '审批通过',
'pending': bill.status === '待审批'
}">
{{ bill.status }}
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
// 定义单据数据
const billList = ref([
{
type: '出库单',
number: 'IN-2023-0615-001',
time: '10月20日 12:00:06',
status: '审批通过'
},
{
type: '入库单',
number: 'IN-2023-0615-001',
time: '10月20日 12:00:06',
status: '待审批'
},
{
type: '入库单',
number: 'IN-2023-0615-001',
time: '10月20日 12:00:06',
status: '待审批'
},
{
type: '入库单',
number: 'IN-2023-0615-001',
time: '10月20日 12:00:06',
status: '待审批'
},
{
type: '入库单',
number: 'IN-2023-0615-001',
time: '10月20日 12:00:06',
status: '待审批'
}
]);
</script>
<style scoped>
.bill-list {
display: flex;
flex-direction: column;
margin-top: 10px;
/* gap: 1rem; */
/* padding: 1rem; */
}
.bill-item {
display: flex;
justify-content: space-between;
align-items: center;
/* padding: 0.5rem; */
padding: 10px;
border-bottom: 1px solid #e5e7eb;
}
.left {
display: flex;
align-items: center;
gap: 0.5rem;
}
.info {
display: flex;
flex-direction: column;
}
.type {
font-weight: 600;
}
.number {
font-size: 0.875rem;
color: #6b7280;
}
.right {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.time {
font-size: 0.875rem;
color: #6b7280;
}
.status {
font-size: 0.875rem;
/* padding: 0.25rem 0.5rem; */
border-radius: 0.25rem;
}
.approved {
color: #10b981;
/* background-color: rgba(16, 185, 129, 0.1); */
}
.pending {
color: #f59e0b;
/* background-color: rgba(245, 158, 11, 0.1); */
}
</style>

257
src/views/materialManagement/components/detailInfo.vue Normal file
View File

@ -0,0 +1,257 @@
<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-row :gutter="20">
<el-col :span="24">
<el-form-item label="审批备注" prop="remark">
<el-input v-model="supplierInfo.remark" :rows="1" placeholder="请输入审批备注"
style="border: 1px solid red;color: red;" readonly value="1. 出货时间较长" />
<!-- <div class="error-tip">1. 出货时间较长</div> -->
</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-form-item label="审批备注" style="margin-top: 10px">
<el-input v-model="productInfo.remark" :rows="1" placeholder="请输入审批备注"
style="border: 1px solid red;color: red;" readonly value="2. 单价高于市场价3.采购数量需重新评估" />
<!-- <div class="error-tip">2. 单价高于市场价3.采购数量需重新评估</div> -->
</el-form-item>
</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-row :gutter="20">
<el-col :span="24">
<el-form-item label="审批备注" prop="remark">
<el-input v-model="contractInfo.remark" placeholder="请输入审批备注"
style="border: 1px solid red;color: red;" readonly value="4. 付款方式未标明5.发票开具方式未标明" />
<!-- <div class="error-tip">4. 付款方式未标明5.发票开具方式未标明</div> -->
</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>
import { ref } from 'vue';
// 基础信息数据
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>

280
src/views/materialManagement/inventoryManagement.vue Normal file
View File

@ -0,0 +1,280 @@
<template>
<div class="inventoryManagement">
<!-- <TitleComponent title="出入库单管理" subtitle="管理光伏和风电设备备品备件的出入库记录" /> -->
<el-row gutter="20">
<el-col :span="16" class="list" style="flex-grow: 1;display: flex;">
<el-card style="border-radius: 10px;height: 100%;display: flex;flex-direction: column;flex: 1;">
<div style="height: 100%;flex: 1;">
<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>
</div>
</div>
<div class="content" style="height: 100%;flex: 1;">
<div class="menu">
<el-input placeholder="请输入单据编号"></el-input>
<el-select placeholder="请选择单据类型"></el-select>
<el-select placeholder="请选择设备类型"></el-select>
<el-select placeholder="请选择状态"></el-select>
<el-select placeholder="请选择日期范围"></el-select>
<el-button icon="search" type="primary">搜索</el-button>
<el-button icon="refresh">重置</el-button>
</div>
<div style="margin-top: 10px;">
<el-button type="primary" @click="dialogVisible = true;">+{{ type === 'chuku' ? '添加出库单'
: '添加入库单' }}</el-button>
</div>
<el-table :data="tableData" border style="width: 100%;margin-top: 15px;height: 1000px;">
<el-table-column prop="formNumber" label="单据编号" />
<el-table-column prop="equipmentType" label="设备类型" />
<el-table-column prop="handler" label="经手人" />
<el-table-column prop="operationTime" label="操作时间" />
<el-table-column prop="totalQuantity" label="总数量" />
<el-table-column label="状态">
<template #default="scope">
<el-tag :type="getStatusTagType(scope.row.status)">
{{ scope.row.status }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
<el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="tool">
<div class="pagination-section">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="total" background>
</el-pagination>
</div>
</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card style="border-radius: 10px;">
<div class="item-box">
<div class="title">系统信息</div>
<div class="content">
<SystemInfo />
</div>
</div>
<div class="item-box">
<div class="title">数据分析</div>
<div class="content">
<DataAnalysis />
</div>
</div>
</el-card>
</el-col>
</el-row>
<el-dialog v-model="dialogVisible" :title="type === 'chuku' ? '添加出库单' : '添加入库单'" width="500">
<el-form :rules="rules" ref="formRef" label-width="100">
<el-form-item label="单据编号" prop="formNumber">
<el-input v-model="form.formNumber" placeholder="请输入单据编号" />
</el-form-item>
<el-form-item label="设备类型" prop="equipmentType">
<el-select v-model="form.equipmentType" placeholder="请选择设备类型">
<el-option label="设备类型1" value="1" />
<el-option label="设备类型2" value="2" />
</el-select>
</el-form-item>
<el-form-item label="入库数量" prop="totalQuantity">
<el-input v-model="form.totalQuantity" placeholder="请输入总数量" />
</el-form-item>
<el-form-item label="经手人" prop="handler">
<el-input v-model="form.handler" placeholder="请输入经手人" />
</el-form-item>
<!-- 联系电话 -->
<el-form-item label="联系电话" prop="contactPhone">
<el-input v-model="form.contactPhone" placeholder="请输入联系电话" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="dialogVisible = false">
保存
</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<style scoped>
.inventoryManagement {
background-color: #F2F8FC;
padding: 20px;
}
.button-actions button {
background: none;
border: 1px solid #e0e0e0;
padding: 5px 12px;
border-radius: 4px;
margin-left: 8px;
cursor: pointer;
font-size: 12px;
transition: all 0.2s ease;
}
.button-actions button.active {
background-color: #186DF5;
color: white;
border-color: #186DF5;
}
.top {
display: flex;
justify-content: space-between;
.title {
font-family: "Alibaba-PuHuiTi-Bold";
color: rgba(0, 30, 59, 1);
font-weight: bold;
}
}
.list .content {
margin-top: 20px;
}
.menu {
display: flex;
gap: 20px;
background-color: #F2F2F2;
padding: 20px;
}
/* 分页区域样式 */
.pagination-section {
background-color: #fff;
border-radius: 8px;
display: flex;
justify-content: space-between;
align-items: center;
}
.pagination-info {
font-size: 14px;
color: #606266;
}
.pagination-controls .el-pagination {
margin: 0;
}
.pagination-controls .el-pagination button {
min-width: 32px;
height: 32px;
line-height: 32px;
border-radius: 4px;
}
.pagination-controls .el-pagination .el-pager li {
min-width: 32px;
height: 32px;
line-height: 32px;
border-radius: 4px;
}
.pagination-controls .el-pagination .el-pager li.active {
background-color: #409eff;
color: #fff;
}
.tool {
margin-top: 10px;
display: flex;
justify-content: space-between;
}
.item-box {
.title {
font-family: "Alibaba-PuHuiTi-Bold";
font-size: 18px;
font-weight: 400;
letter-spacing: 0px;
line-height: 24px;
color: rgba(0, 30, 59, 1);
margin-top: 10px;
}
}
::v-deep(.el-card__body) {
height: 100%;
}
</style>
<script setup>
import SystemInfo from './components/SystemInfo.vue';
import DataAnalysis from './components/DataAnalysis.vue';
const type = ref('chuku');
const form = ref({
formNumber: '',
equipmentType: '',
handler: '',
totalQuantity: ''
});
const changeType = (newType) => {
type.value = newType;
};
const dialogVisible = ref(false);
const tableData = computed(() => {
return Array.from({ length: 50 }, (_, index) => ({
formNumber: 'IN-2023-0615-001',
equipmentType: '光伏设备',
handler: '李仓库',
operationTime: '2023-06-15 09:23',
totalQuantity: 120,
// 待审核，已完成，已取消 随机生成
status: Math.random() > 0.5 ? '待审核' : Math.random() > 0.5 ? '已完成' : '已取消'
}))
})
// 当前页码
const currentPage = ref(1);
// 每页条数 - 与分页控件默认值保持一致
const pageSize = ref(10);
// 总条数 - 从原始数据计算得出
const total = ref(tableData.value.length);
const pagedTableData = computed(() => {
const startIndex = (currentPage.value - 1) * pageSize.value;
const endIndex = startIndex + pageSize.value;
return tableData.value.slice(startIndex, endIndex);
});
// 表单校验规则
const rules = ref({
formNumber: [{ required: true, message: '请输入表单编号', trigger: 'blur' }],
equipmentType: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
handler: [{ required: true, message: '请输入经手人', trigger: 'blur' }],
totalQuantity: [{ required: true, message: '请输入入库数量', trigger: 'blur' }],
contactPhone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
});
// 表单引用
const formRef = ref(null);
// 当前页码改变
const handleCurrentChange = (val) => {
currentPage.value = val;
};
const getStatusTagType = (status) => {
if (status === '已完成') {
return 'success'
} else if (status === '待审核') {
return 'warning'
} else if (status === '已取消') {
return 'danger'
}
return ''
}
</script>

57
src/views/materialManagement/planDetails.vue Normal file
View File

@ -0,0 +1,57 @@
<template>
<div class="plan-details">
<el-row>
<el-col>
<el-card>
<div class="header">
<span class="back-arrow" @click="handleBack">
<el-icon>
<ArrowLeft />
</el-icon>
</span>
<h2>Q2风电轴承采购计划</h2>
</div>
</el-card>
</el-col>
</el-row>
<el-row gutter="10">
<el-col :span="18">
<el-card>
<detailInfo />
</el-card>
</el-col>
<el-col :span="6" style="flex-grow: 1;">
<el-card style="height: 100%;">
<DetailsProcess />
</el-card>
</el-col>
</el-row>
</div>
</template>
<style scoped lang="scss">
.plan-details {
padding: 20px;
background-color: #F1F7FB;
}
.header {
display: flex;
align-items: center;
}
.back-arrow {
font-size: 20px;
margin-right: 10px;
cursor: pointer;
}
</style>
<script setup>
import detailInfo from './components/detailInfo.vue';
import DetailsProcess from './components/DetailsProcess.vue';
const router = useRouter();
const handleBack = () => {
router.back();
}
</script>

569
src/views/materialManagement/procurementPlan.vue Normal file
View File

@ -0,0 +1,569 @@
<template>
<div class="procurementPlan">
<el-row gutter="20">
<el-col :span="13">
<el-card>
<div style="display: flex;align-items: center;height: 120px;justify-content: space-around;">
<div class="img">
<img src="/assets/caigou.png" alt="">
</div>
<div class="item">
<div class="text">
待审批计划
</div>
<div class="count" style="color: rgba(255, 178, 30, 1);">
12
</div>
</div>
<div class="item">
<div class="text">
已批准计划
</div>
<div class="count" style="color: rgba(67, 101, 220, 1);">
28
</div>
</div>
<div class="item">
<div class="text">
采购中计划
</div>
<div class="count" style="color: rgba(113, 214, 213, 1);">
15
</div>
</div>
<div class="item">
<div class="text">
已完成计划
</div>
<div class="count" style="color: rgba(0, 184, 122, 1);">
86
</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="11">
<el-card>
<div style="display: flex;align-items: center;height: 120px;justify-content: space-around;">
<div class="img">
<img src="/assets/qian.jpg" alt="">
</div>
<div class="item">
<div class="text">
本年度已采购金额
</div>
<div class="count" style="color: rgba(255, 153, 0, 1);">
520,000.00
</div>
</div>
<div class="item">
<div class="text">
本年度采购预算金额
</div>
<div class="count" style="color: rgba(67, 101, 220, 1);">
3,000,000.00
</div>
</div>
</div>
</el-card>
</el-col>
</el-row>
<el-row style="margin-top: 20px;">
<el-col :span="24">
<el-card style="border-radius: 10px;">
<div class="content">
<div class="tabs">
<el-button type="success">导出</el-button>
<el-button type="primary" @click="isNewProcurementDialogVisible = true">新建采购申请单</el-button>
</div>
<!-- 标签页导航 -->
<div class="tabs">
<el-button :type="activeTab === 'pending' ? 'primary' : ''"
@click="changeTab('pending')">待审批</el-button>
<el-button :type="activeTab === 'procuring' ? 'primary' : ''"
@click="changeTab('procuring')">采购中</el-button>
<el-badge :value="5" type="danger">
<el-button :type="activeTab === 'rejected' ? 'primary' : ''"
@click="changeTab('rejected')">
未通过
</el-button>
</el-badge>
<el-button :type="activeTab === 'approved' ? 'primary' : ''"
@click="changeTab('approved')">已通过</el-button>
<el-button :type="activeTab === 'completed' ? 'primary' : ''"
@click="changeTab('completed')">已完成</el-button>
</div>
<!-- 表格 -->
<el-table :data="tableData" border style="width: 100%;margin-top: 15px;">
<el-table-column type="selection" width="55" />
<el-table-column prop="planNumber" label="计划编号" />
<el-table-column prop="planName" label="计划名称" />
<el-table-column prop="equipmentType" label="设备类型" />
<el-table-column prop="requestDept" label="申请部门" />
<el-table-column prop="applicant" label="申请人" />
<el-table-column prop="requestDate" label="申请日期" />
<el-table-column prop="estimatedAmount" label="预计金额" />
<el-table-column label="状态">
<template #default="scope">
<el-tag :type="getStatusTagType(scope.row.status)">{{ scope.row.status }}</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" width="80">
<template #default="scope">
<el-button type="text" @click="handleView(scope.row)">查看</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="pagination-section">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="total" background />
</div>
</div>
</el-card>
</el-col>
</el-row>
<el-dialog v-model="isNewProcurementDialogVisible" title="新建采购申请单" width="60%" :close-on-click-modal="false">
<div class="new-procurement-form">
<!-- 基础信息 -->
<div class="form-section">
<h3>基础信息</h3>
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="订单编号">
<el-input v-model="newProcurementForm.planNumber" disabled value="PLAN-2023-0615-003" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="创建时间">
<el-input v-model="newProcurementForm.createTime" disabled value="2023-11-02-16:32" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="采购单位">
<el-input v-model="newProcurementForm.procurementUnit" disabled value="大连好果汁有限公司" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="经办人">
<el-input v-model="newProcurementForm.handler" disabled value="李四" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="合同类型">
<el-select v-model="newProcurementForm.contractType" placeholder="请选择">
<el-option label="请选择" value="" />
<!-- 可以添加更多选项 -->
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="采购类型">
<el-select v-model="newProcurementForm.procurementType" placeholder="请选择">
<el-option label="请选择" value="" />
<!-- 可以添加更多选项 -->
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="仓库地址">
<el-select v-model="newProcurementForm.contractAddress" placeholder="请选择">
<el-option label="请选择" value="" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="合同名称">
<el-input v-model="newProcurementForm.contractName" placeholder="请填写" />
</el-form-item>
</el-col>
</el-row>
</div>
<!-- 供应商信息 -->
<div class="form-section">
<h3>供应商信息</h3>
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="供应商单位">
<el-select v-model="newProcurementForm.supplierUnit" placeholder="请选择">
<el-option label="请选择" value="" />
<!-- 可以添加更多选项 -->
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="送货时间">
<el-select v-model="newProcurementForm.deliveryTime" placeholder="请选择">
<el-option label="请选择" value="" />
<!-- 可以添加更多选项 -->
</el-select>
</el-form-item>
</el-col>
</el-row>
</div>
<!-- 产品信息 -->
<div class="form-section">
<h3>产品信息</h3>
<el-table :data="newProcurementForm.products" border style="width: 100%">
<el-table-column prop="productName" label="产品名称">
<template #default="scope">
<el-input v-model="scope.row.productName" placeholder="请填写" />
</template>
</el-table-column>
<el-table-column prop="productModel" label="产品型号">
<template #default="scope">
<el-input v-model="scope.row.productModel" placeholder="请填写" />
</template>
</el-table-column>
<el-table-column prop="productPrice" label="产品单价">
<template #default="scope">
<el-input v-model="scope.row.productPrice" placeholder="请填写" type="number" />
</template>
</el-table-column>
<el-table-column prop="purchaseQuantity" label="购买数量">
<template #default="scope">
<el-input v-model="scope.row.purchaseQuantity" placeholder="请填写" type="number" />
</template>
</el-table-column>
<el-table-column prop="unit" label="单位">
<template #default="scope">
<el-input v-model="scope.row.unit" placeholder="请填写" />
</template>
</el-table-column>
<el-table-column prop="totalPrice" label="合计" :formatter="calculateTotalPrice">
<template #default="scope">
<span>{{ calculateTotalPrice(scope.row) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right" width="80">
<template #default="scope">
<el-button type="text" @click="removeProduct(scope.$index)"
:disabled="newProcurementForm.products.length <= 1">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-button type="primary" size="small" @click="addProduct" style="margin-top: 10px">添加产品</el-button>
</div>
<!-- 合同条款 -->
<div class="form-section">
<h3>合同条款</h3>
<el-row :gutter="20">
<el-col :span="6">
<el-form-item label="付款条件">
<el-select v-model="newProcurementForm.paymentTerms" placeholder="请选择">
<el-option label="请选择" value="" />
<!-- 可以添加更多选项 -->
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="结算方式">
<el-select v-model="newProcurementForm.settlementMethod" placeholder="请选择">
<el-option label="请选择" value="" />
<!-- 可以添加更多选项 -->
</el-select>
</el-form-item>
</el-col>
</el-row>
</div>
<!-- 附件上传 -->
<div class="form-section">
<h3>附件上传</h3>
<div class="upload-section">
<el-upload class="upload-demo" action="" :on-preview="handlePreview" :on-remove="handleRemove"
:before-remove="beforeRemove" multiple :limit="5" :on-exceed="handleExceed"
:file-list="newProcurementForm.fileList" list-type="text">
<el-button type="primary" :icon="Upload">上传文件</el-button>
<template #tip>
<div class="el-upload__tip">
请将文件拖到此处，或点击上传<br>
最多上传5个文件，单个文件大小不超过20M
</div>
</template>
</el-upload>
</div>
</div>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancelNewProcurement">取消</el-button>
<el-button @click="saveDraft">保存草稿</el-button>
<el-button type="primary" @click="submitProcurement">提交申请</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<style sc oped lang="scss">
.procurementPlan {
background-color: #F2F8FC;
padding: 20px;
}
.img {
img {
display: block;
width: 80px;
height: 80px;
}
}
.item {
text-align: center;
.text {
font-size: 14px;
}
.count {
font-size: 25px;
font-weight: 600;
text-align: left;
margin-top: 10px;
}
}
.tabs {
display: flex;
gap: 10px;
padding: 10px 0;
}
.content {
padding: 10px 0;
}
/* 分页区域样式 */
.pagination-section {
background-color: #fff;
border-radius: 8px;
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 15px;
padding: 10px 0;
}
.pagination-controls .el-pagination {
margin: 0;
}
.pagination-controls .el-pagination button {
min-width: 32px;
height: 32px;
line-height: 32px;
border-radius: 4px;
}
.pagination-controls .el-pagination .el-pager li {
min-width: 32px;
height: 32px;
line-height: 32px;
border-radius: 4px;
}
.pagination-controls .el-pagination .el-pager li.active {
background-color: #409eff;
color: #fff;
}
</style>
<script setup>
import { ref, reactive, computed } from 'vue';
import { Upload } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
const router = useRouter();
// 新建采购申请单对话框是否可见
const isNewProcurementDialogVisible = ref(false);
// 当前激活的标签页
const activeTab = ref('pending');
// 新建采购申请单表单数据
const newProcurementForm = reactive({
paymentTerms: '',
settlementMethod: '',
fileList: []
});
// 表格数据
const tableData = ref([
{
planNumber: 'PLAN-2023-0615-003',
planName: 'Q2风电轴承采购计划',
equipmentType: '风电设备',
requestDept: '运维部',
applicant: '王主管',
requestDate: '2023-06-15 10:30',
estimatedAmount: '300,000.00',
status: '待审批'
},
{
planNumber: 'PLAN-2023-0615-003',
planName: 'Q2风电轴承采购计划',
equipmentType: '风电设备',
requestDept: '运维部',
applicant: '王主管',
requestDate: '2023-06-15 10:30',
estimatedAmount: '300,000.00',
status: '待审批'
},
{
planNumber: 'PLAN-2023-0615-003',
planName: 'Q2风电轴承采购计划',
equipmentType: '风电设备',
requestDept: '运维部',
applicant: '王主管',
requestDate: '2023-06-15 10:30',
estimatedAmount: '300,000.00',
status: '待审批'
},
{
planNumber: 'PLAN-2023-0615-003',
planName: 'Q2风电轴承采购计划',
equipmentType: '风电设备',
requestDept: '运维部',
applicant: '王主管',
requestDate: '2023-06-15 10:30',
estimatedAmount: '300,000.00',
status: '待审批'
},
{
planNumber: 'PLAN-2023-0615-003',
planName: 'Q2风电轴承采购计划',
equipmentType: '风电设备',
requestDept: '运维部',
applicant: '王主管',
requestDate: '2023-06-15 10:30',
estimatedAmount: '300,000.00',
status: '待审批'
},
{
planNumber: 'PLAN-2023-0615-003',
planName: 'Q2风电轴承采购计划',
equipmentType: '风电设备',
requestDept: '运维部',
applicant: '王主管',
requestDate: '2023-06-15 10:30',
estimatedAmount: '300,000.00',
status: '待审批'
},
{
planNumber: 'PLAN-2023-0615-003',
planName: 'Q2风电轴承采购计划',
equipmentType: '风电设备',
requestDept: '运维部',
applicant: '王主管',
requestDate: '2023-06-15 10:30',
estimatedAmount: '300,000.00',
status: '待审批'
},
{
planNumber: 'PLAN-2023-0615-003',
planName: 'Q2风电轴承采购计划',
equipmentType: '风电设备',
requestDept: '运维部',
applicant: '王主管',
requestDate: '2023-06-15 10:30',
estimatedAmount: '300,000.00',
status: '待审批'
},
{
planNumber: 'PLAN-2023-0615-003',
planName: 'Q2风电轴承采购计划',
equipmentType: '风电设备',
requestDept: '运维部',
applicant: '王主管',
requestDate: '2023-06-15 10:30',
estimatedAmount: '300,000.00',
status: '待审批'
},
{
planNumber: 'PLAN-2023-0615-003',
planName: 'Q2风电轴承采购计划',
equipmentType: '风电设备',
requestDept: '运维部',
applicant: '王主管',
requestDate: '2023-06-15 10:30',
estimatedAmount: '300,000.00',
status: '待审批'
},
{
planNumber: 'PLAN-2023-0615-003',
planName: 'Q2风电轴承采购计划',
equipmentType: '风电设备',
requestDept: '运维部',
applicant: '王主管',
requestDate: '2023-06-15 10:30',
estimatedAmount: '300,000.00',
status: '待审批'
},
{
planNumber: 'PLAN-2023-0615-003',
planName: 'Q2风电轴承采购计划',
equipmentType: '风电设备',
requestDept: '运维部',
applicant: '王主管',
requestDate: '2023-06-15 10:30',
estimatedAmount: '300,000.00',
status: '待审批'
}
]);
// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(12);
// 切换标签页
const changeTab = (tab) => {
activeTab.value = tab;
// 这里可以根据标签页筛选数据
currentPage.value = 1; // 切换标签页时重置到第一页
};
// 获取状态标签类型
const getStatusTagType = (status) => {
switch (status) {
case '待审批':
return 'warning';
case '采购中':
return 'info';
case '未通过':
return 'danger';
case '已通过':
return 'primary';
case '已完成':
return 'success';
default:
return '';
}
};
// 查看详情
const handleView = (row) => {
console.log('查看采购计划详情:', row);
router.push({
path: '/materialManagement/planDetails',
query: {
planNumber: row.planNumber
}
});
// 这里可以实现查看详情的逻辑，比如打开详情弹窗或跳转到详情页
};
// 分页大小变化
const handleSizeChange = (size) => {
pageSize.value = size;
currentPage.value = 1;
};
// 当前页码变化
const handleCurrentChange = (current) => {
currentPage.value = current;
};
</script>

439
src/views/materialManagement/spareParts.vue Normal file
View File

@ -0,0 +1,439 @@
<template>
<div style="padding: 20px;background-color: #F2F8FC;">
<TitleComponent title="备品备件管理" subtitle="管理光伏和风电设备的所有备品备件信息" />
<el-card style="border-radius: 10px;">
<div class="title">
数据总览
</div>
<div class="list">
<div class="item">
<div class="left">
<div style="font-size: 14px;color:rgba(102, 102, 102, 1)">总备件数量</div>
<div style="margin: 10px 0;">
<span style="font-size: 24px;font-weight: bold;margin-right: 10px;">2,548</span>
<span>个</span>
</div>
<div>
<div style="display: flex;align-items: center;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="18" height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.15 5.7748L15.15 5.69982L15.15 5.62481L15.075 5.62481C15.075 5.62481 15 5.62481 14.925 5.5498L11.25 5.5498C10.875 5.5498 10.575 5.84981 10.575 6.2248C10.575 6.59982 10.875 6.8998 11.25 6.8998L13.125 6.8998L9.52501 10.4998L7.72501 8.6998C7.35 8.32481 6.60001 8.32481 6.225 8.6998L3.075 11.8498C2.85 12.0748 2.85 12.5248 3.075 12.7498C3.22501 12.8998 3.37501 12.9748 3.525 12.9748C3.67501 12.9748 3.82501 12.9748 3.975 12.7498L6.9 9.8248L8.7 11.6248C9.07501 11.9998 9.825 11.9998 10.2 11.6248L13.95 7.87481L13.95 9.74981C13.95 10.1248 14.25 10.4248 14.625 10.4248C15 10.4248 15.3 10.1248 15.3 9.74981L15.3 6.37482L15.3 6.14982L15.15 5.7748Z"
fill="#00B87A"></path>
</svg>
<div>
<span
style="color: rgba(0, 184, 122, 1);font-size: 14px;margin: 0 5px;margin-right: 10px;">8.2%</span>
<span style="color: rgba(154, 154, 154, 1);font-size: 14px;">较昨日同期</span>
</div>
</div>
</div>
</div>
<div class="right">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34"
height="34" viewBox="0 0 34 34" fill="none">
<rect x="0" y="0" width="34" height="34" rx="4" fill="#186DF5"></rect>
<path
d="M8.72815 24.0051C8.31696 24.0051 7.9743 24.3478 7.9743 24.759C7.9743 25.1702 8.31696 25.5128 8.72815 25.5128L16.2256 25.5128C16.6368 25.5128 16.9794 25.1702 16.9794 24.759C16.9794 24.3478 16.6368 24.0051 16.2256 24.0051L8.72815 24.0051ZM8.74186 19.4957C8.33067 19.4957 7.988 19.8384 7.988 20.2496C7.988 20.6608 8.33067 21.0034 8.74186 21.0034L13.2513 21.0034C13.6625 21.0034 14.0051 20.6608 14.0051 20.2496C14.0051 19.8384 13.6625 19.4957 13.2513 19.4957L8.74186 19.4957ZM5 16.494C5 15.6716 5.67162 15 6.494 15L27.506 15C28.3284 15 29 15.6716 29 16.494L29 26.6505C29 27.6648 28.1776 28.5009 27.1496 28.5009L6.85037 28.5009C5.83609 28.5009 5 27.6785 5 26.6505L5 16.494Z"
fill="#FFFFFF"></path>
<path
d="M17.7242 12.4974L17.7242 6.494C17.7242 5.67162 18.3959 5 19.2182 5L23.4124 5C24.0018 5 24.5638 5.28784 24.9201 5.76756L28.9772 12.4974L28.9772 12.5385C29.0458 13.2787 28.3467 13.9366 27.6066 13.9914L19.2182 13.9914C18.3959 13.9914 17.7242 13.3198 17.7242 12.4974ZM14.7499 13.9914L6.3753 13.9914C5.63515 13.9229 4.93612 13.2787 5.00466 12.5385L5.00466 12.5248L5.00466 12.4974L9.06177 5.76756C9.40443 5.28784 9.96639 5 10.5695 5L14.7637 5C15.586 5 16.2577 5.67162 16.2577 6.494L16.2577 12.4974C16.2577 13.3198 15.586 13.9914 14.7499 13.9914Z"
fill="#FFFFFF"></path>
</svg>
</div>
</div>
<div class="item">
<div class="left">
<div style="font-size: 14px;color:rgba(102, 102, 102, 1)">总备件数量</div>
<div style="margin: 10px 0;">
<span style="font-size: 24px;font-weight: bold;margin-right: 10px;">2,548</span>
<span>个</span>
</div>
<div>
<div style="display: flex;align-items: center;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="18" height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.15 5.7748L15.15 5.69982L15.15 5.62481L15.075 5.62481C15.075 5.62481 15 5.62481 14.925 5.5498L11.25 5.5498C10.875 5.5498 10.575 5.84981 10.575 6.2248C10.575 6.59982 10.875 6.8998 11.25 6.8998L13.125 6.8998L9.52501 10.4998L7.72501 8.6998C7.35 8.32481 6.60001 8.32481 6.225 8.6998L3.075 11.8498C2.85 12.0748 2.85 12.5248 3.075 12.7498C3.22501 12.8998 3.37501 12.9748 3.525 12.9748C3.67501 12.9748 3.82501 12.9748 3.975 12.7498L6.9 9.8248L8.7 11.6248C9.07501 11.9998 9.825 11.9998 10.2 11.6248L13.95 7.87481L13.95 9.74981C13.95 10.1248 14.25 10.4248 14.625 10.4248C15 10.4248 15.3 10.1248 15.3 9.74981L15.3 6.37482L15.3 6.14982L15.15 5.7748Z"
fill="#E32727"></path>
</svg>
<div>
<span
style="color: rgba(227, 39, 39, 1);font-size: 14px;margin: 0 5px;margin-right: 10px;">8.2%</span>
<span style="color: rgba(154, 154, 154, 1);font-size: 14px;">较昨日同期</span>
</div>
</div>
</div>
</div>
<div class="right">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34"
height="34" viewBox="0 0 34 34" fill="none">
<rect x="0" y="0" width="34" height="34" rx="4" fill="#186DF5"></rect>
<path
d="M8.72815 24.0051C8.31696 24.0051 7.9743 24.3478 7.9743 24.759C7.9743 25.1702 8.31696 25.5128 8.72815 25.5128L16.2256 25.5128C16.6368 25.5128 16.9794 25.1702 16.9794 24.759C16.9794 24.3478 16.6368 24.0051 16.2256 24.0051L8.72815 24.0051ZM8.74186 19.4957C8.33067 19.4957 7.988 19.8384 7.988 20.2496C7.988 20.6608 8.33067 21.0034 8.74186 21.0034L13.2513 21.0034C13.6625 21.0034 14.0051 20.6608 14.0051 20.2496C14.0051 19.8384 13.6625 19.4957 13.2513 19.4957L8.74186 19.4957ZM5 16.494C5 15.6716 5.67162 15 6.494 15L27.506 15C28.3284 15 29 15.6716 29 16.494L29 26.6505C29 27.6648 28.1776 28.5009 27.1496 28.5009L6.85037 28.5009C5.83609 28.5009 5 27.6785 5 26.6505L5 16.494Z"
fill="#FFFFFF"></path>
<path
d="M17.7242 12.4974L17.7242 6.494C17.7242 5.67162 18.3959 5 19.2182 5L23.4124 5C24.0018 5 24.5638 5.28784 24.9201 5.76756L28.9772 12.4974L28.9772 12.5385C29.0458 13.2787 28.3467 13.9366 27.6066 13.9914L19.2182 13.9914C18.3959 13.9914 17.7242 13.3198 17.7242 12.4974ZM14.7499 13.9914L6.3753 13.9914C5.63515 13.9229 4.93612 13.2787 5.00466 12.5385L5.00466 12.5248L5.00466 12.4974L9.06177 5.76756C9.40443 5.28784 9.96639 5 10.5695 5L14.7637 5C15.586 5 16.2577 5.67162 16.2577 6.494L16.2577 12.4974C16.2577 13.3198 15.586 13.9914 14.7499 13.9914Z"
fill="#FFFFFF"></path>
</svg>
</div>
</div>
<div class="item">
<div class="left">
<div style="font-size: 14px;color:rgba(102, 102, 102, 1)">总备件数量</div>
<div style="margin: 10px 0;">
<span style="font-size: 24px;font-weight: bold;margin-right: 10px;">2,548</span>
<span>个</span>
</div>
<div>
<div style="display: flex;align-items: center;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="18" height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.15 5.7748L15.15 5.69982L15.15 5.62481L15.075 5.62481C15.075 5.62481 15 5.62481 14.925 5.5498L11.25 5.5498C10.875 5.5498 10.575 5.84981 10.575 6.2248C10.575 6.59982 10.875 6.8998 11.25 6.8998L13.125 6.8998L9.52501 10.4998L7.72501 8.6998C7.35 8.32481 6.60001 8.32481 6.225 8.6998L3.075 11.8498C2.85 12.0748 2.85 12.5248 3.075 12.7498C3.22501 12.8998 3.37501 12.9748 3.525 12.9748C3.67501 12.9748 3.82501 12.9748 3.975 12.7498L6.9 9.8248L8.7 11.6248C9.07501 11.9998 9.825 11.9998 10.2 11.6248L13.95 7.87481L13.95 9.74981C13.95 10.1248 14.25 10.4248 14.625 10.4248C15 10.4248 15.3 10.1248 15.3 9.74981L15.3 6.37482L15.3 6.14982L15.15 5.7748Z"
fill="#00B87A"></path>
</svg>
<div>
<span
style="color: rgba(0, 184, 122, 1);font-size: 14px;margin: 0 5px;margin-right: 10px;">8.2%</span>
<span style="color: rgba(154, 154, 154, 1);font-size: 14px;">较昨日同期</span>
</div>
</div>
</div>
</div>
<div class="right">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34"
height="34" viewBox="0 0 34 34" fill="none">
<rect x="0" y="0" width="34" height="34" rx="4" fill="#186DF5"></rect>
<path
d="M8.72815 24.0051C8.31696 24.0051 7.9743 24.3478 7.9743 24.759C7.9743 25.1702 8.31696 25.5128 8.72815 25.5128L16.2256 25.5128C16.6368 25.5128 16.9794 25.1702 16.9794 24.759C16.9794 24.3478 16.6368 24.0051 16.2256 24.0051L8.72815 24.0051ZM8.74186 19.4957C8.33067 19.4957 7.988 19.8384 7.988 20.2496C7.988 20.6608 8.33067 21.0034 8.74186 21.0034L13.2513 21.0034C13.6625 21.0034 14.0051 20.6608 14.0051 20.2496C14.0051 19.8384 13.6625 19.4957 13.2513 19.4957L8.74186 19.4957ZM5 16.494C5 15.6716 5.67162 15 6.494 15L27.506 15C28.3284 15 29 15.6716 29 16.494L29 26.6505C29 27.6648 28.1776 28.5009 27.1496 28.5009L6.85037 28.5009C5.83609 28.5009 5 27.6785 5 26.6505L5 16.494Z"
fill="#FFFFFF"></path>
<path
d="M17.7242 12.4974L17.7242 6.494C17.7242 5.67162 18.3959 5 19.2182 5L23.4124 5C24.0018 5 24.5638 5.28784 24.9201 5.76756L28.9772 12.4974L28.9772 12.5385C29.0458 13.2787 28.3467 13.9366 27.6066 13.9914L19.2182 13.9914C18.3959 13.9914 17.7242 13.3198 17.7242 12.4974ZM14.7499 13.9914L6.3753 13.9914C5.63515 13.9229 4.93612 13.2787 5.00466 12.5385L5.00466 12.5248L5.00466 12.4974L9.06177 5.76756C9.40443 5.28784 9.96639 5 10.5695 5L14.7637 5C15.586 5 16.2577 5.67162 16.2577 6.494L16.2577 12.4974C16.2577 13.3198 15.586 13.9914 14.7499 13.9914Z"
fill="#FFFFFF"></path>
</svg>
</div>
</div>
<div class="item">
<div class="left">
<div style="font-size: 14px;color:rgba(102, 102, 102, 1)">总备件数量</div>
<div style="margin: 10px 0;">
<span style="font-size: 24px;font-weight: bold;margin-right: 10px;">2,548</span>
<span>个</span>
</div>
<div>
<div style="display: flex;align-items: center;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="18" height="18" viewBox="0 0 18 18" fill="none">
<path
d="M15.15 5.7748L15.15 5.69982L15.15 5.62481L15.075 5.62481C15.075 5.62481 15 5.62481 14.925 5.5498L11.25 5.5498C10.875 5.5498 10.575 5.84981 10.575 6.2248C10.575 6.59982 10.875 6.8998 11.25 6.8998L13.125 6.8998L9.52501 10.4998L7.72501 8.6998C7.35 8.32481 6.60001 8.32481 6.225 8.6998L3.075 11.8498C2.85 12.0748 2.85 12.5248 3.075 12.7498C3.22501 12.8998 3.37501 12.9748 3.525 12.9748C3.67501 12.9748 3.82501 12.9748 3.975 12.7498L6.9 9.8248L8.7 11.6248C9.07501 11.9998 9.825 11.9998 10.2 11.6248L13.95 7.87481L13.95 9.74981C13.95 10.1248 14.25 10.4248 14.625 10.4248C15 10.4248 15.3 10.1248 15.3 9.74981L15.3 6.37482L15.3 6.14982L15.15 5.7748Z"
fill="#00B87A"></path>
</svg>
<div>
<span
style="color: rgba(0, 184, 122, 1);font-size: 14px;margin: 0 5px;margin-right: 10px;">8.2%</span>
<span style="color: rgba(154, 154, 154, 1);font-size: 14px;">较昨日同期</span>
</div>
</div>
</div>
</div>
<div class="right">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34"
height="34" viewBox="0 0 34 34" fill="none">
<rect x="0" y="0" width="34" height="34" rx="4" fill="#186DF5"></rect>
<path
d="M8.72815 24.0051C8.31696 24.0051 7.9743 24.3478 7.9743 24.759C7.9743 25.1702 8.31696 25.5128 8.72815 25.5128L16.2256 25.5128C16.6368 25.5128 16.9794 25.1702 16.9794 24.759C16.9794 24.3478 16.6368 24.0051 16.2256 24.0051L8.72815 24.0051ZM8.74186 19.4957C8.33067 19.4957 7.988 19.8384 7.988 20.2496C7.988 20.6608 8.33067 21.0034 8.74186 21.0034L13.2513 21.0034C13.6625 21.0034 14.0051 20.6608 14.0051 20.2496C14.0051 19.8384 13.6625 19.4957 13.2513 19.4957L8.74186 19.4957ZM5 16.494C5 15.6716 5.67162 15 6.494 15L27.506 15C28.3284 15 29 15.6716 29 16.494L29 26.6505C29 27.6648 28.1776 28.5009 27.1496 28.5009L6.85037 28.5009C5.83609 28.5009 5 27.6785 5 26.6505L5 16.494Z"
fill="#FFFFFF"></path>
<path
d="M17.7242 12.4974L17.7242 6.494C17.7242 5.67162 18.3959 5 19.2182 5L23.4124 5C24.0018 5 24.5638 5.28784 24.9201 5.76756L28.9772 12.4974L28.9772 12.5385C29.0458 13.2787 28.3467 13.9366 27.6066 13.9914L19.2182 13.9914C18.3959 13.9914 17.7242 13.3198 17.7242 12.4974ZM14.7499 13.9914L6.3753 13.9914C5.63515 13.9229 4.93612 13.2787 5.00466 12.5385L5.00466 12.5248L5.00466 12.4974L9.06177 5.76756C9.40443 5.28784 9.96639 5 10.5695 5L14.7637 5C15.586 5 16.2577 5.67162 16.2577 6.494L16.2577 12.4974C16.2577 13.3198 15.586 13.9914 14.7499 13.9914Z"
fill="#FFFFFF"></path>
</svg>
</div>
</div>
</div>
<div style="margin-top: 30px;">
<div class="menu" style="background-color: #F2F2F2; padding: 20px;">
<el-row gutter="30">
<el-col :span="3">
<el-input placeholder="请输入备件名称"></el-input>
</el-col>
<el-col :span="3">
<el-select placeholder="设备类型">
</el-select>
</el-col>
<el-col :span="3">
<el-select placeholder="备件类别">
</el-select>
</el-col>
<el-col :span="3">
<el-select placeholder="全部状态">
</el-select>
</el-col>
<el-col :span="8">
<el-button icon="search" type="primary">搜索</el-button>
<el-button icon="refresh">重置</el-button>
</el-col>
</el-row>
</div>
<el-table :data="pagedTableData" border style="width: 100%;margin-top: 10px;">
<el-table-column prop="backupNumber" label="备件编号" />
<el-table-column prop="backupName" label="备件名称" />
<el-table-column prop="equipmentType" label="设备类型" />
<el-table-column prop="specificationModel" label="规格型号" />
<el-table-column prop="inventoryStatus" label="库存状态" />
<el-table-column prop="inventoryQuantity" label="库存数量" />
<el-table-column label="安全库存">
<template #default="scope">
<el-tag :type="getTagType(scope.row.safetyStockStatus)">
{{ scope.row.safetyStockStatus }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
<el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination-section">
<div class="pagination-info">
显示第{{ (currentPage - 1) * pageSize + 1 }}到{{ Math.min(currentPage * pageSize, total) }}条，共有{{
total }}条记录
</div>
<div class="pagination-controls">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="total" background>
</el-pagination>
</div>
</div>
</div>
</el-card>
</div>
</template>
<style scoped lang="scss">
.title {
font-weight: bold;
font-size: 22px;
font-weight: 400;
letter-spacing: 0px;
line-height: 28.6px;
color: rgba(10, 14, 26, 1);
}
.list {
margin-top: 30px;
display: flex;
gap: 140px;
justify-content: space-between;
}
.item {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30px;
}
/* 分页区域样式 */
.pagination-section {
background-color: #fff;
padding: 16px 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
display: flex;
justify-content: space-between;
align-items: center;
}
.pagination-info {
font-size: 14px;
color: #606266;
}
.pagination-controls .el-pagination {
margin: 0;
}
.pagination-controls .el-pagination__sizes {
margin-right: 20px;
}
.pagination-controls .el-pagination button {
min-width: 32px;
height: 32px;
line-height: 32px;
border-radius: 4px;
}
.pagination-controls .el-pagination .el-pager li {
min-width: 32px;
height: 32px;
line-height: 32px;
border-radius: 4px;
}
.pagination-controls .el-pagination .el-pager li.active {
background-color: #409eff;
color: #fff;
}
</style>
<script setup>
import TitleComponent from '@/components/TitleComponent';
// 计算属性：根据当前页码和每页条数获取分页后的数据
const tableData = ref([
{
backupNumber: 'SOL-2023-001',
backupName: '光伏逆变器模块',
equipmentType: '光伏设备',
specificationModel: 'SGGKTL-M',
inventoryStatus: '12个',
inventoryQuantity: '5个',
safetyStockStatus: '正常'
},
{
backupNumber: 'SOL-2023-001',
backupName: '光伏逆变器模块',
equipmentType: '光伏设备',
specificationModel: 'SGGKTL-M',
inventoryStatus: '12个',
inventoryQuantity: '5个',
safetyStockStatus: '正常'
},
{
backupNumber: 'SOL-2023-001',
backupName: '光伏逆变器模块',
equipmentType: '光伏设备',
specificationModel: 'SGGKTL-M',
inventoryStatus: '12个',
inventoryQuantity: '5个',
safetyStockStatus: '正常'
},
{
backupNumber: 'SOL-2023-001',
backupName: '光伏逆变器模块',
equipmentType: '光伏设备',
specificationModel: 'SGGKTL-M',
inventoryStatus: '12个',
inventoryQuantity: '5个',
safetyStockStatus: '正常'
},
{
backupNumber: 'WIN-2023-045',
backupName: '风力发电机轴承',
equipmentType: '风电设备',
specificationModel: '6318-2RS1/C3',
inventoryStatus: '3套',
inventoryQuantity: '5套',
safetyStockStatus: '低库存'
},
{
backupNumber: 'SOL-2023-001',
backupName: '光伏逆变器模块',
equipmentType: '光伏设备',
specificationModel: 'SGGKTL-M',
inventoryStatus: '12个',
inventoryQuantity: '5个',
safetyStockStatus: '正常'
},
{
backupNumber: 'WIN-2023-045',
backupName: '风力发电机轴承',
equipmentType: '风电设备',
specificationModel: '6318-2RS1/C3',
inventoryStatus: '3套',
inventoryQuantity: '5套',
safetyStockStatus: '低库存'
},
{
backupNumber: 'WIN-2023-045',
backupName: '风力发电机轴承',
equipmentType: '风电设备',
specificationModel: '6318-2RS1/C3',
inventoryStatus: '0套',
inventoryQuantity: '2套',
safetyStockStatus: '缺货'
},
{
backupNumber: 'WIN-2023-045',
backupName: '风力发电机轴承',
equipmentType: '风电设备',
specificationModel: '6318-2RS1/C3',
inventoryStatus: '3套',
inventoryQuantity: '5套',
safetyStockStatus: '低库存'
},
{
backupNumber: 'WIN-2023-045',
backupName: '风力发电机轴承',
equipmentType: '风电设备',
specificationModel: '6318-2RS1/C3',
inventoryStatus: '3套',
inventoryQuantity: '5套',
safetyStockStatus: '低库存'
},
{
backupNumber: 'WIN-2023-045',
backupName: '风力发电机轴承',
equipmentType: '风电设备',
specificationModel: '6318-2RS1/C3',
inventoryStatus: '3套',
inventoryQuantity: '5套',
safetyStockStatus: '低库存'
}
])
// 当前页码
const currentPage = ref(1);
// 每页条数 - 与分页控件默认值保持一致
const pageSize = ref(10);
// 总条数 - 从原始数据计算得出
const total = ref(tableData.value.length);
const pagedTableData = computed(() => {
const startIndex = (currentPage.value - 1) * pageSize.value;
const endIndex = startIndex + pageSize.value;
return tableData.value.slice(startIndex, endIndex);
});
// 当前页码改变
const handleCurrentChange = (val) => {
currentPage.value = val;
};
// 根据安全库存状态获取标签类型
const getTagType = (status) => {
if (status === '正常') {
return 'success'
} else if (status === '低库存') {
return 'warning'
} else if (status === '缺货') {
return 'danger'
}
return ''
}
// 编辑操作方法
const handleEdit = (row) => {
console.log('编辑', row)
// 这里可以编写编辑的逻辑，比如跳转到编辑页面等
}
// 详情操作方法
const handleDetail = (row) => {
console.log('详情', row)
// 这里可以编写查看详情的逻辑
}
// 删除操作方法
const handleDelete = (row) => {
console.log('删除', row)
// 这里可以编写删除的逻辑，比如提示确认删除，然后从表格数据中移除等
}
</script>

4
src/views/securitySurveillance/components/sbzt.vue
View File

@ -103,6 +103,7 @@
.count {
font-size: 18px;
font-weight: bold;
text-align: center;
}
}
}
@ -115,8 +116,7 @@
margin-bottom: 10px;
position: relative;
padding-left: 20px;
text-align: left;
}
.red {