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

feat: 10dept界面优化

This commit is contained in:
caoqianming 2023-11-07 13:03:15 +08:00
parent d3c47a12c3
commit d261ae7b7e
1 changed files with 167 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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
},
}
}