|
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> |
||||