工作台页面添加

menu_style
jinna 7 months ago
parent f50a85b49b
commit 1c73633db6
  1. BIN
      src/assets/craft.png
  2. BIN
      src/assets/craft_table.png
  3. BIN
      src/assets/data.png
  4. BIN
      src/assets/output.png
  5. BIN
      src/assets/plan.png
  6. BIN
      src/assets/pro_table.png
  7. BIN
      src/assets/product.png
  8. BIN
      src/assets/product1.png
  9. BIN
      src/assets/qua_table.png
  10. BIN
      src/assets/quality.png
  11. BIN
      src/assets/right_pull1.png
  12. BIN
      src/assets/right_pull_white1.png
  13. BIN
      src/assets/rule.png
  14. 4
      src/main.js
  15. 50
      src/views/desk/notice.vue
  16. 135
      src/views/wel/components/efficiency.vue
  17. 99
      src/views/wel/components/notice.vue
  18. 191
      src/views/wel/components/orderDetail.vue
  19. 81
      src/views/wel/components/outputTable.vue
  20. 82
      src/views/wel/components/quickAccess.vue
  21. 69
      src/views/wel/components/statisticsData.vue
  22. 63
      src/views/wel/components/statisticsTable.vue
  23. 133
      src/views/wel/components/workbase.vue
  24. 1352
      src/views/wel/index.vue

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 891 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 855 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 929 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 447 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 424 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 725 B

@ -34,6 +34,7 @@ import codeSetting from './views/tool/codesetting.vue';
import formSetting from './views/tool/formsetting.vue';
import tenantPackage from './views/system/tenantpackage.vue';
import tenantDatasource from './views/system/tenantdatasource.vue';
import * as echarts from 'echarts';
window.$crudCommon = crudCommon;
debug();
@ -42,6 +43,9 @@ const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component);
}
// 全局挂载 echarts
app.config.globalProperties.$echarts = echarts
app.component('basicContainer', basicContainer);
app.component('basicBlock', basicBlock);
app.component('highlight', highlight);

@ -294,13 +294,49 @@ export default {
values.releaseTimeRange = null;
}
this.loading = true;
getList(page.currentPage, page.pageSize, values).then(res => {
const data = res.data.data;
this.page.total = data.total;
this.data = data.records;
this.loading = false;
this.selectionClear();
});
// getList(page.currentPage, page.pageSize, values).then(res => {
// const data = res.data.data;
// this.page.total = data.total;
// this.data = data.records;
// this.loading = false;
// this.selectionClear();
// });
this.data = [
{
"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": "消息通知"
},
]
this.page.total = this.data.length
this.loading = false;
},
},
};

@ -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…
Cancel
Save