zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

shujukanbancolorsChange

This commit is contained in:
shijing 2023-11-08 09:03:05 +08:00
parent dfc84e220b
commit 2249f5fc3e
1 changed files with 185 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

231
src/views/bigScreen/textIndex.vue
View File

@ -1,7 +1,11 @@
<template> <template>
<el-container class="container"> <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-header class="pageHeader">
<el-main style="padding:0"> <span class="top-line top-line-left"></span>
光子科技
<span class="top-line top-line-right"></span>
</el-header>
<el-main style="padding:0" id="mainBlock">
<el-row style="height:100%"> <el-row style="height:100%">
<el-col :span="6"> <el-col :span="6">
<div style="display:flex;flex-direction: column;height:100%;padding:20px"> <div style="display:flex;flex-direction: column;height:100%;padding:20px">
@ -19,7 +23,7 @@
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="12">12</el-col> <el-col :span="12"></el-col>
<el-col :span="6"> <el-col :span="6">
<div style="display:flex;flex-direction: column;height:100%;padding:20px"> <div style="display:flex;flex-direction: column;height:100%;padding:20px">
<div class="flexItem" style="flex:1"> <div class="flexItem" style="flex:1">
@ -32,7 +36,7 @@
</div> </div>
<div class="flexItem" style="flex:1"> <div class="flexItem" style="flex:1">
<div class="blockTitle"><div class="blockTitleIcon"></div>模块六</div> <div class="blockTitle"><div class="blockTitleIcon"></div>模块六</div>
<dv-scroll-board id="scrollTable" :config="taskBoard" style="width:100%;height:92%"/> <dv-scroll-board id="scrollTable" :config="taskBoard" :style="{'width':'100%','height':blockHeight}"/>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -45,7 +49,9 @@ import * as echarts from 'echarts';
export default { export default {
data() { data() {
return { return {
blockHeight:null,
taskBoard: { taskBoard: {
headerBGC:'#0a3f44',
header: ['列1', '列2', '列3'], header: ['列1', '列2', '列3'],
data: [ data: [
['行1列1', '行1列2', '行1列3'], ['行1列1', '行1列2', '行1列3'],
@ -66,10 +72,14 @@ export default {
} }
}, },
mounted() { mounted() {
let height = document.getElementById('mainBlock').clientHeight;
let height0 = height/3-50;
this.blockHeight = height0+'px'
//左1
let chartDom = document.getElementById('line1'); let chartDom = document.getElementById('line1');
chartDom.style.height = height0+'px';
let myChart = echarts.init(chartDom); let myChart = echarts.init(chartDom);
let option = { let option = {
color: ['#FF0087', '#FFBF00'],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
@ -83,14 +93,40 @@ export default {
icon: "stack", icon: "stack",
right:0, right:0,
data: [{ data: [{
backgroundColor:'rgb(1,235,239)',
name:'Line 1', name:'Line 1',
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:{ textStyle:{
color:'#fff' color:'#fff'
} }
}, { }, {
name:'Line 2',textStyle:{ name:'Line 2',
textStyle:{
color:'#fff' 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: { toolbox: {
feature: { feature: {
@ -126,6 +162,9 @@ export default {
axisLabel: { axisLabel: {
color:'#ffffff' color:'#ffffff'
}, },
splitLine: {
show: false,
},
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -143,19 +182,20 @@ export default {
stack: 'Total', stack: 'Total',
smooth: true, smooth: true,
lineStyle: { lineStyle: {
width: 0 width: 1,color:'rgb(1,235,239)'
}, },
showSymbol: false, showSymbol: false,
areaStyle: { areaStyle: {
opacity: 0.8, opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: 'rgb(128, 255, 165)' color: 'rgba(1,235,239)'
}, },
{ {
offset: 1, offset: 1,
color: 'rgb(1, 191, 236)' color: 'rgb(5, 158, 163)'
} }
]) ])
}, },
@ -170,7 +210,7 @@ export default {
stack: 'Total', stack: 'Total',
smooth: true, smooth: true,
lineStyle: { lineStyle: {
width: 0 width: 1,color:'rgb(250,205,0)'
}, },
showSymbol: false, showSymbol: false,
areaStyle: { areaStyle: {
@ -178,11 +218,11 @@ export default {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: 'rgb(0, 221, 255)' color: 'rgb(254,129,0)'
}, },
{ {
offset: 1, offset: 1,
color: 'rgb(77, 119, 255)' color: 'rgb(250,205,0)'
} }
]) ])
}, },
@ -194,8 +234,9 @@ export default {
] ]
}; };
myChart.setOption(option); myChart.setOption(option);
//左边2
let bar1 = document.getElementById('bar1'); let bar1 = document.getElementById('bar1');
bar1.style.height = height0+'px';
let bar1Chart = echarts.init(bar1); let bar1Chart = echarts.init(bar1);
let bar1option = { let bar1option = {
tooltip: { tooltip: {
@ -208,13 +249,40 @@ export default {
right:0, right:0,
data:[ data:[
{ {
name:'棒',textStyle:{ name:'棒',
textStyle:{
color:'#fff' 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:'管',textStyle:{ name:'管',
textStyle:{
color:'#fff' 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)'
}
])
}
}
] ]
}, },
grid: { grid: {
@ -263,7 +331,19 @@ export default {
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
barWidth:20, 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)'
}])
},
barWidth:15,
data: [120, 132, 101, 134, 90, 230] data: [120, 132, 101, 134, 90, 230]
}, },
{ {
@ -274,20 +354,48 @@ export default {
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
itemStyle:{
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(250,205,0)'
},
{
offset: 1,
color: 'rgb(254,129,0)'
}
])
},
data: [220, 182, 191, 234, 290, 330] data: [220, 182, 191, 234, 290, 330]
} }
] ]
}; };
bar1Chart.setOption(bar1option); bar1Chart.setOption(bar1option);
//左3
let line2Dom = document.getElementById('line2'); let line2Dom = document.getElementById('line2');
line2Dom.style.height = height0+'px';
let line2Chart = echarts.init(line2Dom); let line2Chart = echarts.init(line2Dom);
let line2option = { let line2option = {
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
legend: { legend: {
data: ['温度'], color: ['rgb(250,205,0)'],
data: [{
name:'温度',
itemStyle:{
// color:'rgb(1,235,239)',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'orange'
},
{
offset: 1,
color: 'yellow'
}])
},
}],
}, },
grid: { grid: {
left: '3%', left: '3%',
@ -303,7 +411,7 @@ export default {
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: ['1', '2', '3', '4', '5', '6'], data: ['1', '2', '3', '4', '5', '6','7','8','9','10'],
nameTextStyle: { nameTextStyle: {
color:'#ffffff' color:'#ffffff'
}, },
@ -332,33 +440,48 @@ export default {
}, },
series: { series: {
name: 'Email', name: '温度',
type: 'line', type: 'line',
stack: 'Total', stack: 'Total',
symbolSize:8, //设置折线上圆点大小 symbolSize:8, //设置折线上圆点大小
symbol:'circle', symbol:'circle',
smooth: 0.5, // 设置折线弧度 itemStyle: {
data: [10, 10, 0, 0, -2, -2, 0], // 设置symbol的颜色
lineStyle: { normal: {
color: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
type: 'linear', {
x: 0, offset: 0,
y: 0, color: 'orange'
x2: 1, },
y2: 0, {
colorStops: [{ offset: 1,
offset: 0, color: '#FF0000' // 0% 处的颜色 color: 'yellow'
}, { }])
offset: 1, color: '#ffa500' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
} }
}, },
smooth: 0.5, // 设置折线弧度
data: [10, 10, 0, 0, -10, -8, 0,10, 10, 0, 0, -10, -8, 0],
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: 'orange' // 0% 处的颜色
}, {
offset: 1, color: 'yellow' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
},
} }
}; };
line2Chart.setOption(line2option); line2Chart.setOption(line2option);
//柱状图折线
let line3Dom = document.getElementById('line3'); let line3Dom = document.getElementById('line3');
line3Dom.style.height = height0+'px';
let line3Chart = echarts.init(line3Dom); let line3Chart = echarts.init(line3Dom);
let line3option = { let line3option = {
tooltip: { tooltip: {
@ -451,12 +574,26 @@ export default {
return value; return value;
} }
}, },
data: [120, 132, 101, 134, 90, 230] barWidth:15,
data: [120, 132, 101, 134, 90, 230],
itemStyle:{
borderRadius: [5, 5, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(13,176,176)'
},
{
offset: 1,
color: 'rgb(246,163,58)'
}])
},
}, },
{ {
name: '合格率', name: '合格率',
type: 'line', type: 'line',
yAxisIndex: 1, yAxisIndex: 1,
// 255,120,0
tooltip: { tooltip: {
valueFormatter: function (value) { valueFormatter: function (value) {
return value ; return value ;
@ -467,10 +604,12 @@ export default {
] ]
}; };
line3Chart.setOption(line3option); line3Chart.setOption(line3option);
//饼状图
let pieDom = document.getElementById('pie'); let pieDom = document.getElementById('pie');
pieDom.style.height = height0+'px';
let pieChart = echarts.init(pieDom); let pieChart = echarts.init(pieDom);
let pieoption = { let pieoption = {
color:['rgb(155,248,249)','rgb(248,189,118)','rgb(110,181,249)'],
legend: { legend: {
top: 'bottom', top: 'bottom',
textStyle:{ textStyle:{
@ -496,7 +635,7 @@ export default {
{ {
name: '完成率', name: '完成率',
type: 'pie', type: 'pie',
radius: [40, 90], radius: [20, 60],
center: ['50%', '50%'], center: ['50%', '50%'],
roseType: 'area', roseType: 'area',
itemStyle: { itemStyle: {
@ -504,8 +643,8 @@ export default {
}, },
data: [ data: [
{ value: 40, name: '棒' }, { value: 40, name: '棒' },
{ value: 38, name: '管' }, { value: 20, name: '管' },
{ value: 32, name: 'AVG' }, { value: 10, name: 'AVG' },
] ]
} }
] ]
@ -578,10 +717,10 @@ export default {
.row-item{ .row-item{
height:40px!important; height:40px!important;
line-height:40px!important; line-height:40px!important;
background-color:rgb(10,63,68)!important; /* background-color:rgb(10,63,68)!important; */
} }
#scrollTable>.hader{ #scrollTable>.hader{
background:rgb(10,63,68)!important; background:rgb(10,63,68)!important;
background-color:rgb(10,63,68)!important; background-color:#0a3f44!important;
} }
</style> </style>