简化代码

This commit is contained in:
Jack 2022-08-15 17:52:53 +08:00
parent a27db2e56d
commit 1ba3a98765

View File

@ -32,13 +32,6 @@
<li>{{ item.alarmTime }}</li>
</ul>
</div>
<div id="detetion-con2">
<!-- <ul v-for="(item,index) in videoAlarmList" :key="index">
<li>{{item.videoName}}</li>
<li>{{item.eventName}}</li>
<li>{{item.alarmTime}}</li>
</ul>-->
</div>
</div>
</div>
</div>
@ -724,42 +717,10 @@
>
<img style="width: 67px; height: 90px" src="@/assets/images/towericon/hock2.png" />
</div>
<!-- <img
src="@/assets/images/towericon/towerBG.png"
class="towerImg"
ref="towerBG"
/>
<img id="xMove"
v-show="hideGoods"
src="@/assets/images/towericon/1.png"
class="rings"
/>
<img
v-show="hideGoods"
src="@/assets/images/towericon/line.png" id="line"
class="line"
/>
<img id="moveBox"
v-show="hideGoods"
src="@/assets/images/towericon/hock.png"
class="hock"
/>-->
</div>
<div class="allTowerTrack flex" ref="allTowerTrack" :style="{ height: company == 'longguang' ? '16%' : '20%' }">
<div class="cycle cycle_border1">
<!-- :style="{ top: item.mapY + 'px', left: item.mapX + 'px' }" -->
<!-- @click="getDevData(item)" -->
<!-- checkedIndex == item.id ? 'cycle_border1' : 'cycle_border2' -->
<img src="@/assets/images/towericon/tower.png" />
<!-- <p id="arrow" :style="{ transform: `rotate(${angle}deg)` }"> -->
<p
id="arrow"
:style="{
@ -1125,18 +1086,6 @@
:value="item.id"
></el-option>
</el-select>
<!-- <el-button
type="primary"
style="margin-left: 10px"
size="medium"
@click="changVideoSize"
>全屏播放</el-button>-->
<!-- <el-button
type="primary"
style="margin-left: 10px"
size="medium"
>查询</el-button
>-->
</div>
<div style="width: 100%; height: 300px">
<!-- <div>推出全屏</div> -->
@ -1274,17 +1223,6 @@
</div>
<div class="leftTopInner">
<div class="realTimeInfo2 fullHeight">
<!-- <div class="dialogDataBox">-->
<!-- <p>-->
<!-- <span>{{-->
<!-- lifterCurrentData.loading-->
<!-- ? lifterCurrentData.loading-->
<!-- : "&#45;&#45;"-->
<!-- }}</span>-->
<!-- kg-->
<!-- </p>-->
<!-- <p>重量</p>-->
<!-- </div>-->
<div
class="dialogDataBox"
:class="[
@ -1347,7 +1285,6 @@
{{ $t('message.dataBoard.runningStatus') }}
</p>
</div>
<!-- <div></div> -->
<div
class="dialogDataBox"
:class="[
@ -1358,7 +1295,6 @@
]"
>
<p>
<!-- lifterCurrentData.obliguityXAlarm-->
<span>{{ lifterCurrentData.dipAngleX ? lifterCurrentData.dipAngleX : '--' }}</span
>°
</p>
@ -1432,28 +1368,6 @@
{{ $t('message.dataBoard.countDownFresh') }}
</p>
</div>
<!-- <div class="dialogDataBox">
<p>
<span>{{
lifterCurrentData.peopleNumber
? lifterCurrentData.peopleNumber
: "--"
}}</span>
</p>
<p>当前人数</p>
</div>
<div class="dialogDataBox">
<p>
<span>{{
lifterCurrentData.loadRatio
? lifterCurrentData.loadRatio
: "--"
}}</span>
%
</p>
<p>重量百分比</p>
</div>-->
</div>
<div class="lifterRunBox fullHeight">
<img
@ -1875,8 +1789,6 @@
<div class="operationInfo_towercrane">
<img class="imgGantry" src="~@/views/projectLevel/assets/images/gantryCrane/gantry2.png" />
<div ref="hookBox" class="hookBox">
<!-- imgHeight:0,//-->
<!-- hookLeft:0//divhook-->
<div class="hook" :style="{ left: hookLeft + 'px' }">
<img class="imgHead" ref="imgHead" src="~@/views/projectLevel/assets/images/gantryCrane/head.png" />
<img
@ -1922,7 +1834,6 @@
<!-- 年龄 -->
{{ getInfo(gantryCraneOperationInfo.driverIdCard).age }}
</div>
<!-- <div class="driverInformationWorkingYears">工作年限3</div>-->
</div>
</div>
<div class="equipmentInformationBox">
@ -2292,12 +2203,8 @@ import videoModule from '@/components/videoModule/videoModule'
import { getAITypeStatistics } from '@/assets/js/api/companyBigScreen.js'
var frontArmLength = 496 //px
var height = 484 //px
// var frontArmLength = 332; //px
// var height = 324; //px
var imgLeftWidth = 115 //px
var imgLeftHeight = 70 //px
// var imgLeftWidth = 76; //px
// var imgLeftHeight = 45; //px
var realWidth = 0 //m
var realHeight = 0 //m
var $moveBox
@ -2468,7 +2375,6 @@ export default {
this.company = COMPANY
},
mounted() {
// this.pieAnalyse2();
this.isDockingToWoer = isDockingToWoer
this.styleType = this.$store.state.userInfo.styleType
console.log(this.company)
@ -2480,16 +2386,9 @@ export default {
if (window.localStorage.getItem('isIframe')) {
if (window.localStorage.getItem('isIframe') == '1') {
this.isIframe = true
// this.$nextTick(()=>{
// setOffset(2180,360)
// })
}
console.log(window.localStorage.getItem('isIframe'))
}
// this.getVideoAlarm()
// this.videoAlarmTimer=setInterval(()=>{
// this.getVideoAlarm()
// },5000)
if (this.bgUrl) {
this.countBoxSize() //
this.getAllDevPointList()
@ -2586,22 +2485,8 @@ export default {
setTimeout(() => {
let el = document.querySelector('.mapContent')
let imgDom = document.querySelector('.bgPackImg')
console.log(el)
console.log(this.$refs.bgPackImg)
let boxwidth = el.offsetWidth
let boxHeight = el.offsetHeight
// let boxHeightWidth = boxHeight / boxwidth;
// let mapContentHeight = window.screen.height / boxHeight;
// let mapContentWidth = window.screen.width / boxwidth;
// console.log(mapContentHeight)
// this.mapContentHeight = mapContentHeight;
// this.mapContentWidth = mapContentWidth;
// imgDom.height = boxHeight;
// imgDom.width = imgDom.height / this.imgHeightWidth;
this.imgWidthScale = imgDom.naturalWidth / imgDom.width
this.imgHeightScale = imgDom.naturalHeight / imgDom.height
let boxWidthHalf = el.offsetWidth / 2
let imgWidthHalf = imgDom.width / 2
let leftMove = imgWidthHalf - boxWidthHalf
@ -2622,7 +2507,6 @@ export default {
}
console.log(res.result)
for (let i = 0; i < this.towerHeightList.length; i++) {
// let flag = false
let id = this.towerHeightList[i].devSn
for (let j = 0; j < res.result.length; j++) {
if (id == res.result[j].devSn) {
@ -2630,30 +2514,19 @@ export default {
//
text: this.$t('message.dataBoard.forearmLong') + ':' + res.result[j].forearmLength + 'm'
})
// res.result[j].currentdata.angle = Math.round(Math.random()*300)
// this.towerHeightList[i].t3.attr({
// text: "" + res.result[j].currentdata.angle + "°"
// })
// flag = true
// console.log(this.towerHeightList[i].oldAngle)
if (!this.towerHeightList[i].oldAngle) {
this.towerHeightList[i].oldAngle = 0
}
// console.log(this.towerHeightList[i]);
let oldrot = Number(this.towerHeightList[i].oldAngle),
newrot = Number(res.result[j].currentdata.angle),
_this = this
// console.log(newrot,oldrot)
Snap.animate(
oldrot,
newrot,
function(value) {
// console.log(_this.towerHeightList[i].relatedX - _this.minX,_this.towerHeightList[i].relatedY,_this.minY);
oldrot = value
// console.log(_this.towerHeightList[i])
if (!isNaN(value)) {
//
// console.log(_this.towerHeightList[i].relatedX - this.minX,_this.towerHeightList[i].relatedY- this.minY);
_this.towerHeightList[i].t2.transform(
new Snap.Matrix().rotate(
value,
@ -2668,14 +2541,11 @@ export default {
_this.towerHeightList[i].relatedY - _this.minY
)
)
// _this.towerHeightList[i].d.transform(new Snap.Matrix().rotate(value[0], _this.towerHeightList[i].relatedX - _this.minX, (_this.towerHeightList[i].relatedY - _this.minY)).translate(0, -value[1]));
}
},
500
)
this.towerHeightList[i].oldAngle = newrot
// console.log(this.towerHeightList[i].t2)
}
}
}
@ -2683,13 +2553,11 @@ export default {
this.selectTowerCurrentData()
}, 5000)
}
// console.log(res, '-----')
})
},
//
selectTowerHeight(val) {
console.log(val.devSn)
// this.heightList = this.heightList.reverse()
selectTowerListApi({ projectSn: this.projectSn }).then(res => {
console.log(res.result)
if (res.code == 200) {
@ -2724,7 +2592,6 @@ export default {
}
})
console.log(this.towerHeightList[0].relatedX, this.towerHeightList[0].relatedY)
// console.log(this.minX);
this.towerHeightList.forEach(item => {
console.log(item.relatedX < this.minX && item.relatedX != '')
if (item.relatedX < this.minX && item.relatedX != '') {
@ -2732,7 +2599,6 @@ export default {
this.minY = item.relatedY
}
})
// console.log(this.minX,this.minY);
this.towerHeightList.forEach(item => {
if (item.relatedX || item.relatedY) {
let color = ''
@ -2760,7 +2626,6 @@ export default {
(item.relatedY - this.minY - item.forearmLength).toFixed(2)
)
.attr({
// fill: "rgba(255, 87, 94, 0.12)",
stroke: color,
strokeWidth: 1
})
@ -2779,11 +2644,6 @@ export default {
fontSize: 9
})
// if(this.styleType == 1 || isDockingToWoer){
// item.t1.attr({
// fill: "#2A2E3F"
// })
// }
item.t2 = this.svgDom.paper
.text(
(Number(item.relatedX) - this.minX).toFixed(2) - 6,
@ -2794,11 +2654,6 @@ export default {
fill: 'rgba(255, 255, 255, 0.8)',
fontSize: 9
})
// if(this.styleType == 1 || isDockingToWoer){
// item.t2.attr({
// fill: "#2A2E3F"
// })
// }
}
})
@ -2874,31 +2729,7 @@ export default {
this.countDown = 5
},
move(x, y) {
// ;
// var x = randomNum(0,realWidth)
// var y = randomNum(0,realHeight)
var xImg, yImg
// if (x <= realWidth) {
// xImg = (x / realWidth) * frontArmLength + imgLeftWidth
// this.warningText=''
// if (y <= realHeight) {
// yImg = (y / realHeight) * height + imgLeftHeight
// this.warningText=''
// } else {
// yImg = height + imgLeftHeight
// this.warningText=''
// }
// } else {
// xImg = frontArmLength + imgLeftWidth;
// this.warningText=''
// if (y <= realHeight) {
// yImg = (y / realHeight) * height + imgLeftHeight
// } else {
// yImg = height + imgLeftHeight
// this.warningText=','
// }
// }
if (x <= realWidth) {
xImg = (x / realWidth) * (frontArmLength - imgLeftWidth) + imgLeftWidth
this.warningText = ''
@ -2977,8 +2808,6 @@ export default {
console.log(result)
this.dangerAlarmTypeList = result.alarmList
this.totalDangerAlarmType = result.totalAlarmNum
// console.log(result.alarmList)
// console.log(this.dangerAlarmTypeList)
}
this.pieAnalyse()
})
@ -3114,13 +2943,6 @@ export default {
} else {
box.scrollTop++
}
/*判断滚动的距离刚好为一条公告的高度时停掉定时器隔1s之后重新启动计时器即可实现公告滚动停留效果 */
// if (box.scrollTop % 25 == 0) {
// clearInterval(timer1);
// setTimeout(() => {
// timer1 = setInterval(scrol, 30);
// }, 2000);
// }
}
}
},
@ -3281,22 +3103,10 @@ export default {
//
this.$message.error(this.$t('message.dataBoard.errMessage3'))
} else {
// imgHeight:0,//
// hookLeft:0//divhook
//
this.imgHeight = (260 * res.result.smallCraneMainHookHeight) / this.gantryCraneInfo.ratedHeight
// console.log(this.imgHeight);
//divhook
// console.log(this.$refs.hookBox.offsetWidth,res.result.smallCraneMainHookHeight);
this.hookLeft = (this.$refs.hookBox.offsetWidth * res.result.smallCraneRange) / this.gantryCraneInfo.ratedSpan
console.log(this.hookLeft)
// //
// this.lifter.ratedSpan
// //
// this.lifter.ratedHeight
// //div380px
// //div
// this.$refs.hookBox.offsetWidth
}
this.gantryCraneInterval = setTimeout(() => {
this.getRealTimeData(devSn)
@ -3308,14 +3118,6 @@ export default {
}
})
},
//
// getPosition(x){
// if(x<185){
// return 0
// }else{
// return x
// }
// },
getDevIcon(type) {
switch (Number(type)) {
case 1:
@ -3372,7 +3174,6 @@ export default {
this.devList = result.result
console.log(this.devList)
if (result.result.length > 0) {
// this.currentDevDetail = result.result[0];
this.offlineDevNum = 0
this.onlineDevNum = 0
this.devList.forEach(element => {
@ -3382,7 +3183,6 @@ export default {
this.onlineDevNum++
}
})
// console.log('645');
this.getRealTimeDustNoiseData()
this.realTimeDustNoiseDataTime = setInterval(() => {
this.getRealTimeDustNoiseData()
@ -3597,7 +3397,6 @@ export default {
let data = {
devSn
}
// console.log(111);
getTowerCurrentDataApi(data).then(res => {
clearInterval(this.countDownTime)
this.countDown = 5
@ -3618,68 +3417,14 @@ export default {
this.towerCurrentInfo = res.result ? res.result : this.towerCurrentInfo
var y = parseFloat(res.result.height)
var x = parseFloat(res.result.ranger)
// this.$nextTick(() => {
$moveBox = document.getElementById('moveBox')
$moveBox2 = document.getElementById('moveBox2')
$xMove = document.getElementById('xMove')
$line = document.getElementById('line')
$line2 = document.getElementById('line2')
// });
this.move(x, y)
this.hideGoods = true
// let forearmLength = Number(tower.forearmLength); //
// let towerHeight = tower.towerHeight
// ? Number(tower.towerHeight)
// : ""; //
// let realityX = res.result ? Number(res.result.xValue) : ""; //x
// let realityY = res.result ? Number(res.result.yValue) : ""; //y
// //
// if (realityX == "" || realityY == "") {
// this.hideGoods = false;
// return;
// }
// // let forearmLength = 186; //
// // let towerHeight = 120; //
// // let realityX = 86; //x
// // let realityY = 0; //y
// let clientWidth = this.$refs.towerBG.clientWidth; //
// let clientHeight = this.$refs.towerBG.clientHeight; //
// let imgLeftWidth = 52; //px
// let imgLeftHeight = 48; //px
// let slideWidth = 26; //px
// let cargoHeight = 74; //px
// //x>
// if (forearmLength < realityX || realityX < 0) {
// this.hideGoods = false;
// // this.$message.error("");
// // console.log("")
// return;
// // < Y
// } else if (towerHeight < realityY || realityY < 0) {
// this.hideGoods = false;
// // this.$message.error("");
// return;
// } else {
// this.hideGoods = true;
// let imgFl = clientWidth - imgLeftWidth - slideWidth; //px
// let ratioX = imgFl / forearmLength; //
// let coordX = ratioX * realityX + imgLeftWidth; //
// let imgFh = clientHeight - imgLeftHeight - cargoHeight; //px --
// let ratioY = imgFh / towerHeight; // -
// let coordY = ratioY * realityY - imgLeftHeight; //
// let showHeight = imgFh - coordY; //
// let lineLength = showHeight - cargoHeight / 2; //线
// //
// this.coordData = {
// coordX: coordX,
// coordY: showHeight,
// lineLength: lineLength,
// };
// }
} else {
this.hideGoods = false
}
@ -3952,7 +3697,6 @@ img {
width: 1100px;
.operationInfo_towercrane {
height: 450px;
/*background: #121E37;*/
width: 100%;
position: relative;
margin-bottom: 20px;
@ -3982,8 +3726,6 @@ img {
height: 50px;
transition: all 0.5s;
}
/*display: flex;*/
/*justify-content: center;*/
}
}
.showGantryCrane_top_right {
@ -4105,8 +3847,6 @@ img {
color: #e54948;
}
.TowerAlarm_item {
// border:1px #5ce2f6 solid;
// border-radius: 5px;
width: 90%;
padding: 10px;
font-size: 14px;
@ -4184,12 +3924,7 @@ img {
.point {
position: absolute;
// display: inline-flex;
align-items: center;
// border-radius: 50%;
// background: rgb(236, 126, 46);
// text-align: center;
// line-height: 30px;
z-index: 2;
cursor: pointer;
user-select: none;
@ -4200,7 +3935,6 @@ img {
.devName {
color: #fff;
font-size: 13px;
// margin-left: 10px;
}
}
.pointDialog_s {
@ -4209,7 +3943,6 @@ img {
top: 0px;
background-color: #000;
padding: 15px 15px 10px;
// width: 400px;
z-index: 3;
box-shadow: 0 2px 4px 0 #1a4c5a;
border: 1px solid #1a4c5a;
@ -4234,10 +3967,8 @@ img {
}
.dialogDataBox {
float: left;
// width: calc(25% - 12px);
width: 100px;
border: 1px solid rgba(255, 255, 255, 0.2);
// height: 50px;
margin: 0 5px 10px 5px;
padding: 10px 0;
text-align: center;
@ -4322,18 +4053,6 @@ img {
.showTitle2 {
top: -25px;
}
.showTitle3 {
}
.showTitle4 {
}
.showTitle5 {
}
.showTitle6 {
}
.showTitle7 {
}
.showTitle8 {
}
}
}
}
@ -4352,9 +4071,6 @@ img {
.dialogBlock {
float: left;
}
.pointDialogContent {
/*background-color: #000;*/
}
.left {
width: 28%;
height: 100%;
@ -4421,12 +4137,6 @@ img {
.liferDialog {
.left {
width: 100%;
// width: calc(75% - 0px);
// float: left;
// margin-right: 0;
// .dialogBlock {
// margin-right: 10px;
// }
}
.leftTop {
height: 60%;
@ -4437,11 +4147,6 @@ img {
height: calc(100% - 24px);
}
}
// .right {
// width: 25%;
// float: left;
// margin-left: 0;
// }
.realTimeInfo2 {
float: left;
width: calc(60% - 10px);
@ -4467,8 +4172,6 @@ img {
.dialogBlock {
float: left;
width: 33%;
// margin-right: 10px;
// width: calc(50% - 12px);
height: calc(100% - 2px);
}
}
@ -4490,7 +4193,6 @@ img {
}
.lifterRunBox {
img {
// max-height: 100%;
display: inline-block;
}
}
@ -4539,7 +4241,6 @@ img {
height: 75px;
border-radius: 50%;
padding: 0 !important;
// margin: 30px auto 0;
position: absolute;
right: 10px;
top: 0px;
@ -4558,7 +4259,6 @@ img {
left: 50%;
top: 0;
height: 100%;
/* background-color: #F5A623; */
transform: rotate(0deg);
margin-left: -1px;
padding: 0;
@ -4577,17 +4277,11 @@ img {
}
.tower_wrap {
// width: 332px;
// height: 324px;
position: relative;
// margin: 100px auto 0;
// margin: 50px auto 0;
.rings,
.line,
.hock {
position: absolute;
// top: 0;
// left: 0;
}
}
/deep/.selectVideoBox {
@ -4609,12 +4303,9 @@ img {
}
}
.transdata1 {
// background: url("~@/static/img/transdata_bg.png") no-repeat center/100%
// 100%;
height: 220px;
padding: 15px 20px 15px 20px;
box-sizing: border-box;
// transform: translateY(-12px);
}
.tody-table-header2 {
overflow: hidden;
@ -4631,7 +4322,6 @@ img {
font-family: MicrosoftYaHei;
color: rgba(127, 250, 255, 1);
text-align: center;
// background: url("~@/static/img/thead_bg.png") no-repeat center/100%;
background-size: 100% 100%;
&:last-child {
width: 160px;
@ -4693,11 +4383,9 @@ img {
filter: gray;
}
.towerRunBox {
// width: 50%;
margin: 0 auto;
position: relative;
display: inline-block;
// text-align: center;
}
.moveBox,
.xMove,
@ -4706,7 +4394,6 @@ img {
left: 0;
top: 0;
transition: all 1s;
// display: none;
}
.lines,
.xMove {