308 lines
10 KiB
Python
308 lines
10 KiB
Python
<template>
|
||
<div class="dashboard-container">
|
||
<el-card style="margin-bottom: 5px">
|
||
<div class="cards">
|
||
<div class="cardFirstText">本月：2</div>
|
||
<div class="cardSecondText">20</div>
|
||
<div>合同总数</div>
|
||
</div>
|
||
<div class="cards">
|
||
<div class="cardFirstText">本月：20</div>
|
||
<div class="cardSecondText">20</div>
|
||
<div>生产订单总数</div>
|
||
</div>
|
||
<div class="cards">
|
||
<div class="cardFirstText">在制：10</div>
|
||
<div class="cardSecondText">20</div>
|
||
<div>已排产生产任务</div>
|
||
</div>
|
||
<div class="cards">
|
||
<div class="cardFirstText">本月：4</div>
|
||
<div class="cardSecondText">2</div>
|
||
<div>累计交付产品数</div>
|
||
</div>
|
||
<div class="cards">
|
||
<div class="cardFirstText">本月：2</div>
|
||
<div class="cardSecondText">2</div>
|
||
<div>累计不合格产品数</div>
|
||
</div>
|
||
</el-card>
|
||
<el-row :gutter="5" style="margin-bottom: 5px">
|
||
<el-col :span="12">
|
||
<el-card>
|
||
<div style="display: flex">
|
||
<div style="height: 35px; line-height:35px;font-size: 24px;font-weight: bold;vertical-align: middle">任务排期</div>
|
||
<el-date-picker
|
||
v-model="date"
|
||
type="month"
|
||
placeholder="查询日期"
|
||
range-separator="至"
|
||
format="yyyy 年 MM 月"
|
||
value-format="yyyy-MM"
|
||
>
|
||
</el-date-picker>
|
||
<div style="display: flex;border: 1px solid #aaaaaa;border-radius: 6px;height: 35px; line-height:35px;">
|
||
<div style=" cursor: pointer;width: 60px;text-align:center;border-right: 1px solid #aaaaaa;">周</div>
|
||
<div style="width: 60px;text-align:center;border-right: 1px solid #aaaaaa;">月</div>
|
||
<div style="width: 60px;text-align:center;">三个月</div>
|
||
</div>
|
||
</div>
|
||
<el-table
|
||
v-loading="listLoading"
|
||
:data="list"
|
||
border fit stripe
|
||
height="300"
|
||
>
|
||
<el-table-column type="index" width="50" />
|
||
<el-table-column label="任务编号">
|
||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="产品名称">
|
||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="产品型号">
|
||
<template slot-scope="scope">{{ scope.row.card }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="生产数量">
|
||
<template slot-scope="scope">{{ scope.row.sco }}</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-card>
|
||
<div style="display: flex">
|
||
<div style="height: 35px; line-height:35px;font-size: 24px;font-weight: bold;vertical-align: middle">成品率</div>
|
||
<el-date-picker
|
||
v-model="date"
|
||
type="month"
|
||
placeholder="查询日期"
|
||
range-separator="至"
|
||
format="yyyy 年 MM 月"
|
||
value-format="yyyy-MM"
|
||
>
|
||
</el-date-picker>
|
||
<div style="display: flex;border: 1px solid #aaaaaa;border-radius: 6px;height: 35px; line-height:35px;">
|
||
<div style=" cursor: pointer;width: 60px;text-align:center;border-right: 1px solid #aaaaaa;">周</div>
|
||
<div style="width: 60px;text-align:center;border-right: 1px solid #aaaaaa;">月</div>
|
||
<div style="width: 60px;text-align:center;">三个月</div>
|
||
</div>
|
||
</div>
|
||
<div id="chartColumn" style="width:100%; height:300px;"></div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="5" style="margin-bottom: 5px">
|
||
<el-col :span="12">
|
||
<el-card>
|
||
<div style="display: flex">
|
||
<div style="height: 35px; line-height:35px;font-size: 24px;font-weight: bold;vertical-align: middle">库存列表</div>
|
||
<div class="block">
|
||
<el-pagination
|
||
:current-page.sync="currentPage"
|
||
:page-size="100"
|
||
layout="prev, pager, next, jumper"
|
||
:total="1000">
|
||
</el-pagination>
|
||
</div>
|
||
</div>
|
||
<el-table
|
||
v-loading="listLoading"
|
||
:data="list"
|
||
border fit stripe
|
||
height="300"
|
||
>
|
||
<el-table-column label="物料编号">
|
||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="物料名称">
|
||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="规格型号">
|
||
<template slot-scope="scope">{{ scope.row.card }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="物料类型">
|
||
<template slot-scope="scope">{{ scope.row.sco }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="单位">
|
||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="库存">
|
||
<template slot-scope="scope">{{ scope.row.card }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="仓库">
|
||
<template slot-scope="scope">{{ scope.row.sco }}</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-card style="height: 350px">
|
||
<div style="display: flex">
|
||
<div style="height: 35px; line-height:35px;font-size: 24px;font-weight: bold;vertical-align: middle">提醒</div>
|
||
<div class="block">
|
||
<el-pagination
|
||
:current-page.sync="currentPage"
|
||
:page-size="100"
|
||
layout="prev, pager, next, jumper"
|
||
:total="1000">
|
||
</el-pagination>
|
||
</div>
|
||
</div>
|
||
<el-badge :value="count.total_count" class="item" @click.native="gotoTicketPage">
|
||
<el-icon class="el-icon-s-management" style="font-size: 70px;color: #d29898"></el-icon>
|
||
</el-badge>
|
||
<div></div>
|
||
<div class="dashboard-text">name: {{ name }}</div>
|
||
<div class="dashboard-text">perms: <span v-for="perm in perms" :key="perm">{{ perm }}</span></div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import echarts from 'echarts'
|
||
import { mapGetters } from 'vuex';
|
||
export default {
|
||
name: 'Dashboard',
|
||
data() {
|
||
return {
|
||
chartColumn: null,
|
||
currentPage:1,
|
||
total_count:1,
|
||
date:'2021-12',
|
||
list:[
|
||
{id:1,name:'HIehd9',card:'3337',sco:'REF-32'},
|
||
{id:1,name:'HIehd9',card:'3337',sco:'REF-32'},
|
||
{id:1,name:'HIehd9',card:'3337',sco:'REF-32'}
|
||
],
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters([
|
||
'name',
|
||
'perms',
|
||
'count'
|
||
])
|
||
},
|
||
methods:{
|
||
gotoTicketPage(){
|
||
let path = this.$route.path;
|
||
if(path==='/workflow/ticket'){
|
||
this.$message.success("已在当前页面");
|
||
}else{
|
||
this.$router.push({name:'ticket',params:{}})
|
||
}
|
||
},
|
||
drawChart() {
|
||
this.chartColumn = echarts.init(document.getElementById('chartColumn'));
|
||
this.chartColumn.setOption({
|
||
// title: { text: '成品率' },
|
||
/*tooltip: {
|
||
trigger:'axis',
|
||
aXisPointer:{
|
||
type:'cross'
|
||
},
|
||
formatter(params){
|
||
for(let x in params){
|
||
return params[x].name +":"+params[x].data+"%";
|
||
}
|
||
},
|
||
},*/
|
||
grid: {
|
||
top: '3%',
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '1%',
|
||
containLabel: true
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: function (params) {
|
||
var color = params.color;//图例颜色
|
||
// var color = "red";//图例颜色
|
||
var htmlStr ='<div>';
|
||
htmlStr += params.name + '<br/>';
|
||
htmlStr += '<span style="height:10px;width:10px;font-size:12px;border-radius:5px;margin-right:5px;font-family:Consolas;display:inline-block;background:'+color+';"></span>';
|
||
htmlStr += params.seriesName + '：'+params.value + '%';
|
||
htmlStr += '</div>';
|
||
return htmlStr;
|
||
}
|
||
},
|
||
xAxis: {
|
||
data: ["冷加工", "热弯", "钢化", "镀膜", "夹层", "包边", "装框", "成品"]
|
||
},
|
||
yAxis: {},
|
||
series: [{
|
||
name: '成品率',
|
||
type: 'bar',
|
||
barWidth: 40,
|
||
data: [80,60,60, 70, 76, 80, 90, 70],
|
||
label: {
|
||
show: true, //开启显示
|
||
position: 'top', //在上方显示
|
||
formatter: '{c}%',//显示百分号
|
||
textStyle: { //数值样式
|
||
color: 'black',//字体颜色
|
||
fontSize: 10//字体大小
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: function(params) {
|
||
var colorList = [
|
||
'#5e7e54','#e44f2f','#81b6b2','#eba422',
|
||
'#1bcde4','#b61b08','#84eb84','#d8d417'
|
||
];
|
||
return colorList[params.dataIndex]
|
||
},
|
||
|
||
}
|
||
},
|
||
}]
|
||
});
|
||
},
|
||
},
|
||
mounted () {
|
||
this.drawChart()
|
||
},
|
||
updated () {
|
||
this.drawChart()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.dashboard {
|
||
&-container {
|
||
margin: 5px 6px;
|
||
}
|
||
&-text {
|
||
font-size: 30px;
|
||
line-height: 46px;
|
||
}
|
||
}
|
||
.cards{
|
||
width: 240px;
|
||
color: #ffffff;
|
||
background: #abccec;
|
||
text-align: center;
|
||
border-radius: 4px;
|
||
padding: 10px;
|
||
line-height: 30px;
|
||
float: left;
|
||
margin: 15px;
|
||
.cardFirstText{
|
||
text-align: left;
|
||
padding-left: 20px;
|
||
}
|
||
.cardSecondText{
|
||
font-size: 30px;
|
||
}
|
||
}
|
||
.cards:hover{
|
||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||
}
|
||
</style>
|