湖里大屏(数字工地):完成塔吊检测弹框塔吊图片布局
This commit is contained in:
parent
5e9863d2cf
commit
bd2c6e338b
@ -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;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user