更新订单下达、采购入库和仓储汇总页面
This commit is contained in:
@@ -527,6 +527,7 @@
|
|||||||
</el-card>
|
</el-card>
|
||||||
<el-dialog v-el-drag-dialog :visible.sync="dialogFormVisibleRKD" title="入库单" center width="700px">
|
<el-dialog v-el-drag-dialog :visible.sync="dialogFormVisibleRKD" title="入库单" center width="700px">
|
||||||
<el-table :data="tableDataRKD" border stripe size="small" height="400px">
|
<el-table :data="tableDataRKD" border stripe size="small" height="400px">
|
||||||
|
<el-table-column prop="入库单号" label="入库单号" align="center" show-overflow-tooltip/>
|
||||||
<el-table-column prop="采购合同号" label="采购合同" align="center" show-overflow-tooltip/>
|
<el-table-column prop="采购合同号" label="采购合同" align="center" show-overflow-tooltip/>
|
||||||
<el-table-column prop="供应商名称" label="供应商" align="center" show-overflow-tooltip/>
|
<el-table-column prop="供应商名称" label="供应商" align="center" show-overflow-tooltip/>
|
||||||
<el-table-column prop="到货数" label="到货数" align="center" show-overflow-tooltip/>
|
<el-table-column prop="到货数" label="到货数" align="center" show-overflow-tooltip/>
|
||||||
|
|||||||
@@ -6,52 +6,58 @@
|
|||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<el-card class="stat-card" @click.native="showDetail('待入库')">
|
<el-card class="stat-card" @click.native="showDetail('待入库')">
|
||||||
<div class="stat-number">{{ statistics.待入库 }}</div>
|
|
||||||
<div class="stat-label">待入库</div>
|
<div class="stat-label">待入库</div>
|
||||||
|
<div class="stat-number">{{ statistics.待入库 }}</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<el-card class="stat-card" @click.native="showDetail('待出库')">
|
<el-card class="stat-card" @click.native="showDetail('待出库')">
|
||||||
<div class="stat-number">{{ statistics.待出库 }}</div>
|
|
||||||
<div class="stat-label">待出库</div>
|
<div class="stat-label">待出库</div>
|
||||||
|
<div class="stat-number">{{ statistics.待出库 }}</div>
|
||||||
|
<div class="stat-sub-info">领料单 {{ 领料单数 }}</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<el-card class="stat-card" @click.native="showDetail('可出库')">
|
<el-card class="stat-card" @click.native="showDetail('可出库')">
|
||||||
<div class="stat-number">{{ statistics.可出库 }}</div>
|
|
||||||
<div class="stat-label">可出库</div>
|
<div class="stat-label">可出库</div>
|
||||||
|
<div class="stat-number">{{ statistics.可出库 }}</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<el-card class="stat-card" @click.native="showDetail('变更BOM')">
|
<el-card class="stat-card" @click.native="showDetail('变更BOM')">
|
||||||
<div class="stat-number">{{ statistics.变更BOM }}</div>
|
|
||||||
<div class="stat-label">变更BOM</div>
|
<div class="stat-label">变更BOM</div>
|
||||||
|
<div class="stat-number">{{ statistics.变更BOM }}</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row :gutter="20" style="margin-top: 20px">
|
<el-row :gutter="20" style="margin-top: 20px">
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<el-card class="stat-card" @click.native="showDetail('补货中')">
|
<el-card class="stat-card" @click.native="showDetail('补货中')">
|
||||||
<div class="stat-number">{{ statistics.补货中 }}</div>
|
|
||||||
<div class="stat-label">补货中</div>
|
<div class="stat-label">补货中</div>
|
||||||
|
<div class="stat-number">{{ statistics.补货中 }}</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<el-card class="stat-card" @click.native="showDetail('生产中')">
|
<el-card class="stat-card " @click.native="showDetail('生产中')">
|
||||||
<div class="stat-number">{{ statistics.生产中 }}</div>
|
|
||||||
<div class="stat-label">生产中</div>
|
<div class="stat-label">生产中</div>
|
||||||
|
<div class="stat-number">{{ statistics.生产中 }}</div>
|
||||||
|
<div class="stat-sub-labels">
|
||||||
|
<span class="sub-normal" :class="{ 'sub-active': 生产中期限筛选 === '正常' }" @click.stop="filterProductionByStatus('正常')">正常 {{ 生产中统计.正常 }}</span>
|
||||||
|
<span class="sub-warning" :class="{ 'sub-active': 生产中期限筛选 === '临期' }" @click.stop="filterProductionByStatus('临期')">临期 {{ 生产中统计.临期 }}</span>
|
||||||
|
<span class="sub-danger" :class="{ 'sub-active': 生产中期限筛选 === '超期' }" @click.stop="filterProductionByStatus('超期')">超期 {{ 生产中统计.超期 }}</span>
|
||||||
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<el-card class="stat-card" @click.native="showDetail('待投产')">
|
<el-card class="stat-card" @click.native="showDetail('待补货')">
|
||||||
|
<div class="stat-label">待补货</div>
|
||||||
<div class="stat-number">{{ statistics.待投产 }}</div>
|
<div class="stat-number">{{ statistics.待投产 }}</div>
|
||||||
<div class="stat-label">待投产</div>
|
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<el-card class="stat-card" @click.native="showDetail('采购中')">
|
<el-card class="stat-card" @click.native="showDetail('采购中')">
|
||||||
<div class="stat-number">{{ statistics.采购中 }}</div>
|
|
||||||
<div class="stat-label">采购中</div>
|
<div class="stat-label">采购中</div>
|
||||||
|
<div class="stat-number">{{ statistics.采购中 }}</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@@ -74,7 +80,15 @@
|
|||||||
:label="column.label"
|
:label="column.label"
|
||||||
:align="column.align">
|
:align="column.align">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
{{ scope.row[column.prop] }}
|
<span v-if="column.prop === '期限状态'" :class="getDeadlineStatusClass(scope.row.期限状态)">
|
||||||
|
{{ scope.row.期限状态 }}
|
||||||
|
</span>
|
||||||
|
<span v-else-if="column.prop === '超期时间' && scope.row.期限状态 === '超期'" class="text-danger">
|
||||||
|
{{ scope.row[column.prop] }}
|
||||||
|
</span>
|
||||||
|
<span v-else>
|
||||||
|
{{ scope.row[column.prop] }}
|
||||||
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
@@ -104,7 +118,15 @@ export default {
|
|||||||
detailData: [],
|
detailData: [],
|
||||||
detailColumns: [],
|
detailColumns: [],
|
||||||
领料单流水号列表: [],
|
领料单流水号列表: [],
|
||||||
statisticsTimer: null
|
statisticsTimer: null,
|
||||||
|
生产中统计: {
|
||||||
|
正常: 0,
|
||||||
|
临期: 0,
|
||||||
|
超期: 0
|
||||||
|
},
|
||||||
|
生产中期限筛选: null,
|
||||||
|
生产中全部数据: [],
|
||||||
|
领料单数: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -128,7 +150,44 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 获取统计数据
|
calculateDeadlineStatus(item) {
|
||||||
|
if (!item.补货期限) return '正常'
|
||||||
|
var deadline = new Date(item.补货期限)
|
||||||
|
var now = new Date()
|
||||||
|
var diffMs = deadline.getTime() - now.getTime()
|
||||||
|
var diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24))
|
||||||
|
if (diffDays < 0) return '超期'
|
||||||
|
if (diffDays <= 3) return '临期'
|
||||||
|
return '正常'
|
||||||
|
},
|
||||||
|
|
||||||
|
calculateOverdueDays(item) {
|
||||||
|
if (!item.补货期限) return 0
|
||||||
|
var deadline = new Date(item.补货期限)
|
||||||
|
var now = new Date()
|
||||||
|
var diffMs = now.getTime() - deadline.getTime()
|
||||||
|
var diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24))
|
||||||
|
return diffDays > 0 ? diffDays : 0
|
||||||
|
},
|
||||||
|
|
||||||
|
getDeadlineStatusClass(status) {
|
||||||
|
if (status === '超期') return 'text-danger'
|
||||||
|
if (status === '临期') return 'text-warning'
|
||||||
|
return ''
|
||||||
|
},
|
||||||
|
|
||||||
|
filterProductionByStatus(status) {
|
||||||
|
if (this.生产中期限筛选 === status) {
|
||||||
|
this.生产中期限筛选 = null
|
||||||
|
this.detailData = this.生产中全部数据
|
||||||
|
} else {
|
||||||
|
this.生产中期限筛选 = status
|
||||||
|
this.currentDetail = '生产中'
|
||||||
|
this.detailData = this.生产中全部数据.filter(item => item.期限状态 === status)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
getStatistics() {
|
getStatistics() {
|
||||||
this.loading = true
|
this.loading = true
|
||||||
|
|
||||||
@@ -162,11 +221,11 @@ export default {
|
|||||||
// 获取待入库数据
|
// 获取待入库数据
|
||||||
getPendingInStorage() {
|
getPendingInStorage() {
|
||||||
var param = []
|
var param = []
|
||||||
var Data = this.CreateData('11', '仓储管理_补货件查询', param)
|
var Data = this.CreateData('11', '仓储管理_入库单_查询', param)
|
||||||
this.ExecDatabase(Data).then(response => {
|
this.ExecDatabase(Data).then(response => {
|
||||||
let count = 0
|
let count = 0
|
||||||
response.data.forEach(item => {
|
response.data.forEach(item => {
|
||||||
if (item.状态 === '未到' || item.状态 === '加工中' || item.状态 === '部分到') {
|
if (item.是否入库 === false) {
|
||||||
count++
|
count++
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -187,7 +246,6 @@ export default {
|
|||||||
param2[0] = ['领料单流水号列表', this.领料单流水号列表]
|
param2[0] = ['领料单流水号列表', this.领料单流水号列表]
|
||||||
var Data2 = this.CreateData('11', '装配管理_领料单明细_查询_汇总', param2)
|
var Data2 = this.CreateData('11', '装配管理_领料单明细_查询_汇总', param2)
|
||||||
this.ExecDatabase(Data2).then(response2 => {
|
this.ExecDatabase(Data2).then(response2 => {
|
||||||
// 计算物料种类数量
|
|
||||||
let count = 0
|
let count = 0
|
||||||
response2.data.forEach(item => {
|
response2.data.forEach(item => {
|
||||||
if (item.已领数 < item.申请数) {
|
if (item.已领数 < item.申请数) {
|
||||||
@@ -195,6 +253,8 @@ export default {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
this.statistics.待出库 = count
|
this.statistics.待出库 = count
|
||||||
|
var uniqueOrders = new Set(response2.data.map(item => item.领料单号))
|
||||||
|
this.领料单数 = uniqueOrders.size
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
this.statistics.待出库 = 0
|
this.statistics.待出库 = 0
|
||||||
@@ -265,28 +325,40 @@ export default {
|
|||||||
// 获取生产中数据
|
// 获取生产中数据
|
||||||
getInProduction() {
|
getInProduction() {
|
||||||
var param = []
|
var param = []
|
||||||
var Data = this.CreateData('11', '仓储管理_补货件查询', param)
|
var Data = this.CreateData('11', '仓储管理_生产订单_查询', param)
|
||||||
this.ExecDatabase(Data).then(response => {
|
this.ExecDatabase(Data).then(response => {
|
||||||
let count = 0
|
let count = 0
|
||||||
|
let normalCount = 0
|
||||||
|
let nearExpiryCount = 0
|
||||||
|
let expiredCount = 0
|
||||||
response.data.forEach(item => {
|
response.data.forEach(item => {
|
||||||
if (item.状态 === '加工中') {
|
if (item.状态 === '加工中') {
|
||||||
count++
|
count++
|
||||||
|
const status = this.calculateDeadlineStatus(item)
|
||||||
|
if (status === '超期') {
|
||||||
|
expiredCount++
|
||||||
|
} else if (status === '临期') {
|
||||||
|
nearExpiryCount++
|
||||||
|
} else {
|
||||||
|
normalCount++
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
this.statistics.生产中 = count
|
this.statistics.生产中 = count
|
||||||
|
this.生产中统计.正常 = normalCount
|
||||||
|
this.生产中统计.临期 = nearExpiryCount
|
||||||
|
this.生产中统计.超期 = expiredCount
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
// 获取待投产数据
|
// 获取待投产数据
|
||||||
getPendingProduction() {
|
getPendingProduction() {
|
||||||
var param = []
|
var param = []
|
||||||
var Data = this.CreateData('11', '仓储管理_补货件查询', param)
|
var Data = this.CreateData('11', '仓储管理_待投产_查询', param)
|
||||||
this.ExecDatabase(Data).then(response => {
|
this.ExecDatabase(Data).then(response => {
|
||||||
let count = 0
|
let count = 0
|
||||||
response.data.forEach(item => {
|
response.data.forEach(item => {
|
||||||
if (item.状态 === '未开始') {
|
count++
|
||||||
count++
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
this.statistics.待投产 = count
|
this.statistics.待投产 = count
|
||||||
})
|
})
|
||||||
@@ -311,6 +383,7 @@ export default {
|
|||||||
showDetail(type) {
|
showDetail(type) {
|
||||||
this.currentDetail = type
|
this.currentDetail = type
|
||||||
this.loading = true
|
this.loading = true
|
||||||
|
this.生产中期限筛选 = null
|
||||||
|
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case '待入库':
|
case '待入库':
|
||||||
@@ -331,7 +404,7 @@ export default {
|
|||||||
case '生产中':
|
case '生产中':
|
||||||
this.getInProductionDetail()
|
this.getInProductionDetail()
|
||||||
break
|
break
|
||||||
case '待投产':
|
case '待补货':
|
||||||
this.getPendingProductionDetail()
|
this.getPendingProductionDetail()
|
||||||
break
|
break
|
||||||
case '采购中':
|
case '采购中':
|
||||||
@@ -343,15 +416,14 @@ export default {
|
|||||||
// 获取待入库详情
|
// 获取待入库详情
|
||||||
getPendingInStorageDetail() {
|
getPendingInStorageDetail() {
|
||||||
var param = []
|
var param = []
|
||||||
var Data = this.CreateData('11', '仓储管理_补货件查询', param)
|
var Data = this.CreateData('11', '仓储管理_入库单_查询', param)
|
||||||
this.ExecDatabase(Data).then(response => {
|
this.ExecDatabase(Data).then(response => {
|
||||||
this.detailData = response.data.filter(item => item.状态 === '未到' || item.状态 === '加工中' || item.状态 === '部分到')
|
this.detailData = response.data.filter(item => item.是否入库 === false)
|
||||||
this.detailColumns = [
|
this.detailColumns = [
|
||||||
{ prop: '补货单号', label: '补货单号', width: '150px', align: 'center' },
|
{ prop: '入库单号', label: '入库单号', width: '150px', align: 'center' },
|
||||||
{ prop: '补货人', label: '补货人', width: '100px', align: 'center' },
|
{ prop: '采购合同号', label: '采购合同号', width: '100px', align: 'center' },
|
||||||
{ prop: '状态', label: '状态', width: '120px', align: 'center' },
|
{ prop: '供应商名称', label: '供应商', width: '120px', align: 'center' },
|
||||||
{ prop: '补货日期', label: '补货日期', width: '150px', align: 'center' },
|
{ prop: '到货数', label: '数量', width: '150px', align: 'center' }
|
||||||
{ prop: '补货期限', label: '补货期限', width: '180px', align: 'center' }
|
|
||||||
]
|
]
|
||||||
this.loading = false
|
this.loading = false
|
||||||
})
|
})
|
||||||
@@ -436,16 +508,36 @@ export default {
|
|||||||
// 获取生产中详情
|
// 获取生产中详情
|
||||||
getInProductionDetail() {
|
getInProductionDetail() {
|
||||||
var param = []
|
var param = []
|
||||||
var Data = this.CreateData('11', '仓储管理_补货件查询', param)
|
var Data = this.CreateData('11', '仓储管理_生产订单_查询', param)
|
||||||
this.ExecDatabase(Data).then(response => {
|
this.ExecDatabase(Data).then(response => {
|
||||||
this.detailData = response.data.filter(item => item.状态 === '加工中')
|
var filtered = response.data.filter(item => item.状态 === '加工中')
|
||||||
|
filtered.forEach(item => {
|
||||||
|
item.期限状态 = this.calculateDeadlineStatus(item)
|
||||||
|
item.超期时间 = this.calculateOverdueDays(item)
|
||||||
|
})
|
||||||
|
filtered.sort((a, b) => {
|
||||||
|
if (a.期限状态 === '超期' && b.期限状态 !== '超期') return -1
|
||||||
|
if (a.期限状态 !== '超期' && b.期限状态 === '超期') return 1
|
||||||
|
if (a.期限状态 === '超期' && b.期限状态 === '超期') {
|
||||||
|
return (b.超期时间 || 0) - (a.超期时间 || 0)
|
||||||
|
}
|
||||||
|
return new Date(a.补货期限) - new Date(b.补货期限)
|
||||||
|
})
|
||||||
|
this.生产中全部数据 = filtered
|
||||||
|
if (this.生产中期限筛选) {
|
||||||
|
this.detailData = filtered.filter(item => item.期限状态 === this.生产中期限筛选)
|
||||||
|
} else {
|
||||||
|
this.detailData = filtered
|
||||||
|
}
|
||||||
this.detailColumns = [
|
this.detailColumns = [
|
||||||
{ prop: '补货单号', label: '补货单号', width: '150px', align: 'center' },
|
{ prop: '补货单号', label: '补货单号', width: '150px', align: 'center' },
|
||||||
{ prop: '名称', label: '物料名称', width: '180px', align: 'center' },
|
{ prop: '名称', label: '物料名称', width: '180px', align: 'center' },
|
||||||
{ prop: '补货数', label: '补货数量', width: '100px', align: 'center' },
|
{ prop: '补货数', label: '补货数量', width: '100px', align: 'center' },
|
||||||
{ prop: '状态', label: '状态', width: '100px', align: 'center' },
|
{ prop: '状态', label: '状态', width: '100px', align: 'center' },
|
||||||
{ prop: '补货日期', label: '补货日期', width: '150px', align: 'center' },
|
{ prop: '补货日期', label: '补货日期', width: '150px', align: 'center' },
|
||||||
{ prop: '补货期限', label: '补货期限', width: '150px', align: 'center' }
|
{ prop: '补货期限', label: '补货期限', width: '150px', align: 'center' },
|
||||||
|
{ prop: '期限状态', label: '期限状态', width: '100px', align: 'center' },
|
||||||
|
{ prop: '超期时间', label: '超期时间(天)', width: '120px', align: 'center' }
|
||||||
]
|
]
|
||||||
this.loading = false
|
this.loading = false
|
||||||
})
|
})
|
||||||
@@ -454,16 +546,14 @@ export default {
|
|||||||
// 获取待投产详情
|
// 获取待投产详情
|
||||||
getPendingProductionDetail() {
|
getPendingProductionDetail() {
|
||||||
var param = []
|
var param = []
|
||||||
var Data = this.CreateData('11', '仓储管理_补货件查询', param)
|
var Data = this.CreateData('11', '仓储管理_待投产_查询', param)
|
||||||
this.ExecDatabase(Data).then(response => {
|
this.ExecDatabase(Data).then(response => {
|
||||||
this.detailData = response.data.filter(item => item.状态 === '未开始')
|
this.detailData = response.data.slice(0, 1000)
|
||||||
this.detailColumns = [
|
this.detailColumns = [
|
||||||
{ prop: '补货单号', label: '补货单号', width: '150px', align: 'center' },
|
{ prop: '物料名称', label: '物料名称', width: '180px', align: 'center' },
|
||||||
{ prop: '名称', label: '物料名称', width: '180px', align: 'center' },
|
{ prop: '图号', label: '图号或型号', width: '150px', align: 'center' },
|
||||||
{ prop: '补货数', label: '补货数量', width: '100px', align: 'center' },
|
{ prop: '库存数量', label: '库存数量', width: '100px', align: 'center' },
|
||||||
{ prop: '状态', label: '状态', width: '100px', align: 'center' },
|
{ prop: '应补数量', label: '应补数量', width: '100px', align: 'center' },
|
||||||
{ prop: '补货日期', label: '补货日期', width: '150px', align: 'center' },
|
|
||||||
{ prop: '补货期限', label: '补货期限', width: '150px', align: 'center' }
|
|
||||||
]
|
]
|
||||||
this.loading = false
|
this.loading = false
|
||||||
})
|
})
|
||||||
@@ -495,11 +585,11 @@ export default {
|
|||||||
height: 120px;
|
height: 120px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
text-align: center;
|
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-card:hover {
|
.stat-card:hover {
|
||||||
@@ -507,19 +597,73 @@ export default {
|
|||||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.stat-card-production {
|
||||||
|
height: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
.stat-number {
|
.stat-number {
|
||||||
font-size: 24px;
|
font-size: 36px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 15px;
|
margin-top: 10px;
|
||||||
color: #303133;
|
color: #303133;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-label {
|
.stat-label {
|
||||||
|
font-size: 13px;
|
||||||
|
text-align: left;
|
||||||
|
color: #909399;
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-sub-info {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 8px;
|
|
||||||
color: #909399;
|
color: #909399;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-sub-labels {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin-top: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-normal {
|
||||||
|
color: #67c23a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-warning {
|
||||||
|
color: #e6a23c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-danger {
|
||||||
|
color: #f56c6c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-normal.sub-active,
|
||||||
|
.sub-warning.sub-active,
|
||||||
|
.sub-danger.sub-active {
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: underline;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-normal,
|
||||||
|
.sub-warning,
|
||||||
|
.sub-danger {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-danger {
|
||||||
|
color: #f56c6c;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-warning {
|
||||||
|
color: #e6a23c;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.summary-card {
|
.summary-card {
|
||||||
@@ -546,7 +690,6 @@ export default {
|
|||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 为不同类型的卡片设置不同的颜色 */
|
|
||||||
.stat-card:nth-child(1) .stat-number {
|
.stat-card:nth-child(1) .stat-number {
|
||||||
color: #4caf50;
|
color: #4caf50;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user