<template>
    <!-- 监控统计 -->
    <vue-scroll style="height: 100%">
        <div class="realTimeData_info flex">
            <div class="abnormalPperation">
                <div class="head">
                    <!-- 司机异常操作 -->
                    {{ $t('message.towerCrane.abnormalOperationOfDriver') }}
                </div>
                <el-select v-model="devSn" style="margin-right: 10px;width: 180px" clearable size="medium" :placeholder="$t('message.towerCrane.equipmentSelection')">
                        <el-option
                        v-for="item in devList"
                        :key="item.id"
                        :label="item.devName"
                        :value="item.devSn">
                        </el-option>
                </el-select>
                <el-date-picker
                        style="width: 220px"
                        size="medium"
                        v-model="value1"
                        type="daterange"
                        range-separator="-"
                        :start-placeholder="$t('message.towerCrane.startDate')"
                        :end-placeholder="$t('message.towerCrane.endDate')">
                </el-date-picker>
                <el-button
                        size="medium"
                        style="width: 60px;height: 32px;margin-left: 10px;color: #409EFF;border-color: #409EFF;"
                        @click="query1"
                >
                <!-- 查询 -->
                {{ $t('message.towerCrane.query') }}
                </el-button>
                <el-button
                        size="medium"
                        style="width: 60px;height: 32px;margin-left: 10px;color: #409EFF;border-color: #409EFF;"
                        @click="refresh1"
                >
                <!-- 刷新 -->
                {{ $t('message.towerCrane.refresh') }}
                </el-button>
                <div class="radarChartBox">
                    <div class="radarChart" ref="echart1"></div>
                </div>
            </div>
            <div class="equipmentAlarm">
                <div style="display:flex;justify-content: space-between;margin-bottom: 10px;">
                <div class="head">
                    <!-- 设备告警 -->
                    {{ $t('message.towerCrane.equipmentAlarm') }}
                </div>
                <div>
                <el-date-picker
                        class="serarch_picker"
                        style="width: 220px !important;"
                        size="medium"
                        v-model="value2"
                        type="daterange"
                        range-separator="-"
                        :start-placeholder="$t('message.towerCrane.startDate')"
                        :end-placeholder="$t('message.towerCrane.endDate')">
                </el-date-picker>
                <el-button
                        size="medium"
                        style="width: 60px;height: 32px;margin-left: 20px;color: #409EFF;border-color: #409EFF;"

                        @click="query2"
                >
                <!-- 查询 -->
                {{ $t('message.towerCrane.query') }}
                </el-button>
                    <el-button
                            size="medium"
                            style="width: 60px;height: 32px;margin-left: 20px;color: #409EFF;border-color: #409EFF;"
                            @click="refresh2"
                    >
                    <!-- 刷新 -->
                    {{ $t('message.towerCrane.refresh') }}
                    </el-button>
                </div>
                </div>
                <div class="icon" :class="styleType == 3 ? 'icon2' : ''">
                    <div class="icon_item" v-for="(item,index) in colorList" :key="index">
                        <div v-if="index == 0 || index == 2" class="titleColor"></div>
                        <div v-if="index == 1 || index == 2" class="titleColor2"></div>
                        <div class="colorTitle">{{item.title}}</div>
                    </div>
                </div>
                <div class="radarChartBox">
                    <div class="echart2" ref="echart2"></div>
                </div>
            </div>
            <div class="equipmentAlarmRecord">
                <div style="display:flex;justify-content: space-between;margin-bottom: 10px;">
                    <div class="head">
                        <!-- 设备运行数据 -->
                        {{ $t('message.towerCrane.equipmentOperationData') }}
                    </div>
                    <div class="search-box">
                    <el-date-picker
                            class="serarch_picker"
                            size="medium"
                            v-model="value3"
                            type="daterange"
                            range-separator="-"
                            :start-placeholder="$t('message.towerCrane.startDate')"
                            :end-placeholder="$t('message.towerCrane.endDate')">
                    </el-date-picker>
                    <el-button
                            size="medium"
                            style="width: 60px;height: 32px;margin-left: 20px;color: #409EFF;border-color: #409EFF;"
                            @click="query3"
                    >
                    <!-- 查询 -->
                    {{ $t('message.towerCrane.query') }}
                    </el-button>
                        <el-button
                                size="medium"
                                style="width: 60px;height: 32px;margin-left: 20px;color: #409EFF;border-color: #409EFF;"
                                @click="refresh3"
                        >
                        <!-- 刷新 -->
                        {{ $t('message.towerCrane.refresh') }}
                        </el-button>
                    </div>
                </div>
                <div class="radarChartBox">
                    <div class="echart3" ref="echart3"></div>
                </div>
            </div>
            <div class="workingHoursRecord">
                <div style="display:flex;justify-content: space-between;margin-bottom: 10px;">
                <div class="head">
                    <!-- 设备工作时长吊次记录 -->
                    {{ $t('message.towerCrane.liftingTimesRecord') }}
                </div>
                <div>
                <el-date-picker
                        class="serarch_picker"
                        size="medium"
                        v-model="value4"
                        type="daterange"
                        range-separator="-"
                        :start-placeholder="$t('message.towerCrane.startDate')"
                        :end-placeholder="$t('message.towerCrane.endDate')">
                </el-date-picker>
                <el-button
                        size="medium"
                        style="width: 60px;height: 32px;margin-left: 20px;color: #409EFF;border-color: #409EFF;"
                        @click="query4"
                >
                <!-- 查询 -->
                {{ $t('message.towerCrane.query') }}
                </el-button>
                    <el-button
                            size="medium"
                            style="width: 60px;height: 32px;margin-left: 20px;color: #409EFF;border-color: #409EFF;"
                            @click="refresh4"
                    >
                    <!-- 刷新 -->
                    {{ $t('message.towerCrane.refresh') }}
                    </el-button>
                </div>
                </div>
                <div class="radarChartBox">
                    <div class="echart4" ref="echart4"></div>
                </div>
            </div>
        </div>
        <!-- //查看当前设备基本信息 -->
    </vue-scroll>
</template>
<script>
   import echarts from 'echarts4';;
    import {
        getTowerListApi,
        selectDriverTowerAbnormalCountApi,//查询司机异常操作产生的报警数
        selectTowerAlarmCountApi,//统计塔吊设备指定时间段内报警、预警、故障次数
        selectTowerLoadAndMileageApi,//统计塔吊的吊重和吊程
        selectTowerWorkCycleCountApi,//统计塔吊的吊次和工作时长
    } from "@/assets/js/api/towerCrane"
    export default {
        props:['sn'],
        data() {
            return{
                styleType:'',
                chart1:Object,
                option1:{},
                value1:'',
                dataList1:[],//司机异常操作
                chart2:Object,
                option2:{},
                value2:'',
                devNameList:[],//设备名称
                warningNumList:[],//预警次数
                alarmNumList:[],//报警次数
                faultNumList:[],//故障次数
                chart3:Object,
                option3:{},
                value3:'',
                devNameList2:[],//设备名称
                totalLoadingList:[],//吊重
                totalWorkMileageList:[],//吊程
                chart4:Object,
                option4:{},
                value4:[],
                devList:[],
                cycleNumList:[],//吊次
                timeNumList:[],//时长
                devNameList3:[],//设备名称
                maxNum:'',
                colorList:[
                    {
                        title:this.$t('message.towerCrane.numberOfEarlyWarning'), // 预警次数
                        color:"#FFC267"
                    },
                    {
                        title:this.$t('message.towerCrane.numberOfAlarms'), // 报警次数
                        color:"#FE6565"
                    },
                ],
                projectSn:'',
                devSn:"",
            }
        },
        computed:{
            transformTimestamp(){
                return function(timestamp){
                    if(timestamp){
                        let a = new Date(timestamp).getTime();
                        const date = new Date(a);
                        const Y = date.getFullYear() + '-';
                        const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                        const D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + '  ';
                        const h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
                        const m = (date.getMinutes() <10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
                        const s = date.getSeconds() ; // 秒
                        const dateString = Y + M + D + h + m + s + '0';
                        return dateString;
                    }
                }
            },
        },
        created(){
            this.styleType = this.$store.state.userInfo.styleType;
            this.projectSn = this.sn ? this.sn:this.$store.state.projectSn;
            // this.bgUrl = this.$store.state.currentProDetail.constructionMapUrl;
            this.selectDriverTowerAbnormalCount()
            this.selectTowerAlarmCount()
            this.selectTowerLoadAndMileage()
            this.selectTowerWorkCycleCount()
            this.queryDev()
        },
        mounted(){

        },
        methods:{
            queryDev(){
                getTowerListApi({projectSn: this.projectSn}).then(res=>{
                    // console.log(res)
                    if(res.code == 200 && res.result){
                        this.devList = res.result
                    }
                })
            },
            refresh1(){
                this.value1 = []
                this.devSn = ''
                this.selectDriverTowerAbnormalCount()
            },
            refresh2(){
                this.value2 = []
                this.selectTowerAlarmCount()
            },
            refresh3(){
                this.value3 = []
                this.selectTowerLoadAndMileage()
            },
            refresh4(){
                this.value4 = []
                this.selectTowerWorkCycleCount()
            },
            //雷达图
            query1(){
                this.selectDriverTowerAbnormalCount()
            },
            query2(){
                this.selectTowerAlarmCount()
            },
            query3(){
                this.selectTowerLoadAndMileage()
            },
            query4(){
                this.selectTowerWorkCycleCount()
            },
            //雷达图
            selectDriverTowerAbnormalCount(){
                selectDriverTowerAbnormalCountApi(
                    {
                        projectSn:this.projectSn,
                        devSn: this.devSn,
                        startTime:this.value1?this.transformTimestamp(this.value1[0]):"",
                        endTime:this.value1?this.transformTimestamp(this.value1[1]):""
                    }
                ).then(res=>{
                    if(res.code == 200){
                        this.dataList1 = []
                        // let collision = res.result.multiAlarmNum//碰撞
                        // let limit = res.result.maxRangeAlarmNum + res.result.minRangeAlarmNum//限位
                        let limit = res.result.limitAlarmNum//限位
                        // res.result.momentAlarmNum//力矩
                        // res.result.obliguityAlarmNum//倾角
                        // res.result.environmentAlarm//限行
                        let rotation = res.result.negAngleAlarmNum + res.result.posAngleAlarmNum//回转
                        this.dataList1.push(limit)//限位
                        this.dataList1.push(res.result.obliguityAlarmNum)//倾角
                        this.dataList1.push(res.result.momentAlarmNum)//力矩
                        this.dataList1.push(res.result.environmentAlarmNum)//限行
                        this.dataList1.push(rotation)//回转
                        this.dataList1.push(res.result.multiAlarmNum)//碰撞
                        let maxArr = []
                        maxArr.push(limit)//限位
                        maxArr.push(res.result.obliguityAlarmNum)//倾角
                        maxArr.push(res.result.momentAlarmNum)//力矩
                        maxArr.push(res.result.environmentAlarmNum)//限行
                        maxArr.push(rotation)//回转
                        maxArr.push(res.result.multiAlarmNum)//碰撞
                        this.maxNum = maxArr.sort(this.compare)[maxArr.length-1]
                        console.log(res.result);
                        console.log(this.dataList1);
                        this.createdEchart1();
                    }
                })
            },
            createdEchart1(){
                // 图表数据显示异常修复
                let chart1 = echarts.init(this.$refs['echart1']);
                this.chart1 = chart1;
                chart1.clear();
                this.option1 = {
                    radar: {
                        // shape: 'circle',
                        indicator: [
                            { name: this.$t('message.towerCrane.limit'), max: this.maxNum+12}, // 限位
                            { name: this.$t('message.towerCrane.dipAngle'), max: this.maxNum+12}, // 倾角
                            { name: this.$t('message.towerCrane.moment'), max: this.maxNum+12}, // 力矩
                            { name: this.$t('message.towerCrane.restrictedArea'),max: this.maxNum+12}, // 限行区
                            { name: this.$t('message.towerCrane.rotation'), max: this.maxNum+12}, // 回转
                            { name: this.$t('message.towerCrane.antiCollisionTwo'), max: this.maxNum+12} // 防碰撞
                        ],
                        splitLine: { //     // 网格线
                            lineStyle: {
                                width : 1,
                            },
                        }
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    series: [{
                        type: 'radar',
                        data: [
                            {
                                value: this.dataList1,
                                name: this.$t('message.towerCrane.abnormalOperation') // 异常操作
                            },
                        ],
                        color: "#5181F6",
                        areaStyle: {
                            normal: {
                                color: '#92B0F9' // 选择区域颜色
                            }
                        },
                    }]
                };
                chart1.setOption(this.option1);
            },
            //预警,报警,违章统计图
            selectTowerAlarmCount(){
                selectTowerAlarmCountApi({
                    projectSn: this.projectSn,
                    startTime:this.value2?this.transformTimestamp(this.value2[0]):"",
                    endTime:this.value2?this.transformTimestamp(this.value2[1]):""
                }).then(res=>{
                    if(res.code == 200){
                        this.devNameList = []//设备名称
                        this.warningNumList = []//预警次数
                        this.alarmNumList = []//报警次数
                        this.faultNumList = [] //故障次数
                        res.result.forEach((item)=>{
                            this.devNameList.push(item.devName)//设备名称
                            this.warningNumList.push(item.warningNum)//预警次数
                            this.alarmNumList.push(item.alarmNum)//报警次数
                            this.faultNumList.push(item.faultNum)
                        })
                        this.createdEchart2();
                        console.log(res.result);
                    }
                })
            },
            createdEchart2() {
                let chart2 = echarts.init(this.$refs['echart2']);
                this.chart2 = chart2;
                chart2.clear();
                this.option2 = {
                    grid:{
                        top:"30px",
                        left:"40px",
                        right:"15px",
                        bottom:"30px"
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        data: this.devNameList,
                        axisLine:{
                            lineStyle:{
                                color: "#2B364D",
                                type: "dashed"
                            }
                        },
                        axisTick:{
                            show: false
                        },
                        axisLabel:{
                            color: '#7F8694'
                        }
                    },
                    yAxis: [{
                        type: 'value',
                        splitLine:{
                            lineStyle:{
                                color: "#2B364D",
                                type: "dashed"
                            }
                        },
                        axisTick:{
                            show: false
                        },
                        axisLine:{
                            lineStyle:{
                                color: "#2B364D",
                                type: "solid"
                            }
                        },
                        axisLabel:{
                            color: '#7F8694'
                        },


                    },{
                        type: 'value',
                    }
                    ],
                    legend: {
                        data: [this.$t('message.towerCrane.numberOfFailures')], // 故障次数
                        bottom: "92%",
                        left:"35%"
                    },
                    series: [
                        {
                            name: this.$t('message.towerCrane.numberOfEarlyWarning'), // 预警次数
                            data: this.warningNumList,
                            type: 'bar',
                            stack: this.$t('message.towerCrane.stack'),//堆叠柱状图在此设置成统一名称即可
                            color: '#FFC267'
                        },
                        {
                            name: this.$t('message.towerCrane.numberOfAlarms'), // 报警次数
                            data: this.alarmNumList,
                            type: 'bar',
                            stack: this.$t('message.towerCrane.stack'),//堆叠柱状图在此设置成统一名称即可
                            color: '#FE6565'
                        },
                        {
                            name: this.$t('message.towerCrane.numberOfFailures'), // 故障次数
                            type: 'line',
                            data: this.faultNumList
                        }
                    ]
                }
                chart2.setOption(this.option2);
            },
            //吊重吊程
            selectTowerLoadAndMileage(){
                selectTowerLoadAndMileageApi({
                    projectSn: this.projectSn,
                    startTime:this.value3?this.transformTimestamp(this.value3[0]):"",
                    endTime:this.value3?this.transformTimestamp(this.value3[1]):""
                }).then(res=>{
                    if(res.code == 200){
                        this.devNameList2 = []//设备名称
                        this.totalLoadingList = []//吊重
                        this.totalWorkMileageList = []//吊程
                        res.result.forEach((item)=>{
                            this.devNameList2.push(item.devName)//设备名称
                            this.totalLoadingList.push(item.totalLoading)//吊重
                            this.totalWorkMileageList.push(item.totalWorkMileage)//吊程
                        })
                        this.createdEchart3();
                        console.log(res.result);
                    }
                })
            },
            createdEchart3(){
                let chart3 = echarts.init(this.$refs['echart3']);
                this.chart3 = chart3;
                chart3.clear();
                this.option3 = {
                    grid:{
                        top:"30px",
                        left:"80px",
                        right:"15px",
                        bottom:"30px"
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: [this.$t('message.towerCrane.liftingWeight'), this.$t('message.towerCrane.lift')], // ['吊重', '吊程']
                        bottom: "95%",
                        left:"5%"
                    },
                    xAxis: {
                        type: 'category',
                        data: this.devNameList2,
                        axisLine:{
                            lineStyle:{
                                color: "#2B364D",
                                type: "dashed"
                            }
                        },
                        axisTick:{
                            show: false
                        },
                        axisLabel:{
                            color: '#7F8694'
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            splitLine:{
                                lineStyle:{
                                    color: "#2B364D",
                                    type: "dashed"
                                }
                            },
                            axisTick:{
                                show: false
                            },
                            axisLine:{
                                lineStyle:{
                                    color: "#2B364D",
                                    type: "solid"
                                }
                            },
                            axisLabel:{
                                color: '#7F8694'
                            }
                        },
                        {
                            type: 'value',
                        }
                    ],
                    series: [
                        {
                            name: this.$t('message.towerCrane.liftingWeight'), // 吊重
                            data: this.totalLoadingList,
                            type: 'bar',
                            color: '#5181F6'
                        },
                        {
                            name: this.$t('message.towerCrane.lift'), // 吊程
                            type: 'line',
                            data: this.totalWorkMileageList
                        }
                    ]
                }
                chart3.setOption(this.option3);
            },
            selectTowerWorkCycleCount(){
                selectTowerWorkCycleCountApi({
                    projectSn: this.projectSn,
                    startTime:this.value4?this.transformTimestamp(this.value4[0]):"",
                    endTime:this.value4?this.transformTimestamp(this.value4[1]):""
                }).then(res=>{
                    if(res.code == 200){
                        this.devNameList3 = []//设备名称
                        this.cycleNumList = []//吊次
                        this.timeNumList = []//时长
                        res.result.forEach((item)=>{
                            this.devNameList3.push(item.devName)//设备名称
                            this.cycleNumList.push(item.cycleNum)//吊次
                            this.timeNumList.push(item.timeNum)//时长
                        })
                        this.createdEchart4();
                        console.log(res.result);
                    }
                })
            },
            createdEchart4(){
                let chart4 = echarts.init(this.$refs['echart4']);
                this.chart4 = chart4;
                chart4.clear();
                this.option4 = {
                    grid:{
                        top:"30px",
                        left:"40px",
                        right:"15px",
                        bottom:"30px"
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: [this.$t('message.towerCrane.workingHours'), this.$t('message.towerCrane.liftingTimes')], // ['工作时长(分钟)', '吊次']
                        bottom: "95%",
                        left:"5%"
                    },
                    xAxis: {
                        type: 'category',
                        data: this.devNameList3,
                        axisLine:{
                            lineStyle:{
                                color: "#2B364D",
                                type: "dashed"
                            }
                        },
                        axisTick:{
                            show: false
                        },
                        axisLabel:{
                            color: '#7F8694'
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            splitLine:{
                                lineStyle:{
                                    color: "#2B364D",
                                    type: "dashed"
                                }
                            },
                            axisTick:{
                                show: false
                            },
                            axisLine:{
                                lineStyle:{
                                    color: "#2B364D",
                                    type: "solid"
                                }
                            },
                            axisLabel:{
                                color: '#7F8694'
                            }
                        },
                        {
                            type: 'value',
                        }
                    ],
                    series: [
                        {
                            name: this.$t('message.towerCrane.workingHours'), // 工作时长(分钟)
                            data: this.timeNumList,
                            type: 'bar',
                            color: '#5181F6'
                        },
                        {
                            name: this.$t('message.towerCrane.liftingTimes'), // 吊次
                            type: 'line',
                            data: this.cycleNumList
                        }
                    ]
                }
                chart4.setOption(this.option4);
            },
            compare (x, y) {//比较函数
                if (x < y) {
                    return -1;
                } else if (x > y) {
                    return 1;
                } else {
                    return 0;
                }
            }
        }
    };
</script>

<style lang="less" scoped>
    *{
        box-sizing: border-box;
        margin: 0px;
        // padding: 0px;
    }
    .realTimeData_info {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        // height: calc(100% - 150px);
        // margin-top: 12px;
        box-sizing: border-box;
        .abnormalPperation{
            padding: 20px;
            width: 47%;
            height: 383px;
            background: #fff;
            margin-right: 12px;
            margin-bottom: 12px;
            box-sizing: border-box;
            .radarChartBox{
                .radarChart{
                    width: 400px;
                    height: 250px;
                    margin: 50px auto;
                }
            }
        }
        .equipmentAlarm{
            box-sizing: border-box;
            padding: 20px;
            width: 50%;
            height: 383px;
            background: #fff;
            .icon{
                display: flex;
                justify-content: flex-end;
                margin-left: 60px;
                transform: translate(-664px, 20px);
                .icon_item{
                    display: inline-block;
                    margin-right: 20px;
                    .titleColor{
                        width: 10px;
                        height: 10px;
                        display: inline-block;
                        background: #FFC267;
                    }
                    .titleColor2{
                        width: 10px;
                        height: 10px;
                        display: inline-block;
                        background: #FE6565;
                    }
                    .colorTitle{
                        display: inline-block;
                        margin-left: 20px;
                    }
                }
            }
            .icon2{
                transform: translate(-537px, 20px);
            }
            
            .echart2{
                width: 100%;
                height: 300px;
            }
        }
        .equipmentAlarmRecord{
            padding: 20px;
            width: 47%;
            height: 466px;
            background: #fff;
            margin-right: 12px;
            margin-bottom: 12px;
            box-sizing: border-box;
            .echart3{
                width: 100%;
                height: 400px;
            }
        }
        .workingHoursRecord{
            box-sizing: border-box;
            padding: 20px;
            width: 50%;
            height: 466px;
            background: #fff;
            .echart4{
                width: 100%;
                height: 400px;
            }
        }
        .head{
            margin-right: 30px;
            display: inline-block;
            height: 15px;
            color: #262D48;
            font-size: 15px;
            font-weight: 900;
            padding-left: 10px;
            border-left: 2px #5181F6 solid;
        }
    }

</style>
