抽取组件（table中的行自动循环）
This commit is contained in:
parent
5d125d0875
commit
07bb1011da
|
|
@ -0,0 +1,208 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-main>
|
||||
<div class="boxmain">
|
||||
<div class="wrapper" :id="'scrollWrapper'+refValue" @mouseover="mouseOver" @mouseout="mouseOut">
|
||||
<table class="totall">
|
||||
<tr class="title">
|
||||
<th v-for="itemx in titleData" :key="itemx">{{ itemx }}</th>
|
||||
</tr>
|
||||
</table>
|
||||
<div :id="refValue" :ref="`${refValue}`" style="overflow:scroll">
|
||||
<div>
|
||||
<table :class="{ marquee_top: animate }">
|
||||
<tr v-for="(itemy,index) in rowData" class="rollData" ref="con1" :key="itemy">
|
||||
<td>{{ index+1 }}</td>
|
||||
<td v-for="itemz in itemy" :key="itemz">
|
||||
<el-progress v-if="itemz.elType=='progress'" :text-inside="true" :stroke-width="14" :percentage="itemz.value"
|
||||
:status="getStatus(itemz.value)"/>
|
||||
<el-tag v-else-if="itemz.elType=='tag'" :type="getTagType(itemz.value)">{{ stateOption[itemz.value] }}</el-tag>
|
||||
<span v-else>{{ itemz.value }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table :class="{ marquee_top: animate }" v-show="scrollVivible">
|
||||
<tr v-for="(itemy,index) in rowData" class="rollData" ref="con1" :key="itemy">
|
||||
<td>{{ index+1 }}</td>
|
||||
<td v-for="itemz in itemy" :key="itemz">
|
||||
<el-progress v-if="itemz.elType=='progress'" :text-inside="true" :stroke-width="14" :percentage="itemz.value"
|
||||
:status="getStatus(itemz.value)"/>
|
||||
<el-tag v-else-if="itemz.elType=='tag'" :type="getTagType(itemz.value)">{{ stateOption[itemz.value] }}</el-tag>
|
||||
<span v-else>{{ itemz.value }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
rowData: {
|
||||
type:Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
titleData:{
|
||||
type:Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
tableHeight:{
|
||||
type:Number,
|
||||
default () {
|
||||
return 100
|
||||
}
|
||||
},
|
||||
refValue:{
|
||||
type:String,
|
||||
default(){
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
speed: 2000,
|
||||
myScroll: null,
|
||||
iliHeight: 30,
|
||||
time: null,
|
||||
delay: 20,
|
||||
scrollVivible:true,
|
||||
stateOption:{
|
||||
30:'生产中',
|
||||
40:'已完成',
|
||||
'到岗':'到岗',
|
||||
'未到岗':'未到岗',
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let Container =this.tableHeight;
|
||||
let tableHeight = Container-40;
|
||||
let idName = 'scrollWrapper'+this.refValue;
|
||||
let idName2 = this.refValue;
|
||||
document.getElementById(idName).style.height = Container+'px';
|
||||
document.getElementById(idName2).style.height = tableHeight+'px';
|
||||
// console.log(this.$refs[`${this.refValue}`])
|
||||
let scrollHeight = this.$refs[`${this.refValue}`].scrollHeight/2;
|
||||
if(tableHeight>scrollHeight){
|
||||
this.scrollVivible = false;
|
||||
}else{
|
||||
this.scrollVivible = true;
|
||||
this.myScroll = setInterval(() => {
|
||||
this.scrollUp();
|
||||
}, this.speed);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getTagType(type){
|
||||
if(type==30){
|
||||
return "primary"
|
||||
}else if(type==40){
|
||||
return "success"
|
||||
}else if(type=='到岗'){
|
||||
return "success"
|
||||
}else if(type=='未到岗'){
|
||||
return "danger"
|
||||
}
|
||||
},
|
||||
getStatus(status){
|
||||
if(status==100){
|
||||
return "success"
|
||||
}else if(status>=80){
|
||||
return "primary"
|
||||
}else if(status>=60){
|
||||
return "warning"
|
||||
}else{
|
||||
return "exception"
|
||||
}
|
||||
},
|
||||
|
||||
scrollUp(){
|
||||
let scrollTop = this.$refs[`${this.refValue}`].scrollTop;
|
||||
let scrollHeight = this.$refs[`${this.refValue}`].scrollHeight;
|
||||
if (scrollTop >=scrollHeight/2) {
|
||||
//判断条件是否达到临界
|
||||
this.$refs[`${this.refValue}`].scrollTop = 0;
|
||||
} else {
|
||||
this.$refs[`${this.refValue}`].scrollTop=scrollTop+40;
|
||||
}
|
||||
},
|
||||
// 鼠标滑过暂停滚动
|
||||
mouseOver() {
|
||||
clearInterval(this.myScroll);
|
||||
},
|
||||
//鼠标移开重新滚动
|
||||
mouseOut() {
|
||||
this.myScroll = setInterval(() => {
|
||||
this.scrollUp();
|
||||
},
|
||||
this.speed);
|
||||
},
|
||||
},
|
||||
beforeDestoryed() {
|
||||
clearInterval(myScroll1);
|
||||
this.myScroll1 = null;
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.boxmain {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.boxmain {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
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>
|
||||
|
|
@ -2,11 +2,11 @@
|
|||
<el-container class="dashboard">
|
||||
<el-header class="header">
|
||||
<div style="font-weight: bold; font-family:'myfont';font-size:32px">10车间生产数据看板</div>
|
||||
<div style="font-size: 14px;margin-top:18px">2023-11-01 08:00</div>
|
||||
<div style="font-size: 14px;margin-top:18px">{{currentDay}} {{ currentTime }}</div>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<el-row style="height: 60%" :gutter="10">
|
||||
<el-col :xs="24" :md="10">
|
||||
<el-col :xs="24" :md="10" style="height: 100%;">
|
||||
<el-row style="height: 38%;" :gutter="10">
|
||||
<el-col :xs="8" :md="8">
|
||||
<div class="box">
|
||||
|
|
@ -16,8 +16,7 @@
|
|||
<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>
|
||||
<span style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">130</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -29,8 +28,7 @@
|
|||
<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">130</span>
|
||||
<span style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">130</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -42,97 +40,36 @@
|
|||
<div style="height: 4px;"></div>
|
||||
<div class="boxmain flex_center bigdata border">
|
||||
<span>ZT2</span>
|
||||
<span
|
||||
style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">130</span>
|
||||
<span style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">130</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="height:2%"></div>
|
||||
<el-row style="height:60%">
|
||||
<el-col>
|
||||
<div class="box">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel">人员到岗
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 2px;"></div>
|
||||
<div class="boxmain" id="scrollContainer1">
|
||||
<div class="wrapper" id="scrollWrapper1" @mouseover="mouseOver1" @mouseout="mouseOut1"
|
||||
style="overflow: hidden;">
|
||||
<table class="totall">
|
||||
<tr class="title">
|
||||
<th v-for="itemx in liData1" :key="itemx">{{ itemx }}</th>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="scrollBody1" ref="moocBox1" style="overflow:scroll">
|
||||
<div>
|
||||
<table :class="{ marquee_top: animate }">
|
||||
<tr v-for="itemy in listData1" class="rollData" ref="con1" :key="itemy">
|
||||
<td v-for="(itemz,index2) in itemy" :key="itemz">
|
||||
<el-progress v-if="index2==5" :text-inside="true" :stroke-width="14" :percentage="itemz"
|
||||
:status="getStatus(itemz)"/>
|
||||
<span v-else>{{ itemz }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table :class="{ marquee_top: animate }" v-show="scrollVivible1">
|
||||
<tr v-for="itemy in listData1" class="rollData" ref="con1" :key="itemy">
|
||||
<td v-for="(itemz,index2) in itemy" :key="itemz">
|
||||
<el-progress v-if="index2==5" :text-inside="true" :stroke-width="14" :percentage="itemz"
|
||||
:status="getStatus(itemz)"/>
|
||||
<span v-else>{{ itemz }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<scScrollTavle v-if="table1Visible" :tableHeight="containerHeight1"
|
||||
:rowData="listData1test" :titleData="liData1" :refValue="refValue1"
|
||||
></scScrollTavle>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="14">
|
||||
<el-col :xs="24" :md="14" style="height: 100%;">
|
||||
<div class="box" :dur="20">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel">任务进度</div>
|
||||
</div>
|
||||
<div style="height: 2px;"></div>
|
||||
<div class="boxmain" id="scrollContainer2">
|
||||
<div class="wrapper" id="scrollWrapper2" @mouseover="mouseOver2" @mouseout="mouseOut2">
|
||||
<table class="totall">
|
||||
<tr class="title">
|
||||
<th v-for="itemx in liData2" :key="itemx">{{ itemx }}</th>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="scrollBody2" ref="moocBox2" style="overflow:scroll">
|
||||
<div>
|
||||
<table :class="{ marquee_top: animate }">
|
||||
<tr v-for="(itemy,index) in listData2" class="rollData" ref="con1" :key="itemy">
|
||||
<td>{{ index+1 }}</td>
|
||||
<td v-for="(itemz,index2) in itemy" :key="itemz">
|
||||
<el-progress v-if="index2==4" :text-inside="true" :stroke-width="14" :percentage="itemz"
|
||||
:status="getStatus(itemz)"/>
|
||||
<el-tag v-else-if="index2==6" :type="getType(itemz)">{{ stateOption[itemz] }}</el-tag>
|
||||
<span v-else>{{ itemz }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table :class="{ marquee_top: animate }" v-show="scrollVivible1">
|
||||
<tr v-for="(itemy,index) in listData2" class="rollData" ref="con1" :key="itemy">
|
||||
<td>{{ index+1 }}</td>
|
||||
<td v-for="(itemz,index2) in itemy" :key="itemz">
|
||||
<el-progress v-if="index2==4" :text-inside="true" :stroke-width="14" :percentage="itemz"
|
||||
:status="getStatus(itemz)"/>
|
||||
<el-tag v-else-if="index2==6" :type="getType(itemz)">{{ stateOption[itemz] }}</el-tag>
|
||||
<span v-else>{{ itemz }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<scScrollTavle v-if="table2Visible" :tableHeight="containerHeight2"
|
||||
:rowData="listData2test" :titleData="liData2" :refValue="refValue2"></scScrollTavle>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -173,10 +110,12 @@
|
|||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import scScrollTavle from '@/components/scScrollTable.vue';
|
||||
function deepCopy(obj) {
|
||||
return JSON.parse(JSON.stringify(obj));
|
||||
}
|
||||
export default {
|
||||
components: {scScrollTavle},
|
||||
data() {
|
||||
return {
|
||||
basicOption: {
|
||||
|
|
@ -285,7 +224,8 @@ export default {
|
|||
label: {
|
||||
show: true,
|
||||
position: 'insideTop',
|
||||
color:'#000'
|
||||
color:'#ffffff',
|
||||
fontSize:8
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
|
|
@ -330,127 +270,79 @@ export default {
|
|||
},
|
||||
]
|
||||
},
|
||||
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
|
||||
},
|
||||
],
|
||||
containerHeight1:100,
|
||||
containerHeight2:100,
|
||||
table1Visible:false,
|
||||
table2Visible:false,
|
||||
refValue1:'moocBox1',
|
||||
refValue2:'moocBox2',
|
||||
liData1: ['姓名', '岗位', '班次', '状态'],
|
||||
listData1: [
|
||||
['小王', '成型人', '白班', '到岗'],
|
||||
['小李', '成型人', '白班', '到岗'],
|
||||
['小张', '成型人', '白班', '未到岗'],
|
||||
],
|
||||
liData2: ['序号','产品名称', '型号', '计划开始时间', '计划结束时间','完成进度', '产量','状态'],
|
||||
listData2: [
|
||||
["光纤预制管", "ZJ2", '2023-11-10', '2023-11-10', 100, "368",40],
|
||||
["光纤预制管", "ZJ2", '2023-11-10', '2023-11-10', 90, "368",40],
|
||||
["光纤预制管", "ZJ2", '2023-11-10', '2023-11-10', 80, "368",30],
|
||||
["光纤预制管", "ZJ2", '2023-11-10', '2023-11-10', 70, "368",30],
|
||||
["光纤预制管", "ZJ2", '2023-11-10', '2023-11-10', 60, "368",40],
|
||||
["光纤预制管", "ZJ2", '2023-11-10', '2023-11-10', 50, "368",30],
|
||||
["光纤预制管", "ZJ2", '2023-11-10', '2023-11-10', 40, "368",30],
|
||||
["光纤预制管", "ZJ2", '2023-11-10', '2023-11-10', 30, "368",40],
|
||||
],
|
||||
tableData: [
|
||||
['产品名称', '型号', '计划周期', '完成进度', '产量', '状态'],
|
||||
['ZB2', 'xxx', '2023-11-01至2023-11-11', '70', '5000', '生产中'],
|
||||
listData1test: [
|
||||
[{elType:'primary',value:"王丽丽"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
|
||||
[{elType:'primary',value:"张小飞"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
|
||||
[{elType:'primary',value:"李青"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
|
||||
[{elType:'primary',value:"白梦遥"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
|
||||
[{elType:'primary',value:"于诗曼"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
|
||||
[{elType:'primary',value:"马亮德"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
|
||||
[{elType:'primary',value:"赵蒙斯"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
|
||||
[{elType:'primary',value:"钱广源"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
|
||||
[{elType:'primary',value:"孙蕾"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"未到岗"}],
|
||||
],
|
||||
taskBoard2: {
|
||||
header: ['产品名称', '型号', '计划开始时间','计划结束时间', '完成进度', '产量', '状态'],
|
||||
headerBGC: '#0a3f44',
|
||||
waitTime: 3000,
|
||||
rowNum: 8,
|
||||
columnWidth: [2, 1, 1, 1, 1, 1],
|
||||
data: [
|
||||
['光纤预制管', 'ZB1', '2023-11-01', '2023-11-10', '50/60', '300','已完成'],
|
||||
['光纤预制管', 'ZB1', '2023-11-01', '2023-11-10', '50/60', '300','已完成'],
|
||||
['光纤预制管', 'ZB1', '2023-11-01', '2023-11-10', '50/60', '300','已完成'],
|
||||
['光纤预制管', 'ZB1', '2023-11-01', '2023-11-10', '50/60', '300','已完成'],
|
||||
['光纤预制管', 'ZB2', '2023-11-01', '2023-11-10', '50/60', '300','已完成'],
|
||||
['光纤预制管', 'ZB1', '2023-11-01', '2023-11-10', '50/60', '300','已完成'],
|
||||
['光纤预制管', 'ZB1', '2023-11-01', '2023-11-10', '50/60', '300','已完成'],
|
||||
['光纤预制管', 'ZB2', '2023-11-01', '2023-11-10', '50/60', '300','已完成'],
|
||||
['光纤预制管', 'ZB2', '2023-11-01', '2023-11-10', '50/60', '300','已完成'],
|
||||
['光纤预制管', 'ZB1', '2023-11-01', '2023-11-10', '50/60', '300','已完成'],
|
||||
['光纤预制管', 'ZB1', '2023-11-01', '2023-11-10', '50/60', '300','已完成'],
|
||||
['光纤预制管', 'ZB1', '2023-11-01', '2023-11-10', '50/60', '300','已完成'],
|
||||
['光纤预制管', 'ZB1', '2023-11-01', '2023-11-10', '50/60', '300','已完成'],
|
||||
],
|
||||
index: true,
|
||||
columnWidth: [50],
|
||||
align: ['center'],
|
||||
},
|
||||
liData2: ['序号','产品名称', '型号', '计划开始时间', '计划结束时间','完成进度', '产量','状态'],
|
||||
listData2test: [
|
||||
[{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:100},{elType:'primary',value:368},{elType:'tag',value:40}],
|
||||
[{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:100},{elType:'primary',value:368},{elType:'tag',value:40}],
|
||||
[{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:90},{elType:'primary',value:368},{elType:'tag',value:40}],
|
||||
[{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:100},{elType:'primary',value:368},{elType:'tag',value:30}],
|
||||
[{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:40}],
|
||||
[{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:40}],
|
||||
[{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:40}],
|
||||
[{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:40}],
|
||||
[{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:40}],
|
||||
],
|
||||
speed: 2000,
|
||||
myScroll: null,
|
||||
myScroll1: null,
|
||||
myScroll2: null,
|
||||
myScroll: null,
|
||||
iliHeight: 30,
|
||||
time: null,
|
||||
delay: 20,
|
||||
start_date:'',
|
||||
end_date:'',
|
||||
scrollVivible1:true,
|
||||
scrollVivible2:true,
|
||||
|
||||
dayInterval:null,
|
||||
chartInterval1: null,
|
||||
chartInterval2: null,
|
||||
chartInterval3: null,
|
||||
stateOption:{
|
||||
30:'生产中',
|
||||
40:'已完成'
|
||||
}
|
||||
},
|
||||
currentTime:'',
|
||||
currentDay:'',
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let Container1 = document.getElementById('scrollContainer1').clientHeight;
|
||||
let tableHeight1 = Container1-40;
|
||||
document.getElementById('scrollWrapper1').style.height = Container1+'px';
|
||||
document.getElementById('scrollBody1').style.height = tableHeight1+'px';
|
||||
let scrollHeight1 = this.$refs.moocBox1.scrollHeight/2;
|
||||
if(tableHeight1>scrollHeight1){
|
||||
this.scrollVivible1 = false;
|
||||
}else{
|
||||
this.scrollVivible1 = true;
|
||||
this.myScroll1 = setInterval(() => {
|
||||
this.scrollUp1();
|
||||
}, this.speed);
|
||||
}
|
||||
let Container2 = document.getElementById('scrollContainer2').clientHeight;
|
||||
let tableHeight2 = Container2-40;
|
||||
document.getElementById('scrollWrapper2').style.height = Container2+'px';
|
||||
document.getElementById('scrollBody2').style.height = tableHeight2+'px';
|
||||
let scrollHeight2 = this.$refs.moocBox2.scrollHeight/2;
|
||||
if(tableHeight2>scrollHeight2){
|
||||
this.scrollVivible2 = false;
|
||||
}else{
|
||||
this.scrollVivible2 = true;
|
||||
this.myScroll2 = setInterval(() => {
|
||||
this.scrollUp2();
|
||||
}, this.speed);
|
||||
}
|
||||
//表格table1的显示
|
||||
this.containerHeight1 = document.getElementById('scrollContainer1').clientHeight;
|
||||
this.table1Visible = true;
|
||||
//表格table2的显示
|
||||
this.containerHeight2 = document.getElementById('scrollContainer2').clientHeight;
|
||||
this.table2Visible = true;
|
||||
|
||||
let chart1Option = deepCopy(this.basicOption)
|
||||
let chart1 = this.setChart("chart1", chart1Option);
|
||||
|
||||
let index1 = 0
|
||||
this.chartInterval1 = setInterval(function () {
|
||||
if (index1 < chart1Option.series[0].data.length) {
|
||||
chart1.dispatchAction({ type: 'downplay', seriesIndex: 0 });
|
||||
chart1.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index1 });
|
||||
chart1.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index1 });
|
||||
index1++;
|
||||
} else {
|
||||
index1 = 0;
|
||||
}
|
||||
}, 3000);
|
||||
let chart2Option = deepCopy(this.basicOption);
|
||||
chart2Option.xAxis = {
|
||||
type: 'category',
|
||||
|
|
@ -530,7 +422,19 @@ export default {
|
|||
},
|
||||
data: [40, 60, 52, 64, 70, 53, 50,40, 32, 62, 64, 90, 50, 50,56, 49, 66, 64, 70, 58, 50,40, 59, 60, 64, 90, 40, 50, 70, 50]
|
||||
}];
|
||||
this.setChart("chart2", chart2Option)
|
||||
let chart2 = this.setChart("chart2", chart2Option);
|
||||
let index2 = 0
|
||||
this.chartInterval2 = setInterval(function () {
|
||||
if (index2 < chart2Option.series[0].data.length) {
|
||||
chart2.dispatchAction({ type: 'downplay', seriesIndex: 0 });
|
||||
chart2.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index2 });
|
||||
chart2.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index2 });
|
||||
index2++;
|
||||
} else {
|
||||
index2 = 0;
|
||||
}
|
||||
}, 3000);
|
||||
|
||||
let chart3Option ={
|
||||
backgroundColor: '',
|
||||
tooltip: {
|
||||
|
|
@ -565,26 +469,27 @@ export default {
|
|||
}
|
||||
]
|
||||
};
|
||||
this.setChart("chart3", chart3Option)
|
||||
let chart3 = this.setChart("chart3", chart3Option);
|
||||
let index3 = 0
|
||||
this.chartInterval3 = setInterval(function () {
|
||||
if (index3 < chart3Option.series[0].data.length) {
|
||||
chart3.dispatchAction({ type: 'downplay', seriesIndex: 0 });
|
||||
chart3.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index3 });
|
||||
chart3.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index3 });
|
||||
index3++;
|
||||
} else {
|
||||
index3 = 0;
|
||||
}
|
||||
}, 3000);
|
||||
this.showTime()
|
||||
this.dayInterval = setInterval(()=>{
|
||||
this.showTime()
|
||||
},1000)
|
||||
},
|
||||
methods: {
|
||||
getType(type){
|
||||
if(type==30){
|
||||
return "primary"
|
||||
}else if(type==40){
|
||||
return "success"
|
||||
}
|
||||
},
|
||||
getStatus(status){
|
||||
if(status==100){
|
||||
return "success"
|
||||
}else if(status>=80){
|
||||
return "primary"
|
||||
}else if(status>=60){
|
||||
return "warning"
|
||||
}else{
|
||||
return "exception"
|
||||
}
|
||||
showTime(){
|
||||
this.currentTime = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
|
||||
this.currentDay = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
|
||||
},
|
||||
setChart(name, option = null) {
|
||||
// 根据name 渲染数据, option需填写，否则option为模拟数据
|
||||
|
|
@ -632,45 +537,6 @@ export default {
|
|||
debugger;
|
||||
});
|
||||
},
|
||||
scrollUp1(){
|
||||
let scrollTop = this.$refs.moocBox1.scrollTop;
|
||||
let scrollHeight = this.$refs.moocBox1.scrollHeight;
|
||||
if (scrollTop >=scrollHeight/2) {
|
||||
//判断条件是否达到临界
|
||||
this.$refs.moocBox1.scrollTop = 0;
|
||||
} else {
|
||||
this.$refs.moocBox1.scrollTop=scrollTop+40;
|
||||
}
|
||||
},
|
||||
// 鼠标滑过暂停滚动
|
||||
mouseOver1() {
|
||||
clearInterval(this.myScroll1);
|
||||
},
|
||||
//鼠标移开重新滚动
|
||||
mouseOut1() {
|
||||
this.myScroll1 = setInterval(() => {
|
||||
this.scrollUp1();
|
||||
},
|
||||
this.speed);
|
||||
},
|
||||
//滚动
|
||||
scrollUp2() {
|
||||
if (this.$refs.moocBox2.scrollTop >= this.$refs.moocBox2.scrollHeight / 2) {
|
||||
//判断条件是否达到临界
|
||||
this.$refs.moocBox2.scrollTop = 0;
|
||||
} else {
|
||||
this.$refs.moocBox2.scrollTop=this.$refs.moocBox2.scrollTop+40;
|
||||
}
|
||||
}, // 鼠标滑过暂停滚动
|
||||
mouseOver2() {
|
||||
clearInterval(this.myScroll2);
|
||||
}, //鼠标移开重新滚动
|
||||
mouseOut2() {
|
||||
this.myScroll2 = setInterval(() => {
|
||||
this.scrollUp2();
|
||||
},
|
||||
this.speed);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -738,34 +604,12 @@ export default {
|
|||
.bigdata {
|
||||
font-size: 24px;
|
||||
}
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
<el-container class="dashboard">
|
||||
<el-header class="header">
|
||||
<div style="font-weight: bold; font-family:'myfont';font-size:32px">6车间生产数据大看板</div>
|
||||
<div style="font-size: 14px;margin-top:18px">2023-11-14 13:50</div>
|
||||
<div style="font-size: 14px;margin-top:18px">{{currentDay}} {{ currentTime }}</div>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<el-row style="height: 60%" :gutter="10">
|
||||
<el-col :xs="24" :md="10">
|
||||
<el-col :xs="24" :md="10" style="height: 100%;">
|
||||
<el-row style="height: 29%" :gutter="10">
|
||||
<el-col :xs="24" :md="24">
|
||||
<div class="box">
|
||||
|
|
@ -41,87 +41,31 @@
|
|||
</el-row>
|
||||
<div style="height: 1%;"></div>
|
||||
<el-row style="height:70%">
|
||||
<el-col>
|
||||
<el-col style="height: 100%;">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel">发货情况</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<div class="boxmain" id="scrollContainer1">
|
||||
<div class="wrapper" id="scrollWrapper1" @mouseover="mouseOver1" @mouseout="mouseOut1"
|
||||
style="overflow: hidden;">
|
||||
<table class="totall">
|
||||
<tr class="title">
|
||||
<th v-for="itemx in liData1" :key="itemx">{{ itemx }}</th>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="scrollBody1" ref="moocBox1" style="overflow:scroll">
|
||||
<div>
|
||||
<table :class="{ marquee_top: animate }">
|
||||
<tr v-for="itemy in listData1" class="rollData" ref="con1" :key="itemy">
|
||||
<td v-for="(itemz,index2) in itemy" :key="itemz">
|
||||
<el-progress v-if="index2==5" :text-inside="true" :stroke-width="14" :percentage="itemz"
|
||||
:status="getStatus(itemz)"/>
|
||||
<span v-else>{{ itemz }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table :class="{ marquee_top: animate }" v-show="scrollVivible1">
|
||||
<tr v-for="itemy in listData1" class="rollData" ref="con1" :key="itemy">
|
||||
<td v-for="(itemz,index2) in itemy" :key="itemz">
|
||||
<el-progress v-if="index2==5" :text-inside="true" :stroke-width="14" :percentage="itemz"
|
||||
:status="getStatus(itemz)"/>
|
||||
<span v-else>{{ itemz }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <dv-scroll-board :config="taskBoard" style="width:100%;height:100%"
|
||||
@mouseover="mouseoverHandler" @click="clickHandler" /> -->
|
||||
<scScrollTavle v-if="table1Visible" :tableHeight="containerHeight1"
|
||||
:rowData="listData1test" :titleData="liData1" :refValue="refValue1"
|
||||
></scScrollTavle>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="14">
|
||||
<el-col :xs="24" :md="14" style="height: 100%;">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel">昨日工序进度</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<div class="boxmain" id="scrollContainer2">
|
||||
<div class="wrapper" id="scrollWrapper2" @mouseover="mouseOver2" @mouseout="mouseOut2"
|
||||
style="overflow: hidden;">
|
||||
<table class="totall">
|
||||
<tr class="title">
|
||||
<th v-for="itemx in liData" :key="itemx">{{ itemx }}</th>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="scrollBody2" ref="moocBox2" style="overflow:scroll">
|
||||
<div>
|
||||
<table :class="{ marquee_top: animate }">
|
||||
<tr v-for="itemy in listData" class="rollData" ref="con1" :key="itemy">
|
||||
<td v-for="(itemz,index2) in itemy" :key="itemz">
|
||||
<el-progress v-if="index2==5" :text-inside="true" :stroke-width="14" :percentage="itemz"
|
||||
:status="getStatus(itemz)"/>
|
||||
<span v-else>{{ itemz }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table :class="{ marquee_top: animate }" v-show="scrollVivible2">
|
||||
<tr v-for="itemy in listData" class="rollData" ref="con1" :key="itemy">
|
||||
<td v-for="(itemz,index2) in itemy" :key="itemz">
|
||||
<el-progress v-if="index2==5" :text-inside="true" :stroke-width="14" :percentage="itemz"
|
||||
:status="getStatus(itemz)"/>
|
||||
<span v-else>{{ itemz }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<scScrollTavle v-if="table2Visible" :tableHeight="containerHeight2"
|
||||
:rowData="listData2test" :titleData="liData2" :refValue="refValue2"
|
||||
></scScrollTavle>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -152,10 +96,12 @@
|
|||
</template>
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import scScrollTavle from '@/components/scScrollTable.vue';
|
||||
function deepCopy(obj) {
|
||||
return JSON.parse(JSON.stringify(obj));
|
||||
}
|
||||
export default {
|
||||
components: {scScrollTavle},
|
||||
data() {
|
||||
return {
|
||||
basicOption: {
|
||||
|
|
@ -346,105 +292,51 @@ export default {
|
|||
},
|
||||
]
|
||||
},
|
||||
taskBoard: {
|
||||
header: ['日期', '型号', '规格', '发货数量'],
|
||||
headerBGC: '#0a3f44',
|
||||
data: [
|
||||
['2023-11-15', 'ZB2', '34/450', '1500'],
|
||||
['2023-11-15', 'ZJ2', '33/500', '500'],
|
||||
['2023-11-15', 'ZT2', '30/600', '2500'],
|
||||
],
|
||||
index: true,
|
||||
columnWidth: [50],
|
||||
align: ['center'],
|
||||
},
|
||||
containerHeight1:100,
|
||||
containerHeight2:100,
|
||||
table1Visible:false,
|
||||
table2Visible:false,
|
||||
refValue1:'moocBox1',
|
||||
refValue2:'moocBox2',
|
||||
liData1: ['日期', '型号', '规格', '发货数量'],
|
||||
listData1: [
|
||||
["2023-11-10", "ZJ2",'3/68', 100],
|
||||
["2023-11-10", "ZJ2",'3/68', 290],
|
||||
["2023-11-10", "ZJ2",'3/68', 280],
|
||||
["2023-11-10", "ZJ2",'3/68', 270],
|
||||
["2023-11-10", "ZJ2",'3/68', 260],
|
||||
["2023-11-10", "ZJ2",'3/68', 250],
|
||||
["2023-11-10", "ZJ2",'3/68', 240],
|
||||
["2023-11-10", "ZJ2",'3/68', 230],
|
||||
["2023-11-10", "ZJ2",'3/68', 100],
|
||||
["2023-11-10", "ZJ2",'3/68', 290],
|
||||
["2023-11-10", "ZJ2",'3/68', 280],
|
||||
["2023-11-10", "ZJ2",'3/68', 270],
|
||||
["2023-11-10", "ZJ2",'3/68', 260],
|
||||
["2023-11-10", "ZJ2",'3/68', 250],
|
||||
["2023-11-10", "ZJ2",'3/68', 240],
|
||||
["2023-11-10", "ZJ2",'3/68', 230],
|
||||
],
|
||||
liData: ['工序','产品名称', '型号', '计划数量', '合格数量', '完成进度', '合格率','操作人'],
|
||||
listData: [
|
||||
["平头","光纤预制管A", "ZJ2", 368, 100, 90, "99.5%",'李斯'],
|
||||
["粘头","光纤预制管B", "ZJ2", 368, 90, 90, "99.5%",'王丽丽'],
|
||||
["粗磨","光纤预制管C", "ZJ2", 368, 80, 90, "99.5%",'杜克'],
|
||||
["中磨","光纤预制管D", "ZJ2", 368, 70, 90, "99.5%",'钱多多'],
|
||||
["细磨","光纤预制管E", "ZJ2", 368, 60, 90, "99.5%",'王富利'],
|
||||
["抛光","光纤预制管F", "ZJ2", 368, 50, 90, "99.5%",'张关荣'],
|
||||
["开凿","光纤预制管G", "ZJ2", 368, 40, 90, "99.5%",'赵耀国'],
|
||||
["配管","光纤预制管H", "ZJ2", 368, 30, 90, "99.5%",'李婷婷'],
|
||||
],
|
||||
speed: 2000,
|
||||
myScroll: null,
|
||||
myScroll1: null,
|
||||
myScroll2: null,
|
||||
iliHeight: 30,
|
||||
time: null,
|
||||
delay: 20,
|
||||
tableData: [
|
||||
['产品名称', '型号', '计划周期', '完成进度', '产量', '状态'],
|
||||
['ZB2', 'xxx', '2023-11-01至2023-11-11', '70', '5000', '生产中'],
|
||||
listData1test: [
|
||||
[{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"40/360"},{elType:'primary',value:368}],
|
||||
[{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"40/360"},{elType:'primary',value:368}],
|
||||
[{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"40/360"},{elType:'primary',value:368}],
|
||||
[{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"40/360"},{elType:'primary',value:368}],
|
||||
[{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"40/360"},{elType:'primary',value:368}],
|
||||
[{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"40/360"},{elType:'primary',value:368}],
|
||||
[{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"40/360"},{elType:'primary',value:368}],
|
||||
[{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"40/360"},{elType:'primary',value:368}],
|
||||
],
|
||||
liData2: ['工序','产品名称', '型号', '计划数量', '合格数量', '完成进度', '合格率','操作人'],
|
||||
listData2test: [
|
||||
[{elType:'primary',value:"平头"},{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"}, {elType:'primary',value:368},{elType:'primary',value:368},{elType:'progress',value:100},{elType:'primary',value:'60%'},{elType:'primary',value:'李斯'}],
|
||||
[{elType:'primary',value:"粘头"},{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"}, {elType:'primary',value:368},{elType:'primary',value:360},{elType:'progress',value:99},{elType:'primary',value:'60%'},{elType:'primary',value:'王丽'}],
|
||||
[{elType:'primary',value:"粗磨"},{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"}, {elType:'primary',value:368},{elType:'primary',value:350},{elType:'progress',value:99},{elType:'primary',value:'60%'},{elType:'primary',value:'杜克'}],
|
||||
[{elType:'primary',value:"中磨"},{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"}, {elType:'primary',value:368},{elType:'primary',value:360},{elType:'progress',value:99},{elType:'primary',value:'60%'},{elType:'primary',value:'赵莉'}],
|
||||
[{elType:'primary',value:"细磨"},{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"}, {elType:'primary',value:368},{elType:'primary',value:340},{elType:'progress',value:99},{elType:'primary',value:'60%'},{elType:'primary',value:'钱多'}],
|
||||
[{elType:'primary',value:"抛光"},{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"}, {elType:'primary',value:368},{elType:'primary',value:300},{elType:'progress',value:99},{elType:'primary',value:'60%'},{elType:'primary',value:'孙桑'}],
|
||||
[{elType:'primary',value:"开凿"},{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"}, {elType:'primary',value:368},{elType:'primary',value:320},{elType:'progress',value:99},{elType:'primary',value:'60%'},{elType:'primary',value:'周欸'}],
|
||||
[{elType:'primary',value:"配管"},{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"}, {elType:'primary',value:368},{elType:'primary',value:330},{elType:'progress',value:99},{elType:'primary',value:'60%'},{elType:'primary',value:'吴思'}],
|
||||
],
|
||||
time: null,
|
||||
start_date:'',
|
||||
end_date:'',
|
||||
scrollVivible1:true,
|
||||
scrollVivible2:true,
|
||||
scrollVivible:true
|
||||
scrollVivible:true,
|
||||
dayInterval:null,
|
||||
currentTime:'',
|
||||
currentDay:'',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let Container1 = document.getElementById('scrollContainer1').clientHeight;
|
||||
let tableHeight1 = Container1-40;
|
||||
document.getElementById('scrollWrapper1').style.height = Container1+'px';
|
||||
document.getElementById('scrollBody1').style.height = tableHeight1+'px';
|
||||
let scrollHeight1 = this.$refs.moocBox1.scrollHeight/2;
|
||||
if(tableHeight1>scrollHeight1){
|
||||
this.scrollVivible1 = false;
|
||||
}else{
|
||||
this.scrollVivible1 = true;
|
||||
this.myScroll1 = setInterval(() => {
|
||||
this.scrollUp1();
|
||||
}, this.speed);
|
||||
}
|
||||
let Container2 = document.getElementById('scrollContainer2').clientHeight;
|
||||
let tableHeight2 = Container2-40;
|
||||
document.getElementById('scrollWrapper2').style.height = Container2+'px';
|
||||
document.getElementById('scrollBody2').style.height = tableHeight2+'px';
|
||||
let scrollHeight2 = this.$refs.moocBox2.scrollHeight/2;
|
||||
if(tableHeight2>scrollHeight2){
|
||||
this.scrollVivible2 = false;
|
||||
}else{
|
||||
this.scrollVivible2 = true;
|
||||
this.myScroll2 = setInterval(() => {
|
||||
this.scrollUp2();
|
||||
}, this.speed);
|
||||
}
|
||||
// let domHeight = document.getElementById('process').clientHeight;
|
||||
// document.getElementById('wrapper').style.height = domHeight+'px';
|
||||
// document.getElementById('tableBody').style.height = (domHeight-40)+'px';
|
||||
// let scrollHeight = this.$refs.moocBox.scrollHeight/2;
|
||||
// if(domHeight>scrollHeight){
|
||||
// this.scrollVivible = false;
|
||||
// }else{
|
||||
// this.scrollVivible = true;
|
||||
// this.myScroll = setInterval(() => {
|
||||
// this.scrollUp();
|
||||
// }, this.speed);
|
||||
// }
|
||||
//表格table1的显示
|
||||
this.containerHeight1 = document.getElementById('scrollContainer1').clientHeight;
|
||||
this.table1Visible = true;
|
||||
//表格table2的显示
|
||||
this.containerHeight2 = document.getElementById('scrollContainer2').clientHeight;
|
||||
this.table2Visible = true;
|
||||
|
||||
const ondDayTime = 86400000;
|
||||
let cDate = new Date();
|
||||
let month = cDate.getMonth()+1;
|
||||
|
|
@ -453,53 +345,26 @@ export default {
|
|||
let end_date = cDate.getFullYear()+'-'+month+'-'+lastDay;
|
||||
this.start_date = start_date;
|
||||
this.end_date = end_date;
|
||||
this.getsaleOut();
|
||||
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);
|
||||
|
||||
//时间
|
||||
this.showTime()
|
||||
this.dayInterval = setInterval(()=>{
|
||||
this.showTime()
|
||||
},1000)
|
||||
},
|
||||
methods: {
|
||||
getStatus(status){
|
||||
if(status==100){
|
||||
return "success"
|
||||
}else if(status>=80){
|
||||
return "primary"
|
||||
}else if(status>=60){
|
||||
return "warning"
|
||||
}else{
|
||||
return "exception"
|
||||
}
|
||||
showTime(){
|
||||
this.currentTime = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
|
||||
this.currentDay = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
|
||||
},
|
||||
setChart(name, option = null) {
|
||||
// 根据name 渲染数据, option需填写，否则option为模拟数据
|
||||
|
|
@ -540,66 +405,22 @@ export default {
|
|||
let obj ={
|
||||
query: {start_date:this.start_date,end_date:this.end_date,dept_name: "6车间"},
|
||||
};
|
||||
let obj1 ={
|
||||
query: {start_date:this.start_date,end_date:this.end_date},
|
||||
};
|
||||
//生产车间按日统计
|
||||
that.$API.bi.dataset.exec.req('lineDay', obj).then((doInRes) => {
|
||||
console.log('生产车间按日统计:',doInRes);
|
||||
debugger;
|
||||
});
|
||||
//本月交付统计
|
||||
that.$API.bi.dataset.exec.req('saleOutDay', obj).then((saleOutRes) => {
|
||||
that.$API.bi.dataset.exec.req('saleOutDay', obj1).then((saleOutRes) => {
|
||||
console.log('本月交付统计:',saleOutRes);
|
||||
debugger;
|
||||
});
|
||||
},
|
||||
scrollUp1(){
|
||||
let scrollTop = this.$refs.moocBox1.scrollTop;
|
||||
let scrollHeight = this.$refs.moocBox1.scrollHeight;
|
||||
if (scrollTop >=scrollHeight/2) {
|
||||
//判断条件是否达到临界
|
||||
this.$refs.moocBox1.scrollTop = 0;
|
||||
} else {
|
||||
this.$refs.moocBox1.scrollTop=scrollTop+40;
|
||||
}
|
||||
},
|
||||
// 鼠标滑过暂停滚动
|
||||
mouseOver1() {
|
||||
clearInterval(this.myScroll1);
|
||||
},
|
||||
//鼠标移开重新滚动
|
||||
mouseOut1() {
|
||||
this.myScroll1 = setInterval(() => {
|
||||
this.scrollUp1();
|
||||
},
|
||||
this.speed);
|
||||
},
|
||||
|
||||
//滚动
|
||||
scrollUp2() {
|
||||
let scrollTop = this.$refs.moocBox2.scrollTop;
|
||||
let scrollHeight = this.$refs.moocBox2.scrollHeight;
|
||||
if (scrollTop >=scrollHeight/2) {
|
||||
//判断条件是否达到临界
|
||||
this.$refs.moocBox2.scrollTop = 0;
|
||||
} else {
|
||||
this.$refs.moocBox2.scrollTop=scrollTop+40;
|
||||
}
|
||||
},
|
||||
// 鼠标滑过暂停滚动
|
||||
mouseOver2() {
|
||||
clearInterval(this.myScroll2);
|
||||
},
|
||||
//鼠标移开重新滚动
|
||||
mouseOut2() {
|
||||
this.myScroll2 = setInterval(() => {
|
||||
this.scrollUp2();
|
||||
},
|
||||
this.speed);
|
||||
},
|
||||
},
|
||||
beforeDestoryed() {
|
||||
clearInterval(myScroll);
|
||||
this.myScroll = null;
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
|
@ -667,14 +488,7 @@ export default {
|
|||
overflow: hidden;
|
||||
height: 220px;
|
||||
}
|
||||
table{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
|
|
@ -684,17 +498,6 @@ export default {
|
|||
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;
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
<el-container class="dashboard">
|
||||
<el-header class="header">
|
||||
<div style="font-weight: bold; font-family:'myfont';font-size:32px">7车间生产数据大看板</div>
|
||||
<div style="font-size: 14px;margin-top:18px">2023-11-14 13:50</div>
|
||||
<div style="font-size: 14px;margin-top:18px">{{currentDay}}{{ currentTime }}</div>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<el-row style="height: 60%" :gutter="10">
|
||||
<el-col :xs="24" :md="10">
|
||||
<el-col :xs="24" :md="10" style="height: 100%;">
|
||||
<el-row style="height: 29%">
|
||||
<el-col>
|
||||
<div class="box">
|
||||
|
|
@ -24,86 +24,29 @@
|
|||
</el-row>
|
||||
<div style="height: 1%;"></div>
|
||||
<el-row style="height:70%">
|
||||
<el-col>
|
||||
<el-col style="height: 100%;">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel">任务进度</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<div class="boxmain" id="scrollContainer1">
|
||||
<div class="wrapper" id="scrollWrapper1" @mouseover="mouseOver1" @mouseout="mouseOut1">
|
||||
<table class="totall">
|
||||
<tr class="title">
|
||||
<th v-for="itemx in liData1" :key="itemx">{{ itemx }}</th>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="scrollBody1" ref="moocBox1" style="overflow:scroll">
|
||||
<div>
|
||||
<table :class="{ marquee_top: animate }">
|
||||
<tr v-for="(itemy,index) in listData1" class="rollData" ref="con1" :key="itemy">
|
||||
<td>{{ index+1 }}</td>
|
||||
<td v-for="(itemz,index2) in itemy" :key="itemz">
|
||||
<el-progress v-if="index2==1" :text-inside="true" :stroke-width="14" :percentage="itemz"
|
||||
:status="getStatus(itemz)"/>
|
||||
<el-tag v-else-if="index2==3" :type="getType(itemz)">{{ stateOption[itemz] }}</el-tag>
|
||||
<span v-else>{{ itemz }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table :class="{ marquee_top: animate }" v-show="scrollVivible1">
|
||||
<tr v-for="(itemy,index) in listData1" class="rollData" ref="con1" :key="itemy">
|
||||
<td>{{ index+1 }}</td>
|
||||
<td v-for="(itemz,index2) in itemy" :key="itemz">
|
||||
<el-progress v-if="index2==1" :text-inside="true" :stroke-width="14" :percentage="itemz"
|
||||
:status="getStatus(itemz)"/>
|
||||
<el-tag v-else-if="index2==3" :type="getType(itemz)">{{ stateOption[itemz] }}</el-tag>
|
||||
<span v-else>{{ itemz }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<scScrollTavle v-if="table1Visible" :tableHeight="containerHeight1"
|
||||
:rowData="listData1test" :titleData="liData1" :refValue="refValue1"></scScrollTavle>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="14">
|
||||
<el-col :xs="24" :md="14" style="height: 100%;">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel">生产线</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<div class="boxmain" id="scrollContainer2">
|
||||
<div class="wrapper" id="scrollWrapper2" @mouseover="mouseOver2" @mouseout="mouseOut2"
|
||||
style="overflow: hidden;">
|
||||
<table class="totall">
|
||||
<tr class="title">
|
||||
<th v-for="itemx in liData" :key="itemx">{{ itemx }}</th>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="scrollBody2" ref="moocBox2" style="overflow:scroll">
|
||||
<div>
|
||||
<table :class="{ marquee_top: animate }">
|
||||
<tr v-for="itemy in listData" class="rollData" ref="con1" :key="itemy">
|
||||
<td v-for="(itemz,index2) in itemy" :key="itemz">
|
||||
<el-tag v-if="index2==6" :type="getType(itemz)">{{ stateOption[itemz] }}</el-tag>
|
||||
<span v-else>{{ itemz }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table :class="{ marquee_top: animate }" v-show="scrollVivible2">
|
||||
<tr v-for="itemy in listData" class="rollData" ref="con1" :key="itemy">
|
||||
<td v-for="(itemz,index2) in itemy" :key="itemz">
|
||||
<el-tag v-if="index2==6" :type="getType(itemz)">{{ stateOption[itemz] }}</el-tag>
|
||||
<span v-else>{{ itemz }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<scScrollTavle v-if="table2Visible" :tableHeight="containerHeight2"
|
||||
:rowData="listData2test" :titleData="liData2" :refValue="refValue2"></scScrollTavle>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -144,10 +87,12 @@
|
|||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import scScrollTavle from '@/components/scScrollTable.vue';
|
||||
function deepCopy(obj) {
|
||||
return JSON.parse(JSON.stringify(obj));
|
||||
}
|
||||
export default {
|
||||
components: {scScrollTavle},
|
||||
data() {
|
||||
return {
|
||||
basicOption: {
|
||||
|
|
@ -262,92 +207,78 @@ export default {
|
|||
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]
|
||||
}]
|
||||
},
|
||||
taskBoard2: {
|
||||
header: ['炉号','产品名称', '型号', '规格', '最近产量','锅数','设备状态'],
|
||||
headerBGC: '#0a3f44',
|
||||
waitTime: 1000,
|
||||
rowNum: 7,
|
||||
columnWidth: [2, 1, 1, 1, 1, 1,1],
|
||||
data: [
|
||||
['1','光纤预制棒', 'JZ2','31/470', '120', '33', '<span style="text-align:center;display:inline-block;padding:0 10px;height:30px;line-height:30px;border:1px solid rgb(250,236,216);background:rgba(253, 246, 236);color:rgb(230, 162, 60);border-radius:5px;margin-top:10px">进行中</span>'],
|
||||
['2','光纤预制棒', 'JZ2','32/470', '125', '26', '<span style="text-align:center;display:inline-block;padding:0 10px;height:30px;line-height:30px;border:1px solid rgb(250,236,216);background:rgba(253, 246, 236);color:rgb(230, 162, 60);border-radius:5px;margin-top:10px">进行中</span>'],
|
||||
['3','光纤预制棒', 'JZ2','33/470', '100', '30', '<span style="text-align:center;display:inline-block;padding:0 10px;height:30px;line-height:30px;border:1px solid rgb(250,236,216);background:rgba(253, 246, 236);color:rgb(230, 162, 60);border-radius:5px;margin-top:10px">进行中</span>'],
|
||||
['4','光纤预制棒', 'JZ2','31/470', '105', '28', '<span style="text-align:center;display:inline-block;padding:0 10px;height:30px;line-height:30px;border:1px solid rgb(250,236,216);background:rgba(253, 246, 236);color:rgb(230, 162, 60);border-radius:5px;margin-top:10px">进行中</span>'],
|
||||
['5','光纤预制棒', 'JZ2','37/470', '120', '18', '<span style="text-align:center;display:inline-block;padding:0 10px;height:30px;line-height:30px;border:1px solid rgb(250,236,216);background:rgba(253, 246, 236);color:rgb(230, 162, 60);border-radius:5px;margin-top:10px">进行中</span>'],
|
||||
['6','光纤预制棒', 'JZ2','33/470', '120', '24', '<span style="text-align:center;display:inline-block;padding:0 10px;height:30px;line-height:30px;border:1px solid rgb(250,236,216);background:rgba(253, 246, 236);color:rgb(230, 162, 60);border-radius:5px;margin-top:10px">进行中</span>'],
|
||||
['7','光纤预制棒', 'JZ2','38/470', '120', '29', '<span style="text-align:center;display:inline-block;padding:0 10px;height:30px;line-height:30px;border:1px solid rgb(250,236,216);background:rgba(253, 246, 236);color:rgb(230, 162, 60);border-radius:5px;margin-top:10px">进行中</span>'],
|
||||
['8','光纤预制棒', 'JZ2','34/470', '120', '25', '<span style="text-align:center;display:inline-block;padding:0 10px;height:30px;line-height:30px;border:1px solid rgb(250,236,216);background:rgba(253, 246, 236);color:rgb(230, 162, 60);border-radius:5px;margin-top:10px">进行中</span>'],
|
||||
],
|
||||
// index: true,
|
||||
columnWidth: [50],
|
||||
align: ['center'],
|
||||
},
|
||||
containerHeight1:100,
|
||||
containerHeight2:100,
|
||||
table1Visible:false,
|
||||
table2Visible:false,
|
||||
refValue1:'moocBox1',
|
||||
refValue2:'moocBox2',
|
||||
liData1: ['序号', '型号', '完成进度', '产量', '状态'],
|
||||
listData1: [
|
||||
["JZ2", 100, "368",40],
|
||||
["JZ2", 90, "368",40],
|
||||
["JZ2", 80, "368",30],
|
||||
["JZ2", 70, "368",30],
|
||||
["JZ2", 60, "368",40],
|
||||
["JZ2", 50, "368",30],
|
||||
["JZ2", 40, "368",30],
|
||||
["JZ2", 30, "368",40],
|
||||
],
|
||||
liData: ['炉号','产品名称', '型号', '规格', '最近产量','锅数','设备状态'],
|
||||
listData: [
|
||||
["1","光纤预制管A", "ZJ2", '30/268', 100, 30, 40],
|
||||
["2","光纤预制管B", "ZJ2", '40/368', 90, 30, 30],
|
||||
["3","光纤预制管C", "ZJ2", '36/470', 80, 30, 30],
|
||||
["4","光纤预制管D", "ZJ2", '35/300', 70, 30, 40],
|
||||
["5","光纤预制管E", "ZJ2", '30/268', 60, 30, 30],
|
||||
["6","光纤预制管F", "ZJ2", '30/268', 50, 30, 40],
|
||||
["7","光纤预制管G", "ZJ2", '30/268', 40, 30, 30],
|
||||
["8","光纤预制管H", "ZJ2", '30/268', 30, 30, 30],
|
||||
],
|
||||
speed: 2000,
|
||||
myScroll1: null,
|
||||
myScroll2: null,
|
||||
iliHeight: 30,
|
||||
listData1test: [
|
||||
[{elType:'primary',value:"ZJ2"}, {elType:'progress',value:100},{elType:'primary',value:368},{elType:'tag',value:40}],
|
||||
[{elType:'primary',value:"ZJ2"}, {elType:'progress',value:100},{elType:'primary',value:368},{elType:'tag',value:40}],
|
||||
[{elType:'primary',value:"ZJ2"}, {elType:'progress',value:90},{elType:'primary',value:368},{elType:'tag',value:40}],
|
||||
[{elType:'primary',value:"ZJ2"}, {elType:'progress',value:100},{elType:'primary',value:368},{elType:'tag',value:30}],
|
||||
[{elType:'primary',value:"ZJ2"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:40}],
|
||||
[{elType:'primary',value:"ZJ2"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:40}],
|
||||
[{elType:'primary',value:"ZJ2"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:40}],
|
||||
[{elType:'primary',value:"ZJ2"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:40}],
|
||||
[{elType:'primary',value:"ZJ2"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:40}],
|
||||
[{elType:'primary',value:"ZJ2"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:30}],
|
||||
[{elType:'primary',value:"ZJ2"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:30}],
|
||||
[{elType:'primary',value:"ZJ2"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:30}],
|
||||
[{elType:'primary',value:"ZJ2"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:40}],
|
||||
[{elType:'primary',value:"ZJ2"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:30}],
|
||||
[{elType:'primary',value:"ZJ2"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:30}],
|
||||
[{elType:'primary',value:"ZJ2"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:30}],
|
||||
],
|
||||
liData2: ['炉号','产品名称', '型号', '规格', '最近产量','锅数','设备状态'],
|
||||
listData2test:[
|
||||
[{elType:'primary',value:"1"},{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"30/268"},{elType:'primary',value:"100"},{elType:'primary',value:"30"},{elType:'tag',value:"40"}],
|
||||
[{elType:'primary',value:"1"},{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"30/268"},{elType:'primary',value:"100"},{elType:'primary',value:"30"},{elType:'tag',value:"40"}],
|
||||
[{elType:'primary',value:"1"},{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"30/268"},{elType:'primary',value:"100"},{elType:'primary',value:"30"},{elType:'tag',value:"40"}],
|
||||
[{elType:'primary',value:"1"},{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"30/268"},{elType:'primary',value:"100"},{elType:'primary',value:"30"},{elType:'tag',value:"40"}],
|
||||
[{elType:'primary',value:"1"},{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"30/268"},{elType:'primary',value:"100"},{elType:'primary',value:"30"},{elType:'tag',value:"40"}],
|
||||
[{elType:'primary',value:"1"},{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"30/268"},{elType:'primary',value:"100"},{elType:'primary',value:"30"},{elType:'tag',value:"40"}],
|
||||
[{elType:'primary',value:"1"},{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"30/268"},{elType:'primary',value:"100"},{elType:'primary',value:"30"},{elType:'tag',value:"40"}],
|
||||
[{elType:'primary',value:"1"},{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"30/268"},{elType:'primary',value:"100"},{elType:'primary',value:"30"},{elType:'tag',value:"40"}],
|
||||
],
|
||||
time: null,
|
||||
delay: 20,
|
||||
scrollVivible1:true,
|
||||
scrollVivible2:true,
|
||||
dayInterval:null,
|
||||
stateOption:{
|
||||
30:'生产中',
|
||||
40:'已完成'
|
||||
}
|
||||
},
|
||||
start_date:'',
|
||||
end_date:'',
|
||||
currentTime:'',
|
||||
currentDay:'',
|
||||
chartInterval1: null,
|
||||
chartInterval2: null,
|
||||
chartInterval3: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let Container1 = document.getElementById('scrollContainer1').clientHeight;
|
||||
let tableHeight1 = Container1-40;
|
||||
document.getElementById('scrollWrapper1').style.height = Container1+'px';
|
||||
document.getElementById('scrollBody1').style.height = tableHeight1+'px';
|
||||
let scrollHeight1 = this.$refs.moocBox1.scrollHeight/2;
|
||||
if(tableHeight1>scrollHeight1){
|
||||
this.scrollVivible1 = false;
|
||||
}else{
|
||||
this.scrollVivible1 = true;
|
||||
this.myScroll1 = setInterval(() => {
|
||||
this.scrollUp1();
|
||||
}, this.speed);
|
||||
}
|
||||
//表格table1的显示
|
||||
this.containerHeight1 = document.getElementById('scrollContainer1').clientHeight;
|
||||
this.table1Visible = true;
|
||||
//表格table2的显示
|
||||
this.containerHeight2 = document.getElementById('scrollContainer2').clientHeight;
|
||||
this.table2Visible = true;
|
||||
|
||||
let Container2 = document.getElementById('scrollContainer2').clientHeight;
|
||||
let tableHeight2 = Container2-40;
|
||||
document.getElementById('scrollWrapper2').style.height = Container2+'px';
|
||||
document.getElementById('scrollBody2').style.height = tableHeight2+'px';
|
||||
let scrollHeight2 = this.$refs.moocBox2.scrollHeight/2;
|
||||
if(tableHeight2>scrollHeight2){
|
||||
this.scrollVivible2 = false;
|
||||
}else{
|
||||
this.scrollVivible2 = true;
|
||||
this.myScroll2 = setInterval(() => {
|
||||
this.scrollUp2();
|
||||
}, this.speed);
|
||||
}
|
||||
let chart1Option = deepCopy(this.basicOption)
|
||||
this.setChart("chart1", chart1Option);
|
||||
let chart1 = this.setChart("chart1", chart1Option);
|
||||
let index1 = 0
|
||||
this.chartInterval1 = setInterval(function () {
|
||||
if (index1 < chart1Option.series[0].data.length) {
|
||||
chart1.dispatchAction({ type: 'downplay', seriesIndex: 0 });
|
||||
chart1.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index1 });
|
||||
chart1.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index1 });
|
||||
} else {
|
||||
index1 = 0;
|
||||
}
|
||||
}, 3000);
|
||||
let chart2Option = deepCopy(this.basicOption)
|
||||
chart2Option.legend = {
|
||||
icon: "stack",
|
||||
|
|
@ -376,7 +307,18 @@ export default {
|
|||
chart2Option.yAxis[0].name = '合格率(%)';
|
||||
chart2Option.series[0].type = 'line';
|
||||
chart2Option.series[0].data = ['40','60','70','56','49','69','50','60','70','56','30','69','50','60','70','56','49','69','50','60','40','56','49','69','50','70','56','49','80','50'];
|
||||
this.setChart("chart2", chart2Option)
|
||||
let chart2 = this.setChart("chart2", chart2Option)
|
||||
let index2 = 0
|
||||
this.chartInterval2 = setInterval(function () {
|
||||
if (index2 < chart2Option.series[0].data.length) {
|
||||
chart2.dispatchAction({ type: 'downplay', seriesIndex: 0 });
|
||||
chart2.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index2 });
|
||||
chart2.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index2 });
|
||||
index2++;
|
||||
} else {
|
||||
index2 = 0;
|
||||
}
|
||||
}, 3000);
|
||||
let chart3Option ={
|
||||
backgroundColor: '',
|
||||
tooltip: {
|
||||
|
|
@ -411,26 +353,37 @@ export default {
|
|||
}
|
||||
]
|
||||
};
|
||||
this.setChart("chart3", chart3Option)
|
||||
let chart3 = this.setChart("chart3", chart3Option);
|
||||
let index3 = 0
|
||||
this.chartInterval3 = setInterval(function () {
|
||||
if (index3 < chart3Option.series[0].data.length) {
|
||||
chart3.dispatchAction({ type: 'downplay', seriesIndex: 0 });
|
||||
chart3.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index3 });
|
||||
chart3.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index3 });
|
||||
index3++;
|
||||
} else {
|
||||
index3 = 0;
|
||||
}
|
||||
}, 3000);
|
||||
const ondDayTime = 86400000;
|
||||
let cDate = new Date();
|
||||
let month = cDate.getMonth()+1;
|
||||
let start_date = cDate.getFullYear()+'-'+month+'-01';
|
||||
let lastDay = new Date(cDate.getFullYear(), cDate.getMonth(), 0).getDate();
|
||||
let end_date = cDate.getFullYear()+'-'+month+'-'+lastDay;
|
||||
this.start_date = start_date;
|
||||
this.end_date = end_date;
|
||||
this.getProductLine();
|
||||
//时间
|
||||
this.showTime()
|
||||
this.dayInterval = setInterval(()=>{
|
||||
this.showTime()
|
||||
},1000)
|
||||
},
|
||||
methods: {
|
||||
getType(type){
|
||||
if(type==30){
|
||||
return "primary"
|
||||
}else if(type==40){
|
||||
return "success"
|
||||
}
|
||||
},
|
||||
getStatus(status){
|
||||
if(status==100){
|
||||
return "success"
|
||||
}else if(status>=80){
|
||||
return "primary"
|
||||
}else if(status>=60){
|
||||
return "warning"
|
||||
}else{
|
||||
return "exception"
|
||||
}
|
||||
showTime(){
|
||||
this.currentTime = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
|
||||
this.currentDay = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
|
||||
},
|
||||
setChart(name, option = null) {
|
||||
// 根据name 渲染数据, option需填写，否则option为模拟数据
|
||||
|
|
@ -466,9 +419,8 @@ export default {
|
|||
query: {start_date:this.start_date,end_date:this.end_date},
|
||||
};
|
||||
//7车间生产线
|
||||
that.$API.bi.dataset.exec.req('linedept7').then((res1) => {
|
||||
that.$API.bi.dataset.exec.req('linedept7', obj).then((res1) => {
|
||||
console.log('7车间生产线:',res1);
|
||||
debugger;
|
||||
});
|
||||
//7车间生产按炉统计
|
||||
that.$API.bi.dataset.exec.req('stoveStatics', obj1).then((res2) => {
|
||||
|
|
@ -481,52 +433,8 @@ export default {
|
|||
debugger;
|
||||
});
|
||||
},
|
||||
//滚动
|
||||
scrollUp1() {
|
||||
let scrollTop = this.$refs.moocBox1.scrollTop;
|
||||
let scrollHeight = this.$refs.moocBox1.scrollHeight;
|
||||
if (scrollTop >=scrollHeight/2) {
|
||||
//判断条件是否达到临界
|
||||
this.$refs.moocBox1.scrollTop = 0;
|
||||
} else {
|
||||
this.$refs.moocBox1.scrollTop=scrollTop+40;
|
||||
}
|
||||
},
|
||||
// 鼠标滑过暂停滚动
|
||||
mouseOver1() {
|
||||
clearInterval(this.myScroll1);
|
||||
}, //鼠标移开重新滚动
|
||||
mouseOut1() {
|
||||
this.myScroll1 = setInterval(() => {
|
||||
this.scrollUp1();
|
||||
},
|
||||
this.speed);
|
||||
},
|
||||
//滚动
|
||||
scrollUp2() {
|
||||
if (this.$refs.moocBox2.scrollTop >= this.$refs.moocBox2.scrollHeight / 2) {
|
||||
//判断条件是否达到临界
|
||||
this.$refs.moocBox2.scrollTop = 0;
|
||||
} else {
|
||||
this.$refs.moocBox2.scrollTop=this.$refs.moocBox2.scrollTop+40;
|
||||
}
|
||||
}, // 鼠标滑过暂停滚动
|
||||
mouseOver2() {
|
||||
clearInterval(this.myScroll2);
|
||||
}, //鼠标移开重新滚动
|
||||
mouseOut2() {
|
||||
this.myScroll2 = setInterval(() => {
|
||||
this.scrollUp2();
|
||||
},
|
||||
this.speed);
|
||||
},
|
||||
},
|
||||
beforeDestoryed() {
|
||||
clearInterval(myScroll1);
|
||||
clearInterval(myScroll2);
|
||||
this.myScroll1 = null;
|
||||
this.myScroll2 = null;
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
|
@ -599,34 +507,12 @@ export default {
|
|||
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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue