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

7车间数据

This commit is contained in:
shijing 2024-01-22 17:54:35 +08:00
parent 410a55b411
commit c2d09a0fe1
1 changed files with 231 additions and 247 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

478
src/views/bigScreen/index_7dept.vue
View File

@ -2,24 +2,24 @@
<el-container class="dashboard"> <el-container class="dashboard">
<el-header class="header"> <el-header class="header">
<div style="font-weight: bold; font-family:'myfont';font-size:32px">7车间生产数据大看板</div> <div style="font-weight: bold; font-family:'myfont';font-size:32px">7车间生产数据大看板</div>
<div style="font-size: 14px;margin-top:18px">{{currentDay}}{{ currentTime }}</div> <div style="font-size: 14px;margin-top:18px">{{ currentDay }}{{ currentTime }}</div>
</el-header> </el-header>
<el-main> <el-main>
<el-row style="height: 60%" :gutter="10"> <el-row style="height: 60%" :gutter="10">
<el-col :xs="24" :md="10" style="height: 100%;"> <el-col :xs="24" :md="10" style="height: 100%;">
<div class="box" style="height: 29%"> <div class="box" style="height: 29%">
<div class="boxtitle"> <div class="boxtitle">
<div class="boxlabel">今日任务</div> <div class="boxlabel">今日任务</div>
</div> </div>
<div style="height: 4px;"></div> <div style="height: 4px;"></div>
<div class="boxmain bigdata border" style="overflow:scroll"> <div class="boxmain bigdata border" style="overflow:scroll">
<div v-for="item in todayMtask" :key="item.id" style="width:50%;display:inline-block; height: 40px;"> <div v-for="item in todayMtask" :key="item.id"
<span style="font-size:12px">{{item.material_out_name}}</span> style="width:50%;display:inline-block; height: 40px;">
<span style="font-size:12px">{{ item.material_out_name }}</span>
<span style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont"> <span style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">
{{item.count}} {{ item.count }}
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<div style="height: 1%;"></div> <div style="height: 1%;"></div>
@ -31,7 +31,7 @@
</div> </div>
<div style="height: 4px;"></div> <div style="height: 4px;"></div>
<div class="boxmain" id="scrollContainer1"> <div class="boxmain" id="scrollContainer1">
<scScrollTavle v-if="table1Visible" :tableHeight="containerHeight1" <scScrollTavle v-if="table1Visible" :tableHeight="containerHeight1"
:rowData="processData" :titleData="liData1" :refValue="refValue1"></scScrollTavle> :rowData="processData" :titleData="liData1" :refValue="refValue1"></scScrollTavle>
</div> </div>
</div> </div>
@ -45,8 +45,8 @@
</div> </div>
<div style="height: 4px;"></div> <div style="height: 4px;"></div>
<div class="boxmain" id="scrollContainer2"> <div class="boxmain" id="scrollContainer2">
<scScrollTavle v-if="table2Visible" :tableHeight="containerHeight2" <scScrollTavle v-if="table2Visible" :tableHeight="containerHeight2" :rowData="lineData"
:rowData="lineData" :titleData="liData2" :refValue="refValue2"></scScrollTavle> :titleData="liData2" :refValue="refValue2"></scScrollTavle>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -92,12 +92,12 @@ function deepCopy(obj) {
return JSON.parse(JSON.stringify(obj)); return JSON.parse(JSON.stringify(obj));
} }
export default { export default {
components: {scScrollTavle}, components: { scScrollTavle },
data() { data() {
return { return {
basicOption: { basicOption: {
backgroundColor: '', backgroundColor: '',
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
@ -118,7 +118,7 @@ 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(250,205,0)' color: 'rgb(250,205,0)'
}, },
{ {
offset: 1, offset: 1,
@ -139,7 +139,7 @@ export default {
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: true, boundaryGap: true,
data: ['1号炉','2号炉', '3号炉', '4号炉', '5号炉', '6号炉', '7号炉', '8号炉'], data: ['1号炉', '2号炉', '3号炉', '4号炉', '5号炉', '6号炉', '7号炉', '8号炉'],
nameTextStyle: { nameTextStyle: {
color: '#ffffff' color: '#ffffff'
}, },
@ -169,7 +169,7 @@ export default {
lineStyle: { lineStyle: {
width: 1, color: 'rgb(1,235,239)' width: 1, color: 'rgb(1,235,239)'
}, },
barWidth:30, barWidth: 30,
showSymbol: false, showSymbol: false,
areaStyle: { areaStyle: {
opacity: 0.8, opacity: 0.8,
@ -190,7 +190,7 @@ export default {
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
color:'#fff' color: '#fff'
}, },
itemStyle: { itemStyle: {
borderRadius: [2, 2, 0, 0], borderRadius: [2, 2, 0, 0],
@ -205,16 +205,16 @@ export default {
} }
]) ])
}, },
data: [140, 232, 101, 264, 90, 340, 250,140, 232, 101, 264, 90, 340, 250,140, 232, 101, 264, 90, 340, 250,140, 232, 101, 264, 90, 340, 250, 340, 250] 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]
}] }]
}, },
chart3Option:{ chart3Option: {
backgroundColor: '', backgroundColor: '',
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
}, },
legend: { legend: {
top:'bottom', top: 'bottom',
}, },
series: { series: {
name: '完成率', name: '完成率',
@ -234,34 +234,34 @@ export default {
], ],
emphasis: { emphasis: {
itemStyle: { itemStyle: {
shadowBlur: 10, shadowBlur: 10,
shadowOffsetX: 0, shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)' shadowColor: 'rgba(0, 0, 0, 0.5)'
} }
} }
} }
}, },
containerHeight1:100, containerHeight1: 100,
containerHeight2:100, containerHeight2: 100,
table1Visible:false, table1Visible: false,
table2Visible:false, table2Visible: false,
refValue1:'moocBox1', refValue1: 'moocBox1',
refValue2:'moocBox2', refValue2: 'moocBox2',
liData1: ['序号', '型号', '完成进度', '产量', '状态'], liData1: ['序号', '型号', '完成进度', '产量', '状态'],
processData:[], processData: [],
liData2: ['序号', '炉号','产品名称', '型号', '规格', '最近产量','锅数','设备状态'], liData2: ['序号', '炉号', '产品名称', '型号', '规格', '最近产量', '锅数', '设备状态'],
lineData:[], lineData: [],
todayMtask:[], todayMtask: [],
time: null, time: null,
delay: 20, delay: 20,
dayInterval:null, dayInterval: null,
days:30, days: 30,
today:'', today: '',
start_date:'', start_date: '',
end_date:'', end_date: '',
currentTime:'', currentTime: '',
currentDay:'', currentDay: '',
yesterday:'', yesterday: '',
chartInterval1: null, chartInterval1: null,
chartInterval2: null, chartInterval2: null,
chartInterval3: null, chartInterval3: null,
@ -276,30 +276,30 @@ export default {
this.table2Visible = true; this.table2Visible = true;
let date = new Date(); let date = new Date();
let year = date.getFullYear(); let year = date.getFullYear();
let month = date.getMonth()+1; let month = date.getMonth() + 1;
let day = date.getDate(); let day = date.getDate();
let days = new Date(year, month, 0).getDate(); let days = new Date(year, month, 0).getDate();
this.days = days; this.days = days;
let start_date = year+'-'+month+'-01'; let start_date = year + '-' + month + '-01';
let lastDay = new Date(year, month, 0).getDate(); let lastDay = new Date(year, month, 0).getDate();
let end_date = year+'-'+month+'-'+lastDay; let end_date = year + '-' + month + '-' + lastDay;
this.start_date = start_date; this.start_date = start_date;
this.end_date = end_date; this.end_date = end_date;
this.today = year+'-'+month+'-'+day; this.today = year + '-' + month + '-' + day;
let yesterday = new Date(date.getTime()-24*60*60*1000); let yesterday = new Date(date.getTime() - 24 * 60 * 60 * 1000);
this.yesterday = yesterday.getFullYear()+"-" + (yesterday.getMonth()+1) + "-" + yesterday.getDate(); this.yesterday = yesterday.getFullYear() + "-" + (yesterday.getMonth() + 1) + "-" + yesterday.getDate();
this.getProductLine(); this.getProductLine();
this.getUtask(); this.getUtask();
this.getTodayMtask(); this.getTodayMtask();
this.getLineData(); this.getLineData();
//时间 //时间
this.showTime() this.showTime()
this.dayInterval = setInterval(()=>{ this.dayInterval = setInterval(() => {
this.showTime() this.showTime()
},1000) }, 1000)
}, },
methods: { methods: {
showTime(){ showTime() {
this.currentTime = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss') this.currentTime = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
this.currentDay = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日') this.currentDay = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
}, },
@ -319,22 +319,22 @@ export default {
}, 500) }, 500)
}, },
//任务进度 //任务进度
getUtask(){ getUtask() {
let that = this; let that = this;
let obj ={}; let obj = {};
obj.start_date__gte = this.start_date; obj.start_date__gte = this.start_date;
obj.end_date__lte = this.end_date; obj.end_date__lte = this.end_date;
obj.belong_dept__name='7车间'; obj.belong_dept__name = '7车间';
obj.page=0; obj.page = 0;
that.$API.pm.utask.list.req(obj).then((res) => { that.$API.pm.utask.list.req(obj).then((res) => {
console.log('任务进度:',res); console.log('任务进度:', res);
let processData = []; let processData = [];
res.forEach(item => { res.forEach(item => {
let arr = [],obj1 = {},obj2 = {},obj3 = {},obj4 = {}; let arr = [], obj1 = {}, obj2 = {}, obj3 = {}, obj4 = {};
obj1.elType = 'primary'; obj1.elType = 'primary';
obj1.value = item.material_.specification; obj1.value = item.material_.specification;
obj2.elType = 'progress'; obj2.elType = 'progress';
let process = Math.round((item.count_ok/item.count)*100) let process = Math.round((item.count_ok / item.count) * 100)
obj2.value = process; obj2.value = process;
obj3.elType = 'primary'; obj3.elType = 'primary';
obj3.value = item.count_ok; obj3.value = item.count_ok;
@ -350,17 +350,17 @@ export default {
}); });
}, },
//7车间生产按炉进度 //7车间生产按炉进度
getLineData(){ getLineData() {
let that = this; let that = this;
that.$API.bi.dataset.exec.req('linedept7', {}).then((res) => { that.$API.bi.dataset.exec.req('linedept7', {}).then((res) => {
console.log('7车间生产线:',res); console.log('7车间生产线:', res);
let list = res.data2.ds0; let list = res.data2.ds0;
if(list.length>0){ if (list.length > 0) {
let lineData = []; let lineData = [];
list.forEach(item => { list.forEach(item => {
let arr = [],obj1 = {},obj2 = {},obj3 = {},obj4 = {},obj5 = {},obj6 = {},obj7 = {}; let arr = [], obj1 = {}, obj2 = {}, obj3 = {}, obj4 = {}, obj5 = {}, obj6 = {}, obj7 = {};
obj1.elType = 'primary'; obj1.elType = 'primary';
obj1.value = item.equip_name;//炉号 obj1.value = item.equip_name + '|' + item.equip_number;//炉号
obj2.elType = 'primary'; obj2.elType = 'primary';
obj2.value = item.material_name; obj2.value = item.material_name;
obj3.elType = 'primary'; obj3.elType = 'primary';
@ -388,62 +388,50 @@ export default {
}); });
}, },
//生产线 //生产线
getProductLine(){ getProductLine() {
let that = this; let that = this;
//本月生产统计 //本月生产统计
let obj1 ={ let obj1 = {
query: {start_date:that.start_date,end_date:that.end_date}, query: { start_date: that.start_date, end_date: that.end_date },
}; };
that.$API.bi.dataset.exec.req('stoveStatics', obj1).then((res1) => { that.$API.bi.dataset.exec.req('stoveStatics', obj1).then((res1) => {
console.log('本月生产统计:',res1); console.log('本月生产统计:', res1);
let list1 = res1.data2.ds0; let list1 = res1.data2.ds0;
let seriesData1 = [],xAxisData1=[]; let seriesData1 = [], xAxisData1 = [];
if(list1.length>0){ if (list1.length > 0) {
list1.forEach(item1=>{ list1.forEach(item1 => {
xAxisData1.push(item1.equip_name); xAxisData1.push(item1.equip_number);
seriesData1.push(item1.count_real); seriesData1.push(item1.count_real);
}) })
} }
let chart1Option = deepCopy(this.basicOption) let chart1Option = deepCopy(this.basicOption)
chart1Option.xAxis.data = xAxisData1; chart1Option.xAxis.data = xAxisData1;
chart1Option.series[0].data = seriesData1; chart1Option.series[0].data = seriesData1;
// chart1Option.yAxis.name='生产数';
let chart1 = that.setChart("chart1", chart1Option); let chart1 = that.setChart("chart1", chart1Option);
// let index1 = 0
// this.chartInterval1 = setInterval(function () {
// if (index1 < seriesData1.length) {
// chart1.dispatchAction({ type: 'downplay', seriesIndex: 0 });
// chart1.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index1 });
// chart1.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index1 });
// index1++;
// } else {
// index1 = 0;
// }
// }, 3000);
}); });
//本月合格率统计 //本月合格率统计
let obj2 ={ let obj2 = {
query: {start_date:that.start_date,end_date:that.end_date,dept_name: "7车间"}, query: { start_date: that.start_date, end_date: that.end_date, dept_name: "7车间" },
}; };
that.$API.bi.dataset.exec.req('lineDay', obj2).then((res2) => { that.$API.bi.dataset.exec.req('lineDay', obj2).then((res2) => {
console.log('本月合格率统计:',res2); console.log('本月合格率统计:', res2);
let list2 = res2.data2.ds0; let list2 = res2.data2.ds0;
let seriesData2 = [],xAxisData2=[]; let seriesData2 = [], xAxisData2 = [];
for (let i = 0; i < that.days; i++) { for (let i = 0; i < that.days; i++) {
let day = i+1; let day = i + 1;
let text = day+'日'; let text = day + '日';
xAxisData2[i]=text; xAxisData2[i] = text;
seriesData2[i]=0; seriesData2[i] = 0;
} }
if(list2.length>0){ if (list2.length > 0) {
list2.forEach(item2=>{ list2.forEach(item2 => {
let index2 = item2.日-1; let index2 = item2.日 - 1;
seriesData2[index2] =Math.round(item2.合格率); seriesData2[index2] = Math.round(item2.合格率);
}) })
} }
let chart2Option = deepCopy(this.basicOption); let chart2Option = deepCopy(this.basicOption);
chart2Option.xAxis.data = xAxisData2; chart2Option.xAxis.data = xAxisData2;
chart2Option.yAxis.name='合格率'; chart2Option.yAxis.name = '合格率';
chart2Option.legend = { chart2Option.legend = {
icon: "stack", icon: "stack",
right: 0, right: 0,
@ -467,7 +455,7 @@ export default {
} }
}], }],
}; };
let series2=[{ let series2 = [{
name: '合格率', name: '合格率',
type: 'line', type: 'line',
smooth: true, smooth: true,
@ -494,183 +482,179 @@ export default {
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
color:'#fff' color: '#fff'
}, },
itemStyle: { itemStyle: {
borderRadius: [2, 2, 0, 0], borderRadius: [2, 2, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: 'rgb(250,205,0)' color: 'rgb(250,205,0)'
}, },
{ {
offset: 1, offset: 1,
color: 'rgb(254,129,0)' color: 'rgb(254,129,0)'
} }
]) ])
}, },
data: seriesData2 data: seriesData2
}]; }];
chart2Option.series=series2; chart2Option.series = series2;
let chart2 = that.setChart("chart2", chart2Option); let chart2 = that.setChart("chart2", chart2Option);
// let index2 = 0
// this.chartInterval2 = setInterval(function () {
// if (index2 < seriesData2.length) {
// chart2.dispatchAction({ type: 'downplay', seriesIndex: 0 });
// chart2.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index2 });
// chart2.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index2 });
// index2++;
// } else {
// index2 = 0;
// }
// }, 3000);
}); });
//车间生产昨日统计 12月1号 //车间生产昨日统计 12月1号
let obj3 ={ let obj3 = {
query: {start_date:that.yesterday,end_date:that.yesterday,dept_name: "7车间"}, query: { start_date: that.yesterday, end_date: that.yesterday, dept_name: "7车间" },
}; };
that.$API.bi.dataset.exec.req('lineDay', obj3).then((res3) => { that.$API.bi.dataset.exec.req('lineDay', obj3).then((res3) => {
console.log('车间生产昨日统计:',res3); console.log('车间生产昨日统计:', res3);
let seriesData3 = [ let seriesData3 = [
{ value: 0, name: '炸纹' }, { value: 0, name: '炸纹' },
{ value: 0, name: '条纹' }, { value: 0, name: '条纹' },
{ value: 0, name: '气泡' }, { value: 0, name: '气泡' },
{ value: 0, name: '弯曲' }, { value: 0, name: '弯曲' },
{ value: 0, name: '其他' }, { value: 0, name: '其他' },
{ value: 0, name: '合格' }, { value: 0, name: '合格' },
] ]
if(res3.data2.ds0.length>0){ if (res3.data2.ds0.length > 0) {
let item3 = res3.data2.ds0[0]; let item3 = res3.data2.ds0[0];
that.yesterdayObjet = item3; that.yesterdayObjet = item3;
seriesData3[0].value=item3.炸纹; seriesData3[0].value = item3.炸纹;
seriesData3[1].value=item3.条纹; seriesData3[1].value = item3.条纹;
seriesData3[2].value=item3.气泡; seriesData3[2].value = item3.气泡;
seriesData3[3].value=item3.弯曲; seriesData3[3].value = item3.弯曲;
seriesData3[4].value=item3.其他; seriesData3[4].value = item3.其他;
seriesData3[5].value=item3.合格数; seriesData3[5].value = item3.合格数;
} }
that.chart3Option.series.data = seriesData3; that.chart3Option.series.data = seriesData3;
let chart3 = that.setChart("chart3", that.chart3Option); let chart3 = that.setChart("chart3", that.chart3Option);
// let index3 = 0
// this.chartInterval3 = setInterval(function () {
// if (index3 < seriesData3.length) {
// chart3.dispatchAction({ type: 'downplay', seriesIndex: 0 });
// chart3.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index3 });
// chart3.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index3 });
// index3++;
// } else {
// index3 = 0;
// }
// }, 3000);
}); });
}, },
//今日任务 //今日任务
getTodayMtask(){ getTodayMtask() {
let that = this; let that = this;
let obj ={}; let obj = {};
obj.start_date = this.today; obj.start_date = this.today;
obj.end_date = this.today; obj.end_date = this.today;
obj.belong_dept__name='7车间'; obj.belong_dept__name = '7车间';
obj.page=0; obj.page = 0;
that.$API.pm.mtask.list.req(obj).then((res) => { that.$API.pm.mtask.list.req(obj).then((res) => {
that.todayMtask=res; that.todayMtask = res;
console.log('今日任务:',res); console.log('今日任务:', res);
}); });
}, },
}, },
} }
</script> </script>
<style scoped> <style scoped>
@font-face { @font-face {
font-family: 'myfont'; /* 字体名称 */ font-family: 'myfont';
src: url('../../utils/youShe.ttf'); /* 字体文件相对路径 */ /* 字体名称 */
} src: url('../../utils/youShe.ttf');
.dashboard { /* 字体文件相对路径 */
background-image: url("/public/img/photon_bg.png"); }
color: #fff;
font-family: "Microsoft Yahei" !important; .dashboard {
background-size: cover; background-image: url("/public/img/photon_bg.png");
} color: #fff;
.header { font-family: "Microsoft Yahei" !important;
background: url("/public/img/photon_header.png"); background-size: cover;
border-bottom: none; }
background-size: 100% 100%;
font-size: 26px; .header {
display: block; background: url("/public/img/photon_header.png");
height: 80px; border-bottom: none;
color: rgb(149, 255, 255); background-size: 100% 100%;
font-family: 'Microsoft Yahei'; font-size: 26px;
text-align: center; display: block;
padding: 12px 0px; height: 80px;
}.box { color: rgb(149, 255, 255);
background: rgba(10, 63, 68, 0.5); font-family: 'Microsoft Yahei';
height: 100%; text-align: center;
} padding: 12px 0px;
.boxtitle { }
color: #fff;
font-size: 16px; .box {
display: flex; background: rgba(10, 63, 68, 0.5);
height: 36px; height: 100%;
background: linear-gradient(40deg, rgba(11, 101, 140, 0.451), rgba(0, 34, 48, 0.335), rgba(11, 101, 140, 0.451)); }
}
.bgimg { .boxtitle {
background-image: url('https://cdn-upload.datav.aliyun.com/upload/download/1678762309227-E6RP8z2R.png'); color: #fff;
background-size: 140% 100%; 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 { .boxmain {
height: calc(100% - 40px); height: 200px;
}
@media screen and (max-width: 800px) {
.boxmain {
height: 200px;
}
}
.flex_center {
display: flex;
align-items: center;
justify-content: center
} }
}
.border { .flex_center {
border: 1px dashed #49bcf7; display: flex;
} align-items: center;
justify-content: center
}
.bigdata { .border {
font-size: 24px; border: 1px dashed #49bcf7;
} }
.boxlabel {
margin-left: 6px; .bigdata {
font-size: 18px; font-size: 24px;
margin-top: 6px }
}
.wrapper{ .boxlabel {
overflow: hidden; margin-left: 6px;
height: 220px; font-size: 18px;
} margin-top: 6px
.wrapper2{ }
height: 180px;
overflow: hidden; .wrapper {
} overflow: hidden;
height: 220px;
.title{ }
height: 40px;
line-height: 40px; .wrapper2 {
text-align: center; height: 180px;
} overflow: hidden;
.marquee_top{ }
transition: all 0.5s ease-in-out;
margin-top: -26px; .title {
} height: 40px;
.totall{ line-height: 40px;
color: #fff; text-align: center;
background-color: rgb(10, 63, 68); }
}
.rollData{ .marquee_top {
background-color: rgb(10, 39, 50); transition: all 0.5s ease-in-out;
} margin-top: -26px;
.rollData:nth-of-type(2n+1){ }
background-color: rgb(0, 59, 81);
} .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> </style>