<template>
|
<dv-border-box-12 id="content">
|
<div class="Box">
|
<div style="margin-top: -10px;position: absolute;top: 28px;left: 20px;">
|
<span>
|
<icon
|
name="chart-line"
|
class="text-icon"
|
style="margin-left: 5px"
|
></icon>
|
</span>
|
<span class="fs-xl text mb-1 pl-3" style="font-size: 20px;font-weight: bold;"
|
>加压动态</span>
|
</div>
|
<div style="width:680px;height:70px; position: absolute;left: 135px;top: 10px;background-color: red;border-radius: 15px; display: flex;justify-content: space-around;">
|
<div style="width: 260px;text-align: center;">
|
<span style="font-size: 30px;font-weight: bold;color: #fff;line-height: 70px;">保压压力:</span>
|
<span style="font-size: 30px;font-weight: bold;color: #fff;line-height: 70px;">{{pressure_value!=""?pressure_value+"(吨)":"待保压"}}</span>
|
</div>
|
<div style="width: 280px;text-align: center;">
|
<span style="font-size: 30px;font-weight: bold;color: #fff;line-height: 70px;">保压时间:</span>
|
<span style="font-size: 30px;font-weight: bold;color: #fff;line-height: 70px;">{{pressuretime!=""?pressuretime:"待保压"}}</span>
|
</div>
|
<div style="width: 140px;text-align: center;">
|
<span style="font-size: 30px;font-weight: bold;color: #fff;line-height: 70px;">{{ pressureresult }}</span>
|
</div>
|
</div>
|
<div style="margin-top: -10px;position: absolute;top: 28px;right: 360px;">
|
<span>
|
<icon
|
name="chart-bar"
|
class="text-icon"
|
style="margin-left: 5px"
|
></icon>
|
</span>
|
<span class="fs-xl text mb-1 pl-3" style="font-size: 20px;font-weight: bold;"
|
>设备稼动</span>
|
</div>
|
<div style="position: absolute;height: 1px; width: 865px;left: 44px;top: 355px; background-color:#ffff00;">
|
|
</div>
|
<div style="position: absolute;height: 375px; width: 1px;left: 821px;top: 88px; background-color:#ffff00;">
|
|
</div>
|
<div class="bottomLeft">
|
<bottomLeft />
|
</div>
|
<div class="bottomCenter">
|
<bottomCenter />
|
</div>
|
</div>
|
</dv-border-box-12>
|
</template>
|
<script>
|
import axios from "@/api/ajax.js";
|
import bottomLeft from "../components/echart/bottom/bottomLeftChart";
|
import bottomCenter from "../components/echart/bottom/bottomCenterChart";
|
export default {
|
components: {
|
bottomLeft,
|
bottomCenter,
|
},
|
data() {
|
return {
|
areaD: ["D9", "D8", "D7", "D6", "D5", "D4", "D3", "D2", "D1"],
|
areaA: ["A9", "A8", "A7", "A6", "A5", "A4", "A3", "A2", "A1"],
|
areaBC: [
|
{ name1: "C6", name2: "B6" },
|
{ name1: "C5", name2: "B5" },
|
{ name1: "C4", name2: "B4" },
|
{ name1: "C3", name2: "B3" },
|
],
|
areaB: [
|
{ name1: "B2", img: require("../assets/red0.png") },
|
{ name1: "B1", img: require("../assets/red1.png") },
|
],
|
ScStyle: {
|
top: "600px",
|
left: "1180px",
|
},
|
pressure_value:"30.5",
|
pressuretime:"18时60分",
|
pressureresult:"加压合格",
|
IsPrevalue:true,
|
};
|
},
|
mounted() {
|
this.GetPressInfo();
|
},
|
methods: {
|
GetPressInfo() {
|
axios.post("/api/dt_WorkOrder/getPressInfo", null, "").then((res) => {
|
if (res.data.status) {
|
var data=res.data.data;
|
if(data==null)
|
return;
|
this.pressure_value=data.pressure_value;
|
this.pressuretime=data.pressuretime;
|
this.pressureresult=data.pressureresult;
|
}
|
if(this.IsPrevalue){
|
setInterval(() => {
|
this.GetPressInfo();
|
},2000);
|
this.IsPrevalue=false;
|
}
|
});
|
}
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
$box-height: 520px;
|
$box-width: 1420px;
|
#content {
|
position: absolute;
|
right: 20px;
|
width: $box-width;
|
height: $box-height;
|
margin: 10px auto;
|
}
|
.bottomLeft {
|
width: 920px;
|
height: 520px;
|
margin-top: 30px;
|
}
|
.bottomCenter {
|
width: 480px;
|
height: 520px;
|
margin-top: 30px;
|
margin-left: 10px;
|
}
|
.Box{
|
width:1870px;
|
margin: 0px auto;
|
display: flex;
|
}
|
</style>
|
