湖里大屏(数字工地):完成塔吊检测弹框塔吊图片布局

This commit is contained in:
Jack 2022-08-19 16:05:51 +08:00
parent 5e9863d2cf
commit bd2c6e338b

View File

@ -52,7 +52,11 @@
</div> </div>
</div> </div>
</div> </div>
<div class="center"></div> <div class="center">
<div class="x-move"></div>
<div class="box"></div>
<div class="circle"></div>
</div>
<div class="right"></div> <div class="right"></div>
</div> </div>
</el-dialog> </el-dialog>
@ -61,7 +65,7 @@
<script> <script>
import AreaTree from '@/components/areaTree' import AreaTree from '@/components/areaTree'
import VideoModule from '@/components/videoModule/videoModule' import VideoModule from '@/components/videoModule/videoModule'
import { getLifterCurrentDataApi, getSelectLifterBySnApi } from '@/assets/js/api/lifter' import { getSelectLifterBySnApi } from '@/assets/js/api/lifter'
import { getTowerAlarmListApi, getSelectTowerBySnApi } from '@/assets/js/api/towerCrane' import { getTowerAlarmListApi, getSelectTowerBySnApi } from '@/assets/js/api/towerCrane'
import moment from 'moment' import moment from 'moment'
export default { export default {
@ -73,7 +77,6 @@ export default {
} }
}, },
mounted() { mounted() {
this.getEnvironmentInfo()
this.getDeviceInfo() this.getDeviceInfo()
this.getDrivers() this.getDrivers()
this.getAlertInfo() this.getAlertInfo()
@ -82,31 +85,12 @@ export default {
return { return {
projectSn: this.$store.state.projectSn, projectSn: this.$store.state.projectSn,
fileUrl: this.$store.state.FILEURL, fileUrl: this.$store.state.FILEURL,
videoList: [],
playList: [],
activeLiveData: { devSn: '' },
environmentInfo: {},
deviceInfo: {}, deviceInfo: {},
drivers: [], drivers: [],
alerts: [] alerts: []
} }
}, },
methods: { methods: {
getPlayParams(data) {
console.log(data, '大罗勒密河')
if (!this.showVideoDialog) {
this.videoList = data
} else {
this.playList = data
}
},
getEnvironmentInfo() {
getLifterCurrentDataApi({ devSn: '2DE46E53AEF7483B98C9B8825ECAA12F' }).then(res => {
if (res.code == 200) {
this.environmentInfo = res.result || {}
}
})
},
getDeviceInfo() { getDeviceInfo() {
getSelectLifterBySnApi({ devSn: '2DE46E53AEF7483B98C9B8825ECAA12F' }).then(res => { getSelectLifterBySnApi({ devSn: '2DE46E53AEF7483B98C9B8825ECAA12F' }).then(res => {
if (res.code === 200) { if (res.code === 200) {
@ -150,6 +134,52 @@ export default {
margin: 20px 0; margin: 20px 0;
} }
} }
.center {
position: relative;
flex: 1;
background: url(~@/assets/images/towericon/towerBG.png) no-repeat;
background-position-x: 20%;
background-position-y: 20%;
.x-move {
position: absolute;
left: 60%;
top: 17%;
width: 26px;
height: 12px;
background: url(~@/assets/images/towericon/1.png) no-repeat;
}
.box {
position: absolute;
left: 59%;
top: 49%;
width: 36px;
height: 74px;
background: url(~@/assets/images/towericon/hock.png) no-repeat;
}
.circle {
position: absolute;
left: 72%;
top: 65%;
width: 80px;
height: 80px;
background: url(~@/assets/images/towericon/tower.png) no-repeat;
background-position-x: 50%;
background-position-y: 50%;
border: #f5a623 3px solid;
border-radius: 50%;
&::before {
content: '';
position: absolute;
left: calc(50% - 1px);
width: 2px;
height: 50%;
background-color: #f5a623;
}
}
}
.right {
width: 420px;
}
.card { .card {
.card-title { .card-title {
margin-bottom: 20px; margin-bottom: 20px;