feat: index_10dept界面修改
This commit is contained in:
parent
dfc84e220b
commit
707dbf6a19
|
|
@ -28,11 +28,11 @@
|
|||
<div>昨日合格</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<dv-decoration-9 style="height:11rem; width: 11rem;margin:auto;">
|
||||
<!-- <dv-decoration-9 style="height:11rem; width: 11rem;margin:auto;">
|
||||
<div style="color: #fef000; font-size:28px">
|
||||
130
|
||||
</div>
|
||||
</dv-decoration-9>
|
||||
</dv-decoration-9> -->
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="8" :md="8">
|
||||
|
|
@ -42,11 +42,11 @@
|
|||
<div>累计合格</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<dv-decoration-9 style="height:11rem; width: 11rem;margin:auto;">
|
||||
<!-- <dv-decoration-9 style="height:11rem; width: 11rem;margin:auto;">
|
||||
<div style="color: #fef000; font-size:28px">
|
||||
1300
|
||||
</div>
|
||||
</dv-decoration-9>
|
||||
</dv-decoration-9> -->
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
<dv-decoration3 style="width:100%;height:4%;" />
|
||||
<el-row style="height:60%">
|
||||
<el-col>
|
||||
<dv-border-box12 class="box">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div style="margin:auto; font-size: 18px; margin-top: 6px">人员到岗
|
||||
</div>
|
||||
|
|
@ -122,12 +122,12 @@
|
|||
</tbody>
|
||||
</table> -->
|
||||
</div>
|
||||
</dv-border-box12>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="14">
|
||||
<dv-border-box8 class="box" :dur="20">
|
||||
<div class="box" :dur="20">
|
||||
<div class="boxtitle">
|
||||
<div style="margin:auto; font-size: 18px; margin-top: 6px">任务进度</div>
|
||||
</div>
|
||||
|
|
@ -189,37 +189,38 @@
|
|||
</tbody>
|
||||
</table> -->
|
||||
</div>
|
||||
</dv-border-box8>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<dv-decoration4 :reverse="true" style="width:100%;height:1%;" :dur="20" :color="['orange']" />
|
||||
<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">
|
||||
<dv-border-box9 class="box">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div style="margin:auto; font-size: 18px; margin-top: 6px">全年生产统计</div>
|
||||
</div>
|
||||
<div class="boxmain" id="chart1">
|
||||
</div>
|
||||
</dv-border-box9>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="9">
|
||||
<dv-border-box9 class="box">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div style="margin:auto; font-size: 18px; margin-top: 6px">本月合格率统计</div>
|
||||
</div>
|
||||
<div class="boxmain" id="chart2">
|
||||
</div>
|
||||
</dv-border-box9>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="6">
|
||||
<dv-border-box9 class="box">
|
||||
<div class="box">
|
||||
<div class="boxtitle">
|
||||
<div style="margin:auto; font-size: 18px; margin-top: 6px">昨日合格统计</div>
|
||||
</div>
|
||||
<div class="boxmain" id="chart3">
|
||||
</div>
|
||||
</dv-border-box9>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
|
|
@ -234,8 +235,9 @@
|
|||
}
|
||||
|
||||
.header {
|
||||
/* background: url("/public/img/head_bg.png"); */
|
||||
background: url("https://cdn-upload.datav.aliyun.com/upload/download/1675143770257-pNifja_p.webp");
|
||||
background: url("/public/img/photon_header.png");
|
||||
border-bottom: none;
|
||||
/* background: url("https://cdn-upload.datav.aliyun.com/upload/download/1675143770257-pNifja_p.webp"); */
|
||||
background-size: 100% 100%;
|
||||
font-size: 28px;
|
||||
justify-content: center;
|
||||
|
|
@ -248,10 +250,9 @@
|
|||
} */
|
||||
|
||||
.box {
|
||||
background: rgba(6, 48, 109, .3);
|
||||
background: rgba(10, 63, 68, 0.5);
|
||||
height: 100%;
|
||||
/* padding: 2px 2px 2px 2px; */
|
||||
border-radius: 2%;
|
||||
}
|
||||
|
||||
.boxtitle {
|
||||
|
|
@ -275,8 +276,13 @@
|
|||
}
|
||||
|
||||
.boxmain {
|
||||
height: calc(100% - 5rem);
|
||||
margin: 0px 4px 0px 4px;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.boxmain {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.flex_center {
|
||||
|
|
@ -313,18 +319,6 @@ table td {
|
|||
border-bottom: 1px solid rgba(255, 255, 255, .3);
|
||||
padding: .1rem 0;
|
||||
}
|
||||
|
||||
.lineDiv {
|
||||
height: 4px;
|
||||
border-top: 1px solid #eeeeee;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.lineDivBlock {
|
||||
position: absolute;
|
||||
width: 10%;
|
||||
height:
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
|
|
@ -335,36 +329,157 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
basicOption: {
|
||||
tooltip: {},
|
||||
backgroundColor: '',
|
||||
xAxis: {
|
||||
data: ['一月', '二月', '三月', '四月', '五月', '六月'],
|
||||
boundaryGap: false,
|
||||
},
|
||||
yAxis: { type: 'value' },
|
||||
series: [
|
||||
{
|
||||
name: '销量',
|
||||
type: 'bar',
|
||||
barwidth: 10,
|
||||
radius: ['40%', '70%'],
|
||||
// backgroundColor: '',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
icon: "stack",
|
||||
right: 0,
|
||||
data: [{
|
||||
backgroundColor: 'rgb(1,235,239)',
|
||||
name: 'Line 1',
|
||||
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: 'Line 2',
|
||||
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: '5%',
|
||||
right: '5%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
data: ['2日', '3日', '四日', '5日', '6日', '7日', '8日'],
|
||||
nameTextStyle: {
|
||||
color: '#ffffff'
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#ffffff'
|
||||
},
|
||||
itemStyle: {},
|
||||
emphasis: {},
|
||||
areaStyle: {},
|
||||
smooth: true,
|
||||
data: [5, 20, 36, 10, 10, 20]
|
||||
}
|
||||
],
|
||||
grid: { // 让图表占满容器
|
||||
top: "10%",
|
||||
left: "12%",
|
||||
right: "4%",
|
||||
bottom: "10%"
|
||||
}
|
||||
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: 'Line 1',
|
||||
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)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [140, 232, 101, 264, 90, 340, 250]
|
||||
},
|
||||
{
|
||||
name: 'Line 2',
|
||||
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)'
|
||||
}
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 282, 111, 234, 220, 340, 310]
|
||||
},
|
||||
]
|
||||
},
|
||||
workerData: [
|
||||
{
|
||||
|
|
@ -393,18 +508,12 @@ export default {
|
|||
},
|
||||
],
|
||||
taskBoard: {
|
||||
header: ['列1', '列2', '列3'],
|
||||
header: ['姓名', '岗位', '班次', '状态'],
|
||||
headerBGC: '#0a3f44',
|
||||
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],
|
||||
|
|
@ -415,25 +524,26 @@ export default {
|
|||
['ZB2', 'xxx', '2023-11-01至2023-11-11', '70', '5000', '生产中'],
|
||||
],
|
||||
taskBoard2: {
|
||||
header: ['产品名称', '型号', '计划周期', '完成进度', '产量', '状态'],
|
||||
headerBGC: '#eeeee',
|
||||
header: ['产品名称', '型号', '计划周期', '完成进度', '产量', '状态', 'xx'],
|
||||
headerBGC: '#0a3f44',
|
||||
waitTime: 3000,
|
||||
columnWidth: [1, 1, 1, 1, 1],
|
||||
rowNum: 8,
|
||||
columnWidth: [2, 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'],
|
||||
['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3', '<el-progress :text-inside="true" :stroke-width="14" :percentage="100" status="green"/>', '行1列3', '行1列3', 'xx'],
|
||||
['行2列1', '<span style="color:#32c5e9;">行2列2</span>', '行2列3', '行1列3', '行1列3', '行1列3', 'xx'],
|
||||
['行3列1', '行3列2', '<span style="color:#67e0e3;">行3列3</span>', '行1列3', '行1列3', '行1列3', 'xx'],
|
||||
['行4列1', '<span style="color:#9fe6b8;">行4列2</span>', '行4列3', '行1列3', '行1列3', '行1列3', 'xx'],
|
||||
['<span style="color:#ffdb5c;">行5列1</span>', '行5列2', '行5列3', '行1列3', '行1列3', '行1列3', 'xx'],
|
||||
['行6列1', '<span style="color:#ff9f7f;">行6列2</span>', '行6列3', '行1列3', '行1列3', '行1列3', 'xx'],
|
||||
['行7列1', '行7列2', '<span style="color:#fb7293;">行7列3</span>', '行1列3', '行1列3', '行1列3', 'xx'],
|
||||
['行8列1', '<span style="color:#e062ae;">行8列2</span>', '行8列3', '行1列3', '行1列3', '行1列3', 'xx'],
|
||||
['<span style="color:#e690d1;">行9列1</span>', '行9列2', '行9列3', '行1列3', '行1列3', '行1列3', 'xx'],
|
||||
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
|
||||
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
|
||||
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
|
||||
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
|
||||
['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', 'xx'],
|
||||
],
|
||||
index: true,
|
||||
columnWidth: [50],
|
||||
|
|
@ -447,71 +557,28 @@ export default {
|
|||
mounted() {
|
||||
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 });
|
||||
// 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);
|
||||
// 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'
|
||||
chart2Option.series[1].type = 'line'
|
||||
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 = {
|
||||
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) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue