<template>
    <!--    防碰撞-->
    <vue-scroll style="height: 100%">
        <div class="alarmAnalysis" :class="{'white_bg': styleType == 1 || isDockingToWoer}" v-if="!showMore">
            <div class="alarmAnalysis_top flex">
                <div class="towercrane_status">
                    <div class="alarmAnalysis_title">
                        <!-- 塔吊工作情况 -->
                        {{ $t('message.towerCrane.towerWorkCrane') }}
                    </div>
                    <div class="status_list flex">
                        <div class="status_item">
                            <div class="status_content">
                                <span>{{devData.faultNum}}</span>
                                <!-- 故障总数 -->
                                {{ $t('message.towerCrane.totalNumberOfFaults') }}
                            </div>
                        </div>
                        <div class="status_item">
                            <div class="status_content">
                                <span>{{devData.alarmNum}}</span>
                                <!-- 报警总数 -->
                                {{ $t('message.towerCrane.totalNumberOfAlarms') }}
                            </div>
                        </div>
                        <div class="status_item">
                            <div class="status_content">
                                <span>{{devData.warningNum}}</span>
                                <!-- 预警总数 -->
                                {{ $t('message.towerCrane.totalEarlyWarning') }}
                            </div>
                        </div>
                        <div class="status_item">
                            <div class="status_content">
                                <span>{{devData.devOnline}}/<b>{{devData.devNum}}</b></span>
                                <!-- 设备总数 -->
                                {{ $t('message.towerCrane.totalEquipment') }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="towerheight_message">
                    <div class="alarmAnalysis_title">
                        <!-- 群塔高度信息 -->
                        {{ $t('message.towerCrane.towerHeightInformation') }}
                    </div>
                    <div class="tower_height">
                        <vue-scroll style="height: 100%;width: 100%">
                            <ul>
                                <li v-for="(item,index) in heightList" :key="index"><span></span></li>
                                <div class="tower_list" :style="{width: towerHeightList.length > 6 ?1290 + 200*(towerHeightList.length-6) + 'px' :1290 + 'px'}" ref="moveBox">
                                    <div v-for="(item, index) in towerHeightList"
                                         :key="index"
                                         class="tower_item"
                                         @mousedown="move($event,item)"
                                         @mouseup="up"
                                         :style="{'left': item.coordinateX + 'px','bottom': '0', 'height':item.heightRatio*100 > 100 ?100 + '%':item.heightRatio*100 + '%', 'width':item.heightRatio*179 > 300 ? 300 + 'px':item.heightRatio*179 + 'px'}">
                                        <!-- 塔尖高   -->
                                        <span class="span1" v-if="item.referenceHeight" style="white-space:nowrap">{{ $t('message.towerCrane.spireHeight') }}:{{item.referenceHeight}}</span>
                                        <!-- 大臂高 -->
                                        <span class="span2" v-if="item.towerHeight" style="white-space:nowrap">{{ $t('message.towerCrane.boomHeight') }}:{{item.towerHeight}}</span>
                                        <img v-if="styleType == 2" src="./../../../assets/images/operationInfo/tower-crane3.png">
                                        <img v-else src="./../../../assets/images/operationInfo/tower-crane3_w.png"/>
                                        <!-- 标准节数量 -->
                                        <span v-if="item.heightRatio" style="position: absolute;top: 50%;left: -50px;transform: translateY(-50%);">{{ $t('message.towerCrane.standardSectionNumber') }}:{{item.nodeCount?item.nodeCount:'0'}}</span>
                                        <!-- 前臂长度 -->
                                        <span v-if="item.heightRatio" style="position: absolute;top: 30%;left: 50px;white-space:nowrap">{{ $t('message.towerCrane.forearmLength') }}:{{item.forearmLength?item.forearmLength:'0'}}</span>
                                        <!-- <i style="height: 30%"></i> -->
                                        <div style="width: 100%;height:100%; z-index: 2; position: absolute; top: 0; left: 0;"></div>
                                        <span v-if="item.heightRatio" style="position: absolute;top:100%;left: 20px;white-space:nowrap;line-height:30px;color:#2A2E3F">{{item.devName?item.devName:''}}</span>
                                    </div>
                                </div>
                                <div class="icon_land" :style="{'height': '10%'}">
                                    <img :style="{width: towerHeightList.length > 6 ?1290 + 200*(towerHeightList.length-6) + 'px' :1290 + 'px'}" src="./../../../assets/images/operationInfo/land.png">
                                </div>
                            </ul>
                            <div class="tower_lable"></div>
                        </vue-scroll>
                    </div>
                </div>
            </div>
            <div class="flex">
                <div class="prevent_crash">
                    <div class="alarmAnalysis_title">
                        <!-- 群塔防碰撞 -->
                        {{ $t('message.towerCrane.antiCollision') }}
                        <div class="alarmAnalysis_more" @click="showMoreAlarmAnalysis">
                            <!-- 塔吊场布情况 -->
                            {{ $t('message.towerCrane.siteLayout') }}
                            <i class="el-icon-arrow-right"></i>
                        </div>
                    </div>
                    <div v-if="towerHeightList.length > 0"
                            class="svg_box"
                            id="svg_box"
                    >
                        <svg id="svg" ref="svg" class="svg-pan-zoom_viewport" style="width: 100%; height: 100%;">
                            <!-- <g v-for="(item, index) in towerList" :key="index" @click="checkItem(index)">
                                <circle :cx="item.cx" :cy="item.cy" :r="item.r" stroke="#FE6565" stroke-width="1" fill="rgba(255, 87, 94, 0.12)" />
                                <path stroke="#FE6565" :d="item.d">
                                    <animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="2s" type="rotate" :from="item.from" :to="item.to" fill="freeze"/>
                                </path>
                            </g> -->
                        </svg>
                    </div>
                    <div v-else>
                        <img style="display:block;margin: 153px auto;border: none" src="./../../../assets/images/noData2.png"/>
                    </div>
                </div>
                <div class="crash_message">
                    <div class="alarmAnalysis_title">
                        <!-- 防碰撞报警信息 -->
                        {{ $t('message.towerCrane.antiCollisionAlarmInfo') }}
                    </div>
                    <div class="flex" style="align-items: flex-start">
                        <div class="crash_list">
                            <!-- 报警列表 -->
                            <h3>{{ $t('message.towerCrane.alarmList') }}</h3>
                            <vue-scroll style="height: 280px">
                                <ul class="crash_item_box" v-if="collideAlarmList.length > 0">
                                    <li @mouseenter="selectCollideAlarmListShow = index" @mouseleave="selectCollideAlarmListShow = ''"  v-for="(item, index) in collideAlarmList"
                                        :key="index"
                                        class="crash_item"
                                        :class="{'active_crash': selectIndex  == 0,selectShow:selectCollideAlarmListShow === index || selectCollideAlarmListShow2 === index}"
                                        @click="checkCrashItem(item, index)">
                                        <!-- 设备名称 -->
                                        <h4>{{ $t('message.towerCrane.equipmentName') }}：{{item.devName ? item.devName : 0}}</h4>
                                        <h4>{{item.alarmType}}</h4>
                                        <p>{{item.alarmTime}}</p>
                                        <!-- 报警类型:防碰撞报警 -->
                                        <p style="font-size: 16px;">{{ $t('message.towerCrane.alarmType') }}</p>
<!--                                        <ul>-->
<!--                                            <li>载重：<span style="font-size: 16px">{{item.loading ? item.loading : 0}}kg</span></li>-->
<!--                                            <li>幅度：<span style="font-size: 16px">{{item.ranger ? item.ranger : 0}}m</span></li>-->
<!--                                            &lt;!&ndash; <li>吊重：<span>{{item.loading}}kg</span></li> &ndash;&gt;-->
<!--                                            <li>角度：<span style="font-size: 16px">{{item.angle ? item.angle : 0}}°</span></li>-->
<!--                                            <li>风速：<span style="font-size: 16px">{{item.windspeed ? item.windspeed : 0}}m/s</span></li>-->
<!--                                            <li>力矩比：<span style="font-size: 16px">{{item.torqueRatio ? item.torqueRatio : 0}}%</span></li>-->
<!--                                            <li>吊钩高度：<span style="font-size: 16px">{{item.height ? item.height : 0}}m</span></li>-->
<!--                                        </ul>-->
                                    </li>
                                </ul>
                                <div v-else style="padding-top: 20px;">
                                    <img style="display:block;margin: 0px auto;" src="./../../../assets/images/noData2.png"/>
                                </div>
                            </vue-scroll>
                        </div>
                        <div class="line"></div>
                        <div class="crash_info">
                            <!-- 报警详细 -->
                            <h3>{{ $t('message.towerCrane.alarmDetails') }}</h3>
                            <div class="crash_info_box flex" v-if="towerDetail1.forearmLength">
                                <div class="crash_info_item">
                                    <h4>{{towerDetail1.devName}}</h4>
                                    <div class="crash_info_card flex">
                                        <div class="info_item b-right">
                                            <p>{{towerDetail1.forearmLength ? towerDetail1.forearmLength : 0}}m</p>
                                            <!-- 前臂长 -->
                                            <span>{{ $t('message.towerCrane.forearmLength') }}</span>
                                            <img v-if="styleType == 2" src="@/assets/images/operationInfo/towercrane-icon3.png" />
                                            <img v-else src="@/assets/images/operationInfo/towercrane-icon3_w.png" />
                                        </div>
                                        <div class="info_item b-right">
                                            <p>{{towerDetail1.towerHeight ? towerDetail1.towerHeight : 0}}m</p>
                                            <!-- 大臂高 -->
                                            <span>{{ $t('message.towerCrane.boomHeight') }}</span>
                                            <img v-if="styleType == 2" src="@/assets/images/operationInfo/towercrane-icon4.png" />
                                            <img v-else src="@/assets/images/operationInfo/towercrane-icon4_w.png" />
                                        </div>
                                        <div class="info_item b-right">
                                            <p>{{towerDetail1.posteriorArmLength ? towerDetail1.posteriorArmLength : 0}}m</p>
                                            <!-- 后臂长 -->
                                            <span>{{ $t('message.towerCrane.rearArmLength') }}</span>
                                            <img v-if="styleType == 2" src="@/assets/images/operationInfo/towercrane-icon5.png" />
                                            <img v-else src="@/assets/images/operationInfo/towercrane-icon5_w.png" />
                                        </div>
                                        <div class="info_item">
                                            <p>{{towerDetail1.referenceHeight ? towerDetail1.referenceHeight : 0}}m</p>
                                            <!-- 塔尖高度 -->
                                            <span>{{ $t('message.towerCrane.spireHeight') }}</span>
                                            <img v-if="styleType == 2" src="@/assets/images/operationInfo/towercrane-icon5.png" />
                                            <img v-else src="@/assets/images/operationInfo/towercrane-icon5_w.png" />
                                        </div>
                                    </div>
                                </div>
                                <div class="crash_info_item">
                                    <h4>{{towerDetail2.devName}}</h4>
                                    <div class="crash_info_card flex">
                                        <div class="info_item b-right">
                                            <p>{{towerDetail2.forearmLength ? towerDetail2.forearmLength : 0}}m</p>
                                             <!-- 前臂长 -->
                                            <span>{{ $t('message.towerCrane.forearmLength') }}</span>
                                            <img v-if="styleType == 2" src="@/assets/images/operationInfo/towercrane-icon3.png" />
                                            <img v-else src="@/assets/images/operationInfo/towercrane-icon3_w.png" />
                                        </div>
                                        <div class="info_item b-right">
                                            <p>{{towerDetail2.towerHeight ? towerDetail2.towerHeight : 0}}m</p>
                                            <!-- 大臂高 -->
                                            <span>{{ $t('message.towerCrane.boomHeight') }}</span>
                                            <img v-if="styleType == 2" src="@/assets/images/operationInfo/towercrane-icon4.png" />
                                            <img v-else src="@/assets/images/operationInfo/towercrane-icon4_w.png" />
                                        </div>
                                        <div class="info_item b-right">
                                            <p>{{towerDetail2.posteriorArmLength ? towerDetail2.posteriorArmLength : 0}}m</p>
                                             <!-- 后臂长 -->
                                            <span>{{ $t('message.towerCrane.rearArmLength') }}</span>
                                            <img v-if="styleType == 2" src="@/assets/images/operationInfo/towercrane-icon5.png" />
                                            <img v-else src="@/assets/images/operationInfo/towercrane-icon5_w.png" />
                                        </div>
                                        <div class="info_item">
                                            <p>{{towerDetail2.referenceHeight ? towerDetail2.referenceHeight : 0}}m</p>
                                            <!-- 塔尖高度 -->
                                            <span>{{ $t('message.towerCrane.spireHeight') }}</span>
                                            <img v-if="styleType == 2" src="@/assets/images/operationInfo/towercrane-icon5.png" />
                                            <img v-else src="@/assets/images/operationInfo/towercrane-icon5_w.png" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tower_box flex" v-if="towerDetail2.forearmLength">
                                <div class="left_tower tower_item">
                                    <div class="imgBox">
                                        <img class="tower-crane" :style="{width: 144*proportion + 'px',height: 139*proportion + 'px'}" src="@/assets/images/operationInfo/tower-crane_new.png"/>
                                        <div :style="{left:64 * xImg1 + 26 + '%'}"  style="left: 26%;top: 28%;height: 100%;transition: all 1s" class="moveBox">
                                            <div  style="transition: all 1s" :style="{height:40*yImg1 + '%'}" class="rope"></div>
                                            <img style="transition: all 1s" class="tower_hook" :style="{height: 40*proportion + 'px'}" src="@/assets/images/operationInfo/tower_hook.png"/>
                                        </div>
                                    </div>
                                    <div class="left_card">
                                        <ul>
                                            <!-- 吊重 -->
                                            <li v-if="towerDetail1.weightSet == 1" class="b-bottom"><span>{{runList1.loading ? runList1.loading : 0}}kg</span>{{ $t('message.towerCrane.liftingWeight') }}</li>
                                            <!-- 幅度 -->
                                            <li class="b-bottom"><span>{{runList1.ranger ? runList1.ranger : 0}}m</span>{{ $t('message.towerCrane.range') }}</li>
<!--                                            runList1.height-->
                                            <!-- 吊钩高度 -->
                                            <li><span>{{runList1.height ? runList1.height : 0}}m</span>{{ $t('message.towerCrane.hookHeight') }}</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="right_tower tower_item">
                                    <div style="transform: rotateY(180deg);" class="imgBox">
                                        <img class="tower-crane" :style="{width: 144*proportion2 + 'px',height: 139*proportion2 + 'px'}" src="@/assets/images/operationInfo/tower-crane_new.png"/>
                                        <div  :style="{left:64 * xImg2 + 26 + '%'}" style="left: 26%;top: 28%;height: 100%;transition: all 1s" class="moveBox">
                                            <div style="transition: all 1s" :style="{height:40*yImg2 + '%'}" class="rope"></div>
                                            <img style="transition: all 1s" class="tower_hook" :style="{height: 40*proportion2 + 'px'}" src="@/assets/images/operationInfo/tower_hook.png"/>
                                        </div>
                                    </div>
                                    <div class="right_card">
                                        <ul>
                                            <li v-if="towerDetail2.weightSet == 1" class="b-bottom"><span>{{runList2.loading ? runList2.loading : 0}}kg</span>{{ $t('message.towerCrane.liftingWeight') }}</li>
                                            <li class="b-bottom"><span>{{runList2.ranger ? runList2.ranger : 0}}m</span>{{ $t('message.towerCrane.range') }}</li>
<!--                                            runList2.height-->
                                            <li><span>{{runList2.height ? runList2.height : 0}}m</span>{{ $t('message.towerCrane.hookHeight') }}</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div v-else style="padding-top: 20px;">
                                <img style="display:block;margin: 0px auto;" src="./../../../assets/images/noData2.png"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="height: 100%" v-else>
            <!-- 塔吊场布情况 -->
            <el-page-header
                    style="padding-bottom: 10px"
                    @back="goBack"
                    :content="$t('message.towerCrane.LayoutOfTowerCraneYard')"
                    class="backText"
            ></el-page-header>
            <distributeDatail :sn="projectSn"></distributeDatail>
        </div>
    </vue-scroll>
</template>

<script>
    import moment from "moment";
    import distributeDatail from "./distributeDetail.vue"
    import {
        selectTowerAlarmAndDevCountApi,
        selectCollideAlarmListApi,
        selectCollideDevRunDateApi,
        selectTowerListApi,
        selectProjectTowerNewestCurrentDataListApi,
        editTowerInfoApi,
        selectTowerNumAndAlarmCountApi//查询塔吊设备数量统计和当日报警、预数量统计
    } from "@/assets/js/api/towerCrane"

    export default {
        components:{
            distributeDatail
        },
        props:['sn'],
        data(){
            return{
                selectCollideAlarmListShow:"",//移动样式
                selectCollideAlarmListShow2:"",//移动样式选中样式
                deg: '60 100 50',
                upDate: true,
                selectIndex: 0,
                svgDom: Object,
                svgpanzoom: null,
                towerList: [{
                    cx: "100",
                    cy: "50",
                    r: "60",
                    d: "M100 50 l0 -60",
                    from: "0 100 50",
                    deg: "90 100 50"
                }],
                projectSn: "",
                devData:{
                    devNum: "",
                    devOnline: "",
                    warningNum: "",
                    totalAlarmNum: "",
                    alarmNum: "",
                    faultNum:''//故障数
                },
                collideAlarmList:[],
                towerDetail1: {},
                towerDetail2: {},
                heightList:["-30", "0", "30", "60", "90"],
                towerHeightList:[],
                timer: null,
                showMore: false,
                styleType: 1,
                moveData: {},
                heightRatio: "",//比例
                runList1:"",//塔吊一运行数据
                runList2:"",//塔吊二运行数据
                proportion:"",//比例,
                proportion2:"",//比例2
                xImg1:"",
                yImg1:"",
                xImg2:"",
                yImg2:"",
                minX:"",//最小x
                minY:"",//最小x的y轴
                isDockingToWoer: ""
            }
        },
        created(){
            this.isDockingToWoer = isDockingToWoer
            this.projectSn = this.sn ? this.sn:this.$store.state.projectSn;
            this.styleType = this.$store.state.userInfo.styleType;
            this.selectTowerAlarmAndDevCount();
            this.selectCollideAlarmList();
            this.selectTowerHeight();
        },
        mounted(){

        },
        beforeDestroy(){
            clearTimeout(this.timer)
        },
        methods:{
            showMoreAlarmAnalysis(){
                console.log(1);
                clearTimeout(this.timer)
                this.showMore = true
            },
            goBack(){
                this.showMore = false;
                this.selectTowerAlarmAndDevCount();
                this.selectCollideAlarmList();
                this.selectTowerHeight();
            },
            // 获取塔群高度
            selectTowerHeight(){
                this.heightList = this.heightList.reverse()
                selectTowerListApi({projectSn: this.projectSn}).then(res=>{
                    console.log(res.result)
                    if(res.code == 200){
                        let maxHeight = 0
                        res.result.forEach(item=>{
                            if(item.referenceHeight + item.towerHeight > maxHeight){
                                maxHeight = item.referenceHeight + item.towerHeight
                            }
                        })
                        // if(maxHeight > 90){
                        //     let a = Math.ceil((maxHeight - 30) / 30)
                        //     for(let i = 0; i<a; i++){
                        //         this.heightList.push((this.heightList.length-1)*30)
                        //     }
                        // }
                        res.result.forEach(item=>{
                            item.heightRatio = (item.referenceHeight + item.towerHeight) / maxHeight
                            item.coordinateX =  item.coordinateX ? item.coordinateX : "0"
                        })
                        this.towerHeightList = res.result
                        console.log(res.result, '-----塔吊');
                        this.$nextTick(()=>{
                            this.createSvg()
                            var panZoomTiger = svgPanZoom('#svg');
                        })
                    }
                })
                // let data = this.towerHeightList,
                //     maxHeight = 0
                // data.forEach( item => {
                //     if (item.height > maxHeight){
                //         maxHeight = item.height
                //     }
                // })
            },
            // 切换防碰撞报警信息
            checkCrashItem(item, index){
                this.selectCollideAlarmListShow2 = index
                console.log(item);
                this.selectIndex = index
                let data = {
                    collideDevSn: item.collideDevSn,
                    devSn: item.devSn,
                    endTime: moment(item.alarmTime).format('YYYY-MM-DD HH:mm:ss'),
                    // endTime:"2021-09-11 13:09:01",
                    projectSn: this.projectSn,
                }
                let time = new Date(moment(item.alarmTime).format('YYYY-MM-DD HH:mm:ss')).getTime() - 1000*60
                // data.startTime = "2021-09-10"
                data.startTime = moment(time).format('YYYY-MM-DD HH:mm:ss')
                // console.log( data.startTime)
                selectCollideDevRunDateApi(data).then(res=>{
                    console.log(res)
                    if(res.code==200 && res.result.length > 0){
                        this.towerDetail1 = res.result[0]
                        this.towerDetail2 = res.result[1]
                        console.log(this.towerDetail2);
                        console.log(this.runList1);
                        if(res.result[0].runlist && res.result[1].runlist){
                            this.runList1 = res.result[0].runlist[0]
                            this.runList2 = res.result[1].runlist[0]
                            this.xImg1 = this.runList1.ranger/this.towerDetail1.forearmLength > 1?1:this.runList1.ranger/this.towerDetail1.forearmLength//X轴偏移
                            this.yImg1 = this.runList1.height/this.towerDetail1.towerHeight > 1?1:this.runList1.height/this.towerDetail1.towerHeight//Y轴偏移towerHeight
                            this.xImg2 = this.runList2.ranger/this.towerDetail2.forearmLength > 1 ? 1:this.runList2.ranger/this.towerDetail2.forearmLength//X轴偏移
                            this.yImg2 = this.runList2.height/this.towerDetail2.towerHeight > 1? 1:this.runList2.height/this.towerDetail2.towerHeight//Y轴偏移

                        }else {
                            this.xImg1 = 0
                            this.yImg1 = 0
                            this.xImg2 = 0
                            this.yImg2 = 0
                        }
                        let maxHeight = 0
                        if ((res.result[0].referenceHeight + res.result[0].towerHeight) > (res.result[1].referenceHeight + res.result[1].towerHeight)){
                            maxHeight = res.result[0].referenceHeight + res.result[0].towerHeight
                            this.proportion = (res.result[0].referenceHeight + res.result[0].towerHeight) /maxHeight
                            this.proportion2 = (res.result[1].referenceHeight + res.result[1].towerHeight) /maxHeight
                        }else {
                            maxHeight = res.result[1].referenceHeight + res.result[1].towerHeight
                            this.proportion = (res.result[0].referenceHeight + res.result[0].towerHeight) /maxHeight
                            this.proportion2 = (res.result[1].referenceHeight + res.result[1].towerHeight) /maxHeight
                        }

                    }
                })
            },
            // 获取塔吊工作情况
            selectTowerAlarmAndDevCount(){
                selectTowerNumAndAlarmCountApi({projectSn: this.projectSn}).then(res=>{
                    console.log(res.result)
                    if(res.code == 200 && res.result){
                        this.devData.devNum = res.result.devCount.devNum
                        this.devData.devOnline = res.result.devCount.devOnline
                        this.devData.alarmNum = res.result.alarmCount.alarmNum
                        this.devData.totalAlarmNum = res.result.alarmCount.totalAlarmNum
                        this.devData.warningNum = res.result.alarmCount.warningNum
                        this.devData.faultNum = res.result.faultNum
                    }
                })
            },
            // 获取防碰撞报警信息
            selectCollideAlarmList(){
                selectCollideAlarmListApi({projectSn: this.projectSn,  opType: "1"}).then(res=>{
                    console.log(res)
                    if(res.code == 200){
                        console.log('-----防碰撞报警信息', res)
                        res.result.forEach(item=>{
                            item.alarmTime = moment(item.alarmTime).format('YYYY.MM.DD HH:mm:ss');
                        })
                        this.collideAlarmList = res.result
                        if(res.result.length>0){
                            this.checkCrashItem(res.result[0], 0)
                        }
                    }
                })
            },
            // 实时获取塔吊回转角度
            selectTowerCurrentData(){
                selectProjectTowerNewestCurrentDataListApi({projectSn:this.projectSn}).then(res=>{
                    if(res.code == 200){
                        if(this.timer){
                            clearTimeout(this.timer)
                        }
                        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){
                                    // forearmLength 前臂长
                                    this.towerHeightList[i].t2.attr({
                                        text:this.$t('message.towerCrane.forearmLength')+':' + 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,(_this.towerHeightList[i].relatedX - _this.minX) ,(_this.towerHeightList[i].relatedY- _this.minY)));
                                            _this.towerHeightList[i].b.transform(new Snap.Matrix().rotate(value, (_this.towerHeightList[i].relatedX - _this.minX) ,(_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)
                                }
                            }
                        }
                        this.timer = setTimeout(()=>{
                            this.selectTowerCurrentData();
                        },5000)
                    }
                    // console.log(res, '-----实时回转角度')
                })
            },
            // 绘制塔群
            createSvg(){
                console.log(this.towerHeightList)
                this.svgDom = Snap("#svg");
                this.towerHeightList.forEach(item => {
                    if(item.relatedX){
                        this.minX = item.relatedX
                        this.minY = item.relatedY
                    }
                })
                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 != ''){
                        this.minX = item.relatedX
                        this.minY = item.relatedY
                    }
                })
                // console.log(this.minX,this.minY);
                this.towerHeightList.forEach(item=>{
                    if(item.relatedX || item.relatedY){
                        console.log(item.relatedX - this.minX,item.relatedY - this.minY,item.devName);
                        item.a = this.svgDom.paper.circle((item.relatedX - this.minX).toFixed(2), (item.relatedY - this.minY).toFixed(2), item.forearmLength).attr({
                            fill: "rgba(255, 87, 94, 0.12)",
                            stroke: "#FE6565",
                            strokeWidth: 1,
                        })
                        item.b = this.svgDom.paper.line((item.relatedX - this.minX).toFixed(2), Number((Number(item.relatedY) - this.minY).toFixed(2)) + Number(item.posteriorArmLength), (item.relatedX - this.minX).toFixed(2), ((item.relatedY - this.minY) - item.forearmLength).toFixed(2)).attr({
                            // fill: "rgba(255, 87, 94, 0.12)",
                            stroke: "#FE6565",
                            strokeWidth: 1,
                        })
                        item.c = this.svgDom.paper.circle((item.relatedX - this.minX).toFixed(2), (item.relatedY - this.minY).toFixed(2),2).attr({
                            fill: "#FE6565",
                            stroke: "#FE6565",
                            strokeWidth: item.forearmLength/8,
                        });
                        // item.d = this.svgDom.paper.circle((item.relatedX - this.minX).toFixed(2), (item.relatedY - this.minY).toFixed(2),item.forearmLength/16).attr({
                        //     fill: "#fff",
                        //     stroke: "#fff",
                        //     strokeWidth: 0.2,
                        // });
                        // item.d = this.svgDom.paper.circle(item.relatedX, Number(item.relatedY)-50,item.forearmLength/8).attr({
                        //     fill: "#fff",
                        //     stroke: "#fff",
                        //     strokeWidth: 0.2,
                        // });
                        item.t1 = this.svgDom.paper.text((Number(item.relatedX) - this.minX).toFixed(2) - 6, (Number(item.relatedY) - this.minY).toFixed(2) + 6,[item.devName?item.devName: ""]).attr({
                            fill: "rgba(255, 255, 255, 0.6)",
                            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 , (Number(item.relatedY) - this.minY).toFixed(2) - item.forearmLength/2,['前臂长:',item.forearmLength?item.forearmLength : "0", "m"]).attr({
                            fill: "rgba(255, 255, 255, 0.6)",
                            fontSize: 9
                        })
                        if(this.styleType == 1 || isDockingToWoer){
                            item.t2.attr({
                                fill: "#2A2E3F"
                            })
                        }
                        // item.t3 = this.svgDom.paper.text(item.relatedX, item.relatedY,["回转：", item.angle?item.angle: "0°"]).attr({
                        //     fill: "rgba(255, 255, 255, 0.6)",
                        //     fontSize: 4
                        // })
                        // let rot = 0
                        // Snap.animate(rot, rot + 45, function(value) {
                        //     rot = value;
                        //     // 旋转
                        //     item.b.transform(new Snap.Matrix().rotate(value, item.relatedX, item.relatedY));
                        // }, 500);
                    }
                })
                // let a = this.svgDom.paper.circle(100,100,60),
                // b =this.svgDom.paper.line(100, 100, 100, 40),
                // c = this.svgDom.paper.circle(100, 100,4);
                // this.svgDom.attr({
                //     fill: "rgba(255, 87, 94, 0.12)",
                //     stroke: "#FE6565",
                //     strokeWidth: 1,
                // })
                this.selectTowerCurrentData();
                // c.attr({
                //     fill: "rgba(255, 87, 94, 0.12)",
                //     stroke: "#FE6565",
                //     strokeWidth: 3,
                // })
                // let rot = 0
                // Snap.animate(rot, rot + 45, function(value) {
                //     rot = value;
                //     // 旋转
                //     b.transform(new Snap.Matrix().rotate(value, 100, 100));
                // }, 500);

                // console.log(svgPanZoom,panZoomTiger)
            },
            move(e, val){
                this.moveData = val
                let odiv = e.target,
                    targetWidth =  e.target.offsetWidth,
                    width = this.$refs["moveBox"].offsetWidth
                let disX = e.clientX - odiv.offsetLeft;
                let x = Number(val.coordinateX)
                console.log(width,targetWidth);
                // e.target.addEventListener('mousemove', this.moveDom(e,val,disX, x))
                document.onmousemove = (e)=>{
                    let left = (e.clientX - disX) + x;
                    if(left < 0){
                        return;
                    } else if(left > (width-targetWidth)){
                        return;
                    }
                    //移动当前元素
                    val.coordinateX = left

                };
                document.onmouseup = (e) => {
                    this.changeX()
                    console.log('--------鼠标抬起')
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            },
            up(e){
                this.changeX()
                console.log('--------鼠标抬起')
                document.onmousemove = null;
                document.onmouseup = null;
            },
            changeX(){
                console.log(this.moveData)
                let data = {
                    id: this.moveData.id,
                    coordinateX: this.moveData.coordinateX
                }
                editTowerInfoApi(data).then((res)=>{
                    if(res.code == 200){
                        this.$message.success(this.$t('message.towerCrane.modifySuccess')) // 修改成功！
                    }
                    console.log(res)
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .imgBox{
        position: relative;
        .moveBox{
            position: absolute;
            .rope{
                width: 3px;
                background: yellow;
                margin: 0 auto
            }
        }
    }
    .alarmAnalysis{
        background: #091225;
        height: 100%;
        padding: 25px;
        color: #fff;
        box-sizing: border-box;
        .alarmAnalysis_top{
            margin-bottom: 25px;
        }
        .flex{
            display: flex;
            align-items: center;
        }
        .towercrane_status{
            width: 400px;
            height: 360px;
            margin-right: 20px;
            background: #0D1A34;
            border: 1px solid rgba(18, 41, 79, 1);
        }
        .towerheight_message{
            flex: 1;
            height: 360px;
            background: #0D1A34;
            border: 1px solid rgba(18, 41, 79, 1);
        }
        .tower_height{
            height: calc(100% - 56px);
            ul{
                position: relative;
                width: calc(100% - 60px);
                height: calc(100% - 50px);
                margin-left: 60px;
                display: flex;
                flex-direction: column;
                li{
                    flex: 1;
                    // border-bottom: 1px dashed #212C45;
                    position: relative;
                    span{
                        display: block;
                        width: 36px;
                        position: absolute;
                        left: -48px;
                        text-align: right;
                        bottom: -6px;
                        font-size: 12px;
                        color: #79808E;
                    }
                }
                .tower_list{
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    .tower_item{
                        width: 179px;
                        position: absolute;
                        z-index: 3;
                        display: flex;
                        flex-direction: column;
                        .span1{
                            display: block;
                            position: absolute;
                            left: 24%;
                            top: 5px;
                            font-size: 16px;
                        }
                        .span2{
                            display: block;
                            position: absolute;
                            left: 28%;
                            top: 50%;
                            font-size: 16px;
                        }
                        img{
                            height: calc(100% - 18px);
                            width: 100%;
                        }
                        i{
                            display: block;
                            position: absolute;
                            width: 80px;
                            background: #0D1A34;
                            left: 0;
                            z-index: -1;
                            bottom: 0;
                        }
                    }
                }
                .icon_land{
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
        .alarmAnalysis_title{
            position: relative;
            padding-left: 18px;
            line-height: 31px;
            margin-bottom: 16px;
            font-size: 18px;
            padding-top: 10px;
            color: #7CD3DE;
            display: flex;
            justify-content: space-between;
            font-weight: 900;
            .alarmAnalysis_more{
                font-size: 14px;
                color: #EEEFF0;
                margin-right: 20px;
                cursor: pointer;
                i{
                    color: #7CD3DE;
                }
            }
        }
        .alarmAnalysis_title::before{
            content: "";
            width: 2px;
            height: 31px;
            background: linear-gradient(to bottom, #88E7F0, #15315F);
            position: absolute;
            left: 0;
            top: 10px;
        }
        .status_list{
            flex-wrap: wrap;
            .status_item{
                flex: 50%;
                text-align: center;
                height: 150px;
                .status_content{
                    width: 100px;
                    height: 90px;
                    background: url("./../../projectLevel/assets/images/menuBG_active.gif") no-repeat center;
                    background-size: 100%;
                    margin: 0 auto;
                    position: relative;
                    top: 50%;
                    transform: translateY(-50%);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    // justify-content: center;
                    font-size: 14px;
                    color: #9EA6B0;
                    span{
                        margin-bottom: 3px;
                        font-size: 30px;
                        font-weight: bold;
                        color: #fff;
                        b{
                            color: #88E7F0;
                        }
                    }
                }
            }
        }
        .prevent_crash{
            width: 578px;
            height: 370px;
            background: #0D1A34;
            border: 1px solid rgba(18, 41, 79, 1);
            margin-right: 20px;
        }
        .crash_message{
            flex: 1;
            height: 370px;
            background: #0D1A34;
            border: 1px solid rgba(18, 41, 79, 1);
        }
        .crash_list{
            color: #99A2B2;
            width: 356px;
            margin: 0 24px;
            h3{
                font-size: 14px;
                margin: 0;
                // color: #99A2B2;
                margin-bottom: 10px;
            }
        }
        .crash_item_box{
            // background: #17274A;
            padding-right: 20px;
            border-right: 1px solid #12294F;
            .crash_item{
                opacity: 0.5;
                background: #17274A;
                border-radius: 8px;
                margin-bottom: 14px;
                padding: 20px 20px;
                box-sizing: border-box;
                font-size: 12px;
                cursor: pointer;
            }
            .active_crash{
                border: 1px solid #75C7D3;
            }
            h4{
                color: #FE6565;
                margin: 0;
                margin-bottom: 3px;
                font-size: 16px;
            }
            p{
                margin-bottom: 14px;
            }
            ul{
                display: flex;
                flex-wrap: wrap;
                li{
                    width: 33%;
                    margin-bottom: 6px;
                    cursor: pointer;
                    span{
                        color: #fff;
                    }
                }
            }
        }
        .crash_info{
            flex: 1;
            padding-right: 24px;
            box-sizing: border-box;
            h3{
                font-size: 14px;
                margin: 0;
                color: #99A2B2;
                margin-bottom: 6px;
            }
        }
        .crash_info_box{
            justify-content: space-between;
            // padding-right: 24px;
            width: 100%;
            margin-bottom: 20px;
            box-sizing: border-box;
            .crash_info_item{
                font-size: 14px;
                // margin-right: 30px;
                h4{
                    color: #7CD3DE;
                    margin: 0;
                    margin-bottom: 6px;
                }
            }
            .crash_info_card{
                border: 1px solid;
                border-image: linear-gradient(to bottom, #70C1D2, #0D1A34) 10 10;
                .info_item{
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    justify-content: center;
                    padding: 9px 13px;
                    font-size: 16px;
                    p{
                        font-size: 16px;
                        margin-bottom: 6px;
                    }
                    span{
                        margin-bottom: 6px;
                        white-space: nowrap;
                    }
                    img{
                        width: 16px;
                        height: 16px;
                    }
                }
            }
        }
        .b-right{
            border-right: 1px dashed #163260;
        }
        .b-bottom{
            border-bottom: 1px dashed #163260;
        }
        .tower_box{
            justify-content: space-between;
            align-items: flex-end;
            .tower_item{
                position: relative;
            }
            .left_card{
                position: absolute;
                bottom: -18px;
                left: -71px;
                ul{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-items: center;
                    li{
                        text-align: center;
                        font-size: 14px;
                        color: #A0A6AF;
                        width: 60px;
                        padding: 3px 0;
                        span{
                            display: block;
                            font-size: 16px;
                            color: #fff;
                        }
                    }
                }
            }
            .right_card{
                position: absolute;
                bottom: -18px;
                right: -71px;
                ul{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-items: center;
                    li{
                        text-align: center;
                        font-size: 14px;
                        color: #A0A6AF;
                        width: 60px;
                        padding: 3px 0;
                        span{
                            display: block;
                            font-size: 16px;
                            color: #fff;
                        }
                    }
                }
            }
            .left_tower{
                margin-left: 73px;
                .tower-crane{
                    width: 144px;
                    height: 139px;
                }
            }
            .right_tower{
                margin-right: 73px;
            }
        }
        .svg_box{
            width: calc(100% - 20px);
            height: calc(100% - 66px);
            margin: 0 auto;
            // border:1px solid red;
        }
    }
    .backText {

        font-size: 16px;
    }
    .jyjzPage .backText{
        margin: -10px 0 14px 0;
        padding: 15px 15px 0;
        /deep/.el-page-header__content{
            color: white;
            font-size: 16px;
        }
        /deep/.el-page-header__title{
            font-size: 16px;
        }
        /deep/.el-page-header__left::after{
            background-color:#7CD3DE
        }
    }
    .white_bg{
        background: #F3F5FD;
        .towercrane_status{
            height: 392px;
            background: #fff;
            border: 0;
            border-radius: 3px;
        }
        .status_list{
            .status_item {
                .status_content{
                    height: 100px;
                    color: #2A2E3F;
                    background: url('./../../../assets/images/operationInfo/white_bg.png') no-repeat center;
                    span{
                        color: #2A2E3F;
                        b{
                            color: #2A2E3F;
                        }
                    }
                }
            }
        }
        .alarmAnalysis_title{
            margin-bottom: 20px;
            color: #2A2E3F;
            font-weight: bold;
            font-size: 18px;
            .alarmAnalysis_more{
                color: #2A2E3F;
                i{
                    color: #2A2E3F;
                }
            }
        }
        .alarmAnalysis_title::before{
            display: none;
        }
        .towerheight_message{
            background: #fff;
            height: 392px;
            border: 0;
            border-radius: 3px;
        }
        .tower_height ul .tower_list .tower_item span{
            color: #2A2E3F;
        }
        .prevent_crash{
            background: #fff;
            height: 440px;
            border: 0;
            border-radius: 3px;
        }
        .crash_message{
            background: #fff;
            height: 440px;
            border: 0;
            border-radius: 3px;
            .line{
                border-right: 1px solid  rgba(42, 46, 63, 0.2);;
                height: 280px;
            }
        }
        .crash_item_box{
            border-right: 0;
            ul{
                li{
                    span{
                        color: #2A2E3F;
                    }
                }
            }
            .crash_item{
                background: #F2F2F2;
            }
            .selectShow{
                opacity: 1;
                border: 1px solid;
            }
        }
        .crash_info{
            padding-left: 30px;
        }
        .crash_info_box {
            margin-bottom: 40px;
            .crash_info_item{
                h4{
                    color: #2A2E3F;
                }
            }
            .crash_info_card {
                padding: 9px 0;
                border: 0;
                background: #F3F2F4;
                .info_item{
                    padding-top: 0;
                    border-color: #163260;
                    p{
                        font-size: 16px;
                        font-weight: 900;
                        color: #2A2E3F;
                    }
                    span{
                        font-size: 16px;
                        font-weight: 900;
                        color: #93959E;
                    }
                }
            }
        }
        .tower_box{
            .left_tower{
                margin-left: 110px;
            }
            .left_card{
                left: -110px;
                ul{
                    padding: 0 14px;
                    background: #F3F2F4;
                    li{
                        padding: 6px 0;
                        span{
                            font-weight: 900;
                            color: #2A2E3F;
                        }
                    }
                }
            }
            .right_tower{
                margin-right: 110px;
            }
            .right_card{
                right: -110px;
                ul{
                    padding: 0 14px;
                    background: #F3F2F4;
                    li{
                        padding: 6px 0;
                        span{
                            font-weight: 900;
                            color: #2A2E3F;
                        }
                    }
                }
            }
        }
        .tower_height {
            ul{
                width: calc(100% - 120px);
            }
        }
    }
</style>
