<template>
|
<div id="box">
|
<div class="up">
|
<div class="bg-color-black item">
|
<span>
|
<icon
|
name="chart-pie"
|
class="text-icon"
|
style="margin-left: 10px"
|
></icon>
|
</span>
|
<span class="fs-xl text mb-1 pl-3" style="font-size: 20px"
|
>下线工艺参数</span
|
>
|
<br />
|
<div>
|
<div class="row">
|
<!-- <div class="cell">PressTest</div> -->
|
<div class="cell">保压时间</div>
|
<div class="cell">压力降</div>
|
<!-- <div class="cell">LeakTest</div> -->
|
<div class="cell">最大测试压力</div>
|
<div class="cell">最小测试压力</div>
|
<div class="cell">最大压紧压力</div>
|
<div class="cell">最小压紧压力</div>
|
<div class="cell">主簧直径</div>
|
<div class="cell">主簧宽度</div>
|
<div class="cell">主簧厚度</div>
|
<div class="cell">底板直径</div>
|
<div class="cell">底板宽度</div>
|
<div class="cell">底板厚度</div>
|
</div>
|
<div class="body">
|
<!-- PressTest -->
|
<!-- <div class="cell">{{ titleItem.PressTest }}</div> -->
|
<!-- 保压时间 -->
|
<div class="cell">{{ titleItem.DwellTime }}min</div>
|
<!-- 保压压力 -->
|
<div class="cell">{{ titleItem.PressTest}}bar</div>
|
<!-- LeakTest -->
|
<!-- <div class="cell">{{ titleItem.LeakTest }}</div> -->
|
<!-- 动作延时 -->
|
<div class="cell">{{ titleItem.DwellPressure }}bar</div>
|
<!-- 充气时间 -->
|
<div class="cell">{{ titleItem.LeakTest }}bar</div>
|
<!-- 融合时间 -->
|
<div class="cell">{{ titleItem.ActionDelay }}bar</div>
|
<!-- 平衡时间 -->
|
<div class="cell">{{ titleItem.InflationTime }}mm</div>
|
<div class="cell">{{ titleItem.para_MS_diameter }}mm</div>
|
<div class="cell">{{ titleItem.para_MS_width }}mm</div>
|
<div class="cell">{{ titleItem.para_MS_thickness }}mm</div>
|
<div class="cell">{{ titleItem.para_motherboard_diameter }}mm</div>
|
<div class="cell">{{ titleItem.para_motherboard_width }}mm</div>
|
<div class="cell">{{ titleItem.para_motherboard_thickness }}mm</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="down" style="margin-left: 10px">
|
<div class="ranking bg-color-black">
|
<div id="item1" style="margin-top: 10px">
|
<span>
|
<icon name="chart-pie" class="text-icon"></icon>
|
</span>
|
<span class="fs-xl text mb-1 pl-3" style="font-size: 20px"
|
>当日达成情况</span
|
>
|
<dv-scroll-ranking-board
|
class="dv-scr-rank-board mt-1"
|
:config="rankingDay"
|
style="width: 200px; height: 200px; font-size: 30px"
|
/>
|
</div>
|
<div id="item2" style="position: absolute; top: 380px">
|
<span>
|
<icon name="chart-pie" class="text-icon"></icon>
|
</span>
|
<span class="fs-xl text mb-1 pl-3" style="font-size: 20px"
|
>当月总达成情况</span
|
>
|
<dv-scroll-ranking-board
|
class="dv-scr-rank-board mt-1"
|
:config="rankingMouth"
|
style="width: 200px; height: 200px; font-size: 30px"
|
/>
|
</div>
|
</div>
|
<!-- 效率 -->
|
<div id="item3" style="position: absolute; top: 200px; left: 900px">
|
<echarView1 />
|
</div>
|
<div id="item3" style="position: absolute; top: 360px; left: 900px">
|
<echarView2 />
|
</div>
|
<div id="item4" style="position: absolute; top: 220px; left: 1150px;width: 150px;">
|
<dv-border-box-13>
|
<centerLeft1/>
|
</dv-border-box-13>
|
</div>
|
<!-- 设备状态 -->
|
<div class="right">
|
<dv-border-box-13>
|
<centerRight1 />
|
</dv-border-box-13>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import CenterChart from "@/components/echart/center/centerChartRate";
|
import echarView1 from "./echarView1.vue";
|
import echarView2 from "./echarView2.vue";
|
import centerRight1 from "./centerRight1";
|
import centerLeft1 from "./centerLeft1.vue";
|
import axios from "@/api/ajax.js";
|
export default {
|
data() {
|
return {
|
isTitle: true,
|
isRanking: true,
|
titleItem: {
|
PressTest: "", //PressTest
|
DwellTime: "", //保压时间
|
DwellPressure: "", //保压压力
|
LeakTest: "", //LeakTest
|
ActionDelay: "", //动作延时
|
InflationTime: "", //充气时间
|
para_MS_diameter:"",
|
para_MS_width:"",
|
para_MS_thickness:"",
|
para_motherboard_diameter:"",
|
para_motherboard_width:"",
|
para_motherboard_thickness:"",
|
},
|
rankingDay: {
|
data: [
|
{
|
name: "目标",
|
value: 300,
|
},
|
{
|
name: "实际",
|
value: 200,
|
},
|
],
|
carousel: "single",
|
unit: "",
|
}, //日产值
|
rankingMouth: {
|
data: [
|
{
|
name: "目标",
|
value: 3200,
|
},
|
{
|
name: "实际",
|
value: 2900,
|
},
|
],
|
carousel: "single",
|
unit: "",
|
}, //月产值
|
};
|
},
|
components: {
|
CenterChart,
|
echarView1,
|
echarView2,
|
centerRight1,
|
centerLeft1
|
},
|
mounted() {
|
this.GetTitleItem();
|
setInterval(() => {
|
this.GetTitleItem();
|
}, 5000);
|
this.GetRanKing();
|
setInterval(() => {
|
this.GetRanKing();
|
}, 5000);
|
},
|
methods: {
|
GetTitleItem() {
|
axios.post("/api/dt_productionpara/GetTitleItem", null, "").then((x) => {
|
if (x.data.status) {
|
var data = x.data.data
|
// this.titleItem = data;
|
for (let index = 0; index < data.length; index++) {
|
this.titleItem.DwellTime=(data[index].para_holdtime);
|
this.titleItem.PressTest=(data[index].para_pressuredrop);
|
this.titleItem.DwellPressure=(data[index].para_pressuretestmax);
|
this.titleItem.LeakTest=(data[index].para_pressuretestmin);
|
this.titleItem.ActionDelay=(data[index].para_pressuremax);
|
this.titleItem.InflationTime=(data[index].para_pressuremin);
|
this.titleItem.para_MS_diameter=(data[index].para_MS_diameter);
|
this.titleItem.para_MS_width=(data[index].para_MS_width);
|
this.titleItem.para_MS_thickness=(data[index].para_MS_thickness);
|
this.titleItem.para_motherboard_diameter=(data[index].para_motherboard_diameter);
|
this.titleItem.para_motherboard_width=(data[index].para_motherboard_width);
|
this.titleItem.para_motherboard_thickness=(data[index].para_motherboard_thickness);
|
}
|
//开启定时器
|
if (this.isTitle) {
|
setInterval(() => {
|
this.GetTitleItem();
|
this.isTitle = false;
|
}, 10000);
|
}
|
}
|
});
|
},
|
GetRanKing() {
|
axios.post("/api/dt_product/GetDayGoals", null, "").then((x) => {
|
if (x.data.status) {
|
this.rankingDay = {
|
data: [
|
{
|
name: "目标",
|
value: x.data.data.day_target,
|
},
|
{
|
name: "实际",
|
value: x.data.data.day_actual,
|
},
|
],
|
carousel: "single",
|
unit: "",
|
};
|
this.rankingMouth = {
|
data: [
|
{
|
name: "目标",
|
value: x.data.data.month_target
|
},
|
{
|
name: "实际",
|
value: x.data.data.month_actual,
|
},
|
],
|
carousel: "single",
|
unit: "",
|
};
|
//开启定时器
|
if (this.isRanking) {
|
setInterval(() => {
|
this.GetRanKing();
|
this.isRanking = false;
|
}, 1000);
|
}
|
}
|
});
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
#box {
|
display: flex;
|
flex-direction: column;
|
.row {
|
display: flex;
|
background-color: rgb(0, 186, 255);
|
color: #fff;
|
height: 25px;
|
line-height: 25px;
|
}
|
.cell {
|
width: 120px;
|
border-right: #fff 1px solid;
|
text-align: center;
|
}
|
.body {
|
display: flex;
|
background-color: rgb(0, 59, 81);
|
color: #fff;
|
height: 26px;
|
line-height: 26px;
|
}
|
.up {
|
width: 1250px;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-around;
|
.item {
|
border-radius: 6px;
|
padding-top: 8px;
|
margin-top: 8px;
|
width: 98%;
|
height: 80px;
|
.dv-dig-flop {
|
width: 150px;
|
height: 30px;
|
}
|
}
|
}
|
.down {
|
padding: 6px 4px;
|
padding-bottom: 0;
|
width: 880px;
|
display: flex;
|
height: 255px;
|
justify-content: space-between;
|
.bg-color-black {
|
border-radius: 5px;
|
height: 320px;
|
}
|
.water {
|
position: absolute;
|
left: 1190px;
|
}
|
.right {
|
width: 620px;
|
height: 320px;
|
position: absolute;
|
left: 1300px;
|
}
|
.ranking {
|
padding: 10px;
|
width: 220px;
|
display: flex;
|
.dv-scr-rank-board {
|
height: 200px;
|
margin-top: 20px;
|
}
|
}
|
.percent {
|
width: 40%;
|
display: flex;
|
flex-wrap: wrap;
|
.item {
|
width: 50%;
|
height: 120px;
|
span {
|
margin-top: 8px;
|
margin-left: 8px;
|
font-size: 14px;
|
display: flex;
|
justify-content: center;
|
}
|
}
|
.dv-wa-le-po {
|
margin-left: 1000px;
|
.dv-wa-le-po {
|
height: 120px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
