9 changed files with 720 additions and 15 deletions
-
2index.html
-
13src/api/production/board.js
-
BINsrc/assets/img/factory.jpg
-
1src/router/index.js
-
90src/views/modules/board/newTime.vue
-
589src/views/modules/board/scheduledBoard.vue
-
14src/views/modules/schedule/generateReport.vue
-
14src/views/modules/schedule/toolReport.vue
-
12static/plugins/echarts/echarts.min.js
|
After Width: 3000 | Height: 1500 | Size: 377 KiB |
@ -0,0 +1,90 @@ |
|||||
|
<template> |
||||
|
<div style="font-size: 26px;float: right;color: #ffffff;height: 100%" v-html="clock"></div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import {getTime, |
||||
|
kanKanYouMeiYouDiaoXian, |
||||
|
} from '@/api/production/board.js' |
||||
|
export default { |
||||
|
name: 'time', |
||||
|
data() { |
||||
|
return { |
||||
|
clock: null, |
||||
|
status: 1, |
||||
|
stringdate:null, |
||||
|
currentDate:null, |
||||
|
timer:null |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
getTime() { |
||||
|
getTime().then(({data}) => { |
||||
|
this.stringdate = data.rows |
||||
|
this.timer = window.setInterval(() => { |
||||
|
this.showRealTime() |
||||
|
}, 1000); |
||||
|
}) |
||||
|
|
||||
|
}, |
||||
|
showRealTime() { |
||||
|
if (this.currentDate == null) { |
||||
|
this.currentDate = new Date(this.stringdate); |
||||
|
} else { |
||||
|
this.currentDate = new Date(this.currentDate.getTime() + 1000); |
||||
|
} |
||||
|
|
||||
|
var c = this.currentDate; |
||||
|
var year = c.getFullYear(); |
||||
|
var month = (c.getMonth() + 1 < 10) ? ("0" + (c.getMonth() + 1)) : c.getMonth() + 1; |
||||
|
var date = (c.getDate() < 10) ? ("0" + c.getDate()) : c.getDate(); |
||||
|
var days = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"); |
||||
|
var day = c.getDay(); |
||||
|
var hour = (c.getHours() < 10) ? ("0" + c.getHours()) : c.getHours(); |
||||
|
var min = (c.getMinutes() < 10) ? ("0" + c.getMinutes()) : c.getMinutes(); |
||||
|
var sec = (c.getSeconds() < 10) ? ("0" + c.getSeconds()) : c.getSeconds(); |
||||
|
var now = year + "-" + month + "-" + date + "<br>" + days[day] + "<br>" + hour + ":" + min + ":" + sec; |
||||
|
|
||||
|
// if (hour>=10 && hour<12 && this.status==1){ |
||||
|
if (localStorage.getItem("status")==null){ |
||||
|
localStorage.setItem("status",'1') |
||||
|
} |
||||
|
this.status = localStorage.getItem("status") |
||||
|
if (parseInt(hour) ==23 && this.status=='1'){ |
||||
|
kanKanYouMeiYouDiaoXian().then(({data}) => { |
||||
|
if(data.success){ |
||||
|
localStorage.setItem("status",'2') |
||||
|
location.reload(); |
||||
|
}else { |
||||
|
localStorage.setItem("status",'3') |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
// if ( hour>=12 && this.status==2){ |
||||
|
if ( parseInt(hour) ==1 && this.status=='2'){ |
||||
|
localStorage.setItem("status",'1') |
||||
|
} |
||||
|
if(this.status=='3' && parseInt(sec) ==59){ |
||||
|
kanKanYouMeiYouDiaoXian().then(({data}) => { |
||||
|
if(data.success){ |
||||
|
localStorage.setItem("status",'2') |
||||
|
location.reload(); |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
this.clock = now; |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getTime(); |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
|
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,589 @@ |
|||||
|
<template> |
||||
|
<div class="container" > |
||||
|
<div style="width:100%;height: 19%;text-align:center;"> |
||||
|
<div style="float: left;width: 25%;height: 100%;text-align:left; "> |
||||
|
<div style="height: 60%;width: 100%;text-align: left;margin-top: 1%"> |
||||
|
<label style="font-size: 40px;color: #9c0202;margin-left: 2%">Jtem 江天电子</label> |
||||
|
</div> |
||||
|
</div> |
||||
|
<TimeC></TimeC> |
||||
|
<!-- <div style="font-size: 26px;float: right;color: #ffffff;height: 100%" v-html="clock"></div>--> |
||||
|
<div style="float: left;width: 35%;height: 100%;text-align:center;margin-left: 7% "> |
||||
|
<div style="height: 45%;width: 100%;text-align: center;margin-top: 3%;"> |
||||
|
<label style="font-size: 30px;color: #ffffff">生产情况看板<br>Production Board</label> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="width:100%;height: 79%;"> |
||||
|
<!-- <div style="float: left;height: 100%;width: 35%; ">--> |
||||
|
<!-- <div style="height: 12%;width: 100%;margin-top: 1%">--> |
||||
|
<!-- <div--> |
||||
|
<!-- style="width: 12%;height: 40%;float: left;margin-left: 18%;border-radius: 10px; background-color: #ec6566;"></div>--> |
||||
|
<!-- <div style="width: 25%;height: 50%;float: left;margin-left: 3%;">--> |
||||
|
<!-- <label style="font-size: 16px;color:#ffffff; ">未完成</label>--> |
||||
|
<!-- </div>--> |
||||
|
<!-- <div--> |
||||
|
<!-- style="width: 12%;height: 40%;float: left;margin-left: 1%;border-radius: 10px; background-color: #90ca75;"></div>--> |
||||
|
<!-- <div style="width: 25%;height: 50%;float: left;margin-left: 3%;">--> |
||||
|
<!-- <label style="font-size: 16px;color:#ffffff; ">已完成</label>--> |
||||
|
<!-- </div>--> |
||||
|
<!-- </div>--> |
||||
|
<!-- <div style="height: 88%;width: 100%;">--> |
||||
|
<!-- <div id="pie" style="float:left;margin-left: 0px; margin-top: 0%; width: 100%; height:80%;"></div>--> |
||||
|
<!-- </div>--> |
||||
|
<!-- </div>--> |
||||
|
<div style="float: left;height: 100%;width: 38%; "> |
||||
|
<div style="height: 28%;width: 100%;margin-top: 0.5%" class="board2"> |
||||
|
<el-table |
||||
|
height="150" |
||||
|
:data="tableList2" |
||||
|
:cell-style="board2Function" |
||||
|
style="width: 100%"> |
||||
|
<el-table-column |
||||
|
prop="qty1" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
min-width="40" |
||||
|
label="派工数/PlanQty" |
||||
|
:render-header="renderHeader" |
||||
|
> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="qty2" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
min-width="63" |
||||
|
label="合格数/ApproveQty" |
||||
|
:render-header="renderHeader"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="qty3" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
min-width="60" |
||||
|
label="不合格数/UnApproveQty" |
||||
|
:render-header="renderHeader"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="qty4" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
min-width="62" |
||||
|
label="未完成/UnReportedQty" |
||||
|
:render-header="renderHeader"> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
<div style="height: 72%;width: 100%;"> |
||||
|
<div id="pie" style="float:left;margin-left: 0px; margin-top: -3%; width: 100%; height:100%;"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="float: left;height: 53%;width: 53%;margin-left:3% " class="board"> |
||||
|
<el-table |
||||
|
height="250" |
||||
|
:data="tableList" |
||||
|
style="width: 100%"> |
||||
|
<el-table-column |
||||
|
prop="resourceDesc" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
min-width="72" |
||||
|
label="生产线/ProduceLine" |
||||
|
:render-header="renderHeader" |
||||
|
> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="qtyRequired" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
min-width="100" |
||||
|
label="派工数量/PlanQty" |
||||
|
:render-header="renderHeader"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="qtyReported" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
min-width="90" |
||||
|
label="完成数量/ReportedQty" |
||||
|
:render-header="renderHeader"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="qtyApprove" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
min-width="108" |
||||
|
label="合格数量/ApproveQty" |
||||
|
:render-header="renderHeader"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
prop="qtyUnReported" |
||||
|
header-align="center" |
||||
|
align="center" |
||||
|
min-width="100" |
||||
|
label="未完成数量/UnReportedQty" |
||||
|
:render-header="renderHeader">> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
<div style="float: left;height: 47%;width: 62%; "> |
||||
|
<div id="main" style="width: 100%;height: 100%;margin-top: 0px"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import {getNewScheduledTableData, |
||||
|
getRefreshTime, |
||||
|
getScheduledData |
||||
|
} from '@/api/production/board.js' |
||||
|
import TimeC from "@/views/modules/board/newTime.vue" |
||||
|
export default { |
||||
|
name: "newScheduledBoard", |
||||
|
data() { |
||||
|
return { |
||||
|
myChart: null, |
||||
|
number1:0, |
||||
|
number2:0, |
||||
|
option:null, |
||||
|
chartDom:null, |
||||
|
option2:null, |
||||
|
tableList:null, |
||||
|
pieData:null, |
||||
|
barList:null, |
||||
|
resourceId:'', |
||||
|
height:200, |
||||
|
// ip:'', |
||||
|
refreshTime:5, |
||||
|
tableList2:[], |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
TimeC |
||||
|
}, |
||||
|
methods: { |
||||
|
getRefresh(){ |
||||
|
getRefreshTime('scheduledBoard').then(({data}) => { |
||||
|
if (data.rows != "" && data.rows != null) { |
||||
|
this.refreshTime = Number(data.rows); |
||||
|
if(this.refreshTime ==0){ |
||||
|
this.refreshTime =5; |
||||
|
} |
||||
|
}else { |
||||
|
this.refreshTime =5; |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
searchData(){ |
||||
|
this.getRefresh(); |
||||
|
getScheduledData().then(({data}) => { |
||||
|
this.pieData=data.pieData; |
||||
|
this.barList=data.barList; |
||||
|
this.tableList2=[], |
||||
|
this.tableList2.push(this.pieData); |
||||
|
let pieData2={ |
||||
|
qty1: '-', |
||||
|
qty2: this.pieData.per2 +'%', |
||||
|
qty3: this.pieData.per3 +'%', |
||||
|
qty4: this.pieData.per4 +'%', |
||||
|
} |
||||
|
this.tableList2.push(pieData2) |
||||
|
this.draw(); |
||||
|
this.draw2() |
||||
|
this.getTableData(); |
||||
|
// window.setTimeout(() => { |
||||
|
// this.getTableData(); |
||||
|
// }, 1000* Number(this.refreshTime)); |
||||
|
// window.setTimeout(() => { |
||||
|
// this.getTableData(); |
||||
|
// }, 2000*Number(this.refreshTime)); |
||||
|
// window.setTimeout(() => { |
||||
|
// this.getTableData(); |
||||
|
// }, 3000*Number(this.refreshTime)); |
||||
|
|
||||
|
}) |
||||
|
}, |
||||
|
draw(){ |
||||
|
// if (data_temp[i].percentage >= 100) { |
||||
|
if (true) { |
||||
|
var color = '#90ca75'; |
||||
|
} else { |
||||
|
var color = '#fff300'; |
||||
|
} |
||||
|
if (this.myChart!=null) { |
||||
|
this.myChart.clear() |
||||
|
} |
||||
|
|
||||
|
this.option = ({ |
||||
|
title: [{ |
||||
|
text: '总生产情况\nProduction State' , |
||||
|
// text: '工序：' + data_temp[i + x].itemNo, |
||||
|
// x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px） |
||||
|
x: 'center', |
||||
|
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px） |
||||
|
y: '264px', |
||||
|
// itemGap设置主副标题纵向间隔，单位px，默认为10， |
||||
|
backgroundColor: '#EEE', |
||||
|
// 主标题文本样式设置 |
||||
|
textStyle: { |
||||
|
fontSize: 18, |
||||
|
fontWeight: 'bolder', |
||||
|
color: '#fff300' |
||||
|
} |
||||
|
}, |
||||
|
// { |
||||
|
// text: this.pieData.qtyPercent + '%', |
||||
|
// // text: data_temp[i + x].percentage + '%', |
||||
|
// // x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px） |
||||
|
// x: 'center', |
||||
|
// // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px） |
||||
|
// y: 'center', |
||||
|
// // itemGap设置主副标题纵向间隔，单位px，默认为10， |
||||
|
// backgroundColor: 'rgba(0,0,0,0)', |
||||
|
// // 主标题文本样式设置 |
||||
|
// textStyle: { |
||||
|
// fontSize: 20, |
||||
|
// fontWeight: 'bolder', |
||||
|
// color: color |
||||
|
// }, |
||||
|
// } |
||||
|
], |
||||
|
// legend: { |
||||
|
// orient: 'vertical', |
||||
|
// left: 10, |
||||
|
// data: ['直接访问', '邮件营销'], |
||||
|
// color: ['#90ca75', '#ec6566'], |
||||
|
// }, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '报工数量统计', |
||||
|
type: 'pie', // 设置图表类型为饼图 |
||||
|
radius: ['45%', '75%'], // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。 |
||||
|
data: [ // 数据数组，name 为数据项名称，value 为数据项值 |
||||
|
// {value: data_temp[i + x].approveQty, name: ''}, |
||||
|
// {value: data_temp[i + x].unapproveQty, name: ''} |
||||
|
{value: this.pieData.qty2, name: ''}, |
||||
|
{value: this.pieData.qty3, name: ''}, |
||||
|
{value: this.pieData.qty4, name: ''} |
||||
|
], |
||||
|
color: ['#90ca75','#dbd81a', '#ec6566'], |
||||
|
labelLine: { |
||||
|
normal: { |
||||
|
show: false |
||||
|
} |
||||
|
}, |
||||
|
label: { |
||||
|
normal: { |
||||
|
position: 'inner', // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）' |
||||
|
// formatter: '{a} {b} : {c}个 ({d}%)' 设置标签显示内容 ，默认显示{b} |
||||
|
// {a}指series.name {b}指series.data的name |
||||
|
// {c}指series.data的value {d}%指这一部分占总数的百分比 |
||||
|
// formatter: '{d}'+'%', |
||||
|
formatter:function(data){ |
||||
|
return data.percent.toFixed(1)+"%"; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
] |
||||
|
}); |
||||
|
this.myChart = echarts.init(document.getElementById('pie')); |
||||
|
this.myChart.setOption(this.option); |
||||
|
}, |
||||
|
getTableData() { |
||||
|
getNewScheduledTableData(this.number2).then(({data}) => { |
||||
|
this.tableList=data.rows; |
||||
|
this.number2=data.num; |
||||
|
|
||||
|
}) |
||||
|
}, |
||||
|
draw2(){ |
||||
|
if (this.myChart2!=null) { |
||||
|
this.myChart2.clear() |
||||
|
} |
||||
|
let barData=[]; |
||||
|
let valueData=[]; |
||||
|
let valueApproveData=[]; |
||||
|
for (let a = 0; a <this.barList.length ; a++) { |
||||
|
let resourceData={ |
||||
|
value: this.barList[a].resourceDesc, |
||||
|
textStyle: { |
||||
|
color: '#EEE' |
||||
|
} |
||||
|
} |
||||
|
barData.push(resourceData); |
||||
|
valueData[a]=this.barList[a].qtyPercent; |
||||
|
valueApproveData[a]=this.barList[a].approvePercent; |
||||
|
} |
||||
|
this.myChart2 = echarts.init(document.getElementById('main')); |
||||
|
// document.getElementById('main').style.height="300px"; |
||||
|
// if(this.option2!=null){ |
||||
|
// document.getElementById('main').removeAttribute('_echarts_instance_') |
||||
|
// this.option2 = null |
||||
|
// } |
||||
|
this.option2 = { |
||||
|
color:["#90ca75", "#00a7ff"], |
||||
|
legend: { |
||||
|
textStyle: { //图例文字的样式 |
||||
|
color: '#fff', |
||||
|
// fontSize: 12 |
||||
|
}, |
||||
|
}, |
||||
|
tooltip: {}, |
||||
|
xAxis:[ |
||||
|
{ |
||||
|
type: 'category', |
||||
|
// data: xAxisData |
||||
|
data:barData, |
||||
|
|
||||
|
axisLine:{ |
||||
|
lineStyle: { |
||||
|
color:'#eee' |
||||
|
} |
||||
|
}, |
||||
|
axisTick: { |
||||
|
lineStyle: { |
||||
|
color:'#eee' |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
], |
||||
|
yAxis:[ |
||||
|
{ |
||||
|
type: 'value', |
||||
|
min: 0, |
||||
|
max: 100, |
||||
|
axisLabel: { |
||||
|
formatter: '{value} %' |
||||
|
}, |
||||
|
axisLine:{ |
||||
|
lineStyle: { |
||||
|
color:'#eee' |
||||
|
} |
||||
|
}, |
||||
|
axisTick: { |
||||
|
lineStyle: { |
||||
|
color:'#eee' |
||||
|
} |
||||
|
}, |
||||
|
// splitLine:{ |
||||
|
// show:false, |
||||
|
// } |
||||
|
} |
||||
|
], |
||||
|
|
||||
|
series: [ |
||||
|
{ |
||||
|
'name': '当日完成率', |
||||
|
'type': 'bar', |
||||
|
'emphasis': { |
||||
|
focus: 'series' |
||||
|
}, |
||||
|
// data: seriesData1 |
||||
|
'data': valueData, |
||||
|
// [this.barList[6].num1, this.barList[5].num1, this.barList[4].num1, this.barList[3].num1, this.barList[2].num1, this.barList[1].num1, this.barList[0].num1], |
||||
|
'label':{ |
||||
|
show:true, |
||||
|
position:'top', |
||||
|
textStyle: { |
||||
|
color: '#fff300', |
||||
|
fontSize: 11 |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
{ |
||||
|
'name': '当日良品率', |
||||
|
'type': 'bar', |
||||
|
'emphasis': { |
||||
|
focus: 'series' |
||||
|
}, |
||||
|
// data: seriesData1 |
||||
|
'data': valueApproveData, |
||||
|
// [this.barList[6].num1, this.barList[5].num1, this.barList[4].num1, this.barList[3].num1, this.barList[2].num1, this.barList[1].num1, this.barList[0].num1], |
||||
|
'label':{ |
||||
|
show:true, |
||||
|
position:'top', |
||||
|
textStyle: { |
||||
|
color: '#fff300', |
||||
|
fontSize: 11 |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
] |
||||
|
}; |
||||
|
|
||||
|
this.option2 && this.myChart2.setOption(this.option2); |
||||
|
}, |
||||
|
getDate(value) { |
||||
|
var date = value.substring(5, 10); |
||||
|
return date; |
||||
|
}, |
||||
|
timeDo(){ |
||||
|
let that=this; |
||||
|
getRefreshTime('scheduledBoard').then(({data}) => { |
||||
|
if (data.rows != "" && data.rows != null) { |
||||
|
that.refreshTime = Number(data.rows); |
||||
|
if(that.refreshTime ==0){ |
||||
|
that.refreshTime =5; |
||||
|
} |
||||
|
}else { |
||||
|
that.refreshTime =5; |
||||
|
} |
||||
|
window.setInterval(() => { |
||||
|
this.searchData(); |
||||
|
// }, 4000*Number(that.refreshTime)); |
||||
|
}, 1000*that.refreshTime); |
||||
|
}) |
||||
|
// $.ajax({ |
||||
|
// url: "/board/getRefreshTime", |
||||
|
// type: "post", |
||||
|
// data: {"boardName": 'newScheduledBoard'}, |
||||
|
// dataType: "json", |
||||
|
// success: (data) => { |
||||
|
// if (data.rows != "" && data.rows != null) { |
||||
|
// that.refreshTime = Number(data.rows); |
||||
|
// if(that.refreshTime ==0){ |
||||
|
// that.refreshTime =5; |
||||
|
// } |
||||
|
// }else { |
||||
|
// that.refreshTime =5; |
||||
|
// } |
||||
|
// window.setInterval(() => { |
||||
|
// this.searchData(); |
||||
|
// }, 4000*Number(that.refreshTime)); |
||||
|
// }, |
||||
|
// }) |
||||
|
}, |
||||
|
renderHeader(h, { column, $index }) { |
||||
|
return h("span", {}, [ |
||||
|
h("span", {}, column.label.split("/")[0]), |
||||
|
h("br"), |
||||
|
h("span", {}, column.label.split("/")[1]) |
||||
|
]); |
||||
|
}, |
||||
|
board2Function({row, column, rowIndex, columnIndex}){ |
||||
|
if(columnIndex==1){ |
||||
|
return 'background-color: #90ca75;' |
||||
|
} |
||||
|
if(columnIndex==2){ |
||||
|
return 'background-color: #dbd81a;' |
||||
|
} |
||||
|
if(columnIndex==3){ |
||||
|
return 'background-color: #ec6566;' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
created(){ |
||||
|
this.getRefresh(); |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(()=>{ |
||||
|
this.height = window.innerHeight *0.36; |
||||
|
}) |
||||
|
// this.getTableData(); |
||||
|
this.timeDo(); |
||||
|
this.searchData(); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style > |
||||
|
.container { |
||||
|
height: 109%; |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
z-index: -1; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
content: ""; |
||||
|
background-image: url(~@/assets/img/factory.jpg); |
||||
|
background-size: cover; |
||||
|
} |
||||
|
.board .el-table .cell { |
||||
|
line-height: 20px; |
||||
|
font-size: 20px; |
||||
|
height: 20px; |
||||
|
padding: 0px; |
||||
|
color: yellow; |
||||
|
} |
||||
|
|
||||
|
/* 表格内背景颜色 */ |
||||
|
.board .el-table th, .el-table tr,.el-table td{ |
||||
|
border: 0; |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
/* 使表格背景透明 */ |
||||
|
.board .el-table th, .el-table tr { |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
/* 删除表格下横线 */ |
||||
|
.board .el-table::before { |
||||
|
left: 0; |
||||
|
bottom: 0; |
||||
|
width: 100%; |
||||
|
height: 0px; |
||||
|
} |
||||
|
/* 表格表头字体颜色 */ |
||||
|
.board .el-table, .el-table__expanded-cell { |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
.el-table thead { |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
|
||||
|
.board .el-table th .cell { |
||||
|
line-height: 20px; |
||||
|
font-size: 15px; |
||||
|
height: 40px; |
||||
|
padding: 0px; |
||||
|
color: yellow; |
||||
|
} |
||||
|
.board2 .el-table .cell { |
||||
|
line-height: 18px; |
||||
|
font-size: 18px; |
||||
|
height: 18px; |
||||
|
padding: 0px; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
/* 表格内背景颜色 */ |
||||
|
.board2 .el-table th, .el-table tr,.el-table td{ |
||||
|
border: 0; |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
/* 使表格背景透明 */ |
||||
|
.board2 .el-table th, .el-table tr { |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
/* 删除表格下横线 */ |
||||
|
.board2 .el-table::before { |
||||
|
left: 0; |
||||
|
bottom: 0; |
||||
|
width: 100%; |
||||
|
height: 0px; |
||||
|
} |
||||
|
/* 表格表头字体颜色 */ |
||||
|
.board2 .el-table, .el-table__expanded-cell { |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.board2 .el-table th .cell { |
||||
|
line-height: 18px; |
||||
|
font-size: 13px; |
||||
|
height: 36px; |
||||
|
padding: 0px; |
||||
|
color: white; |
||||
|
} |
||||
|
</style> |
||||
12
static/plugins/echarts/echarts.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save
Reference in new issue