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-main>
<el-row style="height: 60%" :gutter="10"> <el-row style="height: 60%" :gutter="10">
<el-col :xs="24" :md="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"> <el-col :xs="8" :md="8">
<div class="box"> <div class="box">
<div class="boxtitle bgimg"> <div class="boxtitle bgimg">
@ -28,10 +28,11 @@
<div>昨日合格</div> <div>昨日合格</div>
</div> </div>
<div style="height: 4px;"></div> <div style="height: 4px;"></div>
<div class="boxmain flex_center bigdata border"> <dv-decoration-9 style="height:11rem; width: 11rem;margin:auto;">
<span <div style="color: #fef000; font-size:28px">
style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">1200</span> 130
</div> </div>
</dv-decoration-9>
</div> </div>
</el-col> </el-col>
<el-col :xs="8" :md="8"> <el-col :xs="8" :md="8">
@ -41,28 +42,32 @@
<div>累计合格</div> <div>累计合格</div>
</div> </div>
<div style="height: 4px;"></div> <div style="height: 4px;"></div>
<div class="boxmain flex_center bigdata border"> <dv-decoration-9 style="height:11rem; width: 11rem;margin:auto;">
<span <div style="color: #fef000; font-size:28px">
style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">12000</span> 1300
</div> </div>
</dv-decoration-9>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<div style="height: 1%;"></div> <div style="height:2%"></div>
<el-row style="height:70%"> <dv-decoration3 style="width:100%;height:4%;" />
<el-row style="height:60%">
<el-col> <el-col>
<div class="box"> <dv-border-box12 class="box">
<div class="boxtitle"> <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> </div>
<div class="boxmain"> <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="name" label="姓名" />
<el-table-column prop="team" label="班次" /> <el-table-column prop="team" label="班次" />
<el-table-column prop="post" label="岗位" /> <el-table-column prop="post" label="岗位" />
<el-table-column prop="state" label="状态" /> <el-table-column prop="state" label="状态" />
</el-table> </el-table> -->
<!-- <table border="0" cellspacing="16"> <!-- <table border="0" cellspacing="16">
<tbody> <tbody>
<tr> <tr>
@ -117,19 +122,20 @@
</tbody> </tbody>
</table> --> </table> -->
</div> </div>
</div> </dv-border-box12>
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
<el-col :xs="24" :md="14"> <el-col :xs="24" :md="14">
<div class="box"> <dv-border-box8 class="box" :dur="20">
<div class="boxtitle"> <div class="boxtitle">
<div class="boxlabel"></div> <div style="margin:auto; font-size: 18px; margin-top: 6px">任务进度</div>
<div>任务进度</div>
</div> </div>
<div style="height: 4px;"></div> <div style="height: 2px;"></div>
<div class="boxmain"> <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> <tbody>
<tr> <tr>
<th>序号</th> <th>序号</th>
@ -181,42 +187,39 @@
<td><el-tag type="warning" effect="light">生产中</el-tag></td> <td><el-tag type="warning" effect="light">生产中</el-tag></td>
</tr> </tr>
</tbody> </tbody>
</table> </table> -->
</div> </div>
</div> </dv-border-box8>
</el-col> </el-col>
</el-row> </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-row style="height:39%" :gutter="10">
<el-col :xs="24" :md="9"> <el-col :xs="24" :md="9">
<div class="box"> <dv-border-box9 class="box">
<div class="boxtitle"> <div class="boxtitle">
<div class="boxlabel"></div> <div style="margin:auto; font-size: 18px; margin-top: 6px">全年生产统计</div>
<div>全年生产统计</div>
</div> </div>
<div class="boxmain" id="chart1"> <div class="boxmain" id="chart1">
</div> </div>
</div> </dv-border-box9>
</el-col> </el-col>
<el-col :xs="24" :md="9"> <el-col :xs="24" :md="9">
<div class="box"> <dv-border-box9 class="box">
<div class="boxtitle"> <div class="boxtitle">
<div class="boxlabel"></div> <div style="margin:auto; font-size: 18px; margin-top: 6px">本月合格率统计</div>
<div>本月合格率统计</div>
</div> </div>
<div class="boxmain" id="chart2"> <div class="boxmain" id="chart2">
</div> </div>
</div> </dv-border-box9>
</el-col> </el-col>
<el-col :xs="24" :md="6"> <el-col :xs="24" :md="6">
<div class="box"> <dv-border-box9 class="box">
<div class="boxtitle"> <div class="boxtitle">
<div class="boxlabel"></div> <div style="margin:auto; font-size: 18px; margin-top: 6px">昨日合格统计</div>
<div>昨日合格统计</div>
</div> </div>
<div class="boxmain" id="chart3"> <div class="boxmain" id="chart3">
</div> </div>
</div> </dv-border-box9>
</el-col> </el-col>
</el-row> </el-row>
</el-main> </el-main>
@ -247,16 +250,16 @@
.box { .box {
background: rgba(6, 48, 109, .3); background: rgba(6, 48, 109, .3);
height: 100%; height: 100%;
padding: 2px 2px 2px 2px; /* padding: 2px 2px 2px 2px; */
border-radius: 2%; border-radius: 2%;
} }
.boxtitle { .boxtitle {
color: #fff; color: #fff;
font-size: 14px; font-size: 16px;
display: flex; 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 { .bgimg {
@ -272,7 +275,7 @@
} }
.boxmain { .boxmain {
height: calc(100% - 25px); height: calc(100% - 5rem);
margin: 0px 4px 0px 4px; margin: 0px 4px 0px 4px;
} }
@ -332,9 +335,11 @@ export default {
data() { data() {
return { return {
basicOption: { basicOption: {
tooltip: {},
backgroundColor: '', backgroundColor: '',
xAxis: { xAxis: {
data: ['一月', '二月', '三月', '四月', '五月', '六月'], data: ['一月', '二月', '三月', '四月', '五月', '六月'],
boundaryGap: false,
}, },
yAxis: { type: 'value' }, yAxis: { type: 'value' },
series: [ series: [
@ -342,33 +347,22 @@ export default {
name: '销量', name: '销量',
type: 'bar', type: 'bar',
barwidth: 10, barwidth: 10,
radius: ['40%', '70%'],
label: { label: {
show: true, show: true,
position: 'top' position: 'top'
}, },
itemStyle: { itemStyle: {},
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ emphasis: {},
{ offset: 0, color: '#83bff6' }, areaStyle: {},
{ offset: 0.5, color: '#188df0' }, smooth: true,
{ 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' }
])
}
},
data: [5, 20, 36, 10, 10, 20] data: [5, 20, 36, 10, 10, 20]
} }
], ],
grid: { // 让图表占满容器 grid: { // 让图表占满容器
top: "10%", top: "10%",
left: "12%", left: "12%",
right: "0px", right: "4%",
bottom: "10%" bottom: "10%"
} }
}, },
@ -397,19 +391,127 @@ export default {
post: '岗位1', post: '岗位1',
state: 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() { 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) let chart2Option = deepCopy(this.basicOption)
chart2Option.series[0].type = 'line' 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) let chart3Option = deepCopy(this.basicOption)
chart3Option.series[0].type = 'pie' chart3Option.series[0].type = 'pie'
chart3Option.series[0].itemStyle = {} chart3Option.series[0].itemStyle = {
chart3Option.series[0].emphasis = {} borderRadius: 10,
this.setChart("chart3", chart3Option) 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: { methods: {
setChart(name, option = null) { setChart(name, option = null) {
@ -427,6 +529,7 @@ export default {
myChart.setOption(option); myChart.setOption(option);
} catch (error) { } } catch (error) { }
}, 500) }, 500)
return myChart
}, },
} }
} }