jinna
7 months ago
parent
f50a85b49b
commit
1c73633db6
24 changed files with 906 additions and 1353 deletions
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 891 B |
|
After Width: | Height: | Size: 855 B |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 929 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 447 B |
|
After Width: | Height: | Size: 424 B |
|
After Width: | Height: | Size: 725 B |
@ -0,0 +1,135 @@ |
|||||||
|
<template> |
||||||
|
<div class="bar_box"> |
||||||
|
<!-- 生产效率 --> |
||||||
|
<div class="title_bar">生产订单</div> |
||||||
|
<div class="bar_chart_box" ref="bar_chart"></div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
total: [1000, 1400, 2300, 1200, 1800, 1500, 1800, 2200, 1800, 0, 0, 0], |
||||||
|
month: ['2025-01', '2025-02', '2025-03', '2025-04', '2025-05', '2025-06', '2025-07', '2025-08', '2025-09', '2025-10', '2025-11', '2025-12',], |
||||||
|
okNum: [1500, 1000, 2000, 1500, 2100, 1800, 1200, 2600, 1200, 0, 0, 0] |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.createBarChart() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
createBarChart() { |
||||||
|
const mapBoxEchart = this.$echarts.init(this.$refs.bar_chart); |
||||||
|
const option = { |
||||||
|
grid: { |
||||||
|
containLabel: true, |
||||||
|
left: 20, |
||||||
|
right: 20, |
||||||
|
bottom: '1%', |
||||||
|
top: '10%' |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
// 提示框组件 |
||||||
|
trigger: 'axis', // 触发类型 柱状图 |
||||||
|
axisPointer: { type: 'shadow' } // 触发效果 移动上去 背景效果 |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
axisLabel: { |
||||||
|
color: '#000', |
||||||
|
fontSize: 14, |
||||||
|
interval: 0 |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: true |
||||||
|
}, |
||||||
|
data: this.month, |
||||||
|
type: 'category' |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
axisLabel: { |
||||||
|
color: '#000', |
||||||
|
fontSize: 14 |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
show: true |
||||||
|
}, |
||||||
|
axisLine: { |
||||||
|
show: true |
||||||
|
}, |
||||||
|
name: '' |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: '热表订单', // 名称 |
||||||
|
data: this.total, |
||||||
|
type: 'line', |
||||||
|
smooth: true, |
||||||
|
areaStyle: {}, |
||||||
|
// barMaxWidth: 'auto', |
||||||
|
// barWidth: 30, |
||||||
|
// barGap: '-100%', |
||||||
|
// zlevel: -1, |
||||||
|
itemStyle: { |
||||||
|
color: '#01EAFF' |
||||||
|
}, |
||||||
|
label: { |
||||||
|
show: false, |
||||||
|
position: 'top', |
||||||
|
color: '#000' |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '烧结订单', // 名称 |
||||||
|
data: this.okNum, |
||||||
|
type: 'line', |
||||||
|
smooth: true, |
||||||
|
areaStyle: {}, |
||||||
|
// barMaxWidth: 'auto', |
||||||
|
// barWidth: 30, |
||||||
|
itemStyle: { |
||||||
|
color: '#6299FF' |
||||||
|
}, |
||||||
|
label: { |
||||||
|
show: false, |
||||||
|
color: '#fff' |
||||||
|
// position: 'top', |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
}; |
||||||
|
|
||||||
|
// 使用制定的配置项和数据显示图表 |
||||||
|
mapBoxEchart.setOption(option); |
||||||
|
// echart图表自适应 |
||||||
|
// window.addEventListener('resize', function() { |
||||||
|
// mapBoxEchart.resize(); |
||||||
|
// }); |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.bar_box{ |
||||||
|
padding: 20px; |
||||||
|
.title_bar{ |
||||||
|
font-weight: 550; |
||||||
|
} |
||||||
|
|
||||||
|
.bar_chart_box{ |
||||||
|
width: 100%; |
||||||
|
height: 240px; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,99 @@ |
|||||||
|
<template> |
||||||
|
<div class="notice_box"> |
||||||
|
<div class="title_box"> |
||||||
|
<span class="title">公告</span> |
||||||
|
<span style="color: #409EFF;font-size: 14px;cursor: pointer;" @click="loadMore">查看更多</span> |
||||||
|
</div> |
||||||
|
<div class="notice_data"> |
||||||
|
<div class="notice_data_item" v-for="item in noticeArr" :key="item.content"> |
||||||
|
<el-tag :type="item.category == 1 ? 'primary' : 'success'">{{ item.categoryName }}</el-tag> |
||||||
|
<div class="notice_title">{{ item.title }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import {getList} from '@/api/desk/notice' |
||||||
|
import router from '@/router/'; |
||||||
|
|
||||||
|
export default { |
||||||
|
data(){ |
||||||
|
return{ |
||||||
|
noticeArr:[ |
||||||
|
{ |
||||||
|
"id": "1963789019681054722", |
||||||
|
"createUser": "1123598821738675201", |
||||||
|
"createDept": "1123598813738675201", |
||||||
|
"createTime": "2025-09-05 10:19:22", |
||||||
|
"updateUser": "1123598821738675201", |
||||||
|
"updateTime": "2025-09-05 10:19:22", |
||||||
|
"status": 1, |
||||||
|
"isDeleted": 0, |
||||||
|
"tenantId": "000000", |
||||||
|
"title": "2025年国庆节放假通知", |
||||||
|
"category": 1, |
||||||
|
"releaseTime": "2025-09-17 00:00:00", |
||||||
|
"content": "<p><strong>2025年国庆节放假通知</strong></p><p>2025年国庆节放假为10月1日至10月8日</p>", |
||||||
|
"categoryName": "发布通知" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "1963789019681054723", |
||||||
|
"createUser": "1123598821738675201", |
||||||
|
"createDept": "1123598813738675201", |
||||||
|
"createTime": "2025-09-05 10:19:22", |
||||||
|
"updateUser": "1123598821738675201", |
||||||
|
"updateTime": "2025-09-05 10:19:22", |
||||||
|
"status": 1, |
||||||
|
"isDeleted": 0, |
||||||
|
"tenantId": "000000", |
||||||
|
"title": "工艺任务待分派，请尽快处理！", |
||||||
|
"category": 7, |
||||||
|
"releaseTime": "2025-09-17 00:00:00", |
||||||
|
"content": "<p><strong>工艺任务待分派</strong></p><p>零件号为21E6-575-12846_001-B1的相关工艺任务待分派，请尽快处理！</p>", |
||||||
|
"categoryName": "消息通知" |
||||||
|
}, |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
|
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
loadMore(){ |
||||||
|
this.$router.push('/desk/notice'); |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.notice_box{ |
||||||
|
padding: 20px; |
||||||
|
height: 100%; |
||||||
|
// background: red; |
||||||
|
|
||||||
|
.title_box{ |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.title{ |
||||||
|
font-weight: 550; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.notice_data{ |
||||||
|
padding: 20px 0; |
||||||
|
.notice_data_item{ |
||||||
|
display: flex; |
||||||
|
margin-bottom: 15px; |
||||||
|
|
||||||
|
.notice_title{ |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,191 @@ |
|||||||
|
<template> |
||||||
|
<div class="order_box"> |
||||||
|
<div class="title_bar">车间订单</div> |
||||||
|
<div class="pie_box"> |
||||||
|
<div class="pie_box_item" > |
||||||
|
<div class="btn_box"> |
||||||
|
<span class="btn first" :class="activeIndex == 1 ? 'active' : ''" @click="changeChart(1)">热表</span> |
||||||
|
<span class="btn second" :class="activeIndex == 2 ? 'active' : ''" @click="changeChart(2)">烧结</span> |
||||||
|
</div> |
||||||
|
<div ref="rb_chart" v-show="activeIndex == 1" class="chart_box"></div> |
||||||
|
<div ref="sj_chart" v-show="activeIndex == 2" class="chart_box"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
activeIndex:1 |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.$nextTick(() =>{ |
||||||
|
this.initRbEcharts() |
||||||
|
}) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
changeChart(type){ |
||||||
|
this.activeIndex = type |
||||||
|
this.$nextTick(() =>{ |
||||||
|
if(type == 1){ |
||||||
|
this.initRbEcharts() |
||||||
|
}else{ |
||||||
|
this.initSjEcharts() |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
}, |
||||||
|
initRbEcharts() { |
||||||
|
var myChart = this.$echarts.init(this.$refs.rb_chart); |
||||||
|
let option = { |
||||||
|
tooltip: { |
||||||
|
trigger: 'item', |
||||||
|
formatter: '{b} : {c} <br/> 占比：{d}%' |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
// top: '-2%', |
||||||
|
left: '15%', |
||||||
|
top:'center', |
||||||
|
orient: "vertical" |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
top: '10%', |
||||||
|
type: 'pie', |
||||||
|
radius: ['65%', '95%'], |
||||||
|
avoidLabelOverlap: false, |
||||||
|
padAngle: 5, |
||||||
|
itemStyle: { |
||||||
|
borderRadius: 5 |
||||||
|
}, |
||||||
|
label: { |
||||||
|
show: false, |
||||||
|
position: 'center' |
||||||
|
}, |
||||||
|
labelLine: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
// data: this.problemArr |
||||||
|
data:[ |
||||||
|
{ value: 8, name: '在制品',itemStyle: {color:'#3B82F6'}}, |
||||||
|
{ value: 2, name: '加工中',itemStyle: {color:'#E6A23C'} }, |
||||||
|
{ value: 2, name: '检验中',itemStyle: {color:'#EF4444'} }, |
||||||
|
{ value: 2, name: '已完成',itemStyle: {color:'#22C55E'} }, |
||||||
|
] |
||||||
|
} |
||||||
|
] |
||||||
|
}; |
||||||
|
myChart.setOption(option); |
||||||
|
}, |
||||||
|
initSjEcharts() { |
||||||
|
var myChart = this.$echarts.init(this.$refs.sj_chart); |
||||||
|
let option = { |
||||||
|
tooltip: { |
||||||
|
trigger: 'item', |
||||||
|
formatter: '{b} : {c} <br/> 占比：{d}%' |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
// top: '-2%', |
||||||
|
left: '15%', |
||||||
|
top:'center', |
||||||
|
orient: "vertical" |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
top: '10%', |
||||||
|
type: 'pie', |
||||||
|
radius: ['65%', '95%'], |
||||||
|
avoidLabelOverlap: false, |
||||||
|
padAngle: 5, |
||||||
|
itemStyle: { |
||||||
|
borderRadius: 5 |
||||||
|
}, |
||||||
|
label: { |
||||||
|
show: false, |
||||||
|
position: 'center' |
||||||
|
}, |
||||||
|
labelLine: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
// data: this.problemArr |
||||||
|
data:[ |
||||||
|
{ value: 20, name: '在制品',itemStyle: {color:'#3B82F6'}}, |
||||||
|
{ value: 28, name: '未齐套',itemStyle: {color:'#ff7a45'}}, |
||||||
|
{ value: 14, name: '已齐套', itemStyle: {color:'#20c5f6'}}, |
||||||
|
{ value: 42, name: '加工中',itemStyle: {color:'#E6A23C'} }, |
||||||
|
{ value: 13, name: '检验中',itemStyle: {color:'#EF4444'} }, |
||||||
|
{ value: 25, name: '已完成',itemStyle: {color:'#22C55E'} }, |
||||||
|
] |
||||||
|
} |
||||||
|
] |
||||||
|
}; |
||||||
|
myChart.setOption(option); |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.order_box { |
||||||
|
padding: 20px; |
||||||
|
|
||||||
|
.title_bar { |
||||||
|
font-weight: 550; |
||||||
|
} |
||||||
|
|
||||||
|
.pie_box { |
||||||
|
width: 100%; |
||||||
|
height: 200px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
.pie_box_item { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
padding: 10px; |
||||||
|
|
||||||
|
.btn_box{ |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: flex-end; |
||||||
|
|
||||||
|
.btn{ |
||||||
|
padding: 5px 15px; |
||||||
|
border: 1px solid #eee; |
||||||
|
cursor: pointer; |
||||||
|
font-size: 14px; |
||||||
|
|
||||||
|
&.first{ |
||||||
|
border-top-left-radius: 6px; |
||||||
|
border-bottom-left-radius: 6px; |
||||||
|
border-right: none; |
||||||
|
} |
||||||
|
|
||||||
|
&.second{ |
||||||
|
border-top-right-radius: 6px; |
||||||
|
border-bottom-right-radius: 6px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
&.active{ |
||||||
|
color: rgb(64, 158, 255); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.title{ |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
|
||||||
|
.chart_box{ |
||||||
|
width: 100%; |
||||||
|
height: 210px; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,81 @@ |
|||||||
|
<template> |
||||||
|
<div class="out_box"> |
||||||
|
<div class="title">模具使用记录</div> |
||||||
|
<div class="bottom_box"> |
||||||
|
<el-table :data="tableData" border style="width: 100%" > |
||||||
|
<el-table-column prop="no" align="center" label="物料编号" /> |
||||||
|
<el-table-column prop="num" align="center" label="数量" width="80" /> |
||||||
|
<el-table-column prop="name" align="center" label="责任人" /> |
||||||
|
<el-table-column prop="time" align="center" label="借出/归还时间" /> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data(){ |
||||||
|
return{ |
||||||
|
tableData:[ |
||||||
|
{ |
||||||
|
no:'21E8-154-1514-E9', |
||||||
|
num:5, |
||||||
|
name:'尚玉奇', |
||||||
|
time:'2025-09-04 11:12:23' |
||||||
|
}, |
||||||
|
{ |
||||||
|
no:'21E8-154-1512-E2', |
||||||
|
num:15, |
||||||
|
name:'朱文博', |
||||||
|
time:'2025-08-30 16:22:53' |
||||||
|
}, |
||||||
|
{ |
||||||
|
no:'21E8-154-1524-E9', |
||||||
|
num:2, |
||||||
|
name:'王新宽', |
||||||
|
time:'2025-08-12 15:21:32' |
||||||
|
}, |
||||||
|
{ |
||||||
|
no:'21E8-154-1524-E8', |
||||||
|
num:18, |
||||||
|
name:'崔殿龙', |
||||||
|
time:'2025-08-11 11:25:23' |
||||||
|
}, |
||||||
|
{ |
||||||
|
no:'21E8-154-1524-E7', |
||||||
|
num:12, |
||||||
|
name:'王新宽', |
||||||
|
time:'2025-08-10 15:23:05' |
||||||
|
}, |
||||||
|
{ |
||||||
|
no:'21E8-154-1524-E6', |
||||||
|
num:15, |
||||||
|
name:'崔殿龙', |
||||||
|
time:'2025-08-08 11:21:23' |
||||||
|
}, |
||||||
|
{ |
||||||
|
no:'21E8-154-1524-E5', |
||||||
|
num:8, |
||||||
|
name:'范东辉', |
||||||
|
time:'2025-08-04 11:12:23' |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.out_box{ |
||||||
|
padding: 20px; |
||||||
|
|
||||||
|
.title{ |
||||||
|
font-weight: 550; |
||||||
|
} |
||||||
|
|
||||||
|
.bottom_box{ |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,82 @@ |
|||||||
|
<template> |
||||||
|
<div class="quick_box"> |
||||||
|
<div class="title_box"> |
||||||
|
<span class="title">快捷入口</span> |
||||||
|
<span style="color: #409EFF;font-size: 14px;">管理</span> |
||||||
|
</div> |
||||||
|
<div class="access_box"> |
||||||
|
<div class="access_box_item" v-for="item in accessData" :key="item.name" @click="turnPage(item.page)"> |
||||||
|
<img v-show="item.url == 'product'" src="@/assets/product.png" alt=""> |
||||||
|
<img v-show="item.url == 'plan'" src="@/assets/plan.png" alt=""> |
||||||
|
<img v-show="item.url == 'rule'" src="@/assets/rule.png" alt=""> |
||||||
|
<img v-show="item.url == 'output'" src="@/assets/output.png" alt=""> |
||||||
|
<img v-show="item.url == 'craft'" src="@/assets/craft.png" alt=""> |
||||||
|
<img v-show="item.url == 'quality'" src="@/assets/quality.png" alt=""> |
||||||
|
<span>{{ item.name }}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data(){ |
||||||
|
return{ |
||||||
|
accessData:[ |
||||||
|
{name:'生产计划',url:'plan',page:'/productionSchedulingPlan/productPlan'}, |
||||||
|
{name:'排产规则',url:'rule',page:'/productionSchedulingPlan/productRlue '}, |
||||||
|
{name:'生产订单',url:'product'}, |
||||||
|
{name:'工艺模板',url:'craft'}, |
||||||
|
{name:'质量检验',url:'quality'}, |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
turnPage(page){ |
||||||
|
if(page){ |
||||||
|
this.$router.push(page); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.quick_box{ |
||||||
|
padding: 20px; |
||||||
|
border-bottom: 1px solid #eee; |
||||||
|
height: 50%; |
||||||
|
|
||||||
|
.title_box{ |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.title{ |
||||||
|
font-weight: 550; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.access_box{ |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
margin-top: 10px; |
||||||
|
|
||||||
|
.access_box_item{ |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
width: 32%; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
margin-block: 10px; |
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
img{ |
||||||
|
width: 20px; |
||||||
|
margin-bottom: 5px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,69 @@ |
|||||||
|
<template> |
||||||
|
<div class="data_box"> |
||||||
|
<!-- 统计数据 --> |
||||||
|
<div class="data_box_item" :class="index == dataArr.length - 1 ? 'last' : ''" v-for="(item, index) in dataArr" |
||||||
|
:key="item.name"> |
||||||
|
<div> |
||||||
|
<img src="@/assets/data.png" alt=""> |
||||||
|
</div> |
||||||
|
<div class="right_data"> |
||||||
|
<div> {{ item.name }}</div> |
||||||
|
<div style="margin-top: 6px;"> <span style="font-size: 24px;margin-right: 10px;">{{ item.num }}</span>批 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
dataArr:[ |
||||||
|
{name:'生产批数',num:'24'}, |
||||||
|
{name:'烧结生产批数',num:'10'}, |
||||||
|
{name:'厂内批数',num:'6'}, |
||||||
|
{name:'外协批数',num:'2'}, |
||||||
|
{name:'绩效零件批数',num:'0'}, |
||||||
|
{name:'入库批数',num:'10'}, |
||||||
|
], |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
|
||||||
|
}, |
||||||
|
methods: { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.data_box { |
||||||
|
display: flex; |
||||||
|
padding: 20px; |
||||||
|
justify-content: space-between; |
||||||
|
border-top: 1px solid #eee; |
||||||
|
border-bottom: 1px solid #eee; |
||||||
|
|
||||||
|
.data_box_item { |
||||||
|
width: 16%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
border-right: 1px solid #eee; |
||||||
|
|
||||||
|
.right_data { |
||||||
|
margin-left: 10px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
// align-items: s; |
||||||
|
} |
||||||
|
|
||||||
|
&.last { |
||||||
|
border: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,63 @@ |
|||||||
|
<template> |
||||||
|
<div class="statics_box"> |
||||||
|
<!-- 统计报表 --> |
||||||
|
<div class="title"> |
||||||
|
统计报表 |
||||||
|
</div> |
||||||
|
<div class="table_box"> |
||||||
|
<div class="table_box_item" v-for="item in tableData" :key="item.name"> |
||||||
|
<img v-show="item.url == 'pro_table'" src="@/assets/pro_table.png" alt=""> |
||||||
|
<img v-show="item.url == 'craft_table'" src="@/assets/craft_table.png" alt=""> |
||||||
|
<img v-show="item.url == 'qua_table'" src="@/assets/qua_table.png" alt=""> |
||||||
|
<span>{{ item.name }}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data(){ |
||||||
|
return{ |
||||||
|
tableData:[ |
||||||
|
{name:'生产报表',url:'pro_table'}, |
||||||
|
{name:'工艺报表',url:'craft_table'}, |
||||||
|
{name:'质量报表',url:'qua_table'}, |
||||||
|
] |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.statics_box{ |
||||||
|
padding: 20px; |
||||||
|
height: 50%; |
||||||
|
|
||||||
|
.title{ |
||||||
|
font-weight: 550; |
||||||
|
} |
||||||
|
|
||||||
|
.table_box{ |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
margin-top: 10px; |
||||||
|
|
||||||
|
.table_box_item{ |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
width: 32%; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
margin-block: 10px; |
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
img{ |
||||||
|
width: 20px; |
||||||
|
margin-bottom: 5px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,133 @@ |
|||||||
|
<template> |
||||||
|
<div class="container"> |
||||||
|
<div class="left_box"> |
||||||
|
<div class="left_top"> |
||||||
|
<!-- <div class="top_title">欢迎回来！</div> --> |
||||||
|
<statistics-data></statistics-data> |
||||||
|
<efficiency></efficiency> |
||||||
|
</div> |
||||||
|
<div class="left_bottom"> |
||||||
|
<div class="left_box"> |
||||||
|
<output-table></output-table> |
||||||
|
</div> |
||||||
|
<div class="right_box"> |
||||||
|
<order-detail></order-detail> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="right_box"> |
||||||
|
<div class="right_top"> |
||||||
|
<quick-access></quick-access> |
||||||
|
<statistics-table></statistics-table> |
||||||
|
</div> |
||||||
|
<div class="right_bottom"> |
||||||
|
<notice></notice> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import statisticsData from './statisticsData.vue'; |
||||||
|
import efficiency from './efficiency.vue'; |
||||||
|
import orderDetail from './orderDetail.vue'; |
||||||
|
import quickAccess from './quickAccess.vue'; |
||||||
|
import statisticsTable from './statisticsTable.vue'; |
||||||
|
import notice from './notice.vue'; |
||||||
|
import outputTable from './outputTable.vue'; |
||||||
|
export default { |
||||||
|
components:{ |
||||||
|
statisticsData, |
||||||
|
efficiency, |
||||||
|
orderDetail, |
||||||
|
quickAccess, |
||||||
|
statisticsTable, |
||||||
|
notice, |
||||||
|
outputTable |
||||||
|
}, |
||||||
|
data(){ |
||||||
|
return{ |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.container{ |
||||||
|
width: 98%; |
||||||
|
height: 100%; |
||||||
|
// background: #fff; |
||||||
|
margin: 0 auto; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
.left_box{ |
||||||
|
width: 78%; |
||||||
|
// background: red; |
||||||
|
height: 100%; |
||||||
|
|
||||||
|
.left_top{ |
||||||
|
width: 100%; |
||||||
|
height: 52%; |
||||||
|
border-radius: 10px; |
||||||
|
background: #fff; |
||||||
|
|
||||||
|
.top_title{ |
||||||
|
padding: 20px; |
||||||
|
font-size: 25px; |
||||||
|
font-weight: 550; |
||||||
|
} |
||||||
|
} |
||||||
|
.left_bottom{ |
||||||
|
width: 100%; |
||||||
|
height: 46%; |
||||||
|
|
||||||
|
margin-top: 1%; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
.left_box{ |
||||||
|
width: 49%; |
||||||
|
height: 100%; |
||||||
|
border-radius: 10px; |
||||||
|
background: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.right_box{ |
||||||
|
width: 49%; |
||||||
|
height: 100%; |
||||||
|
border-radius: 10px; |
||||||
|
background: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.right_box{ |
||||||
|
width: 21%; |
||||||
|
height: 100%; |
||||||
|
|
||||||
|
.right_top{ |
||||||
|
width: 100%; |
||||||
|
height: 45%; |
||||||
|
border-radius: 10px; |
||||||
|
background: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.right_bottom{ |
||||||
|
width: 100%; |
||||||
|
height: 53%; |
||||||
|
margin-top: 10px; |
||||||
|
border-radius: 10px; |
||||||
|
background: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue