bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'material-ui' of http://192.168.0.75:3000/bonus/bonus-ui into material-ui

This commit is contained in:
BianLzhaoMin 2025-03-25 13:37:09 +08:00
parent a4357cd8bd 86161f1a07
commit 08d91823b2
4 changed files with 361 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/views/home/maintain-balance/components/card-model.vue Normal file
View File

@ -0,0 +1,89 @@
<template>
<div class="card-model" :style="{ backgroundColor: state.theme }" @click="onHandleViewDetails">
<div class="f-14">
<svg-icon :icon-class="state.icon" class="icon-box" />
{{ state.title }}
</div>
<div class="f-count">{{ state.count }}</div>
<div class="f-14">
<span v-if="state.isReduce">
较上月降低
<span style="color: #f56c6c">{{ state.num || 0 }}</span>
%
</span>
<span v-else>较上月增长 {{ state.num || 0 }} %</span>
<svg-icon v-if="state.isReduce" icon-class="down_arrow" />
<svg-icon v-else icon-class="up_arrow" />
</div>
</div>
</template>
<script>
export default {
props: {
state: {
type: Object,
default: {}
}
},
mounted() {
console.log('card-model', this.state)
},
methods: {
onHandleViewDetails() {
// console.log('查询二级页面', this.cardTitle)
// 使用自定义事件 通知父组件打开二级页面
// this.$emit('onOpenLevelTwoPages', this.cardTitle)
}
}
}
</script>
<style scoped lang="scss">
.card-model {
width: 100%;
height: 100%;
padding: 6px 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 12px;
color: #fff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 初始阴影 */
transition: transform 0.3s ease; /* 添加过渡效果 */
& div {
width: 100%;
// padding-left: 40px;
transform: translateX(40px);
}
.f-14 {
position: relative;
font-size: 14px;
letter-spacing: 1px;
.icon-box {
font-size: 18px;
position: absolute;
transform: translateX(-120%);
}
}
.f-count {
margin: 4px 0;
font-size: 18px;
font-weight: bold;
letter-spacing: 2px;
}
}
.card-model:hover {
cursor: pointer;
transform: scale(1.03);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* 鼠标移入时更明显的阴影 */
}
</style>

261
src/views/home/maintain-balance/index.vue Normal file
View File

