<template>
    <div class="fullHeight">
        <div class="top bg-white margin-bottom_0">
            <div class="topLeft whiteBlock2">
                <div class="blockInner">
                    <!-- 数据统计 -->
                    <div class="box-between">
                        <div>检查统计</div>
                        <el-date-picker value-format="yyyy-MM-dd" v-model="examineTime" type="daterange"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="mini">
                        </el-date-picker>
                    </div>
                    <div class="show-pointer">
                        <div class="green-bg">
                            <div class="green-num">{{ examineInfo.totalNum }}</div>
                            <div>检查总数</div>
                        </div>
                        <div class="org-bg">
                            <div class="org-num">{{ examineInfo.dangerNum }}</div>
                            <div>隐患总数</div>
                        </div>
                        <div class="red-bg">
                            <div class="red-num">{{ examineInfo.greatFaultLevelNum }}</div>
                            <div>重大隐患</div>
                        </div>
                        <div class="red-bg2">
                            <div class="red-num">{{ examineInfo.overdueNotCloseNum }}</div>
                            <div>超期未闭合</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="topRight whiteBlock3">
                <div class="blockInner">
                    <!-- 分包单位 -->
                    <div class="box-between">
                        <div>分包单位质量隐患统计</div>

                        <div class="flex">
                            <!-- <el-radio-group v-model="radio">
                                <el-radio :label="3">分包单位</el-radio>
                                <el-radio :label="6">队伍</el-radio>
                                <el-radio :label="9">班组</el-radio>
                            </el-radio-group> -->
                            <el-date-picker value-format="yyyy-MM-dd" v-model="enterpriseTime" type="daterange"
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="mini">
                            </el-date-picker>
                            <!-- <div class="detail-right">详情 <i class="el-icon-arrow-right"></i></div> -->
                        </div>
                    </div>
                    <div style="position: relative;height:100%">
                        <div v-show="enterpriseList.length > 0" class="chart" ref="BarGraphChartOne"></div>
                        <div v-if="enterpriseList.length == 0">
                            <div class="placeholderBox">
                                <img src="@/assets/images/noData.png" alt="" />
                                <p>暂无数据</p>
                            </div>
                        </div>
                    </div>

                    <!-- <div class="chart" ref="carTypeChart"></div> -->
                </div>
            </div>
        </div>
        <div class="top bg-white top-plus">
            <div class="topLeft whiteBlock4">
                <div class="blockInner">
                    <!-- 数据统计 -->
                    <div class="box-between">
                        <div>风险统计</div>
                    </div>
                    <div class="identification-info">
                        <div>{{ examineInfo2.dangerNum }}</div>
                        <div class="flex">
                            <img width="108px" height="90px" src="@/assets/images/safetyAnalysis/riskIdentLeft.png"
                                alt="">
                            <div class="flex-center relative">
                                <div class="absolute">风险总数</div>
                                <img width="130px" height="90px"
                                    src="@/assets/images/safetyAnalysis/riskIdentCenter.png" alt="">
                            </div>
                            <img width="108px" height="90px" src="@/assets/images/safetyAnalysis/riskIdentRight.png"
                                alt="">
                        </div>
                        <div class="identification-bottom">
                            <div class="bg-ff0 color-white">
                                <div>{{ examineInfo2.greatFaultLevelNum }}</div>
                                <div>重大风险</div>
                            </div>
                            <div class="bg-ff9 color-white">
                                <div>{{ examineInfo2.largerRiskNum }}</div>
                                <div>较大风险</div>
                            </div>
                            <div class="bg-fff">
                                <div>{{ examineInfo2.generalRiskNum }}</div>
                                <div>一般风险</div>
                            </div>
                            <div class="bg-00f color-white">
                                <div class="red-num">{{ examineInfo2.lowRiskNum }}</div>
                                <div>低风险</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="topLeft whiteBlock4">
                <div class="blockInner">
                    <!-- 隐患分析 -->
                    <div class="box-between">
                        <div>隐患分析</div>
                    </div>
                    <div style="position: relative;height:100%">
                        <div class="chart" ref="radarCharts"></div>
                        <div v-if="!examineInfo2.investigateNum">
                            <div class="placeholderBox">
                                <img src="@/assets/images/noData.png" alt="" />
                                <p>暂无数据</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="topRight whiteBlock3">
                <div class="blockInner">
                    <!-- 分包单位 -->
                    <div class="box-between">
                        <div>风险走势图（{{ riskCount }}{{ riskCount == '-' ? '' : '%' }}<span :style="riskCount > 0 ? 'color:green' : 'color:red'">{{
                            riskCount > 0 ? '↑' : '↓' }}</span>比上月（{{ riskName }}））</div>
                        <!-- <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" size="mini">
                        </el-date-picker> -->
                    </div>
                    <div style="position: relative;height:100%">
                        <div class="chart" ref="lineCharts"></div>
                        <div v-if="riskList.length == 0">
                            <div class="placeholderBox">
                                <img src="@/assets/images/noData.png" alt="" />
                                <p>暂无数据</p>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="chart" ref="carTypeChart"></div> -->
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="topLeft whiteBlock3 bg-white">
                <div class="blockInner">
                    <div class="box-between">
                        <div>隐患数量展示</div>
                        <el-date-picker value-format="yyyy-MM-dd" v-model="dangerLevelTime" type="daterange"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="mini">
                        </el-date-picker>
                    </div>
                    <div class="flex sub-container_box">
                        <div class="sub-container">
                            <div>隐患超期未整改</div>
                            <div>重大隐患超期未整改<span>{{ this.dangerLevelInfo1.data ? this.dangerLevelInfo1.data[0].count :
                                '0'
                                    }}</span>个，占比<span>{{ this.dangerLevelInfo1.data ?
                                        this.dangerLevelInfo1.data[0].percent : '0' }}</span>%</div>
                            <div>严重隐患超期未整改<span>{{ this.dangerLevelInfo1.data ? this.dangerLevelInfo1.data[1].count :
                                '0'
                                    }}</span>个，占比<span>{{ this.dangerLevelInfo1.data
                                        ? this.dangerLevelInfo1.data[1].percent : '0' }}</span>%</div>
                            <div class="chart" ref="annulusChartOne"></div>
                        </div>
                        <div class="sub-container">
                            <div>未销项隐患</div>
                            <div>重大隐患未销项<span>{{ this.dangerLevelInfo2.data ? this.dangerLevelInfo2.data[0].count : '0'
                                    }}</span>个，占比<span>{{ this.dangerLevelInfo2.data ?
                                        this.dangerLevelInfo2.data[0].percent : '0' }}</span>%</div>
                            <div>严重隐患未销项<span>{{ this.dangerLevelInfo2.data ? this.dangerLevelInfo2.data[0].count : '0'
                                    }}</span>个，占比<span>{{ this.dangerLevelInfo2.data ?
                                        this.dangerLevelInfo2.data[0].percent : '0' }}</span>%</div>
                            <div class="chart" ref="annulusChartTwo"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="topRight whiteBlock2 bg-white">
                <div class="blockInner">
                    <!-- 责任区域问题统计 -->
                    <div class="box-between">
                        <div>责任区域问题统计TOP10</div>
                        <div class="flex align-center">
                            <div>
                                <el-radio-group v-model="inspectionRadio" size="small">
                                    <el-radio-button label="">全部</el-radio-button>
                                    <el-radio-button label="1">重大</el-radio-button>
                                    <el-radio-button label="2">较大</el-radio-button>
                                    <el-radio-button label="3">一般</el-radio-button>
                                    <el-radio-button label="4">低</el-radio-button>
                                </el-radio-group>
                            </div>
                            <!-- <i class="el-icon-full-screen"></i> -->
                        </div>
                    </div>
                    <div class="sub-container_box">
                        <div style="position: relative;height:100%">
                            <div class="chart" ref="barGraphFallCharts"></div>
                            <div v-if="inspectionList.length == 0">
                                <div class="placeholderBox">
                                    <img src="@/assets/images/noData.png" alt="" />
                                    <p>暂无数据</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import echarts from 'echarts4';

import {
    getSelectQualityStatisticsNumApi,
    getStatsByEnterpriseApi,
    getRiskChartApi,
    getCountDangerLevelApi,
    getcountQualityInspectionRecordRegionApi
} from "@/assets/js/api/quality";
export default {
    data() {
        return {
            pagInfo: {
                pageNo: 1, //页数
                pageSize: 10, //条数
                total: 0, //总条数
            },
            carCompareList: [],
            totalNum: {
                innum: 0,
                outnum: 0,
                temporarynum: 0,
                whitenum: 0,
            },
            value1: "",
            radio: "",
            radio3: "",

            projectSn: "",
            examineTime: "",
            examineInfo: {
                dangerNum: 0,
                totalNum: 0,
                greatFaultLevelNum: 0,
                overdueNotCloseNum: 0,
            },
            examineInfo2: {
                dangerNum :0,
                generalRiskNum  :0,
                largerRiskNum  :0,
                greatFaultLevelNum :0,
                lowRiskNum:0,
            },
            examineInfoFlag: true,

            enterpriseTime: "",
            enterpriseList: [],
            riskList: [],

            dangerLevelTime: "",
            dangerLevelInfo1: {},
            dangerLevelInfo2: {},

            inspectionRadio: "",
            inspectionList: [],

            riskCount: 0,
            riskName: "暂无",
        };
    },
    mounted() {
        this.getRiskChart();
    },

    watch: {
        examineTime: {
            handler(newVal) {
                console.log(newVal);
                this.getSelectQualityStatisticsNum(newVal);
            },
            immediate: true,
        },
        "enterpriseTime": {
            handler(newVal) {
                console.log(newVal);
                this.getStatsByEnterprise(newVal);
            },
            immediate: true,
        },
        dangerLevelTime: {
            handler(newVal) {
                console.log(newVal);
                this.getCountDangerLevel(newVal, 0, 1);
                this.getCountDangerLevel(newVal, 1, 0);
            },
            immediate: true,
        },
        inspectionRadio: {
            handler(newVal) {
                console.log(newVal);
                this.getcountQualityInspectionRecordRegion();
            },
            immediate: true,
        },
    },
    methods: {
        getSelectQualityStatisticsNum(time) {
            // if(time && time.length > 0 && time && (time[0] == time[1])) {
            //     time[0] = time[0]  + ' 24:00:00'
            //     time[1] = time[1]  + ' 23:59:59'
            // }
            getSelectQualityStatisticsNumApi({
                projectSn: this.$store.state.projectSn,
                inspectStartTime: time && time.length > 0 ? time[0] : "",
                inspectEndTime: time && time.length > 0 ? time[1] : "",
            }).then((res) => {
                if (res.code == 200) {
                    console.log('检查统计', res);
                    this.examineInfo = res.result;
                    if (this.examineInfoFlag) {
                        this.examineInfo2 = res.result;
                        this.radarCharts(this.$refs.radarCharts);
                        this.examineInfoFlag = false;
                    }
                }
            });
        },
        getStatsByEnterprise(time) {
            getStatsByEnterpriseApi({
                projectSn: this.$store.state.projectSn,
                pageNo: 1,
                pageSize: 99999,
                inspectTime_begin: time && time.length > 0 ? time[0] : "",
                inspectTime_end: time && time.length > 0 ? time[1] : "",
            }).then((res) => {
                if (res.code == 200) {
                    console.log('分包单位', res);
                    this.enterpriseList = res.result.records;
                    this.$nextTick(() => {
                        this.barGraphCharts(this.$refs.BarGraphChartOne);
                    })
                }
            });
        },
        // 风险走势图
        getRiskChart() {
            getRiskChartApi({
                projectSn: this.$store.state.projectSn,
            }).then((res) => {
                if (res.code == 200) {
                    console.log('风险走势图', res);

                    this.riskList = res.result;
                    if (this.riskList.length > 0) {
                        // this.riskCount = this.riskList[this.riskList.length - 2].dangerNum == 0 ? (this.riskList[this.riskList.length - 1].dangerNum).toFixed(2) : ((this.riskList[this.riskList.length - 1].dangerNum - this.riskList[this.riskList.length - 2].dangerNum) / this.riskList[this.riskList.length - 2].dangerNum).toFixed(2);
                        this.riskCount = this.riskList[this.riskList.length - 1].monthlyBasis;
                        this.riskName = this.riskList[this.riskList.length - 1].lastMonth;
                    }

                    this.lineCharts(this.$refs.lineCharts);
                    // this.barGraphCharts(this.$refs.BarGraphChartOne);
                }
            });
        },
        // 隐患数量
        getCountDangerLevel(time, isNotQualified, isOverdueRectification) {
            getCountDangerLevelApi({
                projectSn: this.$store.state.projectSn,
                isNotQualified: isNotQualified,
                isOverdueRectification: isOverdueRectification,
                inspectTime_begin: time && time.length > 0 ? time[0] : "",
                inspectTime_end: time && time.length > 0 ? time[1] : "",
            }).then((res) => {
                if (res.code == 200) {
                    console.log('隐患数量展示', res);
                    let arr = res.result.data.length > 0 ? res.result.data : [{ value: 0, name: '重大隐患' },
                    { value: 0, name: '较大隐患' },
                    { value: 0, name: '一般隐患' },
                    { value: 0, name: '低隐患' },]
                    if (isOverdueRectification == 1) {
                        this.dangerLevelInfo1 = res.result;
                        this.annulusChart(this.$refs.annulusChartOne, arr, 0, res.result.count);
                    } else {
                        this.dangerLevelInfo2 = res.result;
                        this.annulusChart(this.$refs.annulusChartTwo, arr, 1, res.result.count);
                    }
                    // this.enterpriseList = res.result.records;
                    // this.barGraphCharts(this.$refs.BarGraphChartOne);
                }
            });
        },
        // 责任区域问题统计
        getcountQualityInspectionRecordRegion(time) {
            getcountQualityInspectionRecordRegionApi({
                projectSn: this.$store.state.projectSn,
                enumType: this.inspectionRadio,
            }).then((res) => {
                if (res.code == 200) {
                    console.log('责任区域问题统计', res);

                    this.inspectionList = res.result;
                    this.barGraphFallCharts(this.$refs.barGraphFallCharts);
                    // this.barGraphCharts(this.$refs.BarGraphChartOne);
                }
            });
        },
        SizeChange(val) {
            this.pagInfo.pageSize = val;
            this.getCarCompareList();
        },
        CurrentChange(val) {
            this.pagInfo.pageNo = val;
            this.getCarCompareList();
        },
        getCarCompareList() { },
        // 柱状图
        barGraphCharts(el) {
            console.log(el);
            let ageChart = echarts.init(el);
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，鼠标放上时变阴影，而不是线
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    },
                },
                xAxis: {
                    name: '分包单位',  //X轴标题
                    type: 'category',
                    data: this.enterpriseList.map(item => item.enterpriseName),
                    //设置文本过长超出隐藏...表示
                    axisLabel: {
                        formatter: function (params) {
                            var val = "";
                            if (params.length > 4) {
                                val = params.substr(0, 4) + '...';
                                return val;
                            } else {
                                return params;
                            }
                        }
                    },
                },
                yAxis: {
                    name: '数量',  //Y轴标题
                    type: 'value',
                    axisTick: {
                        // 轴刻度
                        show: false,
                    },
                    axisLine: {
                        // 轴线
                        show: false,
                        color: '#268C8C',
                    },
                    nameTextStyle: {
                        padding: [0, 0, 0, -30]    // 四个数字分别为上右下左与原位置距离
                    }
                },
                series: [
                    {
                        data: this.enterpriseList.map(item => item.totalNum),
                        type: 'bar',
                        barWidth: '20%',
                        color: "#268dff"
                    }
                ]


            };
            ageChart.setOption(option);
            window.addEventListener("resize", () => {
                ageChart.resize();
            })
        },
        // 雷达图
        radarCharts(el) {
            let ageChart = echarts.init(el);
            let option = {
                legend: {
                    icon: 'roundRect',
                    data: ['质量检查'],
                    itemStyle: {    //颜色 默认灰色
                        color: 'rgba(84,112,198,1)',
                    },
                    top: '10%',
                },
                radar: {
                    radius: 115,
                    center: ['55%', '60%'],
                    // shape: 'circle',
                    indicator: [
                        {
                            name: '排查记录',
                            max: parseInt(this.examineInfo2.investigateNum) + 10,
                        },
                        {
                            name: '未闭合',
                            max: parseInt(this.examineInfo2.notCloseNum) + 10,
                        },
                        {
                            name: '超期未关闭',
                            max: parseInt(this.examineInfo2.overdueNotCloseNum) + 10,
                        },
                        {
                            name: '待整改',
                            max: parseInt(this.examineInfo2.rectificationNum) + 10,
                        },
                        {
                            name: '待复查',
                            max: parseInt(this.examineInfo2.reviewNum) + 10,
                        },
                        {
                            name: '待核验',
                            max: parseInt(this.examineInfo2.verificationNum) + 10,
                        },
                    ]
                },
                tooltip: {
                    trigger: 'axis'
                },
                series: [
                    {
                        name: '质量检查',
                        type: 'radar',
                        tooltip: {
                            trigger: 'item'
                        },
                        data: [
                            {
                                value: [
                                    this.examineInfo2.investigateNum,
                                    this.examineInfo2.notCloseNum,
                                    this.examineInfo2.overdueNotCloseNum,
                                    this.examineInfo2.rectificationNum,
                                    this.examineInfo2.reviewNum,
                                    this.examineInfo2.verificationNum],
                                name: '质量检查',
                                itemStyle: {    //颜色 默认灰色
                                    color: 'rgba(84,112,198,1)',
                                },
                            },
                        ]
                    }
                ]
            };
            ageChart.setOption(option);
            window.addEventListener("resize", () => {
                ageChart.resize();
            })
        },
        // 折线图
        lineCharts(el) {
            let ageChart = echarts.init(el);

            let option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    icon: 'roundRect',
                    top: "5%",
                    data: ['全部', '重大风险', '较大风险', '一般风险', '低风险']
                },
                grid: {
                    left: '3%',
                    right: '5%',
                    bottom: '3%',
                    containLabel: true
                },
                // toolbox: {
                //     feature: {
                //         saveAsImage: {}
                //     }
                // },
                xAxis: {
                    name: '月份',  //X轴标题
                    type: 'category',
                    boundaryGap: false,
                    data: this.riskList.map(item => item.yearMonth),
                },
                yAxis: {
                    name: '数量',  //Y轴标题
                    type: 'value',
                    axisTick: {
                        // 轴刻度
                        show: false,
                    },
                    axisLine: {
                        // 轴线
                        show: true,

                    },
                    itemStyle: {    //颜色 默认灰色
                        color: 'rgba(197,196,196,1)',
                    },
                    nameTextStyle: {
                        padding: [0, 0, 0, -30]    // 四个数字分别为上右下左与原位置距离
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed'
                        }
                    }
                },
                series: [
                    {
                        name: '全部',
                        type: 'line',
                        stack: 'Total',
                        data: this.riskList.map(item => item.dangerNum),
                        itemStyle: {    //颜色 默认灰色
                            color: 'rgba(5,193,179,1)',
                        },
                        symbol: 'circle',   //将小圆点改成实心 不写symbol默认空心
                        symbolSize: 5,    //小圆点的大小
                    },
                    {
                        name: '重大风险',
                        type: 'line',
                        stack: 'Total',
                        data: this.riskList.map(item => item.greatFaultLevelNum),
                        itemStyle: {    //颜色 默认灰色
                            color: 'rgba(255,0,0,1)',
                        },
                        symbol: 'circle',   //将小圆点改成实心 不写symbol默认空心
                        symbolSize: 5,    //小圆点的大小
                    },
                    {
                        name: '较大风险',
                        type: 'line',
                        stack: 'Total',
                        data: this.riskList.map(item => item.largerRiskNum),
                        itemStyle: {    //颜色 默认灰色
                            color: 'rgba(255,153,1,1)',
                        },
                        symbol: 'circle',   //将小圆点改成实心 不写symbol默认空心
                        symbolSize: 5,    //小圆点的大小
                    },
                    {
                        name: '一般风险',
                        type: 'line',
                        stack: 'Total',
                        data: this.riskList.map(item => item.generalRiskNum),
                        itemStyle: {    //颜色 默认灰色
                            color: 'rgba(255,255,2,1)',
                        },
                        symbol: 'circle',   //将小圆点改成实心 不写symbol默认空心
                        symbolSize: 5,    //小圆点的大小
                    },
                    {
                        name: '低风险',
                        type: 'line',
                        stack: 'Total',
                        data: this.riskList.map(item => item.lowRiskNum),
                        itemStyle: {    //颜色 默认灰色
                            color: 'rgba(0,0,255,1)',
                        },
                        symbol: 'circle',   //将小圆点改成实心 不写symbol默认空心
                        symbolSize: 5,    //小圆点的大小
                    }
                ]
            };
            ageChart.setOption(option);
            ageChart.on('mousemove', (params) => {
                if(params.dataIndex == 0){
                    this.riskCount = 0;
                    this.riskName = "暂无";
                    return
                }
                // this.riskCount = this.riskList[params.dataIndex - 1].dangerNum == 0 ? (this.riskList[params.dataIndex].dangerNum).toFixed(2) : ((this.riskList[params.dataIndex].dangerNum - this.riskList[params.dataIndex - 1].dangerNum) / this.riskList[params.dataIndex - 1].dangerNum).toFixed(2);
                this.riskCount = this.riskList[params.dataIndex].monthlyBasis;
                this.riskName = this.riskList[params.dataIndex].lastMonth;
            });

            window.addEventListener("resize", () => {
                ageChart.resize();
            })
        },
        // 圆环图
        annulusChart(el, data, flag, count) {
            let ageChart = echarts.init(el);
            let option = {
                title: {
                    subtext: `${flag == 0 ? '超期未整改' : '未销项'}\n${count}个`,//副标题文本
                    left: 'center',
                    top: '40%',
                    subtextStyle: {
                        fontFamily: "微软雅黑",
                        fontSize: 16,
                        color: '#333333',
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        return params.value + '个' + params.name + "\n" + '占比' + params.percent + "%";
                    },
                },
                // legend: {
                //     top: '5%',
                //     left: 'center'
                // },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '60%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            // position: 'center',
                            position: 'outer',
                            alignTo: 'labelLine',
                            bleedMargin: 5,
                            color: "#333333",
                            formatter: function (params) {
                                return params.name.slice(0, 4) + "\n" + params.name.slice(4, params.name.length);
                            },
                        },
                        itemStyle: {
                            color: function (colors) {
                                var colorList = [
                                    '#ff0000',
                                    '#ffff02',
                                    '#00f',
                                    '#ff9901',
                                ];
                                return colorList[colors.dataIndex];
                            }
                        },
                        avoidLabelOverlap:true,
                        // emphasis: {
                        //     label: {
                        //         show: true,
                        //         fontSize: 40,
                        //         fontWeight: 'bold'
                        //     }
                        // },
                        labelLine: {
                            show: true,
                            length: 15,     // 指示线宽度
                        },
                        data: data.map(item => {
                            return {
                                value: item.count,
                                name: item.name
                            }
                        })
                        // [
                        //     { value: 0, name: '重大隐患超期未整改' },
                        //     { value: 735, name: '严重隐患超期未整改' },
                        //     { value: 580, name: '其它隐患超期未整改' },
                        //     { value: 484, name: '一般隐患超期未整改' },
                        // ]
                    }
                ]
            };
            ageChart.setOption(option);
            window.addEventListener("resize", () => {
                ageChart.resize();
            })
        },
        // 柱状图 倒
        barGraphFallCharts(el) {
            console.log(el);
            let ageChart = echarts.init(el);
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，鼠标放上时变阴影，而不是线
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    },
                },
                grid: {
                    left: '3%',
                    right: '8%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    name: '数量',  //X轴标题
                    type: 'value',
                    axisTick: {
                        // 轴刻度
                        show: false,
                    },
                    axisLine: {
                        // 轴线
                        show: false,
                        color: '#268C8C',
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed'
                        }
                    },
                },
                yAxis: {
                    type: 'category',
                    data: this.inspectionList.map(item => item.x),
                    axisTick: {
                        // 轴刻度
                        show: false,
                    },
                    axisLine: {
                        // 轴线
                        show: false,
                        color: '#268C8C',
                    },
                    //设置文本过长超出隐藏...表示
                    axisLabel: {
                        formatter: function (params) {
                            var val = "";
                            if (params.length > 5) {
                                val = params.substr(0, 5) + '...';
                                return val;
                            } else {
                                return params;
                            }
                        }
                    },
                },
                series: [
                    {
                        data: this.inspectionList.map(item => item.y),
                        type: 'bar',
                        barWidth: '35%',
                        color: "#268dff"
                    }
                ]


            };
            ageChart.setOption(option);
            window.addEventListener("resize", () => {
                ageChart.resize();
            })
        },
    },
};
</script>
<style lang="less" scoped>
/deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    background-color: #268dff;
}

.align-center {
    align-items: center;
}

.el-icon-full-screen {
    margin-left: 10px;
}

.sub-container_box {
    height: 100%;
    border-top: 1px solid #dddddd;
    margin-top: 5px
}

.sub-container {
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.sub-container:first-child::before {
    content: "";
    height: 60%;
    border-left: 1px dashed #dddddd;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%)
}

.sub-container>div:first-child {
    margin-top: 15px;
    margin-bottom: 15px;
}

.top-plus {
    height: calc(60% - 7.5px) !important;
}

.identification-info {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.identification-info>div:first-child {
    color: #fa2a31;
    font-size: 24px;
    margin-bottom: 12px;
}

.identification-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.identification-bottom>div {
    width: 48%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    margin-top: 10px;
}

.show-pointer {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-center {
    display: flex;
    justify-content: center;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.margin-bottom_0 {
    margin-bottom: 0 !important;
}

.show-pointer>div {
    height: 180px;
    width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.show-pointer>div>div:first-child {
    font-size: 24px;
    cursor: pointer;
}

.show-pointer>div>div:last-child {
    font-size: 14px;
    padding-top: 10px;
    cursor: pointer;
}

.green-bg {
    background-color: #ecf8f7;
}

.org-bg {
    background-color: #fcf8e8;
}

.red-bg {
    background-color: #ffeded;
}

.red-bg2 {
    background-color: rgb(207, 150, 195);
}

.green-num {
    color: #45c0b9;
}

.org-num {
    color: #e8bc21;
}

.red-bg {
    color: #fa2a31;
}

.bg-ff9 {
    background-color: #ff9901;
}

.bg-fff {
    background-color: #ffff02;
}

.bg-ff0 {
    background-color: #ff0000;
}

.bg-00f {
    background: #00f;
}

.color-white {
    color: white;
}

.bg-white {
    background-color: white
}

.el-radio-group {
    display: flex;
    align-items: center;
}

.el-radio {
    margin-right: 12px;
}

.flex {
    display: flex;
}

.detail-right {
    display: flex;
    align-items: center;
    padding-left: 6px;
    font-size: 14px;
    cursor: pointer;
    color: #268dff;
}

.blockInner {
    padding: 15px;
    height: calc(100% - 30px);
}

.whiteBlock {
    float: left;
    width: calc(50% - 7.5px);
}

.whiteBlock2 {
    float: left;
    width: calc(40% - 7.5px);
}

.whiteBlock3 {
    float: left;
    width: calc(60% - 7.5px);
}

.whiteBlock4 {
    float: left;
    width: calc(20% - 7.5px);
}

.chart {
    height: calc(100% - 40px);
    width: 100%;
    overflow: hidden;
}

.top {
    margin-bottom: 15px;
}

.blockContent {
    height: calc(100% - 40px);
}

.top,
.bottom {
    height: calc(50% - 7.5px);

    .whiteBlock,
    .whiteBlock2,
    .whiteBlock3,
    .whiteBlock4 {
        height: 100%;

        &:first-child {
            margin-right: 15px;
        }
    }

}

.tables {
    min-height: auto;
}

.numBox {
    display: inline-flex;
    align-items: center;
    width: 50%;
    height: 40%;

    .dataBox {
        margin-left: 12px;
    }

    .num {
        font-size: 20px;
    }

    .text {
        font-size: 14px;
        // color: #7C829E;
        opacity: 0.7;
    }
}

.box-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>