feat: 增加了车间看板
This commit is contained in:
parent
c5b6eb4f58
commit
f3ece1dd0e
Binary file not shown.
|
After Width: | Height: | Size: 229 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
File diff suppressed because one or more lines are too long
|
|
@ -1936,15 +1936,37 @@ const routes = [
|
|||
},
|
||||
//车间看板
|
||||
{
|
||||
"path": "/bigScreenP",
|
||||
"name": "bigScreenP",
|
||||
"path": "/bigScreenP_10",
|
||||
"name": "bigScreenP_10",
|
||||
"meta": {
|
||||
"title": "车间看板",
|
||||
"title": "10车间",
|
||||
"icon": "el-icon-trend-charts",
|
||||
"perms": ["bigScreenP"],
|
||||
"fullpage": true,
|
||||
},
|
||||
"component": "bigScreen/index_photon"
|
||||
"component": "bigScreen/index_10dept.vue"
|
||||
},
|
||||
{
|
||||
"path": "/bigScreenP_7",
|
||||
"name": "bigScreenP_7",
|
||||
"meta": {
|
||||
"title": "7车间",
|
||||
"icon": "el-icon-trend-charts",
|
||||
"perms": ["bigScreenP"],
|
||||
"fullpage": true,
|
||||
},
|
||||
"component": "bigScreen/index_7dept.vue"
|
||||
},
|
||||
{
|
||||
"path": "/bigScreenP_6",
|
||||
"name": "bigScreenP_6",
|
||||
"meta": {
|
||||
"title": "6车间",
|
||||
"icon": "el-icon-trend-charts",
|
||||
"perms": ["bigScreenP"],
|
||||
"fullpage": true,
|
||||
},
|
||||
"component": "bigScreen/index_6dept.vue"
|
||||
},
|
||||
//统计分析
|
||||
{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,417 @@
|
|||
<template>
|
||||
<el-container class="dashboard">
|
||||
<el-header class="header">
|
||||
<div>10车间生产数据大看板</div>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<el-row style="height: 60%" :gutter="10">
|
||||
<el-col :xs="24" :md="10">
|
||||
<el-row style="height: 29%" :gutter="10">
|
||||
<el-col :xs="8" :md="8">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>今日任务</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<div class="boxmain flex_center bigdata border">
|
||||
<span>ZB2</span>
|
||||
<span
|
||||
style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">130</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="8" :md="8">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>昨日合格</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<div class="boxmain flex_center bigdata border">
|
||||
<span
|
||||
style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">1200</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="8" :md="8">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>累计合格</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<div class="boxmain flex_center bigdata border">
|
||||
<span
|
||||
style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">12000</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="height: 1%;"></div>
|
||||
<el-row style="height:70%">
|
||||
<el-col>
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>人员到岗</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<div class="boxmain">
|
||||
<!-- <el-table :data="workerData"
|
||||
:row-style="{ backgroundColor: 'rgba(0,0,0,0)', color: 'white' }"
|
||||
:header-row-style="{ backgroundColor: 'rgba(0,0,0,0)', fontSize: '14px' }">
|
||||
<el-table-column prop="name" label="姓名" width="180" />
|
||||
<el-table-column prop="team" label="班次" width="180" />
|
||||
<el-table-column prop="post" label="岗位" />
|
||||
<el-table-column prop="state" label="状态" />
|
||||
</el-table> -->
|
||||
<table border="0" cellspacing="16">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>产品名称</th>
|
||||
<th>型号</th>
|
||||
<th>计划周期</th>
|
||||
<th>完成进度</th>
|
||||
<th>产量</th>
|
||||
<th>状态</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th>光纤预制管</th>
|
||||
<td>8098</td>
|
||||
<td>19.80%</td>
|
||||
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="100"
|
||||
status="green" /></td>
|
||||
<td>368</td>
|
||||
<td><el-tag type="" effect="light">已完成</el-tag></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th>光纤预制管</th>
|
||||
<td>7506</td>
|
||||
<td>6.70%</td>
|
||||
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="70"
|
||||
status="success" /></td>
|
||||
<td>339</td>
|
||||
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th>光纤预制管</th>
|
||||
<td>3261</td>
|
||||
<td>32.30%</td>
|
||||
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="70"
|
||||
status="warning" /></td>
|
||||
<td>325</td>
|
||||
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<th>光纤预制管</th>
|
||||
<td>1993</td>
|
||||
<td> 201%</td>
|
||||
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="30"
|
||||
status="exception" /></td>
|
||||
<td> 199</td>
|
||||
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="14">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>任务进度</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<div class="boxmain">
|
||||
<table border="0" cellspacing="16">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>产品名称</th>
|
||||
<th>型号</th>
|
||||
<th>计划周期</th>
|
||||
<th>完成进度</th>
|
||||
<th>产量</th>
|
||||
<th>状态</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th>光纤预制管</th>
|
||||
<td>8098</td>
|
||||
<td>19.80%</td>
|
||||
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="100"
|
||||
status="green" /></td>
|
||||
<td>368</td>
|
||||
<td><el-tag type="" effect="light">已完成</el-tag></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th>光纤预制管</th>
|
||||
<td>7506</td>
|
||||
<td>6.70%</td>
|
||||
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="70"
|
||||
status="success" /></td>
|
||||
<td>339</td>
|
||||
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th>光纤预制管</th>
|
||||
<td>3261</td>
|
||||
<td>32.30%</td>
|
||||
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="70"
|
||||
status="warning" /></td>
|
||||
<td>325</td>
|
||||
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<th>光纤预制管</th>
|
||||
<td>1993</td>
|
||||
<td> 201%</td>
|
||||
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="30"
|
||||
status="exception" /></td>
|
||||
<td> 199</td>
|
||||
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="height: 1%;"></div>
|
||||
<el-row style="height:39%" :gutter="10">
|
||||
<el-col :xs="24" :md="9">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>全年生产统计</div>
|
||||
</div>
|
||||
<div class="boxmain" id="chart1">
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="9">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>本月合格率统计</div>
|
||||
</div>
|
||||
<div class="boxmain" id="chart2">
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="6">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>昨日合格统计</div>
|
||||
</div>
|
||||
<div class="boxmain" id="chart3">
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
<style scoped>
|
||||
.dashboard {
|
||||
background: #000d4a;
|
||||
/* url("/public/img/bg.jpg"); */
|
||||
color: #fff;
|
||||
font-family: "微软雅黑" !important;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: url("/public/img/head_bg.png");
|
||||
background-size: 100% 100%;
|
||||
font-size: 28px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* .el-header {
|
||||
font-family: Inter, "-apple-system", BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "noto sans", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
} */
|
||||
|
||||
.box {
|
||||
background: rgba(6, 48, 109, .3);
|
||||
height: 100%;
|
||||
padding: 2px 2px 2px 2px;
|
||||
border-radius: 2%;
|
||||
}
|
||||
|
||||
.boxtitle {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.boxlabel {
|
||||
width: 6px;
|
||||
background: #49bcf7;
|
||||
border-radius: 30%;
|
||||
margin-right: 4px
|
||||
}
|
||||
|
||||
.boxmain {
|
||||
height: calc(100% - 22px);
|
||||
margin: 0px 4px 0px 4px;
|
||||
}
|
||||
|
||||
.flex_center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.border {
|
||||
border: 1px dashed #49bcf7;
|
||||
}
|
||||
|
||||
.bigdata {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
table th {
|
||||
font-size: 14px;
|
||||
background: rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
table td {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, .6);
|
||||
}
|
||||
|
||||
table th,
|
||||
table td {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .3);
|
||||
padding: .1rem 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
function deepCopy(obj) {
|
||||
return JSON.parse(JSON.stringify(obj));
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
basicOption: {
|
||||
backgroundColor: '',
|
||||
xAxis: {
|
||||
data: ['一月', '二月', '三月', '四月', '五月', '六月'],
|
||||
},
|
||||
yAxis: { type: 'value' },
|
||||
series: [
|
||||
{
|
||||
name: '销量',
|
||||
type: 'bar',
|
||||
barwidth: 10,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#83bff6' },
|
||||
{ offset: 0.5, color: '#188df0' },
|
||||
{ offset: 1, color: '#188df0' }
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#2378f7' },
|
||||
{ offset: 0.7, color: '#2378f7' },
|
||||
{ offset: 1, color: '#83bff6' }
|
||||
])
|
||||
}
|
||||
},
|
||||
data: [5, 20, 36, 10, 10, 20]
|
||||
}
|
||||
],
|
||||
grid: { // 让图表占满容器
|
||||
top: "10%",
|
||||
left: "12%",
|
||||
right: "0px",
|
||||
bottom: "10%"
|
||||
}
|
||||
},
|
||||
workerData: [
|
||||
{
|
||||
name: '张三',
|
||||
team: 'Tom',
|
||||
post: '岗位1',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
name: '张三',
|
||||
team: 'Tom',
|
||||
post: '岗位1',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
name: '张三',
|
||||
team: 'Tom',
|
||||
post: '岗位1',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
name: '张三',
|
||||
team: 'Tom',
|
||||
post: '岗位1',
|
||||
state: 1
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setChart("chart1");
|
||||
let chart2Option = deepCopy(this.basicOption)
|
||||
chart2Option.series[0].type = 'line'
|
||||
this.setChart("chart2", chart2Option)
|
||||
let chart3Option = deepCopy(this.basicOption)
|
||||
chart3Option.series[0].type = 'pie'
|
||||
chart3Option.series[0].itemStyle = {}
|
||||
chart3Option.series[0].emphasis = {}
|
||||
this.setChart("chart3", chart3Option)
|
||||
},
|
||||
methods: {
|
||||
setChart(name, option = null) {
|
||||
// 根据name 渲染数据, option需填写，否则option为模拟数据
|
||||
var myChart = echarts.getInstanceByDom(document.getElementById(name));
|
||||
if (myChart == undefined) {
|
||||
myChart = echarts.init(document.getElementById(name), 'dark', { renderer: 'svg' });
|
||||
}
|
||||
if (option == null) {
|
||||
option = Object.assign({}, this.basicOption)
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
try {
|
||||
myChart.setOption(option);
|
||||
} catch (error) { }
|
||||
}, 500)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,395 @@
|
|||
<template>
|
||||
<el-container class="dashboard">
|
||||
<el-header class="header">
|
||||
<div>加工车间生产数据大看板</div>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<el-row style="height: 60%" :gutter="10">
|
||||
<el-col :xs="24" :md="10">
|
||||
<el-row style="height: 29%" :gutter="10">
|
||||
<el-col :xs="24" :md="24">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>今日任务</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<div class="boxmain bigdata border">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div
|
||||
style="display:flex;align-items:center;justify-content:space-around;border: 1px solid transparent;margin-top:6%;">
|
||||
<div>ZB2</div>
|
||||
<div
|
||||
style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont;">
|
||||
130</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div
|
||||
style="display:flex;align-items:center;justify-content:space-around;border: 1px solid transparent;margin-top:6%">
|
||||
<div>ZJ2</div>
|
||||
<div
|
||||
style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont;">
|
||||
130</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="height: 1%;"></div>
|
||||
<el-row style="height:70%">
|
||||
<el-col>
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>发货情况</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<div class="boxmain">
|
||||
<!-- <el-table :data="workerData"
|
||||
:row-style="{ backgroundColor: 'rgba(0,0,0,0)', color: 'white' }"
|
||||
:header-row-style="{ backgroundColor: 'rgba(0,0,0,0)', fontSize: '14px' }">
|
||||
<el-table-column prop="name" label="姓名" width="180" />
|
||||
<el-table-column prop="team" label="班次" width="180" />
|
||||
<el-table-column prop="post" label="岗位" />
|
||||
<el-table-column prop="state" label="状态" />
|
||||
</el-table> -->
|
||||
<table border="0" cellspacing="16">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>产品名称</th>
|
||||
<th>型号</th>
|
||||
<th>计划周期</th>
|
||||
<th>完成进度</th>
|
||||
<th>产量</th>
|
||||
<th>状态</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th>光纤预制管</th>
|
||||
<td>8098</td>
|
||||
<td>19.80%</td>
|
||||
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="100"
|
||||
status="green" /></td>
|
||||
<td>368</td>
|
||||
<td><el-tag type="" effect="light">已完成</el-tag></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th>光纤预制管</th>
|
||||
<td>7506</td>
|
||||
<td>6.70%</td>
|
||||
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="70"
|
||||
status="success" /></td>
|
||||
<td>339</td>
|
||||
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th>光纤预制管</th>
|
||||
<td>3261</td>
|
||||
<td>32.30%</td>
|
||||
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="70"
|
||||
status="warning" /></td>
|
||||
<td>325</td>
|
||||
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<th>光纤预制管</th>
|
||||
<td>1993</td>
|
||||
<td> 201%</td>
|
||||
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="30"
|
||||
status="exception" /></td>
|
||||
<td> 199</td>
|
||||
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="14">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>昨日工序进度</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<div class="boxmain">
|
||||
<table border="0" cellspacing="16">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>产品名称</th>
|
||||
<th>型号</th>
|
||||
<th>计划周期</th>
|
||||
<th>完成进度</th>
|
||||
<th>产量</th>
|
||||
<th>状态</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th>光纤预制管</th>
|
||||
<td>8098</td>
|
||||
<td>19.80%</td>
|
||||
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="100"
|
||||
status="green" /></td>
|
||||
<td>368</td>
|
||||
<td><el-tag type="" effect="light">已完成</el-tag></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th>光纤预制管</th>
|
||||
<td>7506</td>
|
||||
<td>6.70%</td>
|
||||
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="70"
|
||||
status="success" /></td>
|
||||
<td>339</td>
|
||||
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th>光纤预制管</th>
|
||||
<td>3261</td>
|
||||
<td>32.30%</td>
|
||||
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="70"
|
||||
status="warning" /></td>
|
||||
<td>325</td>
|
||||
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<th>光纤预制管</th>
|
||||
<td>1993</td>
|
||||
<td> 201%</td>
|
||||
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="30"
|
||||
status="exception" /></td>
|
||||
<td> 199</td>
|
||||
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="height: 1%;"></div>
|
||||
<el-row style="height:39%" :gutter="10">
|
||||
<el-col :xs="24" :md="12">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>本月生产统计</div>
|
||||
</div>
|
||||
<div class="boxmain" id="chart1">
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="12">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>本月交付统计</div>
|
||||
</div>
|
||||
<div class="boxmain" id="chart2">
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
<style scoped>
|
||||
.dashboard {
|
||||
background: #000d4a url("/public/img/bg.jpg");
|
||||
|
||||
color: #fff;
|
||||
font-family: "微软雅黑" !important;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: url("/public/img/head_bg.png");
|
||||
background-size: 100% 100%;
|
||||
font-size: 28px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* .el-header {
|
||||
font-family: Inter, "-apple-system", BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "noto sans", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
} */
|
||||
|
||||
.box {
|
||||
background: rgba(0, 0, 0, .2);
|
||||
height: 100%;
|
||||
padding: 2px 2px 2px 2px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.boxtitle {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.boxlabel {
|
||||
width: 6px;
|
||||
background: #49bcf7;
|
||||
border-radius: 30%;
|
||||
margin-right: 4px
|
||||
}
|
||||
|
||||
.boxmain {
|
||||
height: calc(100% - 22px);
|
||||
margin: 0px 4px 0px 4px;
|
||||
}
|
||||
|
||||
.flex_center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.border {
|
||||
border: 1px dashed #49bcf7;
|
||||
}
|
||||
|
||||
.bigdata {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
table th {
|
||||
font-size: 14px;
|
||||
background: rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
table td {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, .6);
|
||||
}
|
||||
|
||||
table th,
|
||||
table td {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .3);
|
||||
padding: .1rem 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
function deepCopy(obj) {
|
||||
return JSON.parse(JSON.stringify(obj));
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
basicOption: {
|
||||
backgroundColor: '',
|
||||
xAxis: {
|
||||
data: ['一月', '二月', '三月', '四月', '五月', '六月'],
|
||||
},
|
||||
yAxis: { type: 'value' },
|
||||
series: [
|
||||
{
|
||||
name: '销量',
|
||||
type: 'bar',
|
||||
barwidth: 10,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#83bff6' },
|
||||
{ offset: 0.5, color: '#188df0' },
|
||||
{ offset: 1, color: '#188df0' }
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#2378f7' },
|
||||
{ offset: 0.7, color: '#2378f7' },
|
||||
{ offset: 1, color: '#83bff6' }
|
||||
])
|
||||
}
|
||||
},
|
||||
data: [5, 20, 36, 10, 10, 20]
|
||||
}
|
||||
],
|
||||
grid: { // 让图表占满容器
|
||||
top: "10%",
|
||||
left: "12%",
|
||||
right: "0px",
|
||||
bottom: "10%"
|
||||
}
|
||||
},
|
||||
workerData: [
|
||||
{
|
||||
name: '张三',
|
||||
team: 'Tom',
|
||||
post: '岗位1',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
name: '张三',
|
||||
team: 'Tom',
|
||||
post: '岗位1',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
name: '张三',
|
||||
team: 'Tom',
|
||||
post: '岗位1',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
name: '张三',
|
||||
team: 'Tom',
|
||||
post: '岗位1',
|
||||
state: 1
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setChart("chart1");
|
||||
let chart2Option = deepCopy(this.basicOption)
|
||||
chart2Option.series[0].type = 'line'
|
||||
this.setChart("chart2", chart2Option)
|
||||
},
|
||||
methods: {
|
||||
setChart(name, option = null) {
|
||||
// 根据name 渲染数据, option需填写，否则option为模拟数据
|
||||
var myChart = echarts.getInstanceByDom(document.getElementById(name));
|
||||
if (myChart == undefined) {
|
||||
myChart = echarts.init(document.getElementById(name), 'dark', { renderer: 'svg' });
|
||||
}
|
||||
if (option == null) {
|
||||
option = Object.assign({}, this.basicOption)
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
try {
|
||||
myChart.setOption(option);
|
||||
} catch (error) { }
|
||||
}, 500)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,383 @@
|
|||
<template>
|
||||
<el-container class="dashboard">
|
||||
<el-header class="header">
|
||||
<div>7车间生产数据大看板</div>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<el-row style="height: 60%" :gutter="10">
|
||||
<el-col :xs="24" :md="10">
|
||||
<el-row style="height: 29%">
|
||||
<el-col>
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>今日任务</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<div class="boxmain flex_center bigdata border">
|
||||
<span>ZJ2</span>
|
||||
<span
|
||||
style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">600</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="height: 1%;"></div>
|
||||
<el-row style="height:70%">
|
||||
<el-col>
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>生产进度</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<div class="boxmain">
|
||||
<table border="0" cellspacing="16">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>产品名称</th>
|
||||
<th>型号</th>
|
||||
<th>计划周期</th>
|
||||
<th>完成进度</th>
|
||||
<th>产量</th>
|
||||
<th>状态</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th>光纤预制棒</th>
|
||||
<td>8098</td>
|
||||
<td>19.80%</td>
|
||||
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="100"
|
||||
status="green" /></td>
|
||||
<td>368</td>
|
||||
<td><el-tag type="" effect="light">已完成</el-tag></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th>光纤预制棒</th>
|
||||
<td>7506</td>
|
||||
<td>6.70%</td>
|
||||
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="70"
|
||||
status="success" /></td>
|
||||
<td>339</td>
|
||||
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th>光纤预制棒</th>
|
||||
<td>3261</td>
|
||||
<td>32.30%</td>
|
||||
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="70"
|
||||
status="warning" /></td>
|
||||
<td>325</td>
|
||||
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<th>光纤预制棒</th>
|
||||
<td>1993</td>
|
||||
<td> 201%</td>
|
||||
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="30"
|
||||
status="exception" /></td>
|
||||
<td> 199</td>
|
||||
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="14">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>生产线</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<div class="boxmain">
|
||||
<table border="0" cellspacing="16">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>产品名称</th>
|
||||
<th>型号</th>
|
||||
<th>计划周期</th>
|
||||
<th>完成进度</th>
|
||||
<th>产量</th>
|
||||
<th>状态</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<th>光纤预制棒</th>
|
||||
<td>8098</td>
|
||||
<td>19.80%</td>
|
||||
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="100"
|
||||
status="green" /></td>
|
||||
<td>368</td>
|
||||
<td><el-tag type="" effect="light">已完成</el-tag></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<th>光纤预制棒</th>
|
||||
<td>7506</td>
|
||||
<td>6.70%</td>
|
||||
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="70"
|
||||
status="success" /></td>
|
||||
<td>339</td>
|
||||
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<th>光纤预制棒</th>
|
||||
<td>3261</td>
|
||||
<td>32.30%</td>
|
||||
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="70"
|
||||
status="warning" /></td>
|
||||
<td>325</td>
|
||||
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<th>光纤预制棒</th>
|
||||
<td>1993</td>
|
||||
<td> 201%</td>
|
||||
<td><el-progress :text-inside="true" :stroke-width="14" :percentage="30"
|
||||
status="exception" /></td>
|
||||
<td> 199</td>
|
||||
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="height: 1%;"></div>
|
||||
<el-row style="height:39%" :gutter="10">
|
||||
<el-col :xs="24" :md="9">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>本月生产统计</div>
|
||||
</div>
|
||||
<div class="boxmain" id="chart1">
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="9">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>本月合格率统计</div>
|
||||
</div>
|
||||
<div class="boxmain" id="chart2">
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="6">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>昨日合格统计</div>
|
||||
</div>
|
||||
<div class="boxmain" id="chart3">
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
<style scoped>
|
||||
.dashboard {
|
||||
background: #000d4a;
|
||||
/* url("/public/img/bg.jpg"); */
|
||||
color: #fff;
|
||||
font-family: "微软雅黑" !important;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: url("/public/img/head_bg.png");
|
||||
background-size: 100% 100%;
|
||||
font-size: 28px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* .el-header {
|
||||
font-family: Inter, "-apple-system", BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "noto sans", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
} */
|
||||
|
||||
.box {
|
||||
background: rgba(6, 48, 109, .3);
|
||||
height: 100%;
|
||||
padding: 2px 2px 2px 2px;
|
||||
border-radius: 2%;
|
||||
}
|
||||
|
||||
.boxtitle {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.boxlabel {
|
||||
width: 6px;
|
||||
background: #49bcf7;
|
||||
border-radius: 30%;
|
||||
margin-right: 4px
|
||||
}
|
||||
|
||||
.boxmain {
|
||||
height: calc(100% - 22px);
|
||||
margin: 0px 4px 0px 4px;
|
||||
}
|
||||
|
||||
.flex_center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.border {
|
||||
border: 1px dashed #49bcf7;
|
||||
}
|
||||
|
||||
.bigdata {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
table th {
|
||||
font-size: 14px;
|
||||
background: rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
table td {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, .6);
|
||||
}
|
||||
|
||||
table th,
|
||||
table td {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .3);
|
||||
padding: .1rem 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
function deepCopy(obj) {
|
||||
return JSON.parse(JSON.stringify(obj));
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
basicOption: {
|
||||
backgroundColor: '',
|
||||
xAxis: {
|
||||
data: ['一月', '二月', '三月', '四月', '五月', '六月'],
|
||||
},
|
||||
yAxis: { type: 'value' },
|
||||
series: [
|
||||
{
|
||||
name: '销量',
|
||||
type: 'bar',
|
||||
barwidth: 10,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#83bff6' },
|
||||
{ offset: 0.5, color: '#188df0' },
|
||||
{ offset: 1, color: '#188df0' }
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#2378f7' },
|
||||
{ offset: 0.7, color: '#2378f7' },
|
||||
{ offset: 1, color: '#83bff6' }
|
||||
])
|
||||
}
|
||||
},
|
||||
data: [5, 20, 36, 10, 10, 20]
|
||||
}
|
||||
],
|
||||
grid: { // 让图表占满容器
|
||||
top: "10%",
|
||||
left: "12%",
|
||||
right: "0px",
|
||||
bottom: "10%"
|
||||
}
|
||||
},
|
||||
workerData: [
|
||||
{
|
||||
name: '张三',
|
||||
team: 'Tom',
|
||||
post: '岗位1',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
name: '张三',
|
||||
team: 'Tom',
|
||||
post: '岗位1',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
name: '张三',
|
||||
team: 'Tom',
|
||||
post: '岗位1',
|
||||
state: 1
|
||||
},
|
||||
{
|
||||
name: '张三',
|
||||
team: 'Tom',
|
||||
post: '岗位1',
|
||||
state: 1
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setChart("chart1");
|
||||
let chart2Option = deepCopy(this.basicOption)
|
||||
chart2Option.series[0].type = 'line'
|
||||
this.setChart("chart2", chart2Option)
|
||||
let chart3Option = deepCopy(this.basicOption)
|
||||
chart3Option.series[0].type = 'pie'
|
||||
chart3Option.series[0].itemStyle = {}
|
||||
chart3Option.series[0].emphasis = {}
|
||||
this.setChart("chart3", chart3Option)
|
||||
},
|
||||
methods: {
|
||||
setChart(name, option = null) {
|
||||
// 根据name 渲染数据, option需填写，否则option为模拟数据
|
||||
var myChart = echarts.getInstanceByDom(document.getElementById(name));
|
||||
if (myChart == undefined) {
|
||||
myChart = echarts.init(document.getElementById(name), 'dark', { renderer: 'svg' });
|
||||
}
|
||||
if (option == null) {
|
||||
option = Object.assign({}, this.basicOption)
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
try {
|
||||
myChart.setOption(option);
|
||||
} catch (error) { }
|
||||
}, 500)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue