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

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

@ -7,64 +7,137 @@
v-for="(tab, index) in tabs" v-for="(tab, index) in tabs"
:key="index" :key="index"
@click="changeTab(index)" @click="changeTab(index)"
>{{ tab }}</div> >
{{ tab }}
</div>
</div> </div>
<!-- 临边防护 --> <!-- 临边防护 -->
<div class="list" v-if="tabIndex==0"> <div class="list" v-if="tabIndex == 0">
<div class="thead"> <div class="thead">
<div class="row"> <div class="row">
<div class="td">防翻越状态</div> <div class="td">防翻越状态</div>
<div class="td">剩余电量</div> <div class="td">剩余电量</div>
<div class="td">临边防护设备sn</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">磁锁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">线锁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> </div>
<div class="tbody"> <div class="tbody">
<vue-scroll> <vue-scroll>
<div class="row" v-for="(item,index) in edgeList" :key="index" style="margin-left:-10px"> <div
<div class="td">{{ item.antiCross==1?'正常':item.antiCross==2?'报警':item.antiCross==3?'报警':'无'}}</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.battery }}%</div>
<div class="td">{{ item.devSn }}</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: 30px">
<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> item.magStatus1 == 1
<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> : item.magStatus1 == 2
<div class="td" style="width:120px;margin-left:30px">{{ item.receiveTime }}</div> ? '报警'
: 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> </div>
</vue-scroll> </vue-scroll>
<div class="tbody" v-if="edgeList==0"> <div class="tbody" v-if="edgeList == 0">
<div class="dataImg"> <div class="dataImg">
<img src="@/assets/images/noData3.png" alt srcset /> <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> </div>
</div> </div>
<!-- 塔机监测 --> <!-- 塔机监测 -->
<div class="list" v-if="tabIndex==1"> <div class="list" v-if="tabIndex == 1">
<!-- <div class="thead"> <div class="thead">
<div class="row"> <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">倾角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 class="td">载重</div>
<div class="td">数据接收时间</div>
</div> </div>
</div> --> </div>
<!-- <div class="tbody"> <div class="tbody">
<vue-scroll> <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">中建四项目深基坑</div>
<div class="td">沉降监测3号</div> <div class="td">沉降监测3号</div>
<div class="td">深层水平位移</div> <div class="td">深层水平位移</div>
@ -72,59 +145,82 @@
<div class="td">-1.04</div> <div class="td">-1.04</div>
<div class="td">2022-09-01</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 class="td">正常</div>
</div> </div>
</vue-scroll> </vue-scroll>
</div> --> </div>
<div class="tbody"> <!-- <div class="tbody">
<div class="dataImg"> <div class="dataImg">
<img src="@/assets/images/noData3.png" alt srcset /> <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> </div>
<!-- 高支模监测 --> <!-- 高支模监测 -->
<div class="list" v-if="tabIndex==2"> <div class="list" v-if="tabIndex == 2">
<!-- <div class="thead"> <div class="thead">
<div class="row"> <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">上传时间</div>
<div class="td">压力监测</div> </div>
<div class="td">水位移位</div>
</div> </div>
</div> -->
<div class="tbody"> <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"> <div class="dataImg">
<img src="@/assets/images/noData3.png" alt srcset /> <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> </div>
<!-- 深基坑 --> <!-- 深基坑 -->
<div class="list" v-if="tabIndex==3"> <div class="list" v-if="tabIndex == 3">
<!-- <div class="thead"> <div class="thead">
<div class="row"> <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>
<div class="td">杆件倾斜</div> </div>
<div class="td">压力监测</div>
<div class="td">水位移位</div>
</div> -->
<div class="tbody"> <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"> <div class="dataImg">
<img src="@/assets/images/noData3.png" alt srcset /> <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> </div>
<!-- <div class="tbody"> <!-- <div class="tbody">
<div class="dataImg"> <div class="dataImg">
<img src="@/assets/images/noData3.png" alt srcset /> <img src="@/assets/images/noData3.png" alt srcset />
@ -134,7 +230,7 @@
</div> --> </div> -->
<!-- 云端建设工厂 --> <!-- 云端建设工厂 -->
<div class="list" v-if="tabIndex==4"> <div class="list" v-if="tabIndex == 4">
<!-- <div class="thead"> <!-- <div class="thead">
<div class="row"> <div class="row">
<div class="td">设备名称</div> <div class="td">设备名称</div>
@ -150,50 +246,47 @@
<div class="tbody"> <div class="tbody">
<div class="dataImg"> <div class="dataImg">
<img src="@/assets/images/noData3.png" alt srcset /> <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> </div>
</Card> </Card>
</template> </template>
<script> <script>
import { getFpdcdSelectPageApi } from "@/assets/js/api/zhongjianFourth"; import { getFpdcdSelectPageApi } from '@/assets/js/api/zhongjianFourth'
import Card from "../components/Card.vue"; import Card from '../components/Card.vue'
export default { export default {
components: { Card }, components: { Card },
data() { data() {
return { return {
tabIndex: 0, tabIndex: 0,
tabs: ["临边防护", "塔机监测", "高支模监测","深基坑","云端建设工厂"], tabs: ['临边防护', '塔机监测', '高支模监测', '深基坑', '云端建设工厂'],
current:0,//页数 current: 0, //页数
size:0,//条数 size: 0, //条数
edgeList:[] edgeList: []
}; }
}, },
created(){ created() {
this.getEdgeDate() this.getEdgeDate()
}, },
methods: { methods: {
//点击切换 //点击切换
changeTab(index) { changeTab(index) {
this.tabIndex = index; this.tabIndex = index
}, },
//临边防护--数据获取 //临边防护--数据获取
getEdgeDate(){ getEdgeDate() {
getFpdcdSelectPageApi({ getFpdcdSelectPageApi({
current:1, current: 1,
size:20, size: 20
}).then(res=>{ }).then((res) => {
this.edgeList=res.result.records this.edgeList = res.result.records
console.log('临边防护-res',this.edgeList); console.log('临边防护-res', this.edgeList)
}) })
} }
} }
}; }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@ -228,7 +321,8 @@ export default {
color: #ccc; color: #ccc;
} }
.thead .row, .tbody .row{ .thead .row,
.tbody .row {
display: flex; display: flex;
text-align: center; text-align: center;
justify-content: left; justify-content: left;
@ -239,7 +333,6 @@ export default {
&:nth-child(1) { &:nth-child(1) {
width: 100px; width: 100px;
margin-right: 40px; margin-right: 40px;
} }
&:nth-child(2) { &:nth-child(2) {
width: 100px; width: 100px;
@ -248,41 +341,43 @@ export default {
&:nth-child(3) { &:nth-child(3) {
width: 100px; width: 100px;
margin-right: 40px; margin-right: 40px;
} }
&:nth-child(4) { &:nth-child(4) {
width: 100px; width: 100px;
margin-right: 40px; margin-right: 40px;
} }
&:nth-child(5) { &:nth-child(5) {
width: 100px; width: 100px;
margin-right: 40px; margin-right: 40px;
} }
&:nth-child(6) { &:nth-child(6) {
width: 100px; width: 100px;
margin-right: 40px; margin-right: 40px;
} }
&:nth-child(7) { &:nth-child(7) {
width: 100px; width: 100px;
margin-right: 40px; margin-right: 40px;
} }
&:nth-child(8) { &:nth-child(8) {
width: 100px; width: 100px;
margin-right: 40px; margin-right: 40px;
} }
&:nth-child(9) { &:nth-child(9) {
width: 100px; width: 100px;
margin-right: 40px; 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 { .dataImg {