admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev-yjl' into 'shenzhen-dev'

Browse Source 
中建四-安全管理大屏-重大危险源监测，数据布局

See merge request !128
This commit is contained in:
袁晶琳 2023-03-23 18:25:02 +08:00
commit 7125a9ad28
1 changed files with 196 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

297
src/views/projectAdmin/fourEngin/security/centerBottom.vue
View File

@ -7,64 +7,137 @@
v-for="(tab, index) in tabs"
:key="index"
@click="changeTab(index)"
>{{ tab }}</div>
>
{{ tab }}
</div>
</div>
<!-- 临边防护 -->
<div class="list" v-if="tabIndex==0">
<div class="list" v-if="tabIndex == 0">
<div class="thead">
<div class="row">
<div class="td">防翻越状态</div>
<div class="td">剩余电量</div>
<div class="td">临边防护设备sn</div>
<div class="td" style="margin-left:30px">磁锁1状态</div>
<div class="td" style="margin-left: 30px">磁锁1状态</div>
<div class="td">磁锁2状态</div>
<div class="td" style="margin-left:30px">线锁1状态</div>
<div class="td" style="margin-left: 30px">线锁1状态</div>
<div class="td">线锁2状态</div>
<div class="td" style="margin-left:30px">人员靠近状态</div>
<div class="td" style="margin-left:30px">采集时间</div>
<div class="td" style="margin-left: 30px">人员靠近状态</div>
<div class="td" style="margin-left: 30px">采集时间</div>
</div>
</div>
<div class="tbody">
<vue-scroll>
<div class="row" v-for="(item,index) in edgeList" :key="index" style="margin-left:-10px">
<div class="td">{{ item.antiCross==1?'正常':item.antiCross==2?'报警':item.antiCross==3?'报警':'无'}}</div>
<div
class="row"
v-for="(item, index) in edgeList"
:key="index"
style="margin-left: -10px"
>
<div class="td">
{{
item.antiCross == 1
? '正常'
: item.antiCross == 2
? '报警'
: item.antiCross == 3
? '报警'
: '无'
}}
</div>
<div class="td">{{ item.battery }}%</div>
<div class="td">{{ item.devSn }}</div>
<div class="td" style="width:100px;margin-left:30px">{{ item.magStatus1==1?'正常':item.magStatus1==2?'报警':item.magStatus1==3?'失效':'无'}}</div>
<div class="td" style="width:100px;margin-left:20px">{{ item.magStatus2==1?'正常':item.magStatus2==2?'报警':item.magStatus2==3?'失效':'无'}}</div>
<div class="td" style="width:100px;margin-left:15px">{{ item.portStatus1==1?'正常':item.portStatus1==2?'断开':item.portStatus1==3?'正常断开':'无'}}</div>
<div class="td" style="width:100px;margin-left:15px">{{ item.portStatus2==1?'正常':item.portStatus2==2?'断开':item.portStatus2==3?'正常断开':'无'}}</div>
<div class="td" style="width:100px;margin-left:15px">{{ item.proximity==1?'正常':item.proximity==2?'入侵':item.proximity==3?'正常入侵':'无'}}</div>
<div class="td" style="width:120px;margin-left:30px">{{ item.receiveTime }}</div>
<div class="td" style="width: 100px; margin-left: 30px">
{{
item.magStatus1 == 1
? '正常'
: item.magStatus1 == 2
? '报警'
: item.magStatus1 == 3
? '失效'
: '无'
}}
</div>
<div class="td" style="width: 100px; margin-left: 20px">
{{
item.magStatus2 == 1
? '正常'
: item.magStatus2 == 2
? '报警'
: item.magStatus2 == 3
? '失效'
: '无'
}}
</div>
<div class="td" style="width: 100px; margin-left: 15px">
{{
item.portStatus1 == 1
? '正常'
: item.portStatus1 == 2
? '断开'
: item.portStatus1 == 3
? '正常断开'
: '无'
}}
</div>
<div class="td" style="width: 100px; margin-left: 15px">
{{
item.portStatus2 == 1
? '正常'
: item.portStatus2 == 2
? '断开'
: item.portStatus2 == 3
? '正常断开'
: '无'
}}
</div>
<div class="td" style="width: 100px; margin-left: 15px">
{{
item.proximity == 1
? '正常'
: item.proximity == 2
? '入侵'
: item.proximity == 3
? '正常入侵'
: '无'
}}
</div>
<div class="td" style="width: 120px; margin-left: 30px">
{{ item.receiveTime }}
</div>
</div>
</vue-scroll>
<div class="tbody" v-if="edgeList==0">
<div class="dataImg">
<img src="@/assets/images/noData3.png" alt srcset />
<p>{{$t('message.dataBoard.nodata')}}</p>
<div class="tbody" v-if="edgeList == 0">
<div class="dataImg">
<img src="@/assets/images/noData3.png" alt srcset />
<p>{{ $t('message.dataBoard.nodata') }}</p>
</div>
</div>
</div>
</div>
</div>
<!-- 塔机监测 -->
<div class="list" v-if="tabIndex==1">
<!-- <div class="thead">
<!-- 塔机监测 -->
<div class="list" v-if="tabIndex == 1">
<div class="thead">
<div class="row">
<div class="td">名称</div>
<div class="td">测点名称</div>
<div class="td">传感器类型</div>
<div class="td">测点值</div>
<div class="td">变化速率</div>
<div class="td">监测时间</div>
<div class="td">报警状态</div>
<div class="td">回转状态</div>
<div class="td">起升状态</div>
<div class="td">变幅状态</div>
<div class="td">风速报警</div>
<div class="td">倾角Y报警</div>
<div class="td">倾角报警</div>
<div class="td">幅度</div>
<div class="td">风速</div>
<div class="td">倾角</div>
<div class="td">高度</div>
<div class="td">载重</div>
<div class="td">数据接收时间</div>
</div>
</div> -->
<!-- <div class="tbody">
</div>
<div class="tbody">
<vue-scroll>
<div class="row" v-for="i in 4" :key="i">
<div class="row" v-for="i in 10" :key="i">
<div class="td">中建四项目深基坑</div>
<div class="td">沉降监测3号</div>
<div class="td">深层水平位移</div>
@ -72,60 +145,83 @@
<div class="td">-1.04</div>
<div class="td">2022-09-01</div>
<div class="td">正常</div>
<div class="td">正常</div>
<div class="td">正常</div>
<div class="td">正常</div>
<div class="td">正常</div>
<div class="td">正常</div>
</div>
</vue-scroll>
</div> -->
<div class="tbody">
</div>
<!-- <div class="tbody">
<div class="dataImg">
<img src="@/assets/images/noData3.png" alt srcset />
<p>{{$t('message.dataBoard.nodata')}}</p>
<p>{{ $t('message.dataBoard.nodata') }}</p>
</div>
</div>
</div> -->
</div>
<!-- 高支模监测 -->
<div class="list" v-if="tabIndex==2">
<!-- <div class="thead">
<div class="list" v-if="tabIndex == 2">
<div class="thead">
<div class="row">
<div class="td">设备名称</div>
<div class="td">监测位置</div>
<div class="td">监测时间</div>
<div class="td">模版沉降</div>
<div class="td">支杆应力</div>
<div class="td">杆件倾斜</div>
<div class="td">压力监测</div>
<div class="td">水位移位</div>
</div>
</div> -->
<div class="tbody">
<div class="dataImg">
<img src="@/assets/images/noData3.png" alt srcset />
<p>{{$t('message.dataBoard.nodata')}}</p>
<div class="td">测量点位名称</div>
<div class="td">测量点编号</div>
<div class="td">倾斜</div>
<div class="td">压力</div>
<div class="td">沉降</div>
<div class="td">上传时间</div>
</div>
</div>
<div class="tbody">
<vue-scroll>
<div class="row" v-for="i in 10" :key="i">
<div class="td">中建四项目深基坑</div>
<div class="td">沉降监测3号</div>
<div class="td">深层水平位移</div>
<div class="td">-0.77</div>
<div class="td">-1.04</div>
<div class="td">2022-09-01</div>
</div>
</vue-scroll>
</div>
<!-- <div class="tbody">
<div class="dataImg">
<img src="@/assets/images/noData3.png" alt srcset />
<p>{{ $t('message.dataBoard.nodata') }}</p>
</div>
</div> -->
</div>
<!-- 深基坑 -->
<div class="list" v-if="tabIndex==3">
<!-- <div class="thead">
<div class="list" v-if="tabIndex == 3">
<div class="thead">
<div class="row">
<div class="td">设备名称</div>
<div class="td">监测位置</div>
<div class="td">监测时间</div>
<div class="td">模版沉降</div>
<div class="td">支杆应力</div>
<div class="td">杆件倾斜</div>
<div class="td">压力监测</div>
<div class="td">水位移位</div>
</div> -->
<div class="tbody">
<div class="dataImg">
<img src="@/assets/images/noData3.png" alt srcset />
<p>{{$t('message.dataBoard.nodata')}}</p>
<div class="td">地下水位</div>
<div class="td">周边建筑倾斜</div>
<div class="td">钢支撑内力</div>
<div class="td">支护桩内力</div>
</div>
</div>
<div class="tbody">
<vue-scroll>
<div class="row" v-for="i in 10" :key="i">
<div class="td">中建四项目深基坑</div>
<div class="td">沉降监测3号</div>
<div class="td">深层水平位移</div>
<div class="td">-0.77</div>
</div>
</vue-scroll>
</div>
<!-- <div class="tbody">
<div class="dataImg">
<img src="@/assets/images/noData3.png" alt srcset />
<p>{{ $t('message.dataBoard.nodata') }}</p>
</div>
</div> -->
</div>
<!-- <div class="tbody">
<div class="dataImg">
<img src="@/assets/images/noData3.png" alt srcset />
<p>{{$t('message.dataBoard.nodata')}}</p>
@ -134,7 +230,7 @@
</div> -->
<!-- 云端建设工厂 -->
<div class="list" v-if="tabIndex==4">
<div class="list" v-if="tabIndex == 4">
<!-- <div class="thead">
<div class="row">
<div class="td">设备名称</div>
@ -150,50 +246,47 @@
<div class="tbody">
<div class="dataImg">
<img src="@/assets/images/noData3.png" alt srcset />
<p>{{$t('message.dataBoard.nodata')}}</p>
<p>{{ $t('message.dataBoard.nodata') }}</p>
</div>
</div>
</div>
</Card>
</template>
<script>
import { getFpdcdSelectPageApi } from "@/assets/js/api/zhongjianFourth";
import Card from "../components/Card.vue";
import { getFpdcdSelectPageApi } from '@/assets/js/api/zhongjianFourth'
import Card from '../components/Card.vue'
export default {
components: { Card },
data() {
return {
tabIndex: 0,
tabs: ["临边防护", "塔机监测", "高支模监测","深基坑","云端建设工厂"],
current:0,//页数
size:0,//条数
edgeList:[]
};
tabs: ['临边防护', '塔机监测', '高支模监测', '深基坑', '云端建设工厂'],
current: 0, //页数
size: 0, //条数
edgeList: []
}
},
created(){
created() {
this.getEdgeDate()
},
methods: {
//点击切换
changeTab(index) {
this.tabIndex = index;
this.tabIndex = index
},
//临边防护--数据获取
getEdgeDate(){
getEdgeDate() {
getFpdcdSelectPageApi({
current:1,
size:20,
}).then(res=>{
this.edgeList=res.result.records
console.log('临边防护-res',this.edgeList);
current: 1,
size: 20
}).then((res) => {
this.edgeList = res.result.records
console.log('临边防护-res', this.edgeList)
})
}
}
};
}
</script>
<style lang="less" scoped>
@ -228,7 +321,8 @@ export default {
color: #ccc;
}
.thead .row, .tbody .row{
.thead .row,
.tbody .row {
display: flex;
text-align: center;
justify-content: left;
@ -239,7 +333,6 @@ export default {
&:nth-child(1) {
width: 100px;
margin-right: 40px;
}
&:nth-child(2) {
width: 100px;
@ -248,41 +341,43 @@ export default {
&:nth-child(3) {
width: 100px;
margin-right: 40px;
}
&:nth-child(4) {
width: 100px;
margin-right: 40px;
}
&:nth-child(5) {
width: 100px;
margin-right: 40px;
}
&:nth-child(6) {
width: 100px;
margin-right: 40px;
}
&:nth-child(7) {
width: 100px;
margin-right: 40px;
}
&:nth-child(8) {
width: 100px;
margin-right: 40px;
}
&:nth-child(9) {
width: 100px;
margin-right: 40px;
}
&:nth-child(10) {
width: 100px;
margin-right: 40px;
}
&:nth-child(11) {
width: 100px;
margin-right: 40px;
}
&:nth-child(12) {
width: 120px;
margin-right: 30px;
}
}
}
.dataImg {