733 lines
28 KiB
Vue
733 lines
28 KiB
Vue
<template>
|
||
<el-container class="dashboard">
|
||
<el-header class="header">
|
||
<div style="font-weight: bold; font-family:'myfont';font-size:32px">6车间生产数据大看板</div>
|
||
<div style="font-size: 14px;margin-top:18px">{{ currentDay }} {{ currentTime }}</div>
|
||
</el-header>
|
||
<el-main>
|
||
<el-row style="height: 60%" :gutter="10">
|
||
<el-col :xs="24" :md="10" style="height: 100%;">
|
||
<el-row style="height: 29%;width:100%" :gutter="10">
|
||
<div class="box" style="width: 100%;">
|
||
<div class="boxtitle">
|
||
<div class="boxlabel">今日任务</div>
|
||
</div>
|
||
<div style="height: 4px;"></div>
|
||
<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;line-height:40px;padding:0 20px;">
|
||
<div
|
||
style="display:flex;justify-content:space-between;border-bottom:1px dashed #eeeeee">
|
||
<span style="font-size:12px">{{ item.material_out_name }}</span>
|
||
<span
|
||
style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">
|
||
{{ item.count }}
|
||
</span>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-row>
|
||
<div style="height: 1%;"></div>
|
||
<el-row style="height:70%">
|
||
<el-col style="height: 100%;">
|
||
<div class="box">
|
||
<div class="boxtitle">
|
||
<div class="boxlabel">发货情况</div>
|
||
</div>
|
||
<div style="height: 4px;"></div>
|
||
<div class="boxmain" id="scrollContainer1">
|
||
<scScrollTavle v-if="table1Visible" :tableHeight="containerHeight1"
|
||
:rowData="saleOutData" :titleData="liData1" :refValue="refValue1">
|
||
</scScrollTavle>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
<el-col :xs="24" :md="14" style="height: 100%;">
|
||
<div class="box">
|
||
<div class="boxtitle">
|
||
<div class="boxlabel">本周工序进度</div>
|
||
</div>
|
||
<div style="height: 4px;"></div>
|
||
<div class="boxmain" id="scrollContainer2">
|
||
<scScrollTavle v-if="table2Visible" :tableHeight="containerHeight2" :rowData="processData"
|
||
:titleData="liData2" :refValue="refValue2"></scScrollTavle>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<div style="height: 1%;"></div>
|
||
<el-row style="height:39%" :gutter="10">
|
||
<el-col :xs="24" :md="12">
|
||
<div class="box">
|
||
<div class="boxtitle">
|
||
<div class="boxlabel">本月生产统计</div>
|
||
</div>
|
||
<div class="boxmain" id="chart1">
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="24" :md="12">
|
||
<div class="box">
|
||
<div class="boxtitle">
|
||
<div class="boxlabel">本月交付统计</div>
|
||
</div>
|
||
<div class="boxmain" id="chart2">
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-main>
|
||
</el-container>
|
||
</template>
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
import scScrollTavle from '@/components/scScrollTable.vue';
|
||
function deepCopy(obj) {
|
||
return JSON.parse(JSON.stringify(obj));
|
||
}
|
||
export default {
|
||
components: { scScrollTavle },
|
||
data() {
|
||
return {
|
||
basicOption: {
|
||
backgroundColor: '',
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
label: {
|
||
backgroundColor: '#6a7985'
|
||
}
|
||
}
|
||
},
|
||
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: '光纤预制棒',
|
||
type: 'bar',
|
||
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: 'rgb(1,235,239)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgb(5, 158, 163)'
|
||
}])
|
||
},
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'insideTop',
|
||
color: '#666'
|
||
},
|
||
data: []
|
||
},
|
||
{
|
||
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: {
|
||
focus: 'series'
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'insideTop',
|
||
color: '#666',
|
||
font: '10'
|
||
},
|
||
data: []
|
||
},
|
||
]
|
||
},
|
||
containerHeight1: 100,
|
||
containerHeight2: 100,
|
||
table1Visible: false,
|
||
table2Visible: false,
|
||
refValue1: 'moocBox1',
|
||
refValue2: 'moocBox2',
|
||
liData1: ['序号', '日期', '名称', '型号', '规格', '发货数量'],
|
||
liData2: ['序号', '工序', '产品名称', '型号', '计划数量', '合格数量', '完成进度', '合格率'],
|
||
todayMtask: [
|
||
{ material_out_name: '光纤预制棒|33*470|ZJ2|棒料成型', count: 300 },
|
||
{ material_out_name: '光纤预制棒|33*470|ZJ2|棒料成型', count: 300 },
|
||
{ material_out_name: '光纤预制棒|33*470|ZJ2|棒料成型', count: 300 },
|
||
{ material_out_name: '光纤预制棒|33*470|ZJ2|棒料成型', count: 300 },
|
||
],
|
||
saleOutData: [],
|
||
processData: [],
|
||
time: null,
|
||
start_date: '',
|
||
end_date: '',
|
||
scrollVivible: true,
|
||
dayInterval: null,
|
||
chartInterval1: null,
|
||
chartInterval2: null,
|
||
currentTime: '',
|
||
currentDay: '',
|
||
weekFirst: '',
|
||
weekLast: '',
|
||
}
|
||
},
|
||
mounted() {
|
||
//表格table1的显示
|
||
this.containerHeight1 = document.getElementById('scrollContainer1').clientHeight;
|
||
this.table1Visible = true;
|
||
//表格table2的显示
|
||
this.containerHeight2 = document.getElementById('scrollContainer2').clientHeight;
|
||
this.table2Visible = true;
|
||
|
||
const ondDayTime = 86400000;
|
||
let date = new Date();
|
||
let year = date.getFullYear();
|
||
let month = date.getMonth() + 1;
|
||
let day = date.getDate();
|
||
let days = new Date(year, month, 0).getDate();
|
||
this.days = days;
|
||
let start_date = year + '-' + month + '-01';
|
||
let lastDay = new Date(year, month, 0).getDate();
|
||
let end_date = year + '-' + month + '-' + lastDay;
|
||
this.start_date = start_date;
|
||
this.end_date = end_date;
|
||
this.today = year + '-' + month + '-' + day;
|
||
let yesterday = new Date(date.getTime() - 24 * 60 * 60 * 1000);
|
||
this.yesterday = yesterday.getFullYear() + "-" + (yesterday.getMonth() + 1) + "-" + yesterday.getDate();
|
||
let week = yesterday.getDay();//当前时间的week数
|
||
console.log(week);
|
||
let weekFirst = week - 1;//第一天对应的天数
|
||
let weekLast = 7 - week;//最后一天对应的天数
|
||
if (week == 0) {
|
||
weekFirst = 6;
|
||
weekLast = 0;//周日特殊处理
|
||
} else {
|
||
weekFirst = week - 1;
|
||
weekLast = 7 - week;
|
||
}
|
||
let first = new Date(new Date(date.getTime() - (weekFirst * ondDayTime)));//本周周一
|
||
let last = new Date(new Date(date.getTime() + (weekLast * ondDayTime)));//本周周日
|
||
this.weekFirst = first.getFullYear() + '-' + (first.getMonth() + 1) + '-' + first.getDate();
|
||
this.weekLast = last.getFullYear() + '-' + (last.getMonth() + 1) + '-' + last.getDate();
|
||
this.getsaleOut();
|
||
this.getMioItem();//发货情况
|
||
// this.getTodayMtask();//今日任务
|
||
//昨日工序进度
|
||
this.getMtask();
|
||
//时间
|
||
this.showTime()
|
||
this.dayInterval = setInterval(() => {
|
||
this.showTime()
|
||
}, 1000)
|
||
},
|
||
methods: {
|
||
showTime() {
|
||
this.currentTime = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
|
||
this.currentDay = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
|
||
},
|
||
setChart(name, option = null) {
|
||
// 根据name 渲染数据, option需填写，否则option为模拟数据
|
||
var myChart = echarts.getInstanceByDom(document.getElementById(name));
|
||
if (myChart == undefined) {
|
||
myChart = echarts.init(document.getElementById(name), 'dark', { renderer: 'svg' });
|
||
}
|
||
if (option == null) {
|
||
option = Object.assign({}, this.basicOption)
|
||
}
|
||
setTimeout(() => {
|
||
try {
|
||
myChart.setOption(option);
|
||
} catch (error) { }
|
||
}, 500)
|
||
},
|
||
//今日任务
|
||
getTodayMtask() {
|
||
let that = this;
|
||
let obj = {};
|
||
obj.start_date = this.today;
|
||
obj.end_date = this.today;
|
||
obj.is_count_utask = true;
|
||
obj.mgroup__belong_dept__name = '6车间';
|
||
obj.page = 0;
|
||
that.$API.pm.mtask.list.req(obj).then((res) => {
|
||
that.todayMtask = res;
|
||
console.log('今日任务:', res);
|
||
});
|
||
|
||
// that.$API.pm.utask.list.req(obj).then((res) => {
|
||
// that.todayMtask = res;
|
||
// console.log('今日任务:', res);
|
||
// });
|
||
},
|
||
//发货情况
|
||
getMioItem() {
|
||
let that = this;
|
||
let obj = {};
|
||
obj.mio__type = 'sale_out';
|
||
obj.mio__inout_date__gte = that.start_date;
|
||
obj.mio__inout_date__lte = that.end_date;
|
||
obj.page = 0;
|
||
that.$API.inm.mioitem.list.req(obj).then((res) => {
|
||
console.log(res);
|
||
let saleOutData = [];
|
||
res.forEach(item => {
|
||
let arr = [], obj1 = {}, obj2 = {}, obj3 = {}, obj4 = {}, obj5 = {};
|
||
obj1.elType = 'primary';
|
||
obj1.value = item.inout_date;
|
||
obj2.elType = 'primary';
|
||
obj2.value = item.material_.name;
|
||
obj3.elType = 'primary';
|
||
obj3.value = item.material_.specification;
|
||
obj4.elType = 'primary';
|
||
obj4.value = item.material_.model;
|
||
obj5.elType = 'primary';
|
||
obj5.value = item.count;
|
||
arr.push(obj1);
|
||
arr.push(obj2);
|
||
arr.push(obj3);
|
||
arr.push(obj4);
|
||
arr.push(obj5);
|
||
saleOutData.push(arr);
|
||
});
|
||
this.saleOutData = saleOutData;
|
||
});
|
||
},
|
||
//本周工序进展
|
||
getMtask() {
|
||
let that = this;
|
||
let obj = {
|
||
query: { start_date: this.weekFirst, end_date: this.weekLast, dept_name: "6车间" },
|
||
};
|
||
//生产车间按日统计
|
||
that.$API.bi.dataset.exec.req('lineWeek', obj).then((res) => {
|
||
let data = res.data2.ds0;
|
||
if (data.length > 0) {
|
||
let processData = [];
|
||
data.forEach(item => {
|
||
let arr = [], obj1 = {}, obj2 = {}, obj3 = {}, obj4 = {}, obj5 = {}, obj6 = {}, obj7 = {}, obj8 = {};
|
||
obj1.elType = 'primary';
|
||
obj1.value = item.工段;//工序
|
||
obj2.elType = 'primary';
|
||
obj2.value = item.物料名;
|
||
obj3.elType = 'primary';
|
||
obj3.value = item.型号;
|
||
obj4.elType = 'primary';
|
||
obj4.value = item.任务数;
|
||
obj5.elType = 'primary';
|
||
obj5.value = item.合格数;
|
||
obj6.elType = 'progress';
|
||
let jindu = Math.round((item.完成进度));
|
||
obj6.value = jindu;
|
||
obj7.elType = 'primary';
|
||
let rate = Math.round((item.合格率));
|
||
obj7.value = rate;
|
||
arr.push(obj1);
|
||
arr.push(obj2);
|
||
arr.push(obj3);
|
||
arr.push(obj4);
|
||
arr.push(obj5);
|
||
arr.push(obj6);
|
||
arr.push(obj7);
|
||
processData.push(arr);
|
||
});
|
||
console.log('processData', processData)
|
||
this.processData = processData;
|
||
}
|
||
|
||
})
|
||
|
||
// let obj = {};
|
||
// obj.start_date = this.weekFirst;
|
||
// obj.end_date = this.weekLast;
|
||
// obj.mgroup__belong_dept__name = '6车间';
|
||
// obj.page = 0;
|
||
// that.$API.pm.mtask.list.req(obj).then((res) => {
|
||
// console.log(res);
|
||
// if (res.length > 0) {
|
||
// let processData = [];
|
||
// res.forEach(item => {
|
||
// let arr = [], obj1 = {}, obj2 = {}, obj3 = {}, obj4 = {}, obj5 = {}, obj6 = {}, obj7 = {}, obj8 = {};
|
||
// obj1.elType = 'primary';
|
||
// obj1.value = item.mgroup_name;//工序
|
||
// obj2.elType = 'primary';
|
||
// obj2.value = item.material_out_.name;
|
||
// obj3.elType = 'primary';
|
||
// obj3.value = item.material_out_.specification;
|
||
// obj4.elType = 'primary';
|
||
// obj4.value = item.count;
|
||
// obj5.elType = 'primary';
|
||
// obj5.value = item.count_ok;
|
||
// obj6.elType = 'progress';
|
||
// let jindu = Math.round((item.count_ok / item.count) * 100);
|
||
// obj6.value = jindu;
|
||
// obj7.elType = 'primary';
|
||
// let rate = 0;
|
||
// if (item.count_real != 0) {
|
||
// rate = Math.round((item.count_ok / item.count_real) * 100);
|
||
// } else {
|
||
// rate = 0;
|
||
// }
|
||
// obj7.value = rate;
|
||
// arr.push(obj1);
|
||
// arr.push(obj2);
|
||
// arr.push(obj3);
|
||
// arr.push(obj4);
|
||
// arr.push(obj5);
|
||
// arr.push(obj6);
|
||
// arr.push(obj7);
|
||
// processData.push(arr);
|
||
|
||
// });
|
||
// console.log('processData', processData)
|
||
// this.processData = processData;
|
||
// }
|
||
// debugger;
|
||
// });
|
||
},
|
||
//本月生产统计&本月交付统计
|
||
getsaleOut() {
|
||
let that = this;
|
||
let obj = {
|
||
query: { start_date: this.start_date, end_date: this.end_date, dept_name: "6车间" },
|
||
};
|
||
let obj2 = {
|
||
query: { start_date: this.start_date, end_date: this.end_date, mio_type: 'sale_out', material_id: '' },
|
||
};
|
||
//生产车间按日统计
|
||
that.$API.bi.dataset.exec.req('productStatistic', obj).then((res1) => {
|
||
console.log('生产车间按日统计:', res1);
|
||
let list1 = res1.data2.ds0;
|
||
let seriesData11 = [], seriesData12 = [], xAxisData1 = [], bangArr = [], guanArr = [];
|
||
for (let i = 0; i < that.days; i++) {
|
||
let day = i + 1;
|
||
let text = day + '日';
|
||
xAxisData1[i] = text;
|
||
seriesData11.push(0);
|
||
seriesData12.push(0);
|
||
}
|
||
if (list1.length > 0) {
|
||
list1.forEach(item1 => {
|
||
if (item1.name == '光纤预制管') {
|
||
guanArr.push(item1)
|
||
} else {
|
||
bangArr.push(item1)
|
||
}
|
||
})
|
||
}
|
||
if (bangArr.length > 0) {
|
||
bangArr.forEach(item11 => {
|
||
let index11 = item11.日 - 1;
|
||
seriesData11[index11] = item11.生产数;
|
||
})
|
||
}
|
||
if (guanArr.length > 0) {
|
||
guanArr.forEach(item12 => {
|
||
let index12 = item12.日 - 1;
|
||
seriesData12[index12] = item12.生产数;
|
||
})
|
||
}
|
||
|
||
let chart1Option = deepCopy(this.basicOption)
|
||
chart1Option.xAxis.data = xAxisData1;
|
||
chart1Option.series[0].data = seriesData11;
|
||
chart1Option.series[1].data = seriesData12;
|
||
this.setChart("chart1", chart1Option);
|
||
});
|
||
//本月交付统计
|
||
that.$API.bi.dataset.exec.req('saleOutDay', obj2).then((saleOutRes) => {
|
||
console.log('本月交付统计:', saleOutRes);
|
||
let seriesData21 = [], seriesData22 = [], xAxisData2 = [], bangArr2 = [], guanArr2 = [];
|
||
let list2 = saleOutRes.data2.ds0;
|
||
for (let i = 0; i < that.days; i++) {
|
||
let day = i + 1;
|
||
let text = day + '日';
|
||
xAxisData2[i] = text;
|
||
seriesData21.push(0);
|
||
seriesData22.push(0);
|
||
}
|
||
if (list2.length > 0) {
|
||
list2.forEach(item2 => {
|
||
if (item2.name == '光纤预制管') {
|
||
guanArr2.push(item2)
|
||
} else {
|
||
bangArr2.push(item2)
|
||
}
|
||
})
|
||
}
|
||
if (bangArr2.length > 0) {
|
||
bangArr2.forEach(item21 => {
|
||
let index21 = item21.日 - 1;
|
||
seriesData21[index21] = item21.生产数;
|
||
})
|
||
}
|
||
if (guanArr2.length > 0) {
|
||
guanArr2.forEach(item22 => {
|
||
let index22 = item22.日 - 1;
|
||
seriesData22[index22] = item22.生产数;
|
||
})
|
||
}
|
||
let chart2Option = deepCopy(this.basicOption);
|
||
chart2Option.series[0].type = 'line';
|
||
chart2Option.series[1].type = 'line';
|
||
chart2Option.xAxis.data = xAxisData2;
|
||
|
||
chart2Option.series[0].data = seriesData21;
|
||
chart2Option.series[0].label.position = 'top';
|
||
chart2Option.series[1].data = seriesData22;
|
||
chart2Option.series[1].label.position = 'top';
|
||
|
||
this.setChart("chart2", chart2Option);
|
||
});
|
||
},
|
||
|
||
},
|
||
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
@font-face {
|
||
font-family: 'myfont';
|
||
/* 字体名称 */
|
||
src: url('../../utils/youShe.ttf');
|
||
/* 字体文件相对路径 */
|
||
}
|
||
|
||
.dashboard {
|
||
background-image: url("/public/img/photon_bg.png");
|
||
color: #fff;
|
||
background-size: cover;
|
||
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;
|
||
}
|
||
|
||
.title {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
}
|
||
|
||
table th {
|
||
font-size: 14px;
|
||
background: rgba(0, 0, 0, .1);
|
||
}
|
||
|
||
.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> |