shujukanban

This commit is contained in:
shijing 2023-11-07 14:21:02 +08:00
parent d261ae7b7e
commit dfc84e220b
7 changed files with 607 additions and 2 deletions

BIN
public/img/photon_bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 690 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

BIN
public/img/photon_title.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 573 B

View File

@ -1934,6 +1934,17 @@ const routes = [
}, },
"component": "bigScreen/index_photon" "component": "bigScreen/index_photon"
}, },
{
"path": "/bigScreenP2",
"name": "bigScreenP2",
"meta": {
"title": "数据看板2",
"icon": "el-icon-platform",
"perms": ["bigScreenP"],
"fullpage": true,
},
"component": "bigScreen/textIndex"
},
//车间看板 //车间看板
{ {
"path": "/bigScreenP_10", "path": "/bigScreenP_10",

View File

@ -0,0 +1,587 @@
<template>
<el-container class="container">
<el-header class="pageHeader"><span class="top-line top-line-left"></span>光子科技<span class="top-line top-line-right"></span></el-header>
<el-main style="padding:0">
<el-row style="height:100%">
<el-col :span="6">
<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>
<div id="line1" style="width:100%;height:92%"></div>
</div>
<div class="flexItem" style="flex:1">
<div class="blockTitle"><div class="blockTitleIcon"></div>模块二</div>
<div id="bar1" style="width:100%;height:92%"></div>
</div>
<div class="flexItem" style="flex:1">
<div class="blockTitle"><div class="blockTitleIcon"></div>模块三</div>
<div id="line2" style="width:100%;height:92%"></div>
</div>
</div>
</el-col>
<el-col :span="12">12</el-col>
<el-col :span="6">
<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>
<div id="pie" style="width:100%;height:92%"></div>
</div>
<div class="flexItem" style="flex:1">
<div class="blockTitle"><div class="blockTitleIcon"></div>模块五</div>
<div id="line3" style="width:100%;height:92%"></div>
</div>
<div class="flexItem" style="flex:1">
<div class="blockTitle"><div class="blockTitleIcon"></div>模块六</div>
<dv-scroll-board id="scrollTable" :config="taskBoard" style="width:100%;height:92%"/>
</div>
</div>
</el-col>
</el-row>
</el-main>
</el-container>
</template>
<script>
import * as echarts from 'echarts';
export default {
data() {
return {
taskBoard: {
header: ['列1', '列2', '列3'],
data: [
['行1列1', '行1列2', '行1列3'],
['行2列1', '行2列2', '行2列3'],
['行3列1', '行3列2', '行3列3'],
['行4列1', '行4列2', '行4列3'],
['行5列1', '行5列2', '行5列3'],
['行6列1', '行6列2', '行6列3'],
['行7列1', '行7列2', '行7列3'],
['行8列1', '行8列2', '行8列3'],
['行9列1', '行9列2', '行9列3'],
['行10列1', '行10列2', '行10列3'],
],
index: true,
columnWidth: [50],
align: ['center'],
},
}
},
mounted() {
let chartDom = document.getElementById('line1');
let myChart = echarts.init(chartDom);
let option = {
color: ['#FF0087', '#FFBF00'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
icon: "stack",
right:0,
data: [{
name:'Line 1',
textStyle:{
color:'#fff'
}
}, {
name:'Line 2',textStyle:{
color:'#fff'
}}],
},
toolbox: {
feature: {
// saveAsImage: {}
}
},
grid: {
left: '5%',
right: '5%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['2日', '3日', '四日', '5日', '6日', '7日', '8日'],
nameTextStyle: {
color:'#ffffff'
},
axisLabel: {
color:'#ffffff'
},
}
],
yAxis: [
{
name: "合格率(%)",
type: 'value',
nameTextStyle: {
color:'#ffffff'
},
axisLabel: {
color:'#ffffff'
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed', //y线
color: 'rgba(102,102,102,0.9)',
width: 1,
},
},
}
],
series: [
{
name: 'Line 1',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(128, 255, 165)'
},
{
offset: 1,
color: 'rgb(1, 191, 236)'
}
])
},
emphasis: {
focus: 'series'
},
data: [140, 232, 101, 264, 90, 340, 250]
},
{
name: 'Line 2',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(0, 221, 255)'
},
{
offset: 1,
color: 'rgb(77, 119, 255)'
}
])
},
emphasis: {
focus: 'series'
},
data: [120, 282, 111, 234, 220, 340, 310]
},
]
};
myChart.setOption(option);
let bar1 = document.getElementById('bar1');
let bar1Chart = echarts.init(bar1);
let bar1option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
right:0,
data:[
{
name:'棒',textStyle:{
color:'#fff'
}
}, {
name:'管',textStyle:{
color:'#fff'
}}
]
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月'],
nameTextStyle: {
color:'#ffffff'
},
axisLabel: {
color:'#ffffff'
},
}
],
yAxis: [
{
name: "数量(个)",
type: 'value',
nameTextStyle: {
color:'#ffffff'
},
axisLabel: {
color:'#ffffff'
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed', //y线
color: 'rgba(102,102,102,0.9)',
width: 1,
},
},
}
],
series: [
{
name: '棒',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
barWidth:20,
data: [120, 132, 101, 134, 90, 230]
},
{
name: '管',
type: 'bar',
stack: 'Ad',
barWidth:20,
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330]
}
]
};
bar1Chart.setOption(bar1option);
let line2Dom = document.getElementById('line2');
let line2Chart = echarts.init(line2Dom);
let line2option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['温度'],
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
// saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1', '2', '3', '4', '5', '6'],
nameTextStyle: {
color:'#ffffff'
},
axisLabel: {
color:'#ffffff'
},
},
yAxis: {
name:'温度',
type: 'value',
nameTextStyle: {
color:'#ffffff'
},
axisLabel: {
color:'#ffffff'
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed', //y线
color: 'rgba(102,102,102,0.9)',
width: 1,
},
},
},
series: {
name: 'Email',
type: 'line',
stack: 'Total',
symbolSize:8, //线
symbol:'circle',
smooth: 0.5, // 线
data: [10, 10, 0, 0, -2, -2, 0],
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#FF0000' // 0%
}, {
offset: 1, color: '#ffa500' // 100%
}],
globalCoord: false // false
}
},
}
};
line2Chart.setOption(line2option);
let line3Dom = document.getElementById('line3');
let line3Chart = echarts.init(line3Dom);
let line3option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
legend: {
right:0,
data: ['数量', '合格率'],
textStyle:{
color:'#fff'
}
},
xAxis: [
{
type: 'category',
data: ['1', '2', '3', '4', '5', '6'],
axisPointer: {
type: 'shadow'
},
nameTextStyle: {
color:'#ffffff'
},
axisLabel: {
color:'#ffffff'
},
}
],
yAxis: [
{
type: 'value',
name: '数量',
min: 0,
interval: 50,
nameTextStyle: {
color:'#ffffff'
},
axisLabel: {
color:'#ffffff'
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed', //y线
color: 'rgba(102,102,102,0.9)',
width: 1,
},
},
},
{
type: 'value',
name: '合格率',
min: 0,
max: 100,
interval: 20,
axisLabel: {
formatter: '{value} %',
color:'#ffffff'
},
nameTextStyle: {
color:'#ffffff'
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed', //y线
color: 'rgba(102,102,102,0.9)',
width: 1,
},
},
}
],
series: [
{
name: '数量',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value;
}
},
data: [120, 132, 101, 134, 90, 230]
},
{
name: '合格率',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value ;
}
},
data:[80, 90, 95, 92, 90, 100]
}
]
};
line3Chart.setOption(line3option);
let pieDom = document.getElementById('pie');
let pieChart = echarts.init(pieDom);
let pieoption = {
legend: {
top: 'bottom',
textStyle:{
color:'#fff'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
show: true,
// feature: {
// mark: { show: true },
// dataView: { show: true, readOnly: false },
// restore: { show: true },
// saveAsImage: { show: true }
// }
},
series: [
{
name: '完成率',
type: 'pie',
radius: [40, 90],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius:2
},
data: [
{ value: 40, name: '棒' },
{ value: 38, name: '管' },
{ value: 32, name: 'AVG' },
]
}
]
};
pieChart.setOption(pieoption);
},
methods:{},
}
</script>
<style>
.container{
background:url('/public/img/photon_bg.png') no-repeat;
background-size:cover;
}
.pageHeader{
height:70px;
font-size: 28px;
background:none;
border-bottom:none;
position:relative;
display:block;
text-align:center;
color:#ffffff;
padding:1px;
background:url('/public/img/photon_header.png') no-repeat;
background-size:100% 100%;
}
.top-line{
height: 1px;
width: 3%;
position: absolute;
bottom: 13px;
background: rgba(54, 217, 187, 1);
}
.top-line-left{
left: 24%;
}
.top-line-right{
right: 24%;
}
.flexItem{
/* padding:40px; */
}
.blockTitle{
color:#fff;
height:40px;
padding-left:10px;
font-size:16px;
line-height:30px;
background:url('/public/img/photon_title.png');
background-size: 100% 100%;
}
.blockTitleIcon{
width:20px;
height:20px;
margin-top:10px;margin-right:5px;
display:inline-block;
animation: rotate 3s infinite;
transform-origin: center center;
background:url('/public/img/photon_title_icon.png');
background-size: 100% 100%;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
25% { transform: rotate(90deg); }
50% { transform: rotate(180deg); }
75% { transform: rotate(270deg); }
100% { transform: rotate(360deg); }
}
.row-item{
height:40px!important;
line-height:40px!important;
background-color:rgb(10,63,68)!important;
}
#scrollTable>.hader{
background:rgb(10,63,68)!important;
background-color:rgb(10,63,68)!important;
}
</style>

View File

@ -45,8 +45,8 @@
<el-link type="primary" @click="table_check(scope.row)" v-if="scope.row.test_user==null"> <el-link type="primary" @click="table_check(scope.row)" v-if="scope.row.test_user==null">
检验 检验
</el-link> </el-link>
<el-link type="primary" @click="table_check(scope.row)" v-else> <el-link type="primary" @click="table_Show(scope.row)" v-else>
检验 产看
</el-link> </el-link>
<el-link type="danger" @click="table_del(scope.row)" v-if="mioObj.state == 10"> <el-link type="danger" @click="table_del(scope.row)" v-if="mioObj.state == 10">
删除 删除
@ -154,6 +154,13 @@ export default {
this.$refs.checkDialog.open("add"); this.$refs.checkDialog.open("add");
}); });
}, },
table_Show(row){
this.dialog.check = true;
this.mioitemId = row.id;
this.$nextTick(() => {
this.$refs.checkDialog.open("add");
});
},
// //
handleSaveSuccess(data, mode) { handleSaveSuccess(data, mode) {
if (mode == "add") { if (mode == "add") {