644 lines
28 KiB
Vue
644 lines
28 KiB
Vue
<template>
|
||
<el-container class="dashboard">
|
||
<el-header class="header">
|
||
<div style="font-weight: bold;">6车间生产数据大看板</div>
|
||
<div style="font-size: 14px;margin-top:18px">2023-11-14 13:50</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 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 style="height: 4px;"></div>
|
||
<div class="boxmain">
|
||
<div class="wrapper" @mouseover="mouseOver" @mouseout="mouseOut">
|
||
<table class="totall">
|
||
<tr class="title">
|
||
<th v-for="itemx in liData" :key="itemx">{{ itemx }}</th>
|
||
</tr>
|
||
</table>
|
||
<div ref="moocBox" class="wrapper2">
|
||
<table :class="{ marquee_top: animate }">
|
||
<tr v-for="(itemy,index) in listData" class="rollData" ref="con1" :key="itemy">
|
||
<td>{{ index+1 }}</td>
|
||
<td v-for="(itemz,index2) in itemy" :key="itemz">
|
||
<el-progress v-if="index2==3" :text-inside="true" :stroke-width="14" :percentage="itemz"
|
||
:status="getStatus(itemz)"/>
|
||
<span v-else-if="index2==5">
|
||
<el-tag type="warning" effect="light">{{ itemz }}</el-tag>
|
||
</span>
|
||
<span v-else>{{ itemz }}</span>
|
||
</td>
|
||
</tr>
|
||
<tr v-for="(itemy,index) in listData" class="rollData" ref="con2" :key="itemy">
|
||
<td>{{ index+1 }}</td>
|
||
<td v-for="(itemz,index2) in itemy" :key="itemz">
|
||
<el-progress v-if="index2==3" :text-inside="true" :stroke-width="14" :percentage="itemz"
|
||
:status="getStatus(itemz)"/>
|
||
<span v-else-if="index2==5">
|
||
<el-tag type="warning" effect="light">{{ itemz }}</el-tag>
|
||
</span>
|
||
<span v-else>{{ itemz }}</span>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</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 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 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 class="boxmain" id="chart2">
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-main>
|
||
</el-container>
|
||
</template>
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
function deepCopy(obj) {
|
||
return JSON.parse(JSON.stringify(obj));
|
||
}
|
||
export default {
|
||
data() {
|
||
return {
|
||
basicOption: {
|
||
backgroundColor: '',
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
label: {
|
||
backgroundColor: '#6a7985'
|
||
}
|
||
}
|
||
},
|
||
legend: {
|
||
icon: "stack",
|
||
right: 0,
|
||
data: [{
|
||
backgroundColor: 'rgb(1,235,239)',
|
||
name: '棒',
|
||
itemStyle: {
|
||
// color:'rgb(1,235,239)',
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: 'rgb(1,235,239)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgb(5, 158, 163)'
|
||
}])
|
||
},
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
}, {
|
||
name: '管',
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
}],
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: 'rgb(250,205,0)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgb(254,129,0)'
|
||
}
|
||
])
|
||
}
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
// saveAsImage: {}
|
||
}
|
||
},
|
||
grid: {
|
||
left: '2%',
|
||
right: '2%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
boundaryGap: true,
|
||
data: ['1日','2日', '3日', '4日', '5日', '6日', '7日', '8日','9日','10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日','19日','20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日'],
|
||
nameTextStyle: {
|
||
color: '#ffffff'
|
||
},
|
||
axisLabel: {
|
||
color: '#ffffff'
|
||
},
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
name: "生产统计",
|
||
type: 'value',
|
||
nameTextStyle: {
|
||
color: '#ffffff'
|
||
},
|
||
axisLabel: {
|
||
color: '#ffffff'
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
type: 'dashed', //y轴分割线类型
|
||
color: 'rgba(102,102,102,0.9)',
|
||
width: 1,
|
||
},
|
||
},
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '棒',
|
||
type: 'bar',
|
||
stack: 'Total',
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 1, color: 'rgb(1,235,239)'
|
||
},
|
||
|
||
showSymbol: false,
|
||
areaStyle: {
|
||
opacity: 0.8,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: 'rgb(1,235,239)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgb(5, 158, 163)'
|
||
}
|
||
])
|
||
},
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: 'rgb(1,235,239)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgb(5, 158, 163)'
|
||
}])
|
||
},
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'insideTop',
|
||
color:'#666'
|
||
},
|
||
data: [140, 232, 101, 264, 90, 340, 250,140, 232, 101, 264, 90, 340, 250,140, 232, 101, 264, 90, 340, 250,140, 232, 101, 264, 90, 340, 250, 340, 250]
|
||
},
|
||
{
|
||
name: '管',
|
||
type: 'bar',
|
||
stack: 'Total',
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 0, color: 'rgb(250,205,0)'
|
||
},
|
||
showSymbol: false,
|
||
areaStyle: {
|
||
opacity: 0.8,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: 'rgb(250,205,0)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgb(254,129,0)'
|
||
}
|
||
])
|
||
},
|
||
itemStyle: {
|
||
borderRadius: [2, 2, 0, 0],
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: 'rgb(250,205,0)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgb(254,129,0)'
|
||
}
|
||
])
|
||
},
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'insideTop',
|
||
color:'#666',
|
||
font:'10'
|
||
},
|
||
data:[100, 202, 101, 204, 190, 140, 150,100, 132, 161, 164, 190, 240, 150,110, 202, 100, 164, 90, 240, 150,340, 232, 101, 164, 190, 240, 250, 240, 150]
|
||
},
|
||
]
|
||
},
|
||
|
||
taskBoard: {
|
||
header: ['姓名', '岗位', '班次', '状态'],
|
||
headerBGC: '#0a3f44',
|
||
data: [
|
||
['小王', '成型人', '白班', '到岗'],
|
||
['小李', '成型人', '白班', '到岗'],
|
||
['小张', '成型人', '白班', '未到岗'],
|
||
],
|
||
index: true,
|
||
columnWidth: [50],
|
||
align: ['center'],
|
||
},
|
||
liData: ['序号','产品名称', '型号', '计划周期', '完成进度', '产量', '状态'],
|
||
listData: [
|
||
["光纤预制管A", "8098", "19.80%", 100,"368",'已完成'],
|
||
["光纤预制管B", "8098", "19.80%", 90,"368",'已完成'],
|
||
["光纤预制管C", "8098", "19.80%", 80,"368",'已完成'],
|
||
["光纤预制管D", "8098", "19.80%", 70,"368",'已完成'],
|
||
["光纤预制管E", "8098", "19.80%", 60,"368",'已完成'],
|
||
["光纤预制管F", "8098", "19.80%", 50,"368",'已完成'],
|
||
["光纤预制管G", "8098", "19.80%", 40,"368",'已完成'],
|
||
["光纤预制管H", "8098", "19.80%", 30,"368",'已完成'],
|
||
],
|
||
speed: 2000,
|
||
myScroll: null,
|
||
iliHeight: 30,
|
||
time: null,
|
||
delay: 20,
|
||
tableData: [
|
||
['产品名称', '型号', '计划周期', '完成进度', '产量', '状态'],
|
||
['ZB2', 'xxx', '2023-11-01至2023-11-11', '70', '5000', '生产中'],
|
||
],
|
||
taskBoard2: {
|
||
header: ['产品名称', '型号', '计划周期', '完成进度', '产量', '状态', 'xx'],
|
||
headerBGC: '#0a3f44',
|
||
waitTime: 3000,
|
||
rowNum: 8,
|
||
columnWidth: [2, 1, 1, 1, 1, 1],
|
||
data: [
|
||
['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3', '<el-progress :text-inside="true" :stroke-width="14" :percentage="100" status="green"/>', '行1列3', '行1列3', 'xx'],
|
||
['行2列1', '<span style="color:#32c5e9;">行2列2</span>', '行2列3', '行1列3', '行1列3', '行1列3', 'xx'],
|
||
['行3列1', '行3列2', '<span style="color:#67e0e3;">行3列3</span>', '行1列3', '行1列3', '行1列3', 'xx'],
|
||
['行4列1', '<span style="color:#9fe6b8;">行4列2</span>', '行4列3', '行1列3', '行1列3', '行1列3', 'xx'],
|
||
['<span style="color:#ffdb5c;">行5列1</span>', '行5列2', '行5列3', '行1列3', '行1列3', '行1列3', 'xx'],
|
||
['行6列1', '<span style="color:#ff9f7f;">行6列2</span>', '行6列3', '行1列3', '行1列3', '行1列3', 'xx'],
|
||
['行7列1', '行7列2', '<span style="color:#fb7293;">行7列3</span>', '行1列3', '行1列3', '行1列3', 'xx'],
|
||
['行8列1', '<span style="color:#e062ae;">行8列2</span>', '行8列3', '行1列3', '行1列3', '行1列3', 'xx'],
|
||
['<span style="color:#e690d1;">行9列1</span>', '行9列2', '行9列3', '行1列3', '行1列3', '行1列3', 'xx'],
|
||
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
|
||
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
|
||
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
|
||
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
|
||
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
|
||
],
|
||
index: true,
|
||
columnWidth: [50],
|
||
align: ['center'],
|
||
chartInterval1: null,
|
||
chartInterval2: null,
|
||
chartInterval3: null
|
||
},
|
||
}
|
||
},
|
||
mounted() {
|
||
this.myScroll = setInterval(() => {
|
||
this.scrollUp();
|
||
}, this.speed);
|
||
let chart1Option = deepCopy(this.basicOption)
|
||
this.setChart("chart1", chart1Option);
|
||
let chart2Option = deepCopy(this.basicOption)
|
||
chart2Option.yAxis[0].name = '交付统计';
|
||
chart2Option.series[0].type = 'line';
|
||
chart2Option.series[1].type = 'line';
|
||
this.setChart("chart2", chart2Option)
|
||
let chart3Option = {
|
||
backgroundColor: '',
|
||
legend: {
|
||
top: 'bottom'
|
||
},
|
||
series: [
|
||
{
|
||
name: 'Nightingale Chart',
|
||
type: 'pie',
|
||
center: ['50%', '50%'],
|
||
roseType: 'area',
|
||
itemStyle: {
|
||
borderRadius: 8
|
||
},
|
||
data: [
|
||
{ value: 40, name: 'rose 1' },
|
||
{ value: 38, name: 'rose 2' },
|
||
{ value: 32, name: 'rose 3' },
|
||
{ value: 30, name: 'rose 4' },
|
||
{ value: 28, name: 'rose 5' },
|
||
{ value: 26, name: 'rose 6' },
|
||
{ value: 22, name: 'rose 7' },
|
||
{ value: 18, name: 'rose 8' }
|
||
]
|
||
}
|
||
]
|
||
};
|
||
this.setChart("chart3", chart3Option)
|
||
},
|
||
methods: {
|
||
getStatus(status){
|
||
if(status==100){
|
||
return "success"
|
||
}else if(status>=80){
|
||
return "primary"
|
||
}else if(status>=60){
|
||
return "warning"
|
||
}else{
|
||
return "exception"
|
||
}
|
||
},
|
||
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)
|
||
},
|
||
//滚动
|
||
scrollUp() {
|
||
// console.log(this.$refs.moocBox.scrollTop)
|
||
// console.log(this.$refs.moocBox.scrollHeight)
|
||
if (this.$refs.moocBox.scrollTop >= this.$refs.moocBox.scrollHeight / 2) {
|
||
//判断条件是否达到临界
|
||
this.$refs.moocBox.scrollTop = 0;
|
||
} else {
|
||
this.$refs.moocBox.scrollTop=this.$refs.moocBox.scrollTop+40;
|
||
}
|
||
}, // 鼠标滑过暂停滚动
|
||
mouseOver() {
|
||
clearInterval(this.myScroll);
|
||
}, //鼠标移开重新滚动
|
||
mouseOut() {
|
||
this.myScroll = setInterval(() => {
|
||
this.scrollUp();
|
||
},
|
||
this.speed);
|
||
},
|
||
},
|
||
beforeDestoryed() {
|
||
clearInterval(myScroll);
|
||
this.myScroll = null;
|
||
},
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
.dashboard {
|
||
background-image: url("https://cdn-upload.datav.aliyun.com/upload/download/1678758744858-EWBrlDVf.jpg");
|
||
color: #fff;
|
||
font-family: "Microsoft Yahei" !important;
|
||
}
|
||
.header {
|
||
background: url("/public/img/photon_header.png");
|
||
border-bottom: none;
|
||
background-size: 100% 100%;
|
||
font-size: 26px;
|
||
display: block;
|
||
height: 80px;
|
||
color: rgb(149, 255, 255);
|
||
font-family: 'Microsoft Yahei';
|
||
text-align: center;
|
||
padding: 12px 0px;
|
||
}
|
||
.box {
|
||
background: rgba(10, 63, 68, 0.5);
|
||
height: 100%;
|
||
}
|
||
|
||
.boxtitle {
|
||
color: #fff;
|
||
font-size: 16px;
|
||
display: flex;
|
||
height: 36px;
|
||
background: linear-gradient(40deg, rgba(11, 101, 140, 0.451), rgba(0, 34, 48, 0.335), rgba(11, 101, 140, 0.451));
|
||
}
|
||
|
||
.bgimg {
|
||
background-image: url('https://cdn-upload.datav.aliyun.com/upload/download/1678762309227-E6RP8z2R.png');
|
||
background-size: 140% 100%;
|
||
}
|
||
|
||
.boxlabel {
|
||
margin-left: 6px;
|
||
font-size: 18px;
|
||
margin-top: 6px
|
||
}
|
||
|
||
.boxmain {
|
||
height: calc(100% - 40px);
|
||
}
|
||
@media screen and (max-width: 800px) {
|
||
.boxmain {
|
||
height: 200px;
|
||
}
|
||
}
|
||
.flex_center {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center
|
||
}
|
||
|
||
.border{
|
||
border: 1px dashed #49bcf7;
|
||
}
|
||
|
||
.bigdata {
|
||
font-size: 24px;
|
||
}
|
||
.wrapper{
|
||
overflow: hidden;
|
||
height: 220px;
|
||
}
|
||
.wrapper2{
|
||
height: 180px;
|
||
overflow: hidden;
|
||
}
|
||
table{
|
||
width: 100%;
|
||
text-align: center;
|
||
border-collapse: collapse;
|
||
border-spacing: 0;
|
||
table-layout: fixed;
|
||
width: 100%;
|
||
}
|
||
.title{
|
||
height: 40px;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
}
|
||
table th{
|
||
font-size: 14px;
|
||
background: rgba(0, 0, 0, .1);
|
||
}
|
||
table td {
|
||
font-size: 14px;
|
||
height: 40px;
|
||
text-align: center;
|
||
color: rgba(255, 255, 255, .8);
|
||
}
|
||
table th,table td{
|
||
padding: .1rem 0;
|
||
border-bottom: none !important;
|
||
background:none !important;
|
||
}
|
||
.marquee_top{
|
||
transition: all 0.5s ease-in-out;
|
||
margin-top: -26px;
|
||
}
|
||
.totall{
|
||
color: #fff;
|
||
background-color: rgb(10, 63, 68);
|
||
}
|
||
.rollData{
|
||
background-color: rgb(10, 39, 50);
|
||
}
|
||
.rollData:nth-of-type(2n+1){
|
||
background-color: rgb(0, 59, 81);
|
||
}
|
||
</style> |