@ -0,0 +1,261 @@
<template>
<div class="app-container">
<!-- 机具供应展示 -->
<el-form v-show="showSearch" size="small" :model="queryParams" ref="queryFormRef" inline @submit.native.prevent>
<el-row>
<el-col :span="6">
<el-form-item>
<el-date-picker
v-model="queryDate"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
style="width: 100%"
:picker-options="pickerOptions"
/>
</el-form-item>
</el-col>
<el-form-item prop="keyWord">
<el-input
v-model="queryParams.keyWord"
placeholder="请输入关键词检索"
clearable
style="width: 250px"
@keyup.enter.native="onHandleSearch"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="onHandleSearch">查询</el-button>
<el-button icon="el-icon-refresh" @click="onHandleReset">重置</el-button>
</el-form-item>
</el-row>
</el-form>
<div class="card-box">
<div class="card-box-content">
<div v-for="(card, index) in cardList_2" :key="index">
<CardModel :state="card" />
</div>
</div>
</div>
<el-row :gutter="10" class="mb8">
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table :data="tableList" fit highlight-current-row style="width: 100%">
<!-- 多选 -->
<!-- <el-table-column type="selection" width="55" align="center" /> -->
<el-table-column
type="index"
width="55"
label="序号"
align="center"
:index="indexContinuation(queryParams.pageNum, queryParams.pageSize)"
/>
<el-table-column
v-for="(column, index) in tableColumns"
show-overflow-tooltip
:key="column.prop"
:label="column.label"
:prop="column.prop"
align="center"
></el-table-column>
</el-table>
<!-- 分页 -->
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
<script>
import CardModel from './components/card-model' // 卡片组件
export default {
components: {
CardModel
},
data() {
return {
showSearch: true,
total: 0,
// 表单查询条件
queryParams: {
pageNum: 1,
pageSize: 10,
startTime: '',
endTime: '',
keyWord: ''
},
// 日期查询条件
queryDate: this.getDefaultDateRange(), // 默认时间范围
cardList_2: [
{
title: '总接收量',
theme: '#5ad55a',
icon: 'In_the_library',
isReduce: false,
num: '19.5',
count: 185483
},
{
title: '已修数量',
theme: '#0099ff',
icon: 'In_use',
isReduce: true,
num: '15.5',
count: 473892
},
{
title: '在修数量',
theme: '#8167f5',
icon: 'In_repair',
isReduce: false,
num: '10.5',
count: 293874
},
{
title: '报废数量',
theme: '#bfbf00',
icon: 'penning_store',
isReduce: true,
num: '16.5',
count: 842390
},
{
title: '试验数量',
theme: '#b8741a',
icon: 'repair_store',
isReduce: true,
num: '10.5',
count: 184324
}
],
pickerOptions: {
// disabledDate 禁用日期
disabledDate(time) {
return time.getTime() > Date.now()
}
},
tableList: [{ name: 'name' }],
tableColumns: [
{ label: '类型名称', prop: 'typeName' },
{ label: '规格型号', prop: '' },
{ label: '维修单号', prop: 'code' },
{ label: '单位', prop: 'unitName' },
{ label: '总接收数量', prop: 'preNum' },
{ label: '已修数量', prop: 'num' },
{ label: '在修数量', prop: '' },
{ label: '报废数量', prop: '' },
{ label: '试验数量', prop: '' },
{ label: '更换配件量', prop: '' },
{ label: '收费配件金额(元)', prop: '' },
{ label: '不收费配件金额(元)', prop: '' }
]
}
},
methods: {
async getList() {
const params = {
pageNum: this.queryParams.pageNum,
pageSize: this.queryParams.pageSize,
keyWord: this.queryParams.keyWord
}
if (this.queryDate) {
params.startTime = this.queryDate[0]
params.endTime = this.queryDate[1]
} else {
params.startTime = ''
params.endTime = ''
}
console.log('🚀 ~ getList ~ params:', params)
try {
// const res = await (params)
} catch (error) {
console.log('🚀 ~ getList ~ error:', error)
}
},
// 查询
onHandleSearch() {
this.queryParams.pageNum = 1
this.getList()
},
// 重置
onHandleReset() {
this.queryDate = this.getDefaultDateRange()
this.$refs.queryFormRef.resetFields()
this.getList()
},
// 默认日期范围
getDefaultDateRange() {
const today = new Date()
const lastMonth = new Date()
// 设置为前一个月
lastMonth.setMonth(today.getMonth() - 1)
// 处理跨年情况
if (today.getMonth() === 0) {
lastMonth.setFullYear(today.getFullYear() - 1)
lastMonth.setMonth(11)
}
const formatDate = date => {
const y = date.getFullYear()
const m = String(date.getMonth() + 1).padStart(2, '0')
const d = String(date.getDate()).padStart(2, '0')
return `${y}-${m}-${d}`
}
// 返回从前一个月到今天的日期范围
return [formatDate(lastMonth), formatDate(today)]
}
}
}
</script>
<style scoped lang="scss">
// 卡片区样式
.card-box {
display: flex;
height: 110px;
.title-card {
padding: 16px 0;
margin-right: 14px;
writing-mode: vertical-rl;
letter-spacing: 4px;
font-size: 14px;
}
.card-box-content-1 {
flex: 1;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin-right: -12px;
.card-box-space-last {
grid-column: span 2;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
gap: 6px;
}
}
.card-box-content {
flex: 1;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin-right: -12px;
}
}
</style>

18
src/views/material/archives/index.vue
View File

@ -187,12 +187,12 @@
:action="upload.url" style="width: 100%;" :file-list="fileList"
:on-success="handleSuccess" :on-error="handleError" :on-remove="handleFileRemove"
:before-upload="beforeUpload"
accept="image/*,.pdf,.doc,.docx"
accept="image/*,.pdf,.doc,.docx,video/*"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<span>按住Ctrl可同时多选，支持上传图、PDF、Word格式文件，单个文件不能超过5M</span>
<span>按住Ctrl可同时多选，支持上传图片、视频、PDF、Word格式文件，单个文件不能超过20MB</span>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
@ -598,14 +598,14 @@ export default {
},
beforeUpload(file) {
const isRarOrZip = ['.rar', '.zip'].some(ext => file.name.toLowerCase().endsWith(ext));
if (!isRarOrZip) {
this.$message.error('仅支持上传 rar 或 zip 格式的文件');
return false;
}
const isLt5M = file.size / 1024 / 1024 < 5;
// const isRarOrZip = ['.rar', '.zip'].some(ext => file.name.toLowerCase().endsWith(ext));
// if (!isRarOrZip) {
// this.$message.error('仅支持上传 rar 或 zip 格式的文件');
// return false;
// }
const isLt5M = file.size / 1024 / 1024 < 20;
if (!isLt5M) {
this.$message.error('单个文件大小不能超过 5MB');
this.$message.error('单个文件大小不能超过 20MB');
return false;
}
return true;

4
vue.config.js
View File

@ -36,8 +36,8 @@ module.exports = {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
// target: `http://36.33.26.201:19988/prod-api`,
target: `http://192.168.0.96:18080`,//马
// target: `http://192.168.0.244:18580`,//测试
// target: `http://192.168.0.96:18080`,//马
target: `http://192.168.0.244:18580`,//测试
// target: `http://192.168.2.223:18080`,//山
// target: `http://192.168.2.23:18080`,//洪
// target: `http://192.168.0.234:18080`, //阮