|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<view style="overflow: auto; height: 100%">
|
|
|
<!-- 建议放在外层 -->
|
|
|
- <u-navbar :title="name" @leftClick="backPage" :bgImage="backPic" style="margin-top: 30px">
|
|
|
+ <u-navbar :title="name" @leftClick="backPage" :bgImage="backPic">
|
|
|
<view class="u-nav-slot" slot="left">
|
|
|
<u-icon name="arrow-left" size="20"> </u-icon>
|
|
|
</view>
|
|
@@ -77,7 +77,8 @@
|
|
|
<div class="flcard" v-if="this.TabCur == 'gate'">
|
|
|
<doorAnimate
|
|
|
:gatestate1="frontGateStatus"
|
|
|
- :gatestate2="rearGateStatus"
|
|
|
+ :gatestate2="midGateStatus"
|
|
|
+ :gatestate3="rearGateStatus"
|
|
|
:videoURL="viedeoUrl"
|
|
|
:height="height"
|
|
|
:doorcount="ndoorcount"
|
|
@@ -140,17 +141,30 @@
|
|
|
</div>
|
|
|
<div class="datacard" v-if="item.monitorcode !== 'readTime'">
|
|
|
<div class="left-content">
|
|
|
- <view v-if="item.monitorcode == 'ndoortype'"
|
|
|
+ <view
|
|
|
+ v-if="item.monitorcode == 'ndoortype'"
|
|
|
class="demo-layout bg-purple-light"
|
|
|
style="margin-top: 10rpx; color: #3787fe"
|
|
|
>
|
|
|
- {{ tableData[item.monitorcode] == '1'?'行人':tableData[item.monitorcode] == '2'?'行车':'-' }}
|
|
|
+ {{
|
|
|
+ tableData[item.monitorcode] == "1"
|
|
|
+ ? "行人"
|
|
|
+ : tableData[item.monitorcode] == "2"
|
|
|
+ ? "行车"
|
|
|
+ : "-"
|
|
|
+ }}
|
|
|
</view>
|
|
|
- <view v-else
|
|
|
+ <view
|
|
|
+ v-else
|
|
|
class="demo-layout bg-purple-light"
|
|
|
style="margin-top: 10rpx; color: #3787fe"
|
|
|
>
|
|
|
- {{ tableData[item.monitorcode] == null || tableData[item.monitorcode] == ''?'-':tableData[item.monitorcode]}}
|
|
|
+ {{
|
|
|
+ tableData[item.monitorcode] == null ||
|
|
|
+ tableData[item.monitorcode] == ""
|
|
|
+ ? "-"
|
|
|
+ : tableData[item.monitorcode]
|
|
|
+ }}
|
|
|
</view>
|
|
|
<div class="spacer"></div>
|
|
|
<!-- 间距 -->
|
|
@@ -167,28 +181,28 @@
|
|
|
backgroundImage:
|
|
|
item.monitorcode === 'frontRearDP' ||
|
|
|
item.monitorcode === 'frontRearDifference'
|
|
|
- ? 'url(\'/static/model/Pa.png\')'
|
|
|
+ ? 'url(\'../../../../static/model/Pa.png\')'
|
|
|
: item.monitorcode === 'sourcePressure'
|
|
|
- ? 'url(\'/static/model/MPa.png\')'
|
|
|
+ ? 'url(\'../../../../static/model/MPa.png\')'
|
|
|
: item.monitorcode === 'frontGateOpen'
|
|
|
- ? 'url(\'/static/model/doorNet.png\')'
|
|
|
+ ? 'url(\'../../../../static/model/doorNet.png\')'
|
|
|
: item.monitorcode === 'rearGateOpen'
|
|
|
- ? 'url(\'/static/model/doorNet.png\')'
|
|
|
+ ? 'url(\'../../../../static/model/doorNet.png\')'
|
|
|
: item.monitorcode === 'midGateOpen'
|
|
|
- ? 'url(\'/static/model/doorNet.png\')'
|
|
|
+ ? 'url(\'../../../../static/model/doorNet.png\')'
|
|
|
: item.monitorcode === 'warnFlag'
|
|
|
- ? 'url(\'/static/model/9432.png\')'
|
|
|
+ ? 'url(\'../../../../static/model/9432.png\')'
|
|
|
: item.monitorcode === 'netStatus'
|
|
|
- ? 'url(\'/static/model/9431.png\')'
|
|
|
+ ? 'url(\'../../../../static/model/9431.png\')'
|
|
|
: item.monitorcode === 'm3'
|
|
|
- ? 'url(\'/static/model/windM3.png\')'
|
|
|
+ ? 'url(\'../../../../static/model/windM3.png\')'
|
|
|
: item.monitorcode === 'fsectarea'
|
|
|
- ? 'url(\'/static/model/duanArea.png\')'
|
|
|
+ ? 'url(\'../../../../static/model/duanArea.png\')'
|
|
|
: item.monitorcode === 'incipientWindSpeed1' ||
|
|
|
item.monitorcode === 'incipientWindSpeed2' ||
|
|
|
item.monitorcode === 'incipientWindSpeed3' ||
|
|
|
item.monitorcode === 'va'
|
|
|
- ? 'url(\'/static/model/fengsu.png\')'
|
|
|
+ ? 'url(\'../../../../static/model/fengsu.png\')'
|
|
|
: 'url(\'\')',
|
|
|
backgroundSize: '100% 100%',
|
|
|
}"
|
|
@@ -241,7 +255,6 @@ import fanlocalAnimate from "../fanlocalAnimate/fanlocalAnimate2.vue";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- timer: undefined,
|
|
|
tableData: [], //监测数据
|
|
|
typeList: [], //展示字段
|
|
|
itemId: "", // 初始化 itemId
|
|
@@ -270,46 +283,38 @@ export default {
|
|
|
windowAngle1: 0, //后窗打开角度
|
|
|
windowArea: "", //风窗面积设定值
|
|
|
viedeoUrl: "", //监控url
|
|
|
- sign:"",
|
|
|
- title:"测风设备",
|
|
|
- fan1State:'',
|
|
|
- fan2State:''
|
|
|
+ sign: "",
|
|
|
+ title: "测风设备",
|
|
|
+ fan1State: "",
|
|
|
+ fan2State: "",
|
|
|
};
|
|
|
},
|
|
|
- onLoad(options) {
|
|
|
- // 通过 options 对象获取传递过来的参数
|
|
|
- const id = options.id;
|
|
|
- const name = options.name;
|
|
|
- const type = options.type;
|
|
|
- this.itemId = id;
|
|
|
- this.name = name;
|
|
|
- this.TabCur = type;
|
|
|
+ onLoad(query) {
|
|
|
+ //保存id到 data 中 可以在整个页面中使用
|
|
|
+ this.itemId = query.id;
|
|
|
+ this.name = query.name;
|
|
|
+ this.TabCur = query.type;
|
|
|
this.ndoorcount = 2;
|
|
|
},
|
|
|
- components: { doorAnimate, windowAnimate,windrectAnimate,fanlocalAnimate },
|
|
|
- async created() {
|
|
|
- await this.getShowList(this.TabCur);
|
|
|
- await this.getDeviceInfo(this.itemId);
|
|
|
- await this.getVideoUrlById(this.itemId);
|
|
|
+ components: { doorAnimate, windowAnimate, windrectAnimate, fanlocalAnimate },
|
|
|
+ created() {
|
|
|
+ this.getShowList(this.TabCur);
|
|
|
+ this.getDeviceInfo(this.itemId);
|
|
|
+ this.getVideoUrlById(this.itemId);
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.startTimer(false);
|
|
|
+ this.startTimer();
|
|
|
},
|
|
|
methods: {
|
|
|
- startTimer(flag = true) {
|
|
|
- this.timer = setTimeout(async() => {
|
|
|
+ startTimer() {
|
|
|
+ this.timer = setInterval(() => {
|
|
|
// 执行定时任务
|
|
|
- await this.getShowList(this.TabCur);
|
|
|
- await this.getDeviceInfo(this.itemId);
|
|
|
- if(this.timer){
|
|
|
- this.startTimer()
|
|
|
- }
|
|
|
- }, !flag ? 0 : 2000);
|
|
|
+ this.getDeviceInfo(this.itemId);
|
|
|
+ }, 5000);
|
|
|
},
|
|
|
stopTimer() {
|
|
|
// 停止定时器
|
|
|
- clearTimeout(this.timer);
|
|
|
- this.timer = undefined
|
|
|
+ clearInterval(this.timer);
|
|
|
},
|
|
|
// 返回上一个页面
|
|
|
backPage() {
|
|
@@ -326,12 +331,13 @@ export default {
|
|
|
pageNo: 1,
|
|
|
pageSize: 100,
|
|
|
};
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
+ new Promise((resolve, reject) => {
|
|
|
api
|
|
|
.getShowColumList(params)
|
|
|
.then((response) => {
|
|
|
if (response.data.code == 200) {
|
|
|
this.typeList = response.data.result.records;
|
|
|
+ console.log(this.typeList, "ssssssssssssssssc sa a ");
|
|
|
} else {
|
|
|
resolve(response);
|
|
|
}
|
|
@@ -344,15 +350,16 @@ export default {
|
|
|
//获取详情数据
|
|
|
getDeviceInfo(ID) {
|
|
|
let IDString = String(ID); // 将 ID 转换为字符串
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
+ new Promise((resolve, reject) => {
|
|
|
api
|
|
|
.getDeviceMonitor({ devicetype: this.TabCur, ids: IDString })
|
|
|
.then((response) => {
|
|
|
- if (response.data.code == 200 && response.data.result.msgTxt[0].datalist.length>0) {
|
|
|
- var result = response.data.result.msgTxt[0].datalist[0];
|
|
|
- this.tableData =
|
|
|
- result.readData;
|
|
|
- console.log('监测数据------------>', result)
|
|
|
+ if (
|
|
|
+ response.data.code == 200 &&
|
|
|
+ response.data.result.msgTxt[0].datalist.length > 0
|
|
|
+ ) {
|
|
|
+ var result = response.data.result.msgTxt[0].datalist[0];
|
|
|
+ this.tableData = result.readData;
|
|
|
if (this.tableData.frontGateOpen == "1") {
|
|
|
this.tableData.frontGateOpen = "打开";
|
|
|
} else {
|
|
@@ -368,25 +375,21 @@ export default {
|
|
|
} else {
|
|
|
this.tableData.rearGateOpen = "关闭";
|
|
|
}
|
|
|
- this.fan1State = result.readData.Fan1StartStatus
|
|
|
- this.fan2State = result.readData.Fan2StartStatus
|
|
|
- this.nwindownum =
|
|
|
- result.nwindownum;
|
|
|
- this.ndoorcount =
|
|
|
- result.ndoorcount;
|
|
|
- this.deviceType =
|
|
|
- result.deviceType;
|
|
|
- this.state =
|
|
|
- result.readData.sign;
|
|
|
+ this.fan1State = result.readData.Fan1StartStatus;
|
|
|
+ this.fan2State = result.readData.Fan2StartStatus;
|
|
|
+ this.nwindownum = result.nwindownum;
|
|
|
+ this.ndoorcount = result.ndoorcount;
|
|
|
+ this.deviceType = result.deviceType;
|
|
|
+ this.state = result.readData.sign;
|
|
|
this.frontGateStatus = this.tableData.frontGateOpen;
|
|
|
+ this.midGateStatus = this.tableData.midGateOpen;
|
|
|
this.rearGateStatus = this.tableData.rearGateOpen;
|
|
|
var maxarea = result.maxarea;
|
|
|
this.windowAngle =
|
|
|
(this.tableData.forntArea / maxarea) * 100 * 0.9;
|
|
|
this.windowAngle1 =
|
|
|
(this.tableData.rearArea / maxarea) * 100 * 0.9;
|
|
|
- this.$forceUpdate()
|
|
|
- resolve(null)
|
|
|
+ this.$forceUpdate();
|
|
|
} else {
|
|
|
resolve(response);
|
|
|
}
|
|
@@ -399,14 +402,14 @@ export default {
|
|
|
//获取监控URL 通过ID获取
|
|
|
getVideoUrlById(ID) {
|
|
|
let IDString = String(ID); // 将 ID 转换为字符串
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
+ new Promise((resolve, reject) => {
|
|
|
api
|
|
|
.getCameraById({ deviceid: IDString })
|
|
|
.then((response) => {
|
|
|
if (response.data.code == 200) {
|
|
|
- if(response.data.result.records.length>0){
|
|
|
- this.viedeoUrl = response.data.result.records[0].addr;
|
|
|
- }
|
|
|
+ if (response.data.result.records.length > 0) {
|
|
|
+ this.viedeoUrl = response.data.result.records[0].addr;
|
|
|
+ }
|
|
|
} else {
|
|
|
resolve(response);
|
|
|
}
|
|
@@ -455,7 +458,7 @@ export default {
|
|
|
this.ctrlDevice(this.password);
|
|
|
// 发起请求后关闭密码输入弹窗
|
|
|
this.show = false;
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
destroyed() {
|
|
|
// 停止定时器
|
|
@@ -464,16 +467,13 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss">
|
|
|
->>> .u-navbar--fixed {
|
|
|
- margin-top: 20px;
|
|
|
-}
|
|
|
+<style>
|
|
|
passwordPopup {
|
|
|
height: 300rpx;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
.top-nav {
|
|
|
- background-image: url(/static/topnavbar.png);
|
|
|
+ background-image: url(../../../../static/topnavbar.png);
|
|
|
background-size: cover; /* 背景图片大小适应 */
|
|
|
height: 100%;
|
|
|
}
|
|
@@ -515,14 +515,13 @@ passwordPopup {
|
|
|
border: 1rpx solid #000000;
|
|
|
border-radius: 20rpx;
|
|
|
}
|
|
|
-.flex-container {
|
|
|
+.flex-containe {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
.itemback {
|
|
|
- width: calc(48% - 5px);
|
|
|
- // flex: 0 0 calc(33.33% - 10px); /* 使用calc函数计算每个项目的宽度,减去间距 */
|
|
|
+ flex: 0 0 calc(33.33% - 10px); /* 使用calc函数计算每个项目的宽度,减去间距 */
|
|
|
margin: 5px; /* 间距设置为5px */
|
|
|
}
|
|
|
.datacardtime {
|
|
@@ -542,10 +541,10 @@ passwordPopup {
|
|
|
}
|
|
|
.datacard {
|
|
|
display: flex;
|
|
|
- /* width: 48%; */
|
|
|
+ width: 48%;
|
|
|
flex: 1;
|
|
|
margin: 1%;
|
|
|
- /* float: left; */
|
|
|
+ float: left;
|
|
|
height: 100rpx;
|
|
|
text-align: center;
|
|
|
background: linear-gradient(
|
|
@@ -565,9 +564,105 @@ passwordPopup {
|
|
|
}
|
|
|
.right-content {
|
|
|
width: 50%; /* 右侧内容占据50%宽度 */
|
|
|
- background-image: url(/static/model/Pa.png);
|
|
|
+ background-image: url(../../../../static/model/Pa.png);
|
|
|
background-size: 100% 125%;
|
|
|
}
|
|
|
+
|
|
|
+/*风窗样式*/
|
|
|
+div.autowindow_new {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background-image: url(../../../../static/window/window-bk.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ perspective: 800px;
|
|
|
+}
|
|
|
+/*风窗1 2 3 4*/
|
|
|
+
|
|
|
+div.window_new_1 {
|
|
|
+ margin-top: 12px;
|
|
|
+ margin-left: 15px;
|
|
|
+ width: 170px;
|
|
|
+ height: 30px;
|
|
|
+ background-color: crimson;
|
|
|
+ box-sizing: border-box;
|
|
|
+ float: left;
|
|
|
+ z-index: 1;
|
|
|
+ /* transition: all 2s; */
|
|
|
+ background-image: url(../../../../static/window/window_new1.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+div.window_new_2 {
|
|
|
+ margin-top: 2px;
|
|
|
+ margin-left: 15px;
|
|
|
+ width: 170px;
|
|
|
+ height: 29px;
|
|
|
+ background-color: crimson;
|
|
|
+ box-sizing: border-box;
|
|
|
+ float: left;
|
|
|
+ z-index: 1;
|
|
|
+ /* transition: all 2s; */
|
|
|
+ background-image: url(../../../../static/window/window_new1.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+div.window_new_3 {
|
|
|
+ margin-top: 2px;
|
|
|
+ margin-left: 15px;
|
|
|
+ width: 170px;
|
|
|
+ height: 29px;
|
|
|
+ background-color: crimson;
|
|
|
+ box-sizing: border-box;
|
|
|
+ float: left;
|
|
|
+ z-index: 1;
|
|
|
+ /* transition: all 2s; */
|
|
|
+ background-image: url(../../../../static/window/window_new1.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+div.window_new_4 {
|
|
|
+ margin-top: 2px;
|
|
|
+ margin-left: 15px;
|
|
|
+ width: 170px;
|
|
|
+ height: 29px;
|
|
|
+ background-color: crimson;
|
|
|
+ box-sizing: border-box;
|
|
|
+ float: left;
|
|
|
+ z-index: 1;
|
|
|
+ /* transition: all 2s; */
|
|
|
+ background-image: url(../../../../static/window/window_new1.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+div.window_new_5 {
|
|
|
+ margin-top: 2px;
|
|
|
+ margin-left: 15px;
|
|
|
+ width: 170px;
|
|
|
+ height: 29px;
|
|
|
+ background-color: crimson;
|
|
|
+ box-sizing: border-box;
|
|
|
+ float: left;
|
|
|
+ z-index: 1;
|
|
|
+ /* transition: all 2s; */
|
|
|
+ background-image: url(../../../../static/window/window_new1.png);
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+div.window_new_1 {
|
|
|
+ transition: all 2s ease;
|
|
|
+ transform-origin: center center;
|
|
|
+}
|
|
|
+div.window_new_2 {
|
|
|
+ transition: all 2s ease;
|
|
|
+ transform-origin: center center;
|
|
|
+}
|
|
|
+div.window_new_3 {
|
|
|
+ transition: all 2s ease;
|
|
|
+ transform-origin: center center;
|
|
|
+}
|
|
|
+div.window_new_4 {
|
|
|
+ transition: all 2s ease;
|
|
|
+ transform-origin: center center;
|
|
|
+}
|
|
|
+div.window_new_5 {
|
|
|
+ transition: all 2s ease;
|
|
|
+ transform-origin: center center;
|
|
|
+}
|
|
|
.btns {
|
|
|
display: flex;
|
|
|
margin-top: 15px;
|