大屏看板
This commit is contained in:
parent
bb40ee35e3
commit
21764716dd
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -11,7 +11,7 @@
|
|||
<el-col :xs="8" :md="8">
|
||||
<div class="box">
|
||||
<div class="boxtitle bgimg">
|
||||
<div style="margin-left: 6px; font-size: 18px; margin-top: 6px">今日任务</div>
|
||||
<div class="boxlabel">今日任务</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<div class="boxmain flex_center bigdata border">
|
||||
|
|
@ -24,27 +24,27 @@
|
|||
<el-col :xs="8" :md="8">
|
||||
<div class="box">
|
||||
<div class="boxtitle bgimg">
|
||||
<div style="margin-left: 6px; font-size: 18px; margin-top: 6px">昨日合格</div>
|
||||
<div class="boxlabel">昨日合格</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<!-- <dv-decoration-9 style="height:11rem; width: 11rem;margin:auto;">
|
||||
<div style="color: #fef000; font-size:28px">
|
||||
130
|
||||
</div>
|
||||
</dv-decoration-9> -->
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="8" :md="8">
|
||||
<div class="box">
|
||||
<div class="boxtitle bgimg">
|
||||
<div style="margin-left: 6px; font-size: 18px; margin-top: 6px">累计合格</div>
|
||||
<div class="boxlabel">累计合格</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<!-- <dv-decoration-9 style="height:11rem; width: 11rem;margin:auto;">
|
||||
<div style="color: #fef000; font-size:28px">
|
||||
1300
|
||||
</div>
|
||||
</dv-decoration-9> -->
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
<el-col>
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div style="margin-left: 6px; font-size: 18px; margin-top: 6px">人员到岗
|
||||
<div class="boxlabel">人员到岗
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 2px;"></div>
|
||||
|
|
@ -128,7 +128,7 @@
|
|||
<el-col :xs="24" :md="14">
|
||||
<div class="box" :dur="20">
|
||||
<div class="boxtitle">
|
||||
<div style="margin-left: 6px; font-size: 18px; margin-top: 6px">任务进度</div>
|
||||
<div class="boxlabel">任务进度</div>
|
||||
</div>
|
||||
<div style="height: 2px;"></div>
|
||||
<div class="boxmain">
|
||||
|
|
@ -197,7 +197,7 @@
|
|||
<el-col :xs="24" :md="9">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div style="margin-left: 6px;font-size: 18px; margin-top: 6px">全年生产统计</div>
|
||||
<div class="boxlabel">全年生产统计</div>
|
||||
</div>
|
||||
<div class="boxmain" id="chart1">
|
||||
</div>
|
||||
|
|
@ -206,7 +206,7 @@
|
|||
<el-col :xs="24" :md="9">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div style="margin-left: 6px; font-size: 18px; margin-top: 6px">本月合格率统计</div>
|
||||
<div class="boxlabel">本月合格率统计</div>
|
||||
</div>
|
||||
<div class="boxmain" id="chart2">
|
||||
</div>
|
||||
|
|
@ -273,10 +273,9 @@
|
|||
}
|
||||
|
||||
.boxlabel {
|
||||
width: 8px;
|
||||
/* background: #49bcf7;
|
||||
border-radius: 30%;
|
||||
margin-right: 4px */
|
||||
margin-left: 6px;
|
||||
font-size: 18px;
|
||||
margin-top: 6px
|
||||
}
|
||||
|
||||
.boxmain {
|
||||
|
|
@ -348,7 +347,7 @@ export default {
|
|||
right: 0,
|
||||
data: [{
|
||||
backgroundColor: 'rgb(1,235,239)',
|
||||
name: 'Line 1',
|
||||
name: '棒',
|
||||
itemStyle: {
|
||||
// color:'rgb(1,235,239)',
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
|
|
@ -365,7 +364,7 @@ export default {
|
|||
color: '#fff'
|
||||
}
|
||||
}, {
|
||||
name: 'Line 2',
|
||||
name: '管',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
|
|
@ -398,7 +397,7 @@ export default {
|
|||
{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
data: ['2日', '3日', '四日', '5日', '6日', '7日', '8日'],
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
nameTextStyle: {
|
||||
color: '#ffffff'
|
||||
},
|
||||
|
|
@ -429,17 +428,18 @@ export default {
|
|||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Line 1',
|
||||
name: '棒',
|
||||
type: 'bar',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 1, color: 'rgb(1,235,239)'
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'insideTop',
|
||||
color:'#000'
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
|
|
@ -448,25 +448,25 @@ export default {
|
|||
{
|
||||
offset: 1,
|
||||
color: 'rgb(5, 158, 163)'
|
||||
}
|
||||
])
|
||||
}])
|
||||
},
|
||||
data: [140, 232, 101, 264, 90, 340, 250, 232, 101, 264, 90, 340]
|
||||
},
|
||||
{
|
||||
name: '管',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
barWidth: 30,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [140, 232, 101, 264, 90, 340, 250]
|
||||
},
|
||||
{
|
||||
name: 'Line 2',
|
||||
type: 'bar',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 0, color: 'rgb(250,205,0)'
|
||||
label: {
|
||||
show: true,
|
||||
position: 'insideTop',
|
||||
color:'#000'
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
itemStyle: {
|
||||
borderRadius: [5, 5, 0, 0],
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
|
|
@ -478,10 +478,7 @@ export default {
|
|||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 282, 111, 234, 220, 340, 310]
|
||||
data: [120, 282, 111, 234, 220, 340, 310, 282, 111, 234, 220, 340]
|
||||
},
|
||||
]
|
||||
},
|
||||
|
|
@ -561,53 +558,121 @@ export default {
|
|||
mounted() {
|
||||
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 });
|
||||
|
||||
// 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.series[0].type = 'line'
|
||||
chart2Option.series[1].type = 'line'
|
||||
let chart2 = this.setChart("chart2", chart2Option)
|
||||
let chart3Option = {
|
||||
let chart2Option = deepCopy(this.basicOption);
|
||||
chart2Option.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'
|
||||
},
|
||||
};
|
||||
chart2Option.legend = {
|
||||
icon: "stack",
|
||||
right: 0,
|
||||
data: [{
|
||||
backgroundColor: 'rgb(250,205,0)',
|
||||
name: '合格率',
|
||||
itemStyle: {
|
||||
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'
|
||||
}
|
||||
}],
|
||||
};
|
||||
chart2Option.series=[{
|
||||
name: '合格率',
|
||||
type: 'line',
|
||||
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)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color:'#fff'
|
||||
},
|
||||
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)'
|
||||
}
|
||||
])
|
||||
},
|
||||
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 chart3Option ={
|
||||
backgroundColor: '',
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
top: 'bottom'
|
||||
top:'bottom',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Nightingale Chart',
|
||||
type: 'pie',
|
||||
center: ['50%', '50%'],
|
||||
roseType: 'area',
|
||||
name: '完成率',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
itemStyle: {
|
||||
borderRadius: 2
|
||||
},
|
||||
center: ['50%', '45%'],
|
||||
data: [
|
||||
{ value: 1, name: '椭圆弯曲' },
|
||||
{ value: 3, name: '大小头' },
|
||||
{ value: 0, name: '偏壁' },
|
||||
{ value: 5, name: '结石气线' },
|
||||
{ value: 200, name: '合格' },
|
||||
],
|
||||
emphasis: {
|
||||
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' }
|
||||
]
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
let chart3 = this.setChart("chart3", chart3Option)
|
||||
};
|
||||
this.setChart("chart3", chart3Option)
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<template>
|
||||
<el-container class="dashboard">
|
||||
<el-header class="header">
|
||||
<div>加工车间生产数据大看板</div>
|
||||
<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">
|
||||
|
|
@ -10,8 +11,7 @@
|
|||
<el-col :xs="24" :md="24">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>今日任务</div>
|
||||
<div class="boxlabel">今日任务</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<div class="boxmain bigdata border">
|
||||
|
|
@ -35,8 +35,6 @@
|
|||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -46,72 +44,43 @@
|
|||
<el-col>
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>发货情况</div>
|
||||
<div class="boxlabel">发货情况</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>
|
||||
<div class="wrapper" @mouseover="mouseOver" @mouseout="mouseOut">
|
||||
<table class="totall">
|
||||
<tr class="title">
|
||||
<th v-for="itemx in liData" :key="itemx">{{ itemx }}</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>
|
||||
</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>
|
||||
|
|
@ -120,8 +89,7 @@
|
|||
<el-col :xs="24" :md="14">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>昨日工序进度</div>
|
||||
<div class="boxlabel">昨日工序进度</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<div class="boxmain">
|
||||
|
|
@ -187,8 +155,7 @@
|
|||
<el-col :xs="24" :md="12">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>本月生产统计</div>
|
||||
<div class="boxlabel">本月生产统计</div>
|
||||
</div>
|
||||
<div class="boxmain" id="chart1">
|
||||
</div>
|
||||
|
|
@ -197,8 +164,7 @@
|
|||
<el-col :xs="24" :md="12">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>本月交付统计</div>
|
||||
<div class="boxlabel">本月交付统计</div>
|
||||
</div>
|
||||
<div class="boxmain" id="chart2">
|
||||
</div>
|
||||
|
|
@ -208,88 +174,6 @@
|
|||
</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) {
|
||||
|
|
@ -300,80 +184,308 @@ export default {
|
|||
return {
|
||||
basicOption: {
|
||||
backgroundColor: '',
|
||||
xAxis: {
|
||||
data: ['一月', '二月', '三月', '四月', '五月', '六月'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: { type: 'value' },
|
||||
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: '销量',
|
||||
name: '棒',
|
||||
type: 'bar',
|
||||
barwidth: 10,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
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: '#83bff6' },
|
||||
{ offset: 0.5, color: '#188df0' },
|
||||
{ offset: 1, color: '#188df0' }
|
||||
{
|
||||
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: {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#2378f7' },
|
||||
{ offset: 0.7, color: '#2378f7' },
|
||||
{ offset: 1, color: '#83bff6' }
|
||||
])
|
||||
}
|
||||
focus: 'series'
|
||||
},
|
||||
data: [5, 20, 36, 10, 10, 20]
|
||||
}
|
||||
],
|
||||
grid: { // 让图表占满容器
|
||||
top: "10%",
|
||||
left: "12%",
|
||||
right: "0px",
|
||||
bottom: "10%"
|
||||
}
|
||||
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
|
||||
},
|
||||
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");
|
||||
this.myScroll = setInterval(() => {
|
||||
this.scrollUp();
|
||||
}, this.speed);
|
||||
let chart1Option = deepCopy(this.basicOption)
|
||||
this.setChart("chart1", chart1Option);
|
||||
let chart2Option = deepCopy(this.basicOption)
|
||||
chart2Option.series[0].type = 'line'
|
||||
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));
|
||||
|
|
@ -383,13 +495,150 @@ export default {
|
|||
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>
|
||||
</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>
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
<template>
|
||||
<el-container class="dashboard">
|
||||
<el-header class="header">
|
||||
<div>7车间生产数据大看板</div>
|
||||
<div style="font-weight: bold;">7车间生产数据大看板</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">
|
||||
|
|
@ -10,8 +11,7 @@
|
|||
<el-col>
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>今日任务</div>
|
||||
<div class="boxlabel">今日任务</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<div class="boxmain flex_center bigdata border">
|
||||
|
|
@ -27,64 +27,45 @@
|
|||
<el-col>
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>生产进度</div>
|
||||
<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 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==1" :text-inside="true" :stroke-width="14" :percentage="itemz"
|
||||
:status="getStatus(itemz)"/>
|
||||
<span v-else-if="index2==3">
|
||||
<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==1" :text-inside="true" :stroke-width="14" :percentage="itemz"
|
||||
:status="getStatus(itemz)"/>
|
||||
<span v-else-if="index2==3">
|
||||
<el-tag type="warning" effect="light">{{ itemz }}</el-tag>
|
||||
</span>
|
||||
<span v-else>{{ itemz }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -93,8 +74,7 @@
|
|||
<el-col :xs="24" :md="14">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>生产线</div>
|
||||
<div class="boxlabel">生产线</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<div class="boxmain">
|
||||
|
|
@ -155,13 +135,12 @@
|
|||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="height: 1%;"></div>
|
||||
<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 style="margin-left: 6px;font-size: 18px; margin-top: 6px">全年生产统计</div>
|
||||
</div>
|
||||
<div class="boxmain" id="chart1">
|
||||
</div>
|
||||
|
|
@ -170,8 +149,7 @@
|
|||
<el-col :xs="24" :md="9">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>本月合格率统计</div>
|
||||
<div style="margin-left: 6px; font-size: 18px; margin-top: 6px">本月合格率统计</div>
|
||||
</div>
|
||||
<div class="boxmain" id="chart2">
|
||||
</div>
|
||||
|
|
@ -180,8 +158,7 @@
|
|||
<el-col :xs="24" :md="6">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>昨日合格统计</div>
|
||||
<div style="margin-left: 6px; font-size: 18px; margin-top: 6px">昨日合格统计</div>
|
||||
</div>
|
||||
<div class="boxmain" id="chart3">
|
||||
</div>
|
||||
|
|
@ -191,88 +168,7 @@
|
|||
</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) {
|
||||
|
|
@ -283,44 +179,115 @@ export default {
|
|||
return {
|
||||
basicOption: {
|
||||
backgroundColor: '',
|
||||
xAxis: {
|
||||
data: ['一月', '二月', '三月', '四月', '五月', '六月'],
|
||||
},
|
||||
yAxis: { type: 'value' },
|
||||
series: [
|
||||
{
|
||||
name: '销量',
|
||||
type: 'bar',
|
||||
barwidth: 10,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
icon: "stack",
|
||||
right: 0,
|
||||
data: [{
|
||||
backgroundColor: 'rgb(250,205,0)',
|
||||
name: '合格率',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#83bff6' },
|
||||
{ offset: 0.5, color: '#188df0' },
|
||||
{ offset: 1, color: '#188df0' }
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(250,205,0)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(254,129,0)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#2378f7' },
|
||||
{ offset: 0.7, color: '#2378f7' },
|
||||
{ offset: 1, color: '#83bff6' }
|
||||
])
|
||||
}
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}],
|
||||
},
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
data: ['1号炉','2号炉', '3号炉', '4号炉', '5号炉', '6号炉', '7号炉', '8号炉'],
|
||||
nameTextStyle: {
|
||||
color: '#ffffff'
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#ffffff'
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
name: "生产统计",
|
||||
type: 'value',
|
||||
nameTextStyle: {
|
||||
color: '#ffffff'
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#ffffff'
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [5, 20, 36, 10, 10, 20]
|
||||
}
|
||||
],
|
||||
grid: { // 让图表占满容器
|
||||
top: "10%",
|
||||
left: "12%",
|
||||
right: "0px",
|
||||
bottom: "10%"
|
||||
}
|
||||
series: [{
|
||||
name: '合格率',
|
||||
type: 'bar',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 1, color: 'rgb(1,235,239)'
|
||||
},
|
||||
barWidth:30,
|
||||
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)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color:'#fff'
|
||||
},
|
||||
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)'
|
||||
}
|
||||
])
|
||||
},
|
||||
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]
|
||||
}]
|
||||
},
|
||||
workerData: [
|
||||
{
|
||||
|
|
@ -347,21 +314,153 @@ export default {
|
|||
post: '岗位1',
|
||||
state: 1
|
||||
},
|
||||
]
|
||||
],
|
||||
taskBoard: {
|
||||
header: ['姓名', '岗位', '班次', '状态'],
|
||||
headerBGC: '#0a3f44',
|
||||
data: [
|
||||
['小王', '成型人', '白班', '到岗'],
|
||||
['小李', '成型人', '白班', '到岗'],
|
||||
['小张', '成型人', '白班', '未到岗'],
|
||||
],
|
||||
index: true,
|
||||
columnWidth: [50],
|
||||
align: ['center'],
|
||||
},
|
||||
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
|
||||
},
|
||||
liData: ['序号', '型号', '完成进度', '产量', '状态'],
|
||||
listData: [
|
||||
["光纤预制管A", 100,"368",'已完成'],
|
||||
["光纤预制管B", 90,"368",'已完成'],
|
||||
["光纤预制管C", 80,"368",'已完成'],
|
||||
["光纤预制管D", 70,"368",'已完成'],
|
||||
["光纤预制管E", 60,"368",'已完成'],
|
||||
["光纤预制管F", 50,"368",'已完成'],
|
||||
["光纤预制管G", 40,"368",'已完成'],
|
||||
["光纤预制管H", 30,"368",'已完成'],
|
||||
],
|
||||
speed: 2000,
|
||||
myScroll: null,
|
||||
iliHeight: 30,
|
||||
time: null,
|
||||
delay: 20,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setChart("chart1");
|
||||
this.myScroll = setInterval(() => {
|
||||
this.scrollUp();
|
||||
}, this.speed);
|
||||
let chart1Option = deepCopy(this.basicOption)
|
||||
this.setChart("chart1", chart1Option);
|
||||
let chart2Option = deepCopy(this.basicOption)
|
||||
chart2Option.series[0].type = 'line'
|
||||
chart2Option.legend = {
|
||||
icon: "stack",
|
||||
right: 0,
|
||||
data: [{
|
||||
backgroundColor: 'rgb(250,205,0)',
|
||||
name: '合格率',
|
||||
itemStyle: {
|
||||
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'
|
||||
}
|
||||
}],
|
||||
};
|
||||
chart2Option.xAxis.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日'];
|
||||
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 chart3Option = deepCopy(this.basicOption)
|
||||
chart3Option.series[0].type = 'pie'
|
||||
chart3Option.series[0].itemStyle = {}
|
||||
chart3Option.series[0].emphasis = {}
|
||||
let chart3Option ={
|
||||
backgroundColor: '',
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
top:'bottom'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '完成率',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
itemStyle: {
|
||||
borderRadius: 2
|
||||
},
|
||||
center: ['50%', '45%'],
|
||||
data: [
|
||||
{ value: 1, name: '椭圆弯曲' },
|
||||
{ value: 3, name: '大小头' },
|
||||
{ value: 0, name: '偏壁' },
|
||||
{ value: 5, name: '结石气线' },
|
||||
{ value: 200, name: '合格' },
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
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));
|
||||
|
|
@ -371,13 +470,145 @@ export default {
|
|||
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%;
|
||||
}
|
||||
.boxmain {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
@media screen and (max-width: 800px) {
|
||||
.boxmain {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
.flex_center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.border {
|
||||
border: 1px dashed #49bcf7;
|
||||
}
|
||||
|
||||
.bigdata {
|
||||
font-size: 24px;
|
||||
}
|
||||
.boxlabel {
|
||||
margin-left: 6px;
|
||||
font-size: 18px;
|
||||
margin-top: 6px
|
||||
}
|
||||
.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>
|
||||
|
|
@ -8,29 +8,58 @@
|
|||
<el-main style="padding:0" id="mainBlock">
|
||||
<el-row style="height:100%">
|
||||
<div style="position: absolute;left: 0;width:20%;z-index:10">
|
||||
<div style="display:flex;flex-direction: column;height:100%;padding:20px">
|
||||
<div style="display:flex;flex-direction: column;height:100%;padding:0 10px">
|
||||
<div class="flexItem" style="flex:1">
|
||||
<div class="blockTitle">
|
||||
<div class="blockTitleIcon"></div>模块一
|
||||
<div class="blockTitleIcon"></div>
|
||||
<div>本周交付率</div>
|
||||
</div>
|
||||
<div id="line1" style="width:100%;height:92%;background:rgba(50,144,118,.1)"></div>
|
||||
<div id="line1" style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;"></div>
|
||||
</div>
|
||||
<div class="flexItem" style="flex:1">
|
||||
<div class="blockTitle">
|
||||
<div class="blockTitleIcon"></div>模块二
|
||||
<div class="blockTitleIcon"></div>
|
||||
<div>本周合格数</div>
|
||||
</div>
|
||||
<div id="bar1" style="width:100%;height:92%;background:rgba(50,144,118,.1)"></div>
|
||||
<div id="bar1" style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;"></div>
|
||||
</div>
|
||||
<div class="flexItem" style="flex:1">
|
||||
<div class="blockTitle">
|
||||
<div class="blockTitleIcon"></div>模块三
|
||||
<div class="blockTitleIcon"></div>
|
||||
<div>本周合格率</div>
|
||||
</div>
|
||||
<div id="line2" style="width:100%;height:92%;background:rgba(50,144,118,.1)"></div>
|
||||
<div id="line2" style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-col :span="24">
|
||||
<div class="model">
|
||||
<div style="position: absolute;width: 100%;text-align: center;">
|
||||
<div style="margin:5px 0 50px 0;color: #fff;font-size: 12px;font-weight: bold;">
|
||||
<img src="img/photon_top_line.png">
|
||||
<span>枣庄</span>
|
||||
{{ currentDay }}{{ currentWeek }}{{ currentTime }}
|
||||
<img src="img/photon_top_line.png" style="transform: rotateY(180deg);">
|
||||
</div>
|
||||
<div class="totalNumContnier">
|
||||
<div class="totalNumWrap totalNum_orange">
|
||||
<img class="" src="img/number_bg_orange.png">
|
||||
<span class="totalNumText">AVG合格数</span>
|
||||
<div class="totalNumber">36520</div>
|
||||
</div>
|
||||
<div class="totalNumWrap totalNumWrap_green">
|
||||
<img src="img/number_bg_green.png">
|
||||
<span class="totalNumText">预制棒合格数</span>
|
||||
<div class="totalNumber">36520</div>
|
||||
</div>
|
||||
<div class="totalNumWrap totalNum_blue">
|
||||
<img src="img/number_bg_blue.png">
|
||||
<span class="totalNumText">预制管合格数</span>
|
||||
<div class="totalNumber">36520</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="loadingScreen">
|
||||
<el-progress type="circle" :percentage="loadedPercent" :width=220 status="warning">
|
||||
<template #default="{ percentage }">
|
||||
|
|
@ -46,22 +75,25 @@
|
|||
<div style="display:flex;flex-direction: column;height:100%;padding:20px">
|
||||
<div class="flexItem" style="flex:1">
|
||||
<div class="blockTitle">
|
||||
<div class="blockTitleIcon"></div>模块四
|
||||
<div class="blockTitleIcon"></div>
|
||||
<div>本周不合格占比</div>
|
||||
</div>
|
||||
<div id="pie" style="width:100%;height:92%;background:rgba(50,144,118,.1)"></div>
|
||||
<div id="pie" style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;"></div>
|
||||
</div>
|
||||
<div class="flexItem" style="flex:1">
|
||||
<div class="blockTitle">
|
||||
<div class="blockTitleIcon"></div>模块五
|
||||
<div class="blockTitleIcon"></div>
|
||||
<div>本周计划完成度</div>
|
||||
</div>
|
||||
<div id="line3" style="width:100%;height:92%;background:rgba(50,144,118,.1)"></div>
|
||||
<div id="line3" style="width:100%;height:92%;background:rgba(9,31,43,.5);border-radius: 20px;margin-top: 5px;"></div>
|
||||
</div>
|
||||
<div class="flexItem" style="flex:1">
|
||||
<div class="blockTitle">
|
||||
<div class="blockTitleIcon"></div>模块六
|
||||
<div class="blockTitleIcon"></div>
|
||||
<div>库存情况</div>
|
||||
</div>
|
||||
<dv-scroll-board id="scrollTable" :config="taskBoard"
|
||||
:style="{ 'width': '100%', 'height': blockHeight }" />
|
||||
:style="{ 'width': '100%', 'height': blockHeight,'margin-top':'5px'}" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -118,18 +150,20 @@ export default {
|
|||
return {
|
||||
blockHeight: null,
|
||||
taskBoard: {
|
||||
header: ['姓名', '车间', '到岗'],
|
||||
header: ['物料编号', '存放车间', '库存数量'],
|
||||
headerBGC: 'rgb(10,63,68)',
|
||||
// waitTime: 1000,
|
||||
columnWidth: [1, 1, 1],
|
||||
data: [
|
||||
['王丽丽', '6车间', '<span style="color:green;">已到岗</span>'],
|
||||
['李强', '7车间', '<span style="color:green;">已到岗</span>'],
|
||||
['孙洪', '8车间', '<span style="color:green;">已到岗</span>'],
|
||||
['孙洪', '8车间', '<span style="color:green;">已到岗</span>'],
|
||||
['钱多多', '10车间', '<span style="color:green;">已到岗</span>'],
|
||||
['白兰', '10车间', '<span style="color:red;">未到岗</span>'],
|
||||
['白兰', '10车间', '<span style="color:red;">未到岗</span>'],
|
||||
['ZB2-1', '6车间', '<span style="color:green;">30000</span>'],
|
||||
['ZB2-2', '7车间', '<span style="color:green;">40000</span>'],
|
||||
['ZB2-3', '8车间', '<span style="color:green;">50000</span>'],
|
||||
['ZJ2-1', '8车间', '<span style="color:green;">35000</span>'],
|
||||
['ZJ2-2', '10车间', '<span style="color:green;">30000</span>'],
|
||||
['ZJ2-3', '10车间', '<span style="color:red;">100</span>'],
|
||||
['ZT2-1', '10车间', '<span style="color:red;">100</span>'],
|
||||
['ZT2-2', '10车间', '<span style="color:red;">100</span>'],
|
||||
['ZT2-3', '10车间', '<span style="color:red;">100</span>'],
|
||||
],
|
||||
index: true,
|
||||
columnWidth: [50],
|
||||
|
|
@ -157,19 +191,33 @@ export default {
|
|||
'立方体.003_primitive1': { total: '0', elec: '0', name: '成型车间' },
|
||||
'立立方体.002_primitive1': { total: '0', elec: '0', name: '成型车间' },
|
||||
},
|
||||
currentTime:'',
|
||||
currentWeek:'',
|
||||
currentDay:'',
|
||||
timerTime:null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let that = this;
|
||||
let height = document.getElementById('mainBlock').clientHeight;
|
||||
let height0 = height / 3 - 50;
|
||||
this.blockHeight = height0 + 'px'
|
||||
this.blockHeight = height0 + 'px';
|
||||
this.showTime();
|
||||
this.$nextTick(() => {
|
||||
this.initChart();
|
||||
this.initDomStyle();
|
||||
this.initFactory();
|
||||
})
|
||||
that.initChart();
|
||||
that.initDomStyle();
|
||||
that.initFactory();
|
||||
that.timerTime = setInterval(() => {
|
||||
that.showTime();
|
||||
}, 1000);
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
showTime() {
|
||||
this.currentTime = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss');
|
||||
this.currentWeek = this.$TOOL.dateFormat(new Date(), 'week');
|
||||
this.currentDay = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
|
||||
},
|
||||
initDomStyle() {
|
||||
// 获取窗口的总高度
|
||||
var windowHeight = window.innerHeight;
|
||||
|
|
@ -478,7 +526,7 @@ export default {
|
|||
return scene;
|
||||
};
|
||||
const scene = createScene(); //Call the createScene function
|
||||
scene.debugLayer.show()
|
||||
// scene.debugLayer.show()
|
||||
engine.runRenderLoop(function () {
|
||||
scene.render();
|
||||
});
|
||||
|
|
@ -506,10 +554,33 @@ export default {
|
|||
},
|
||||
legend: {
|
||||
icon: "stack",
|
||||
right: 0,
|
||||
data: [{
|
||||
top: 5,
|
||||
right: 5,
|
||||
data: [
|
||||
{
|
||||
backgroundColor: 'rgb(1,235,239)',
|
||||
name: 'Line 1',
|
||||
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)'
|
||||
}
|
||||
])
|
||||
}
|
||||
}, {
|
||||
name: 'AVG',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
itemStyle: {
|
||||
// color:'rgb(1,235,239)',
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
|
|
@ -522,27 +593,8 @@ export default {
|
|||
color: 'rgb(5, 158, 163)'
|
||||
}])
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}, {
|
||||
name: 'Line 2',
|
||||
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: {
|
||||
|
|
@ -550,16 +602,16 @@ export default {
|
|||
}
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '3%',
|
||||
left: '2%',
|
||||
right: '4%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['2日', '3日', '四日', '5日', '6日', '7日', '8日'],
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
nameTextStyle: {
|
||||
color: '#ffffff'
|
||||
},
|
||||
|
|
@ -582,7 +634,7 @@ export default {
|
|||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: 'dashed', //y轴分割线类型
|
||||
color: 'rgba(102,102,102,0.9)',
|
||||
|
|
@ -593,7 +645,7 @@ export default {
|
|||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Line 1',
|
||||
name: '预制棒管',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
|
|
@ -621,7 +673,7 @@ export default {
|
|||
data: [140, 232, 101, 264, 90, 340, 250]
|
||||
},
|
||||
{
|
||||
name: 'Line 2',
|
||||
name: 'AVG',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
|
|
@ -662,27 +714,30 @@ export default {
|
|||
}
|
||||
},
|
||||
legend: {
|
||||
right: 0,
|
||||
top: 5,
|
||||
right: 5,
|
||||
data: [
|
||||
{
|
||||
name: '棒',
|
||||
{
|
||||
name: 'AVG',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
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)'
|
||||
}])
|
||||
},
|
||||
}, {
|
||||
name: '管',
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(5,245,2)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(7,137,43)'
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
name: '预制管',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
|
|
@ -698,19 +753,37 @@ export default {
|
|||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '预制棒',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
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)'
|
||||
}])
|
||||
},
|
||||
},
|
||||
]
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
nameTextStyle: {
|
||||
color: '#ffffff'
|
||||
},
|
||||
|
|
@ -730,18 +803,13 @@ export default {
|
|||
color: '#ffffff'
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed', //y轴分割线类型
|
||||
color: 'rgba(102,102,102,0.9)',
|
||||
width: 1,
|
||||
},
|
||||
show: false
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '棒',
|
||||
name: '预制棒',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
|
|
@ -760,10 +828,10 @@ export default {
|
|||
}])
|
||||
},
|
||||
barWidth: 15,
|
||||
data: [120, 132, 101, 134, 90, 230]
|
||||
data: [120, 132, 101, 134, 90, 230, 300]
|
||||
},
|
||||
{
|
||||
name: '管',
|
||||
name: '预制管',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
barWidth: 20,
|
||||
|
|
@ -782,7 +850,29 @@ export default {
|
|||
}
|
||||
])
|
||||
},
|
||||
data: [220, 182, 191, 234, 290, 330]
|
||||
data: [220, 182, 191, 234, 290, 330, 200]
|
||||
},
|
||||
{
|
||||
name: 'AVG',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
barWidth: 20,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(5,245,2)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(7,137,43)'
|
||||
}
|
||||
])
|
||||
},
|
||||
data: [220, 182, 191, 234, 290, 330, 150]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
@ -796,42 +886,55 @@ export default {
|
|||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
right: 0,
|
||||
|
||||
data: [{
|
||||
name: '温度',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
top: 5,
|
||||
right: 5,
|
||||
data: [
|
||||
{
|
||||
name: '预制棒',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'orange'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'yellow'
|
||||
}])
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
// color:'rgb(1,235,239)',
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
name: '预制管',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'orange'
|
||||
color: 'rgb(1,235,239)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'yellow'
|
||||
color: 'rgb(5, 158, 163)'
|
||||
}])
|
||||
},
|
||||
},
|
||||
}],
|
||||
],
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
// saveAsImage: {}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
nameTextStyle: {
|
||||
color: '#ffffff'
|
||||
},
|
||||
|
|
@ -859,8 +962,9 @@ export default {
|
|||
},
|
||||
},
|
||||
|
||||
series: {
|
||||
name: '温度',
|
||||
series: [
|
||||
{
|
||||
name: '预制棒',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbolSize: 8, //设置折线上圆点大小
|
||||
|
|
@ -880,7 +984,7 @@ export default {
|
|||
}
|
||||
},
|
||||
smooth: 0.5, // 设置折线弧度
|
||||
data: [10, 10, 0, 0, -10, -8, 0, 10, 10, 0, 0, -10, -8, 0],
|
||||
data: [75, 60 ,80 ,78, 66 , 71, 81],
|
||||
lineStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
|
|
@ -896,7 +1000,46 @@ export default {
|
|||
globalCoord: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '预制管',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbolSize: 8, //设置折线上圆点大小
|
||||
symbol: 'circle',
|
||||
itemStyle: {
|
||||
// 设置symbol的颜色
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgb(1,235,239)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgb(5, 158, 163)'
|
||||
}])
|
||||
}
|
||||
},
|
||||
smooth: 0.5, // 设置折线弧度
|
||||
data: [65, 50 ,70 ,68, 55 , 60, 69],
|
||||
lineStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgb(1,235,239)' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1, color: 'rgb(5, 158, 163)' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
||||
line2Chart.setOption(line2option);
|
||||
//柱状图折线
|
||||
|
|
@ -929,7 +1072,7 @@ export default {
|
|||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['1', '2', '3', '4', '5', '6'],
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
|
|
@ -954,12 +1097,7 @@ export default {
|
|||
color: '#ffffff'
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed', //y轴分割线类型
|
||||
color: 'rgba(102,102,102,0.9)',
|
||||
width: 1,
|
||||
},
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -976,12 +1114,7 @@ export default {
|
|||
color: '#ffffff'
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed', //y轴分割线类型
|
||||
color: 'rgba(102,102,102,0.9)',
|
||||
width: 1,
|
||||
},
|
||||
show: false,
|
||||
},
|
||||
}
|
||||
],
|
||||
|
|
@ -995,7 +1128,7 @@ export default {
|
|||
}
|
||||
},
|
||||
barWidth: 15,
|
||||
data: [120, 132, 101, 134, 90, 230],
|
||||
data: [220, 250, 280, 290, 250, 300, 210],
|
||||
itemStyle: {
|
||||
borderRadius: [5, 5, 0, 0],
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
|
|
@ -1030,7 +1163,7 @@ export default {
|
|||
lineStyle: {
|
||||
color: 'rgb(255,120,0)'
|
||||
},
|
||||
data: [50, 55, 40, 60, 38, 95]
|
||||
data: [63, 80, 71, 82, 60, 70, 85],
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
@ -1040,9 +1173,10 @@ export default {
|
|||
pieDom.style.height = this.blockHeight;
|
||||
let pieChart = echarts.init(pieDom);
|
||||
let pieoption = {
|
||||
color: ['rgb(155,248,249)', 'rgb(248,189,118)', 'rgb(110,181,249)'],
|
||||
color: ['rgb(155,248,249)', 'rgb(110,181,249)','rgb(3,195,198)','rgb(205,248,248)', 'rgb(248,189,118)'],
|
||||
legend: {
|
||||
top: 'bottom',
|
||||
bottom: 10,
|
||||
// top: 'bottom',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
|
|
@ -1055,27 +1189,23 @@ export default {
|
|||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
// feature: {
|
||||
// mark: { show: true },
|
||||
// dataView: { show: true, readOnly: false },
|
||||
// restore: { show: true },
|
||||
// saveAsImage: { show: true }
|
||||
// }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '完成率',
|
||||
name: '不合格占比',
|
||||
type: 'pie',
|
||||
radius: [20, 60],
|
||||
center: ['50%', '50%'],
|
||||
roseType: 'area',
|
||||
radius: [30, 60],
|
||||
center: ['50%', '45%'],
|
||||
// roseType: 'area',
|
||||
itemStyle: {
|
||||
borderRadius: 2
|
||||
},
|
||||
data: [
|
||||
{ value: 40, name: '棒' },
|
||||
{ value: 20, name: '管' },
|
||||
{ value: 10, name: 'AVG' },
|
||||
{ value: 8, name: '椭圆弯曲' },
|
||||
{ value: 0, name: '大小头' },
|
||||
{ value: 2, name: '偏壁' },
|
||||
{ value: 6, name: '结石气线' },
|
||||
{ value: 150, name: '合格' },
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -1083,6 +1213,11 @@ export default {
|
|||
pieChart.setOption(pieoption);
|
||||
},
|
||||
},
|
||||
beforeDestoryed() {
|
||||
clearInterval(timerTime);
|
||||
this.timerTime = null;
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
|
@ -1109,7 +1244,7 @@ export default {
|
|||
height: 1px;
|
||||
width: 3%;
|
||||
position: absolute;
|
||||
bottom: 13px;
|
||||
bottom: 5px;
|
||||
background: rgba(54, 217, 187, 1);
|
||||
}
|
||||
|
||||
|
|
@ -1122,7 +1257,7 @@ export default {
|
|||
}
|
||||
|
||||
.flexItem {
|
||||
/* padding:40px; */
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.blockTitle {
|
||||
|
|
@ -1130,9 +1265,11 @@ export default {
|
|||
height: 40px;
|
||||
padding-left: 10px;
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
line-height: 40px;
|
||||
font-weight:bold;
|
||||
background: url('/public/img/photon_title.png');
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.blockTitleIcon {
|
||||
|
|
@ -1312,4 +1449,49 @@ export default {
|
|||
font-size: 20px !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
.totalNumContnier{
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
.totalNumWrap{
|
||||
margin: 0 10px;
|
||||
position: relative;
|
||||
img{
|
||||
width: 10vw;
|
||||
}
|
||||
}
|
||||
.totalNumWrap_green{
|
||||
.totalNumber{
|
||||
color: rgb(5,245,2);
|
||||
}
|
||||
}
|
||||
.totalNum_orange{
|
||||
.totalNumber{
|
||||
color: orange;
|
||||
}
|
||||
}
|
||||
.totalNum_blue{
|
||||
.totalNumber{
|
||||
color: rgb(2,245,242);
|
||||
}
|
||||
}
|
||||
.totalNumber{
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
.totalNumText{
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
<template>
|
||||
<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 in listData" class="rollData" ref="con1" :key="itemy">
|
||||
<td v-for="itemz in itemy" :key="itemz">{{ itemz }}</td>
|
||||
</tr>
|
||||
<tr v-for="itemy in listData" class="rollData" ref="con2" :key="itemy">
|
||||
<td v-for="itemz in itemy" :key="itemz">{{ itemz }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "Profile",
|
||||
data() {
|
||||
return {
|
||||
animate: false,
|
||||
liData: ["重点品类", "销售金额", "年周比", "达成率"],
|
||||
listData: [
|
||||
["A", "53.647", "-33.76", "86.15%"],
|
||||
["B", "53.647", "-33.76", "86.15%"],
|
||||
["C", "53.647", "-33.76", "86.15%"],
|
||||
["D", "53.647", "-33.76", "86.15%"],
|
||||
["E", "53.647", "-33.76", "86.15%"],
|
||||
["F", "53.647", "-33.76", "86.15%"],
|
||||
["G", "53.647", "-33.76", "86.15%"],
|
||||
["H", "53.647", "-33.76", "86.15%"],
|
||||
],
|
||||
speed: 1000,
|
||||
myScroll: null,
|
||||
iliHeight: 30,
|
||||
time: null,
|
||||
delay: 20,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
//滚动
|
||||
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+30;
|
||||
}
|
||||
}, // 鼠标滑过暂停滚动
|
||||
mouseOver() {
|
||||
clearInterval(this.myScroll);
|
||||
}, //鼠标移开重新滚动
|
||||
mouseOut() {
|
||||
this.myScroll = setInterval(() => {
|
||||
this.scrollUp();
|
||||
},
|
||||
this.speed);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.myScroll = setInterval(() => {
|
||||
this.scrollUp();
|
||||
}, this.speed);
|
||||
},
|
||||
beforeDestoryed() {
|
||||
clearInterval(myScroll);
|
||||
this.myScroll = null;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.wrapper {
|
||||
overflow: hidden;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.wrapper2 {
|
||||
height: 180px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
table-layout: fixed;
|
||||
|
||||
background-color: rgb(2, 25, 80);
|
||||
width: 100%;
|
||||
color: rgb(141, 35, 35);
|
||||
}
|
||||
|
||||
tabletr {
|
||||
transition: all 2s ease .3s;
|
||||
}
|
||||
|
||||
.marquee_top {
|
||||
transition: all 0.5s ease-in-out;
|
||||
margin-top: -26px;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 5px 10px;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 4px 10px;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
table th {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
table tr td {
|
||||
width: 25%;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
.rollData {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -244,13 +244,11 @@
|
|||
<el-table-column label="计划完工时间" prop="end_date" width="100" fixed="left">
|
||||
</el-table-column>
|
||||
<el-table-column v-for="item in columList" :label="item.data" :key="item">
|
||||
<template #default="scope">
|
||||
<div :class="bindClass(item)">
|
||||
<div v-if="activeName=='10车间'">{{ scope.row.count01 }}</div>
|
||||
<div>{{ item.count_ok }}</div>
|
||||
<div>{{ item.count_real }}</div>
|
||||
<div :class="bindClass(item)">
|
||||
<div v-if="activeName=='10车间'">{{ item.count1 }}</div>
|
||||
<div>{{ item.count2 }}</div>
|
||||
<div>{{ item.count3 }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
</el-main>
|
||||
|
|
@ -382,15 +380,18 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
// 动态绑定Class
|
||||
bindClass(row){
|
||||
let count = row.count;
|
||||
let countok = row.count_ok;
|
||||
let countreal = row.count_real;
|
||||
bindClass(item){
|
||||
let count = item.count;
|
||||
let classInfo = {countBlock:true, redColor: false, greenColor: false, orangeColor:false };
|
||||
let countok = 0;
|
||||
if(this.activeName=='10车间'){
|
||||
countok = item.count3;
|
||||
}else{
|
||||
countok = item.count2;
|
||||
}
|
||||
|
||||
if(countok>=count){
|
||||
classInfo.greenColor = true;
|
||||
}else if(countreal>=count){
|
||||
classInfo.orangeColor = true;
|
||||
}else{
|
||||
classInfo.redColor = true;
|
||||
}
|
||||
|
|
@ -441,7 +442,7 @@ export default {
|
|||
//本地更新数据
|
||||
handleSaveSuccess(data, mode) {
|
||||
this.$refs.table7.refresh();
|
||||
this.$refs.table8.refresh();
|
||||
// this.$refs.table8.refresh();
|
||||
this.$refs.table10.refresh();
|
||||
},
|
||||
handleQuery() {
|
||||
|
|
@ -487,7 +488,7 @@ export default {
|
|||
that.$message.success('下达任务成功');
|
||||
that.isloading = false;
|
||||
that.$refs.table7.refresh();
|
||||
that.$refs.table8.refresh();
|
||||
// that.$refs.table8.refresh();
|
||||
that.$refs.table10.refresh();
|
||||
}).catch(()=>{
|
||||
that.isloading = false;
|
||||
|
|
@ -508,7 +509,7 @@ export default {
|
|||
that.$message.success('下达任务成功');
|
||||
that.isloading = false;
|
||||
that.$refs.table7.refresh();
|
||||
that.$refs.table8.refresh();
|
||||
// that.$refs.table8.refresh();
|
||||
that.$refs.table10.refresh();
|
||||
}).catch(()=>{
|
||||
that.isloading = false;
|
||||
|
|
@ -524,20 +525,38 @@ export default {
|
|||
this.apiObj = this.$API.pm.mtask.list;
|
||||
this.visibleRecord = true;
|
||||
},
|
||||
handleClick(){
|
||||
this.columList = [];
|
||||
this.dataList = [];
|
||||
},
|
||||
rowclick(val){
|
||||
let that = this;
|
||||
console.log(val);
|
||||
that.columList = [];
|
||||
let utask = val.id;
|
||||
that.dataList.push(val)
|
||||
this.$API.pm.mtask.list.req({utask:utask,page:0}).then(res=>{
|
||||
res.forEach(item=>{
|
||||
console.log(item)
|
||||
let obj = {};
|
||||
obj.data = item.start_date;
|
||||
obj.count1 = 0;obj.count2 = 0;obj.count3 = 0;
|
||||
obj.count = item.count;
|
||||
obj.count_ok = item.count_ok;
|
||||
obj.count_real = item.count_real;
|
||||
obj.count_notok = item.count_notok;
|
||||
obj.data = item.start_date;
|
||||
if(that.activeName=='7车间'){
|
||||
let rate = (item.count_ok/item.count)*100;
|
||||
obj.count2 = item.count_ok;//7车间count_ok
|
||||
obj.count3 = rate+'%';//7车间合格率
|
||||
}else if(that.activeName=='10车间'){
|
||||
let mlogs = item.mlogs;
|
||||
if(mlogs.length>0){
|
||||
for(let i=0;i<mlogs.length;i++){
|
||||
if(mlogs[i].shift_name=='白班'){
|
||||
obj.count1 = mlogs[i].count_ok;//10车间白班
|
||||
}else{
|
||||
obj.count2 = mlogs[i].count_ok;//10车间夜班
|
||||
}
|
||||
obj.count3 = obj.count1+obj.count2;//10车间合计
|
||||
}
|
||||
}
|
||||
}
|
||||
that.columList.push(obj);
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -794,6 +794,7 @@ export default {
|
|||
this.brothersList = [];
|
||||
this.brothersList = row.material_out_.brothers;
|
||||
}
|
||||
console.log(row)
|
||||
},
|
||||
//本地更新数据
|
||||
handleSaveSuccess(data, mode) {
|
||||
|
|
|
|||
|
|
@ -627,7 +627,7 @@
|
|||
controls-position="right"
|
||||
style="width:100%"
|
||||
placeholder="合计"
|
||||
disabled
|
||||
:disabled="brothersList.length>0"
|
||||
@change="countChange"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
|
|
@ -695,40 +695,43 @@
|
|||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="formTitle">关联产品计数:</div>
|
||||
<el-row v-for="item in mlogb" :key="item">
|
||||
<el-col :md="12" :sm="24">
|
||||
<el-form-item label="产品名称" prop="material">
|
||||
<el-select
|
||||
v-model="item.material_out"
|
||||
placeholder="产品名称"
|
||||
disabled
|
||||
<div v-if="brothersList.length>0" class="formTitle">关联产品计数:</div>
|
||||
<div v-if="brothersList.length>0">
|
||||
<el-row v-for="item in mlogb" :key="item">
|
||||
<el-col :md="12" :sm="24">
|
||||
<el-form-item label="产品名称" prop="material">
|
||||
<el-select
|
||||
v-model="item.material_out"
|
||||
placeholder="产品名称"
|
||||
disabled
|
||||
style="width:100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in materialOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :md="12" :sm="24">
|
||||
<el-form-item label="合格数">
|
||||
<el-input-number
|
||||
v-model="item.count_ok"
|
||||
controls-position="right"
|
||||
:min="0" step="1"
|
||||
:step-strictly="true"
|
||||
style="width:100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in materialOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :md="12" :sm="24">
|
||||
<el-form-item label="合格数">
|
||||
<el-input-number
|
||||
v-model="item.count_ok"
|
||||
controls-position="right"
|
||||
:min="0" step="1"
|
||||
:step-strictly="true"
|
||||
style="width:100%"
|
||||
placeholder="合格数"
|
||||
@change="countOkSun"
|
||||
>
|
||||
</el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
placeholder="合格数"
|
||||
@change="countOkSun"
|
||||
>
|
||||
</el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<div class="formTitle">不合格原因及数量:</div>
|
||||
<el-row>
|
||||
<el-col :md="12" :sm="24">
|
||||
|
|
@ -846,7 +849,7 @@
|
|||
props:{
|
||||
mtask: { type: String, default: '' },
|
||||
activeType:{ type: String, default: '' },
|
||||
brothersList:{ type: Array },
|
||||
brothersList:{ type: Array, default:()=> [] },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -908,12 +911,14 @@
|
|||
})
|
||||
if(this.mode=='add'){
|
||||
let mlogb = [];
|
||||
this.brothersList.forEach(item=>{
|
||||
let obj = {};
|
||||
obj.material_out = item;
|
||||
obj.count_ok = null;
|
||||
mlogb.push(obj)
|
||||
})
|
||||
if(this.brothersList&&this.brothersList.length>0){
|
||||
this.brothersList.forEach(item=>{
|
||||
let obj = {};
|
||||
obj.material_out = item;
|
||||
obj.count_ok = null;
|
||||
mlogb.push(obj)
|
||||
})
|
||||
}
|
||||
this.mlogb = mlogb;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue