<template>
    <div class="project-tower-crane  main-page">
        <el-col :span="6" class="h100">
            <module-one-3-1 label="设备概况" class="h100">
                <el-row class="tower-total">
                    <el-col :span="12">
                        <div class="equipment-list-min quality-target-index-min">
                            <div class="czz-number-img czz-number-img-blue">
                                <svg-icon icon-class="tower"></svg-icon>
                            </div>
                            <div class="equipment-list-data">
                                <p class="p-label">塔机总数</p>
                                <div>
                                    <span class="span-num led-number">{{ towerTotalNum }}</span><span
                                        class="span-unit">台</span>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="equipment-list-min quality-target-index-min">
                            <div class="czz-number-img czz-number-img-green">
                                <svg-icon icon-class="monitor"></svg-icon>
                            </div>
                            <div class="equipment-list-data">
                                <p class="p-label">监控总数</p>
                                <div>
                                    <span class="span-num led-number">{{ towerTotalNum }}</span><span
                                        class="span-unit">台</span>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>

                <el-row style="height: 160px; overflow: hidden" :key="chart1Key">
                    <staff-survey-chart :height="chart1Height" :unit="'个'" :data="towerConfigView"
                        width="100%"></staff-survey-chart>
                </el-row>

                <el-row class="left-data-list">
                    <div class="warning-info-title" style="padding-left: 20px; position: relative; z-index: 9">
                        <div :class="'active'">监控列表</div>
                    </div>
                    <div class="drv-list scroll" id="listMin">
                        <div v-for="(it, idx) in towerConfigList" :key="idx" class="drv-item list-for"
                            :class="index == idx ? 'active' : ''" @click="onTowerCraneList(idx)">
                            <div class="item-content">
                                <div class="dev-row1">
                                    <div class="survey_content">
                                        <div class="survey_content_img labour-education_bgd">
                                            <svg-icon icon-class="tower"></svg-icon>
                                        </div>
                                    </div>

                                    <div class="dev-row1-col2">
                                        <div class="data-row">
                                            <span class="sp-label">设备名称:</span>
                                            <span class="sp-value">{{ it.deviceName }}</span>
                                        </div>
                                        <div class="data-row">
                                            <span class="sp-label">总包单位:</span>
                                            <span class="sp-value">{{ it.deptName }}</span>
                                        </div>
                                        <div class="data-row">
                                            <span class="sp-label">设备状态:</span>
                                            <span class="sp-value"
                                                :class="it.online == 2 ? 'is-offline' : 'is-online'">{{
                                                    it.online == 2 ? "离线" : "在线"
                                                }}</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="dev-row2">
                                    <div class="dev-row2-col">
                                        <div class="data-row">
                                            <span class="sp-label">司机:</span>
                                            <span class="sp-value">{{ it.driName }}</span>
                                        </div>
                                    </div>
                                    <div class="dev-row2-col">
                                        <div class="data-row">
                                            <span class="sp-label">电话:</span>
                                            <span class="sp-value sp-tel">{{ it.driPhone }}</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="dev-row2">
                                    <div class="dev-row2-col">
                                        <div class="data-row">
                                            <span class="sp-label">安全员:</span>
                                            <span class="sp-value">{{ it.safName }}</span>
                                        </div>
                                    </div>
                                    <div class="dev-row2-col">
                                        <div class="data-row">
                                            <span class="sp-label">电话:</span>
                                            <span class="sp-value sp-tel">{{ it.safPhone }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-row>
            </module-one-3-1>
        </el-col>
        <el-col :span="18" class="h100">

            <el-row class="main-content">
                <el-col :span="16" class="h100">
                    <el-row class="total-data">
                        <el-col :span="6">
                            <div class="warning-info-title" style="padding-left: 20px; position: relative; z-index: 9">
                                <div :class="'active'">吊重次数({{ towerConfigStat.a0 }}次)</div>
                                <div class="title-bg"></div>
                            </div>
                            <div class="data-row2">
                                <div class="data-row2-col">
                                    <div class="s-text">本月</div>
                                    <div class="s-number">{{ towerConfigStat.a1 }}</div>
                                </div>
                                <div class="data-row2-col">
                                    <div class="s-text">累计</div>
                                    <div class="s-number">{{ towerConfigStat.a0 }}</div>
                                </div>
                            </div>
                        </el-col>

                        <el-col :span="6">
                            <div class="warning-info-title" style="padding-left: 20px; position: relative; z-index: 9">
                                <div :class="'active'">超载次数({{ towerConfigStat.b0 }}次)</div>
                                <div class="title-bg"></div>
                            </div>
                            <div class="data-row2">
                                <div class="data-row2-col">
                                    <div class="s-text">本月</div>
                                    <div class="s-number">{{ towerConfigStat.b1 }}</div>
                                </div>
                                <div class="data-row2-col">
                                    <div class="s-text">累计</div>
                                    <div class="s-number">{{ towerConfigStat.b0 }}</div>
                                </div>
                            </div>
                        </el-col>

                        <el-col :span="6">
                            <div class="warning-info-title" style="padding-left: 20px; position: relative; z-index: 9">
                                <div :class="'active'">
                                    超载率({{ getRoudValue(towerConfigStat.b0, towerConfigStat.a0) }})
                                </div>
                                <div class="title-bg"></div>
                            </div>
                            <div class="data-row2">
                                <div class="data-row2-col">
                                    <div class="s-text">本月</div>
                                    <div class="s-number">
                                        {{ getRoudValue(towerConfigStat.b1, towerConfigStat.a1) }}
                                    </div>
                                </div>
                                <div class="data-row2-col">
                                    <div class="s-text">累计</div>
                                    <div class="s-number">
                                        {{ getRoudValue(towerConfigStat.b0, towerConfigStat.a0) }}
                                    </div>
                                </div>
                            </div>
                        </el-col>

                        <el-col :span="6">
                            <div class="warning-info-title" style="padding-left: 20px; position: relative; z-index: 9">
                                <div :class="'active'">告警次数(10次)</div>
                                <div class="title-bg"></div>
                            </div>
                            <div class="data-row2">
                                <div class="data-row2-col">
                                    <div class="s-text">本月</div>
                                    <div class="s-number">{{ towerConfigStat.c1 }}</div>
                                </div>
                                <div class="data-row2-col">
                                    <div class="s-text">累计</div>
                                    <div class="s-number">{{ towerConfigStat.c0 }}</div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <div class="dev-info">
                        <div class="safe-tower-crane-max">
                            <div class="safe-tower-crane-min" style="position: relative">
                                <el-row class="row-crane-min">
                                    <el-col :span="2">
                                        <div class="safe-tower-left" @click="safeTowerLeft"></div>
                                    </el-col>
                                    <el-col :span="20">
                                        <div class="safe-tower-content-max">
                                            <transition :name="direction">
                                                <component :is="comName" :value="selDev" :width="360" :height="200"
                                                    :top="55" :left="85" :tHeight="runData.height" :tLoad="runData.load"
                                                    :tRotation="runData.rotation" :tRange="runData.range"
                                                    :tLeanAngleX="runData.leanAngleX" :tLeanAngleY="runData.leanAngleY"
                                                    :tLoadPercent="runData.loadPercent"
                                                    :tMomentPercent="runData.momentPercent"></component>
                                            </transition>
                                        </div>
                                    </el-col>
                                    <el-col :span="2">
                                        <div class="safe-tower-right" @click="safeTowerRight"></div>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="safe-height">
                        <div class="analyse-map">
                            <div class="analyse-title">
                                <div class="analyse-text">正在发生</div>
                                <div class="analyse-equipment">塔机监测</div>
                            </div>
                            <div class="afoot-content safe-afoot-content">
                                <div class="afoot-overflow safe-afoot-overflow" id="afootOverflow">
                                    <div v-if="warningData.length == 0" class="not-data">
                                        暂无预警数据
                                    </div>

                                    <div v-if="warningData.length > 0" class="quality-table special-table scroll"
                                        style="padding:0px;" :key="tbHeight">
                                        <el-table :data="warningData" class="mytable"
                                            style="width: 100%;background: transparent;" :height="tbHeight"
                                            ref="fbsubordinateUnit">
                                            <el-table-column prop="createTime" label="发送时间"></el-table-column>
                                            <el-table-column label="预警类型">
                                                <template slot-scope="scope">
                                                    <div class="tag-group">
                                                        <template v-for="(item, idx) in dicts">
                                                            <el-tag :key="idx"
                                                                v-if="dic(item.value, scope.row.warnings)" type="danger"
                                                                effect="dark">
                                                                {{ item.label }}
                                                            </el-tag>
                                                        </template>
                                                    </div>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="analyse-map">
                            <div class="analyse-title analyse_title_blue">
                                <div class="analyse-text">力矩曲线</div>
                            </div>
                            <div class="safe-moment">
                                <my-chart :key="itemChartKey1" id="project-tower-crane-item2" width="100%" height="100%"
                                    :render="o => renderDataItem2(o)"></my-chart>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>

            <el-row class="dev-info-list">
                <el-col :span="4" class="dev-info-item" v-for="(it, idx) in devBottomInfo" :key="idx">
                    <div class="info-item-content">
                        <div class="row-1">
                            <span class="sp-title">{{ it.title }}</span>
                            <svg-icon v-if="idx == 0" icon-class="meter1"></svg-icon>
                            <svg-icon v-if="idx == 1" icon-class="meter2"></svg-icon>
                            <svg-icon v-if="idx == 2" icon-class="meter3"></svg-icon>
                            <svg-icon v-if="idx == 3" icon-class="meter4"></svg-icon>
                            <svg-icon v-if="idx == 4" icon-class="meter5"></svg-icon>
                            <svg-icon v-if="idx == 5" icon-class="meter6"></svg-icon>
                        </div>
                        <div class="row-scale">
                            <div class="row-scale-ctx">
                                <div v-for="i in 10" :key="i" class="scale-item"></div>
                            </div>
                            <span class="sp-data1 sp-data sp-sc">报警:{{ it.data1 }}</span>
                            <span class="sp-data2 sp-data sp-sc" v-if="it.data2 >= 5" :style="calcTop(it)">报警:{{
                                it.data2 }}</span>
                            <span class="sp-sc2 sp-sc">{{ it.scale2 }}</span>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-col>
    </div>
</template>

<script>
import debounce from "lodash.debounce";
import "@/components/tower-crane-value-1";
import "@/components/tower-crane-value-2";
export default {
    data() {
        return {
            tbHeight: 290,
            itemChartKey1: 0,
            chart1Key: 0,
            chart1Height: '200px',
            dpi: '',
            selProject: null,
            index: 0,
            towerConfigView: [],
            towerConfigList: [],
            towerConfigStat: { a0: 0, b0: 0, c0: 0, a1: 0, b1: 0, c1: 0 },
            runData: {
                height: "0",
                range: "0",
                rotation: "0",
                load: "0",
                windSpeed: "0",
                leanAngleX: "0",
                leanAngleY: "0",
                loadPercent: "0",
                momentPercent: "0",
                windSpeedPercent: "0",
                warnings: null,
            },
            selDev: {},
            devBottomInfo: [
                { title: "幅度", data1: 0, data2: 0, scale1: "0", scale2: "0m" },
                { title: "风速", data1: 0, data2: 0, scale1: "0", scale2: "0m" },
                { title: "吊重", data1: 0, data2: 0, scale1: "0", scale2: "0m" },
                { title: "倾角", data1: 0, data2: 0, scale1: "0", scale2: "0m" },
                { title: "转角", data1: 0, data2: 0, scale1: "0", scale2: "0m" },
                { title: "高度", data1: 0, data2: 0, scale1: "0", scale2: "0m" },
            ],
            direction: "right",
            comName: "tower-crane-value-1",
            warningData: [],
            momentData: {},
            forIndex: 0,
            warningInterval: undefined,
            countvwInterval: undefined,
            towerTotalNum: 0,
            dept: null,
            prjs: [],
            project: null,
            dicts: [],
        }
    },
    mounted() {
        window.safetyApp = this;
        this.$store.dispatch('ChangeNav', 304);
        this.$bus.$on('projectChange', prj => {
            this.selProject = prj;
            this.init();
        });
        this.selProject = this.$store.getters.selProject;
        this.init();
        this.dpi = this.$dpi();
        this.resize();
        window.addEventListener("resize", () => {
            if (this.dpi != this.$dpi()) {
                this.dpi = this.$dpi();
                this.resize();
            }

        });
        this.$api.dict("ssp_proble_sub_type").then((d) => {
            this.dangerTypeDict = d || [];
        });
        this.momentData = JSON.parse(
            '{"point":[[null,null]],"dataX":[15,20,25,30,35,40,45,50,55,60],"dataY":[3,3,3,3,2.59,2.2,1.9,1.66,1.46,1.3]}'
        );
    },
    created() {
        this.$api.dict("device_tower_warning").then((d) => {
            this.dicts = d || [];
            console.log("---->", this.dicts);
        });
    },
    methods: {
        resize() {
            this.chart1Key++;
            this.itemChartKey1++;
            let is1K = this.$dpi() == "1K";
            let is2K = this.$dpi() == "2K";
            this.tbHeight = is1K ? 290 : is2K ? 410 : 770;
        },
        init() {
            if (!this.selProject) {
                return;
            }
            this.initTowerConfigView();
            this.initTowerConfigList();
        },
        getRoudValue(a, b) {
            if (a > 0) {
                return (parseFloat(a / b) * 100).toFixed(1) + "%";
            } else {
                return "0%";
            }
        },
        initTowerConfigView() {
            let postData = {
                comdId: this.selProject.comId,
                projectId: this.selProject.id,
            };
            this.$api.tower.findTowerConfigGroupOnline(postData).then((d) => {
                let list = [];
                let total = 0;
                if (d.data && d.data.length > 0) {
                    d.data.forEach((datum) => {
                        total += datum.total;
                        if (datum.online == 1) {
                            list.push({ text: "在线数量", value: datum.total });
                            if (d.data.length == 1) {
                                list.push({ text: "离线数量", value: 0 });
                            }
                        } else {
                            list.push({ text: "离线数量", value: datum.total });
                        }
                    });
                }
                this.towerTotalNum = total;
                this.towerConfigView = list;
            });

        },
        initTowerConfigList() {
            let postData = {
                comdId: this.selProject.comId,
                projectId: this.selProject.id,
            };
            this.$api.tower.findTowerConfigListByProjectId(postData).then((d) => {
                this.towerConfigList = d.data || [];
                if (d.data.length > 0) {
                    this.initSelDev(this.index);
                } else {
                    this.runData.height = "0";
                    this.runData.range = "0";
                    this.runData.rotation = "0";
                    this.runData.load = "0";
                    this.runData.windSpeed = "0";
                    this.runData.leanAngleX = "0";
                    this.runData.leanAngleY = "0";
                    this.runData.loadPercent = "0";
                    this.runData.momentPercent = "0";
                    this.runData.windSpeedPercent = "0";
                    this.runData.warnings = null;
                    this.devBottomInfo[0].data1 = 0;
                    this.devBottomInfo[1].data1 = 0;
                    this.devBottomInfo[2].data1 = 0;
                    this.devBottomInfo[3].data1 = 0;
                    this.devBottomInfo[4].data1 = 0;
                    this.devBottomInfo[5].data1 = 0;
                    this.devBottomInfo[0].data2 = 0;
                    this.devBottomInfo[1].data2 = 0;
                    this.devBottomInfo[2].data2 = 0;
                    this.devBottomInfo[3].data2 = 0;
                    this.devBottomInfo[4].data2 = 0;
                    this.devBottomInfo[5].data2 = 0;
                    this.towerConfigStat.a0 = 0;
                    this.towerConfigStat.b0 = 0;
                    this.towerConfigStat.c0 = 0;
                    this.towerConfigStat.a1 = 0;
                    this.towerConfigStat.b1 = 0;
                    this.towerConfigStat.c1 = 0;
                    this.warningData = [];
                    this.selDev = { deviceName: "未找到设备", frontBrachium: 0, afterBrachium: 0 };
                }
            });

        },
        dic(ds, value) {
            if (value.split(",").indexOf(ds) > -1) {
                return true;
            } else {
                return false
            }
        },
        initSelDev(n) {
            this.selDev = this.towerConfigList[this.index];
            this.initLimitData();
            this.initRunData();
            //正在发生 定时器
            clearInterval(this.warningInterval);
            this.warningInterval = setInterval(this.initRunData, 60000);
            this.initCountData();
            clearInterval(this.countvwInterval);
            this.countvwInterval = setInterval(this.initCountData, 60000);
        },
        initCountData() {
            this.$api.tower.findTowerStatisticsView(this.selDev.deviceSn).then((d) => {
                this.towerConfigStat = d.data || [];
            });
        },
        initLimitData() {
            this.$api.tower.selectDevTowerDataLimitList(this.selDev.deviceSn).then((d) => {
                this.devBottomInfo[0].data2 = d.data[0].rangeLimitStart;
                this.devBottomInfo[1].data2 = d.data[0].windSpeedWarning;
                this.devBottomInfo[2].data2 = d.data[0].loadWarning;
                this.devBottomInfo[3].data2 = d.data[0].leanWarning;
                this.devBottomInfo[4].data2 = d.data[0].rotationLimitStart;
                this.devBottomInfo[5].data2 = d.data[0].highLimitWarning;
            });
        },
        initRunData() {
            this.$api.tower.selectDevTowerDataRunList(this.selDev.deviceSn).then((d) => {
                if (d.data.length > 0) {
                    this.runData.height = d.data[0].height;
                    this.runData.range = d.data[0].range;
                    this.runData.rotation = d.data[0].rotation;
                    this.runData.load = d.data[0].load;
                    this.runData.windSpeed = d.data[0].windSpeed;
                    this.runData.leanAngleX = d.data[0].leanAngleX;
                    this.runData.leanAngleY = d.data[0].leanAngleY;
                    this.runData.loadPercent = d.data[0].loadPercent;
                    this.runData.momentPercent = d.data[0].momentPercent;
                    this.runData.windSpeedPercent = d.data[0].windSpeedPercent;
                    this.runData.warnings = d.data[0].warnings;
                    this.devBottomInfo[0].data1 = d.data[0].range;
                    this.devBottomInfo[1].data1 = d.data[0].windSpeed;
                    this.devBottomInfo[2].data1 = d.data[0].load;
                    this.devBottomInfo[3].data1 = d.data[0].leanAnglePercent
                        ? d.data[0].leanAnglePercent
                        : 0;
                    this.devBottomInfo[4].data1 = d.data[0].rotation;
                    this.devBottomInfo[5].data1 = d.data[0].height;
                }
                this.warningData = d.data || [];
            });
        },
        calcTop(d) {
            let tmp = 100 - (d.data2 * 100.0) / d.data1;
            return `top:calc(20px + ${tmp > 78 ? 78 : tmp}%)`;
        },
        getRoudValue(a, b) {
            if (a > 0) {
                return (parseFloat(a / b) * 100).toFixed(1) + "%";
            } else {
                return "0%";
            }
        },
        safeTowerLeft() {
            this.direction = "left";
            this.automaticRoll();
        },
        safeTowerRight() {
            //切换动画
            this.direction = "right";
            this.automaticRoll();
        },
        automaticRoll() {
            //切换动画
            if (this.direction == "right") {
                if (this.index == this.towerConfigList.length - 1) {
                    this.index = 0;
                } else {
                    this.index = this.index + 1;
                }
            } else {
                if (this.index == 0) {
                    this.index = this.towerConfigList.length - 1;
                } else {
                    this.index = this.index - 1;
                }
            }
            this.selDev = this.towerConfigList[this.index];
            var height = $(".list-for").innerHeight();
            $("#listMin").animate({ scrollTop: height * this.index + "px" });
        },
        onTowerCraneList(n) {
            this.index = n;
            this.selDev = this.towerConfigList[this.index];
            this.initLimitData();
            this.initCountData();
            //切换动画
            this.direction = "right";
        },
        safeAutomaticRoll() {
            var height = $(".safe-afoot-overflow").innerHeight();
            console.log(height);
            if (this.forIndex == this.warningData.length) {
                this.forIndex = 0;
            } else {
                this.forIndex = this.forIndex + 1;
            }
            $("#afootOverflow").animate({ scrollTop: height * this.forIndex + "px" });
        },
        warningListMinMouseover() {
            clearInterval(this.warningInterval);
        },
        warningListMinMouseout() {
            this.warningInterval = setInterval(this.safeAutomaticRoll, 10000);
        },
        renderDataItem2(o) {
            let data = this.momentData;
            var color = '#20bc00'
            var Xmax = Math.max.apply(null, data.dataX);
            var Ymax = Math.max.apply(null, data.dataY);
            let is1K = this.$dpi() == "1K";
            let is2K = this.$dpi() == "2K";

            let option = {
                tooltip: {
                    position: "top",
                    formatter: function (params) {
                        var fd = params.data[0];
                        var dz = params.data[1]
                        res = '<div style="padding: 5px 10px;">' +
                            '<div style="padding-bottom: 5px;">幅度：<span>' + fd + '</span> m</div>' +
                            '<div>吊重：<span>' + dz + '</span> t</div>' +
                            '</div>'
                        return res
                    },
                },
                grid: {
                    top: "20%",
                    right: "15%",
                    left: "4%",
                    bottom: "5%",
                    containLabel: true
                },
                xAxis: [
                    {
                        type: "value",
                        name: '幅度/m',
                        max: 60,
                        nameTextStyle: {
                            color: "#c5d9fc",
                            fontSize: is1K ? 12 : is2K ? 14 : 24
                        },
                        splitLine: {
                            //去除网格线
                            show: false,
                        },
                        axisTick: { show: false },
                        axisLabel: {
                            //坐标轴刻度标签的相关设置
                            textStyle: {
                                color: "#c5d9fc",
                                margin: 20,
                                fontSize: 30
                            },
                        },

                    },
                    {
                        type: "category",
                        boundaryGap: false,
                        position: "bottom",
                        axisLine: {
                            //坐标轴轴线相关设置。数学上的x轴
                            show: true,
                            lineStyle: {
                                color: "#194e92",
                                type: "dashed",
                            },
                        },
                        axisLabel: {
                            show: false,
                            //坐标轴刻度标签的相关设置
                            textStyle: {
                                color: "#c5d9fc",
                                margin: 20,
                                fontSize: 30
                            },
                        },
                        data: data.dataX,
                    },
                ],
                yAxis: [
                    {
                        name: '吊重/t',
                        nameTextStyle: {
                            color: "#c5d9fc",
                            fontSize: is1K ? 12 : is2K ? 14 : 24
                        },
                        max: Ymax + 1,
                        type: "value",
                        splitNumber: 7,
                        splitLine: {
                            show: false,
                        },
                        axisLine: {
                            //坐标轴轴线相关设置。数学上的x轴
                            show: true,
                            lineStyle: {
                                color: "#194e92",
                                type: "dashed",
                            },
                        },
                        axisLabel: {
                            margin: 20,
                            textStyle: {
                                color: "#c5d9fc",
                                fontSize: is1K ? 12 : is2K ? 14 : 18
                            },
                        },
                        axisTick: { show: false },
                    },
                ],
                series: [
                    {
                        name: "吊重",
                        type: "effectScatter",
                        rippleEffect: { // 设置涟漪动画样式
                            color: 'purple',  // 涟漪颜色,默认为散点自身颜色
                            brushType: 'fill', // 动画方式,全填充或只有线条,'stroke' 'fill'
                            period: 2,   //动画周期
                            scale: '3',  //涟漪规模
                        },
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                        symbolSize: 15, //散点的固定大小                       
                        itemStyle: {
                            color: color,

                        },
                        data: data.point,
                    },
                    {
                        type: "line",
                        symbol: "none",
                        smooth: true,
                        xAxisIndex: 1,
                        yAxisIndex: 0,
                        lineStyle: {
                            normal: {
                                width: 3,
                                color: "#5968db", // 线条颜色
                            },
                        },
                        areaStyle: {
                            //区域填充样式
                            normal: {
                                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        { offset: 0, color: "rgb(25,43,115,0.9)" },
                                        { offset: 0.7, color: "rgba(25,43,115, 0)" },
                                    ],
                                    false
                                ),

                                shadowColor: "rgba(25,43,115, 1)", //阴影颜色
                            },
                        },
                        data: data.dataY,
                    },
                ],
            };
            return option;
        }
    }
}
</script>

<style lang="less">
.project-tower-crane {
    .screen-one-3-1 {
        height: calc(100% - 20px) !important;
    }

    .tower-total {
        .equipment-list-min {
            .czz-number-img {
                display: flex;
                justify-content: center;
                align-items: center;

                .svg-icon {
                    width: 30px;
                    height: 30px;
                }

                &.czz-number-img-blue {
                    .svg-icon {
                        fill: #1e90ff
                    }
                }

                &.czz-number-img-green {
                    .svg-icon {
                        fill: ForestGreen
                    }
                }
            }

            .p-label {
                font-size: 16px;
            }

            .span-num {
                font-size: 32px;
            }

            .span-unit {
                font-size: 12px;
            }
        }
    }

    .left-data-list {
        height: calc(100% - 283px) !important;

        .drv-list {
            padding: 0px 12px;
            max-height: calc(100% - 70px);
            overflow-y: auto;

            .drv-item {
                border-bottom: dotted 1px #429fff;
                cursor: pointer;

                &.active {
                    .item-content {
                        background-color: #42a1ff60;
                    }
                }

                &:first-child {
                    .item-content {
                        margin-top: 0px;
                    }
                }

                .item-content {
                    background-color: #429fff25;
                    margin: 10px;
                    padding: 10px;
                }

                .dev-row1 {
                    display: flex;
                    align-items: center;

                    .survey_content {
                        .survey_content_img {
                            .svg-icon {
                                width: 30px;
                                height: 30px;
                                fill: #1e90ff;
                            }
                        }
                    }

                }

                .dev-row2 {
                    display: grid;
                    grid-template-columns: 50% 50%;

                    .sp-tel {
                        display: inline-block;
                        width: 107px;
                        word-wrap: break-word;
                        vertical-align: middle;
                    }

                    .dev-row2-col {
                        display: flex;
                        align-items: center;
                    }
                }

                .data-row {
                    padding-left: 12px;
                    line-height: 30px;
                    color: rgba(255, 255, 255, 0.5);
                    flex-grow: 1;
                    display: flex;

                    span {
                        display: flex;

                        &:last-child {
                            flex-grow: 1;
                            margin-left: 4px;
                            color: #79bbe3;
                        }

                        &.is-offline {
                            color: burlywood;
                        }

                        &.is-online {
                            color: #63f8bc;
                        }
                    }
                }
            }
        }
    }

    .main-content {
        height: calc(100% - 270px);

        .total-data {
            .data-row2 {
                margin-top: 10px;
                display: grid;
                grid-template-columns: 50% 50%;

                .data-row2-col {
                    text-align: center;
                    line-height: 40px;

                    .s-text {
                        color: #497deb;
                    }

                    .s-number {
                        color: #429fff;
                        font-weight: bold;
                    }
                }
            }
        }

        .dev-info {
            height: calc(100% - 150px);

            .safe-tower-crane-max {
                height: 100%;
                display: flex;
                align-items: center;

                .safe-tower-content-max {
                    display: flex;
                    align-items: center;
                }

                .safe-tower-crane-min {
                    flex-grow: 1;
                    position: relative;

                    .row-crane-min {
                        display: flex;
                        align-items: center;
                    }
                }
            }
        }

        .analyse-map {
            .safe-afoot-overflow {
                height: auto;
            }

            .safe-afoot-content {
                height: 270px;
            }

            .safe-moment {
                height: 260px;
            }
        }
    }

    .dev-info-list {
        height: 270px;
        margin-top: 10px;

        .dev-info-item {
            .info-item-content {
                border: 1px solid transparent;
                border-image: linear-gradient(to bottom, #f7f1f100, #3473c3d4);
                border-image-slice: 1;
                height: 100%;

                .row-1 {
                    position: relative;

                    .sp-title {
                        position: relative;
                        left: 12px;
                        color: #ccd7e5d4;
                        font-size: 12px;
                    }

                    .svg-icon {
                        position: absolute;
                        right: 12px;
                        fill: #9c1ef1 !important;
                        width: 20px !important;
                        height: 20px !important;

                        * {
                            fill: #9c1ef1 !important;
                        }
                    }
                }

                .row-scale {
                    height: calc(100% - 24px);
                    position: relative;
                    text-align: center;

                    .row-scale-ctx {
                        height: 100%;
                        display: inline-block;
                        width: 30%;

                        .scale-item {
                            margin: 22% 0px;
                            height: 4%;
                            background: #002d8d94;
                            border-radius: 5%;
                        }
                    }

                    .sp-sc {
                        position: absolute;
                        bottom: 2px;
                        left: 50%;
                        font-size: 12px;
                        color: #72b5f9;
                    }

                    .sp-sc1 {
                        margin-left: calc(-15% - 20px);
                    }

                    .sp-sc2 {
                        margin-left: calc(15% + 10px);
                    }

                    .sp-data {
                        text-align: right;
                        margin-left: calc(-15% - 60px);
                    }

                    .sp-data1 {
                        top: 10px;
                    }
                }
            }

            padding: 12px;
            height: 100%;
        }
    }

    @media (min-width: 1921px) and (max-width: 2560px) {
        .warning-info-title .active {
            background-size: 10px 20px;
        }

        .tower-total {
            margin-bottom: 20px;

            .equipment-list-min {
                .czz-number-img {
                    width: 100px;
                    height: 100px;

                    .svg-icon {
                        width: 50px;
                        height: 50px;
                    }

                }

                .p-label {
                    font-size: 24px;
                }

                .span-num {
                    font-size: 42px;
                }

                .span-unit {
                    font-size: 18px;
                }
            }
        }

        .left-data-list {
            height: calc(100% - 283px) !important;

            .warning-info-title {
                font-size: 20px;
            }

            .drv-list {
                padding: 0px 12px;
                max-height: calc(100% - 80px);

                .drv-item {
                    &:first-child {
                        .item-content {
                            margin-top: 0px;
                        }
                    }

                    .item-content {
                        margin: 10px;
                        padding: 10px;
                    }

                    .dev-row1 {
                        .survey_content {
                            .survey_content_img {
                                width: 120px;
                                height: 120px;
                                background-size: 120px 60px;

                                .svg-icon {
                                    width: 40px;
                                    height: 40px;
                                    margin-top: 40px;
                                }
                            }
                        }
                    }

                    .dev-row2 {
                        grid-template-columns: 50% 50%;

                        .sp-tel {
                            width: 107px;
                        }
                    }

                    .data-row {
                        padding-left: 12px;
                        line-height: 30px;

                        span {
                            font-size: 20px;

                            &:last-child {
                                margin-left: 4px;
                            }
                        }

                    }
                }
            }
        }

        .main-content {
            height: calc(100% - 360px);

            .total-data {
                .warning-info-title {
                    font-size: 20px;
                }

                .data-row2 {
                    margin-top: 10px;
                    font-size: 20px;

                    .data-row2-col {
                        line-height: 40px;
                    }
                }
            }

            .dev-info {
                height: calc(100% - 150px);

                .safe-tower-content-max {
                    width: 90%;
                    height: 700px;

                    .safe-tower-content-title {
                        span {
                            font-size: 30px;
                        }
                    }

                    .safe-tower-content-data {

                        .safe-tower-icon {
                            transform: scale(1.5);
                            position: relative;
                            left: 60px;
                            top: 110px;
                        }

                        .safe-tower-content-data-list {
                            font-size: 20px;
                            padding: 30px 5px;
                        }
                    }

                }


            }

            .analyse-map {
                .safe-afoot-content {
                    height: 400px;
                }

                .analyse-title {
                    .analyse-text {
                        font-size: 20px;
                    }
                }

                .quality-table {
                    .cell {
                        font-size: 18px;

                        .tag-group {
                            .el-tag {
                                font-size: 18px;
                            }
                        }
                    }
                }

                .safe-moment {
                    height: 360px;
                }
            }
        }

        .dev-info-list {
            height: 360px;
            margin-top: 10px;

            .dev-info-item {
                .info-item-content {
                    .row-1 {
                        .sp-title {
                            left: 12px;
                            font-size: 18px;
                        }

                        .svg-icon {
                            right: 12px;
                            width: 30px !important;
                            height: 30px !important;
                        }
                    }

                    .row-scale {
                        .row-scale-ctx {
                            width: 30%;

                            .scale-item {
                                margin: 22% 0px;
                                height: 4%;
                            }
                        }

                        .sp-sc {
                            bottom: 2px;
                            left: 50%;
                            font-size: 16px;
                        }

                        .sp-data {
                            text-align: right;
                            margin-left: calc(-15% - 80px);
                            font-size: 14px;
                        }

                        .sp-data1 {
                            top: 10px;
                            font-size: 16px;
                        }
                    }
                }

                padding: 12px;
                height: 100%;
            }
        }
    }

    @media (min-width: 2561px) {
        .warning-info-title .active {
            background-size: 16px 30px;
        }

        .tower-total {
            margin-bottom: 40px;

            .equipment-list-min {
                .czz-number-img {
                    width: 160px;
                    height: 160px;

                    .svg-icon {
                        width: 80px;
                        height: 80px;
                    }

                }

                .p-label {
                    font-size: 32px;
                }

                .span-num {
                    font-size: 52px;
                }

                .span-unit {
                    font-size: 24px;
                }
            }
        }

        .left-data-list {
            height: calc(100% - 283px) !important;

            .warning-info-title {
                font-size: 30px;
            }

            .drv-list {
                padding: 0px 12px;
                max-height: calc(100% - 190px);

                .drv-item {
                    &:first-child {
                        .item-content {
                            margin-top: 0px;
                        }
                    }

                    .item-content {
                        margin: 10px;
                        padding: 10px;
                    }

                    .dev-row1 {
                        .survey_content {
                            .survey_content_img {
                                width: 180px;
                                height: 180px;
                                background-size: 180px 90px;

                                .svg-icon {
                                    width: 60px;
                                    height: 60px;
                                    margin-top: 60px;
                                }
                            }
                        }
                    }

                    .dev-row2 {
                        grid-template-columns: 50% 50%;

                        .sp-tel {
                            width: 107px;
                        }
                    }

                    .data-row {
                        padding-left: 12px;
                        line-height: 50px;

                        span {
                            font-size: 28px;

                            &:last-child {
                                margin-left: 4px;
                            }
                        }

                    }
                }
            }
        }

        .main-content {
            height: calc(100% - 540px);

            .total-data {
                .warning-info-title {
                    font-size: 30px;
                }

                .data-row2 {
                    margin-top: 10px;
                    font-size: 30px;

                    .data-row2-col {
                        line-height: 60px;
                    }
                }
            }

            .dev-info {
                height: calc(100% - 200px);

                .safe-tower-content-max {
                    width: 90%;
                    height: 1200px;

                    .safe-tower-content-title {
                        span {
                            font-size: 40px;
                        }
                    }

                    .safe-tower-content-data {

                        .safe-tower-icon {
                            transform: scale(2.5);
                            position: relative;
                            left: 200px;
                            top: 250px;
                        }

                        .safe-tower-content-data-list {
                            font-size: 30px;
                            padding: 60px 5px;
                        }
                    }

                }
            }

            .analyse-map {
                .safe-afoot-content {
                    height: 760px;
                }

                .analyse-title {
                    .analyse-text {
                        font-size: 30px;
                    }
                }

                .quality-table {
                    .cell {
                        font-size: 24px;

                        .tag-group {
                            .el-tag {
                                font-size: 20px;
                            }
                        }
                    }
                }

                .safe-moment {
                    height: 540px;
                }
            }
        }

        .dev-info-list {
            height: 540px;
            margin-top: 10px;

            .dev-info-item {
                .info-item-content {
                    .row-1 {
                        .sp-title {
                            left: 12px;
                            font-size: 18px;
                        }

                        .svg-icon {
                            right: 12px;
                            width: 30px !important;
                            height: 30px !important;
                        }
                    }

                    .row-scale {
                        .row-scale-ctx {
                            width: 30%;

                            .scale-item {
                                margin: 22% 0px;
                                height: 4%;
                            }
                        }

                        .sp-sc {
                            bottom: 2px;
                            left: 50%;
                            font-size: 16px;
                        }

                        .sp-data {
                            text-align: right;
                            margin-left: calc(-15% - 80px);
                            font-size: 14px;
                        }

                        .sp-data1 {
                            top: 10px;
                            font-size: 16px;
                        }
                    }
                }

                padding: 12px;
                height: 100%;
            }
        }
    }

}
</style>