Commit 05e51c15 authored by lei's avatar lei

fix:排水系统接口联调

parent 704e7601
import request from "@/utils/request";
// 查询实时监测
export function getDraData(query) {
return request({
url: "/business/screen/dra/draData",
method: "get",
params: query,
});
}
// 修改水泵开关
export function updatePumpSwitch(data) {
return request({
url: "/business/screen/dra/changePumpStatus",
method: "post",
data: data,
});
}
...@@ -4,120 +4,92 @@ ...@@ -4,120 +4,92 @@
<div id="cesiumContainer"> <div id="cesiumContainer">
<div class="center-title-box"> <div class="center-title-box">
<div class="control-state"> <div class="control-state">
<p> <p v-if="intelligentControl == 0">
<span class="icon-img"></span> <span class="icon-img"></span>
<span>已开启智能控制</span> <span>已开启智能控制</span>
</p> </p>
<p v-else>
<span class="icon-img"></span>
<span>未开启智能控制</span>
</p>
</div> </div>
<div class="title-box top"> <div class="title-box top">
<p class="title">液体高度:10m</p> <p class="title">
<p class="name">蓄水池</p> 液体高度:{{ sumpData | sumpFilter(0, "heghtThreshold") }}m
</p>
<p class="name">{{ sumpData | sumpFilter(0, "sumpName") }}</p>
</div> </div>
<div class="title-box center"> <div class="title-box center">
<p class="title">液体高度:10m</p> <p class="title">
<p class="name">二中水仓</p> 液体高度:{{ sumpData | sumpFilter(1, "heghtThreshold") }}m
</p>
<p class="name">{{ sumpData | sumpFilter(1, "sumpName") }}</p>
</div> </div>
<div class="title-box bottom"> <div class="title-box bottom">
<p class="title">液体高度:10m</p> <p class="title">
<p class="name">五中水仓</p> 液体高度:{{ sumpData | sumpFilter(2, "heghtThreshold") }}m
</div> </p>
</div> <p class="name">{{ sumpData | sumpFilter(2, "sumpName") }}</p>
<div class="water-pump pst1">
<div class="H36">
<div class="button on" @click="openWaterPump">开启</div>
<div class="button off" @click="closeWaterPump">关闭</div>
</div>
<div class="H164">
<div class="phd-left"></div>
<div class="phd-right">
<div class="phd-top"></div>
<div class="water-pump-img-left"></div>
<p>5#水泵</p>
</div>
</div>
</div>
<div class="water-pump pst2">
<div class="H36">
<div class="button on">开启</div>
<div class="button off">关闭</div>
</div>
<div class="H164">
<div class="phd-left"></div>
<div class="phd-right">
<div class="phd-top"></div>
<div class="water-pump-img-left"></div>
<p>5#水泵</p>
</div>
</div>
</div>
<div class="water-pump pst3">
<div class="H36">
<div class="button on">开启</div>
<div class="button off">关闭</div>
</div>
<div class="H164">
<div class="phd-right">
<div class="phd-top"></div>
<div class="water-pump-img-right"></div>
<p>5#水泵</p>
</div>
<div class="phd-left"></div>
</div>
</div>
<div class="water-pump pst4">
<div class="H36">
<div class="button on">开启</div>
<div class="button off">关闭</div>
</div>
<div class="H164">
<div class="phd-left"></div>
<div class="phd-right">
<div class="phd-top"></div>
<div class="water-pump-img-left"></div>
<p>5#水泵</p>
</div>
</div> </div>
</div> </div>
<div class="water-pump pst5"> <div
class="water-pump"
v-for="(item, i) in pumpList"
:key="i"
:class="`pst${Number(item.pumpId) - 3}`"
>
<div class="H36"> <div class="H36">
<div class="button on">开启</div> <div
<div class="button off">关闭</div> class="button on"
</div> :class="item.status == 0 ? 'active' : ''"
<div class="H164"> @click="openWaterPump(item)"
<div class="phd-left"></div> >
<div class="phd-right"> 开启
<div class="phd-top"></div>
<div class="water-pump-img-left"></div>
<p>5#水泵</p>
</div> </div>
</div> <div
</div> class="button off"
<div class="water-pump pst6"> :class="item.status == 1 ? 'active' : ''"
<div class="H36"> @click="closeWaterPump(item)"
<div class="button on">开启</div> >
<div class="button off">关闭</div> 关闭
</div>
<div class="H164">
<div class="phd-right">
<div class="phd-top"></div>
<div class="water-pump-img-right"></div>
<p>5#水泵</p>
</div> </div>
<div class="phd-left"></div>
</div>
</div>
<div class="water-pump pst7">
<div class="H36">
<div class="button on">开启</div>
<div class="button off">关闭</div>
</div> </div>
<div class="H164"> <div class="H164">
<div
class="phd-left"
v-show="[5, 6, 1, 2].includes(Number(item.pumpId) - 3)"
></div>
<div class="phd-right"> <div class="phd-right">
<div class="phd-top"></div> <div class="phd-top"></div>
<div class="water-pump-img-right"></div> <div
<p>5#水泵</p> class=""
:class="
[5, 6, 1, 2].includes(Number(item.pumpId) - 3)
? 'water-pump-img-left'
: 'water-pump-img-right'
"
>
<div
class="tip-box"
:class="
[5, 6, 1, 2].includes(Number(item.pumpId) - 3)
? 'dw'
: 'dwr'
"
>
<p>点击电流:{{ item.motorCurrent }}A</p>
<p>电机轴承温度:{{ item.motorBearingTemp }}</p>
<p>水泵轴承温度:{{ item.pumpBearingTemp }}</p>
<p>水泵流量:{{ item.pumpFlow }}</p>
<p>排水管路压力:{{ item.drainagePressure }}</p>
</div>
</div>
<p>{{ item.pumpName }}</p>
</div> </div>
<div class="phd-left"></div> <div
class="phd-left"
v-show="[7, 3, 4].includes(Number(item.pumpId) - 3)"
></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -131,31 +103,101 @@ ...@@ -131,31 +103,101 @@
<el-input placeholder="" v-model="password" show-password></el-input> <el-input placeholder="" v-model="password" show-password></el-input>
</div> </div>
<div> <div>
<div class="button close">关闭</div> <div class="button close" @click="submitPumpPassword(1)">关闭</div>
<div class="button">开启</div> <div class="button" @click="submitPumpPassword(0)">开启</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { getDraData, updatePumpSwitch } from "@/api/tyler/psxt.js";
export default { export default {
name: "cesium", name: "psxt",
data() { data() {
return { return {
password: "", password: "",
upWindowShow: false, upWindowShow: false,
pumpId: "",
intelligentControl: 0,
pumpList: [
{
pumpId: 1,
pumpName: "5#水泵",
pumpStatus: 1,
},
],
sumpData: [
{
sumpId: 1,
sumpName: "5#水池",
heghtThreshold: 10,
},
{
sumpId: 2,
sumpName: "5#水池",
heghtThreshold: 10,
},
{
sumpId: 3,
sumpName: "5#水池",
heghtThreshold: 10,
},
],
pumpList: [],
}; };
}, },
created() {}, created() {
this.initPumpList();
},
methods: { methods: {
initPumpList() {
getDraData().then((res) => {
//水池数据
if (res.code == 200) {
this.sumpData = res.data[0].value;
this.pumpList = res.data[1].value;
this.intelligentControl = res.data[2].value;
} else {
this.$modal.msgError(res.message);
}
});
},
// 水泵开启按钮 // 水泵开启按钮
openWaterPump() { openWaterPump(item) {
this.upWindowShow = true; this.upWindowShow = true;
// this.submitPumpPassword(pumpId, this.password, 0);
this.pumpId = item.pumpId;
}, },
// 水泵关闭按钮 // 水泵关闭按钮
closeWaterPump() { closeWaterPump(item) {
this.upWindowShow = true; this.upWindowShow = true;
this.pumpId = item.pumpId;
this.password = "";
},
//提交水泵密码
submitPumpPassword(status) {
let pumpId = this.pumpId;
let password = this.password;
if (!password) {
return this.$modal.msgError("请输入密码");
}
updatePumpSwitch({ pumpId, password, status }).then((res) => {
if (res.code === 200) {
this.upWindowShow = false;
this.password = "";
this.$modal.msgSuccess("操作成功");
this.initPumpList();
} else {
this.$modal.msgError(res.message);
}
});
},
},
filters: {
// 水池显示数据过滤
sumpFilter(dateTmp, index, key) {
return dateTmp[index][key];
}, },
}, },
}; };
...@@ -288,6 +330,28 @@ export default { ...@@ -288,6 +330,28 @@ export default {
height: 70px; height: 70px;
background: url("~@/assets/images/screen/psxt/item.png") no-repeat background: url("~@/assets/images/screen/psxt/item.png") no-repeat
center; center;
position: relative;
.tip-box {
width: 182px;
height: 136px;
background: #0a1e36;
border: 2px solid #00deff;
padding: 7px 13px 15px 10px;
opacity: 0.8;
p {
font-size: 17px;
color: #11e0ff;
line-height: 22px;
margin-bottom: -2px;
text-align: left;
font-weight: 400;
}
&.dw {
position: absolute;
top: -26px;
left: 131px;
}
}
} }
.water-pump-img-right { .water-pump-img-right {
width: 122px; width: 122px;
...@@ -303,33 +367,54 @@ export default { ...@@ -303,33 +367,54 @@ export default {
text-align: center; text-align: center;
margin-top: 3px; margin-top: 3px;
} }
.tip-box {
width: 182px;
height: 136px;
background: #0a1e36;
border: 2px solid #00deff;
padding: 7px 13px 15px 10px;
opacity: 0.8;
p {
font-size: 17px;
color: #11e0ff;
line-height: 22px;
margin-bottom: -2px;
text-align: left;
font-weight: 400;
}
&.dwr {
position: absolute;
top: 48px;
left: -189px;
}
}
} }
} }
&.pst1 { &.pst5 {
top: 139px; top: 139px;
left: 143px; left: 143px;
} }
&.pst2 { &.pst6 {
top: 139px; top: 139px;
left: 582px; left: 582px;
} }
&.pst3 { &.pst7 {
top: 139px; top: 139px;
left: 1408px; left: 1408px;
} }
&.pst4 { &.pst1 {
top: 480px; top: 480px;
left: 0px; left: 0px;
} }
&.pst5 { &.pst2 {
top: 480px; top: 480px;
left: 440px; left: 440px;
} }
&.pst6 { &.pst3 {
top: 480px; top: 480px;
left: 1188px; left: 1188px;
} }
&.pst7 { &.pst4 {
top: 480px; top: 480px;
left: 1630px; left: 1630px;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment