feat: 10dept界面优化
This commit is contained in:
parent
d3c47a12c3
commit
d261ae7b7e
|
|
@ -6,7 +6,7 @@
|
|||
<el-main>
|
||||
<el-row style="height: 60%" :gutter="10">
|
||||
<el-col :xs="24" :md="10">
|
||||
<el-row style="height: 29%" :gutter="10">
|
||||
<el-row style="height: 34%;" :gutter="10">
|
||||
<el-col :xs="8" :md="8">
|
||||
<div class="box">
|
||||
<div class="boxtitle bgimg">
|
||||
|
|
@ -28,10 +28,11 @@
|
|||
<div>昨日合格</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<div class="boxmain flex_center bigdata border">
|
||||
<span
|
||||
style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">1200</span>
|
||||
</div>
|
||||
<dv-decoration-9 style="height:11rem; width: 11rem;margin:auto;">
|
||||
<div style="color: #fef000; font-size:28px">
|
||||
130
|
||||
</div>
|
||||
</dv-decoration-9>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="8" :md="8">
|
||||
|
|
@ -41,28 +42,32 @@
|
|||
<div>累计合格</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<div class="boxmain flex_center bigdata border">
|
||||
<span
|
||||
style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">12000</span>
|
||||
</div>
|
||||
<dv-decoration-9 style="height:11rem; width: 11rem;margin:auto;">
|
||||
<div style="color: #fef000; font-size:28px">
|
||||
1300
|
||||
</div>
|
||||
</dv-decoration-9>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="height: 1%;"></div>
|
||||
<el-row style="height:70%">
|
||||
<div style="height:2%"></div>
|
||||
<dv-decoration3 style="width:100%;height:4%;" />
|
||||
<el-row style="height:60%">
|
||||
<el-col>
|
||||
<div class="box">
|
||||
<dv-border-box12 class="box">
|
||||
<div class="boxtitle">
|
||||
<div style="border-bottom:4px solid green;padding-bottom:5px;display:inline-block;">人员到岗
|
||||
<div style="margin:auto; font-size: 18px; margin-top: 6px">人员到岗
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxmain">
|
||||
<el-table :data="workerData" id="table1">
|
||||
<dv-scroll-board :config="taskBoard" style="width:100%;height:100%"
|
||||
@mouseover="mouseoverHandler" @click="clickHandler" />
|
||||
<!-- <el-table :data="workerData" id="table1">
|
||||
<el-table-column prop="name" label="姓名" />
|
||||
<el-table-column prop="team" label="班次" />
|
||||
<el-table-column prop="post" label="岗位" />
|
||||
<el-table-column prop="state" label="状态" />
|
||||
</el-table>
|
||||
</el-table> -->
|
||||
<!-- <table border="0" cellspacing="16">
|
||||
<tbody>
|
||||
<tr>
|
||||
|
|
@ -117,19 +122,20 @@
|
|||
</tbody>
|
||||
</table> -->
|
||||
</div>
|
||||
</div>
|
||||
</dv-border-box12>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="14">
|
||||
<div class="box">
|
||||
<dv-border-box8 class="box" :dur="20">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>任务进度</div>
|
||||
<div style="margin:auto; font-size: 18px; margin-top: 6px">任务进度</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<div style="height: 2px;"></div>
|
||||
<div class="boxmain">
|
||||
<table border="0" cellspacing="16">
|
||||
<dv-scroll-board :config="taskBoard2" style="width:100%;height:100%"
|
||||
@mouseover="mouseoverHandler" @click="clickHandler" />
|
||||
<!-- <table border="0" cellspacing="16">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
|
|
@ -181,42 +187,39 @@
|
|||
<td><el-tag type="warning" effect="light">生产中</el-tag></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</table> -->
|
||||
</div>
|
||||
</div>
|
||||
</dv-border-box8>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="height: 1%;"></div>
|
||||
<dv-decoration4 :reverse="true" style="width:100%;height:1%;" :dur="20" :color="['orange']" />
|
||||
<el-row style="height:39%" :gutter="10">
|
||||
<el-col :xs="24" :md="9">
|
||||
<div class="box">
|
||||
<dv-border-box9 class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>全年生产统计</div>
|
||||
<div style="margin:auto; font-size: 18px; margin-top: 6px">全年生产统计</div>
|
||||
</div>
|
||||
<div class="boxmain" id="chart1">
|
||||
</div>
|
||||
</div>
|
||||
</dv-border-box9>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="9">
|
||||
<div class="box">
|
||||
<dv-border-box9 class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>本月合格率统计</div>
|
||||
<div style="margin:auto; font-size: 18px; margin-top: 6px">本月合格率统计</div>
|
||||
</div>
|
||||
<div class="boxmain" id="chart2">
|
||||
</div>
|
||||
</div>
|
||||
</dv-border-box9>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="6">
|
||||
<div class="box">
|
||||
<dv-border-box9 class="box">
|
||||
<div class="boxtitle">
|
||||
<div class="boxlabel"></div>
|
||||
<div>昨日合格统计</div>
|
||||
<div style="margin:auto; font-size: 18px; margin-top: 6px">昨日合格统计</div>
|
||||
</div>
|
||||
<div class="boxmain" id="chart3">
|
||||
</div>
|
||||
</div>
|
||||
</dv-border-box9>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
|
|
@ -247,16 +250,16 @@
|
|||
.box {
|
||||
background: rgba(6, 48, 109, .3);
|
||||
height: 100%;
|
||||
padding: 2px 2px 2px 2px;
|
||||
/* padding: 2px 2px 2px 2px; */
|
||||
border-radius: 2%;
|
||||
}
|
||||
|
||||
.boxtitle {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
height: 25px;
|
||||
|
||||
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 {
|
||||
|
|
@ -272,7 +275,7 @@
|
|||
}
|
||||
|
||||
.boxmain {
|
||||
height: calc(100% - 25px);
|
||||
height: calc(100% - 5rem);
|
||||
margin: 0px 4px 0px 4px;
|
||||
}
|
||||
|
||||
|
|
@ -332,9 +335,11 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
basicOption: {
|
||||
tooltip: {},
|
||||
backgroundColor: '',
|
||||
xAxis: {
|
||||
data: ['一月', '二月', '三月', '四月', '五月', '六月'],
|
||||
boundaryGap: false,
|
||||
},
|
||||
yAxis: { type: 'value' },
|
||||
series: [
|
||||
|
|
@ -342,33 +347,22 @@ export default {
|
|||
name: '销量',
|
||||
type: 'bar',
|
||||
barwidth: 10,
|
||||
radius: ['40%', '70%'],
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#83bff6' },
|
||||
{ offset: 0.5, color: '#188df0' },
|
||||
{ offset: 1, color: '#188df0' }
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#2378f7' },
|
||||
{ offset: 0.7, color: '#2378f7' },
|
||||
{ offset: 1, color: '#83bff6' }
|
||||
])
|
||||
}
|
||||
},
|
||||
itemStyle: {},
|
||||
emphasis: {},
|
||||
areaStyle: {},
|
||||
smooth: true,
|
||||
data: [5, 20, 36, 10, 10, 20]
|
||||
}
|
||||
],
|
||||
grid: { // 让图表占满容器
|
||||
top: "10%",
|
||||
left: "12%",
|
||||
right: "0px",
|
||||
right: "4%",
|
||||
bottom: "10%"
|
||||
}
|
||||
},
|
||||
|
|
@ -397,19 +391,127 @@ export default {
|
|||
post: '岗位1',
|
||||
state: 1
|
||||
},
|
||||
]
|
||||
],
|
||||
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'],
|
||||
},
|
||||
tableData: [
|
||||
['产品名称', '型号', '计划周期', '完成进度', '产量', '状态'],
|
||||
['ZB2', 'xxx', '2023-11-01至2023-11-11', '70', '5000', '生产中'],
|
||||
],
|
||||
taskBoard2: {
|
||||
header: ['产品名称', '型号', '计划周期', '完成进度', '产量', '状态'],
|
||||
headerBGC: '#eeeee',
|
||||
waitTime: 3000,
|
||||
columnWidth: [1, 1, 1, 1, 1],
|
||||
data: [
|
||||
['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3', '行1列3', '行1列3', '行1列3'],
|
||||
['行2列1', '<span style="color:#32c5e9;">行2列2</span>', '行2列3', '行1列3', '行1列3', '行1列3'],
|
||||
['行3列1', '行3列2', '<span style="color:#67e0e3;">行3列3</span>', '行1列3', '行1列3', '行1列3'],
|
||||
['行4列1', '<span style="color:#9fe6b8;">行4列2</span>', '行4列3', '行1列3', '行1列3', '行1列3'],
|
||||
['<span style="color:#ffdb5c;">行5列1</span>', '行5列2', '行5列3', '行1列3', '行1列3', '行1列3'],
|
||||
['行6列1', '<span style="color:#ff9f7f;">行6列2</span>', '行6列3', '行1列3', '行1列3', '行1列3'],
|
||||
['行7列1', '行7列2', '<span style="color:#fb7293;">行7列3</span>', '行1列3', '行1列3', '行1列3'],
|
||||
['行8列1', '<span style="color:#e062ae;">行8列2</span>', '行8列3', '行1列3', '行1列3', '行1列3'],
|
||||
['<span style="color:#e690d1;">行9列1</span>', '行9列2', '行9列3', '行1列3', '行1列3', '行1列3'],
|
||||
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3'],
|
||||
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3'],
|
||||
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3'],
|
||||
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3'],
|
||||
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3'],
|
||||
],
|
||||
index: true,
|
||||
columnWidth: [50],
|
||||
align: ['center'],
|
||||
},
|
||||
chartInterval1: null,
|
||||
chartInterval2: null,
|
||||
chartInterval3: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setChart("chart1");
|
||||
let chart1Option = deepCopy(this.basicOption)
|
||||
let chart1 = this.setChart("chart1", chart1Option);
|
||||
let index1 = 0
|
||||
this.chartInterval1 = setInterval(function () {
|
||||
if (index1 < chart1Option.series[0].data.length) {
|
||||
chart1.dispatchAction({ type: 'downplay', seriesIndex: 0 });
|
||||
chart1.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index1 });
|
||||
chart1.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index1 });
|
||||
|
||||
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 chart2Option = deepCopy(this.basicOption)
|
||||
chart2Option.series[0].type = 'line'
|
||||
this.setChart("chart2", chart2Option)
|
||||
let chart2 = this.setChart("chart2", chart2Option)
|
||||
let index2 = 0
|
||||
this.chartInterval2 = setInterval(function () {
|
||||
if (chart2 < chart2Option.series[0].data.length) {
|
||||
chart2.dispatchAction({ type: 'downplay', seriesIndex: 0 });
|
||||
chart2.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index2 });
|
||||
chart2.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index2 });
|
||||
|
||||
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;
|
||||
}
|
||||
}, 2000);
|
||||
let chart3Option = deepCopy(this.basicOption)
|
||||
chart3Option.series[0].type = 'pie'
|
||||
chart3Option.series[0].itemStyle = {}
|
||||
chart3Option.series[0].emphasis = {}
|
||||
this.setChart("chart3", chart3Option)
|
||||
chart3Option.series[0].itemStyle = {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
chart3Option.series[0].emphasis = {
|
||||
value: {
|
||||
show: true,
|
||||
fontSize: 40,
|
||||
Color: 'white',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
chart3Option.grid.right = "10%"
|
||||
let chart3 = this.setChart("chart3", chart3Option)
|
||||
let index3 = 0
|
||||
this.chartInterval3 = setInterval(function () {
|
||||
if (index3 < chart3Option.series[0].data.length) {
|
||||
chart3.dispatchAction({ type: 'downplay', seriesIndex: 0 });
|
||||
chart3.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index3 });
|
||||
chart3.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index3 });
|
||||
|
||||
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;
|
||||
}
|
||||
}, 2000);
|
||||
},
|
||||
methods: {
|
||||
setChart(name, option = null) {
|
||||
|
|
@ -427,6 +529,7 @@ export default {
|
|||
myChart.setOption(option);
|
||||
} catch (error) { }
|
||||
}, 500)
|
||||
return myChart
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue