<template>
    <!-- 质量管理 -->
    <!-- <div class="quality">
          <vue-scroll>
          <img  src="@/assets/images/dataBoard/8.png" style="height:auto;width:100%"/>
          </vue-scroll>
      </div> -->
    <div class="fullHeight dataBoardIndex">
        <div class="left fullHeight">
            <div class="blockBox blockBox2">
                <div class="blockTitle">
                <!-- 安全问题 -->
                {{$t('message.dataBoard.safetyProblem')}}
                </div>
                <div class="blockContent">
                    <div class="circleBox">
                        <div class="ratioChart" ref="ratioChart1"></div>
                    </div>
                    <div class="circleBox">
                        <div class="ratioChart" ref="ratioChart2"></div>
                    </div>
                    <div class="circleBox">
                        <div class="ratioChart" ref="ratioChart3"></div>
                    </div>
                    <div class="circleBox">
                        <div class="ratioChart" ref="ratioChart4"></div>
                    </div>
                </div>
            </div>
            <div class="blockBox blockBox3" style="height:calc(66.66% - 25px)">
                <div class="blockTitle">
                <!-- 问题趋势 -->
                 {{$t('message.dataBoard.problemTrend')}}
                </div>
                <div class="blockContent">
                    <div class="lineChart" ref="lineChart"></div>
                    <div
                            class="placeholderBox placeholderBox2"
                            v-if="noData3"
                    >
                        <img src="@/assets/images/noData3.png" alt="" srcset="" />
                        <p>
                        <!-- 暂无数据 -->
                        {{$t('message.dataBoard.nodata')}}
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="aside fullHeight">
            <div class="blockBox">
                <div class="blockTitle">
                <!-- 待整改 -->
                {{$t('message.dataBoard.awaitChange')}}
                </div>
                <div class="blockContent alarmBlockContent">
                    <vue-scroll>
                        <table class="greenTable">
                            <thead>
                            <tr>
                                <th width="70">
                                    <!-- 检查项 -->
                                     {{$t('message.dataBoard.checkedItem')}}
                                </th>
                                <th>
                                    <!-- 检查内容 -->
                                     {{$t('message.dataBoard.checkedContent')}}
                                </th>
                                <th>
                                    <!-- 检查时间 -->
                                    {{$t('message.dataBoard.checkedTime')}}
                                </th>
                                <th width="70">
                                    <!-- 整改人 -->
                                    {{$t('message.dataBoard.changePeople')}}
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item, index) in alarmList" :key="index">
                                <td>
                                    {{ item.checkItem }}
                                </td>
                                <td>{{ item.checkContent }}</td>
                                <td>{{ item.inspectTime }}</td>
                                <td>{{ item.changeUserName }}</td>
                            </tr>
                            </tbody>
                        </table>
                        <div
                                class="placeholderBox placeholderBox2"
                                v-if="alarmList.length == 0"
                        >
                            <img src="@/assets/images/noData3.png" alt="" srcset="" />
                            <p>
                            <!-- 暂无数据 -->
                            {{$t('message.dataBoard.nodata')}}
                            </p>
                        </div>
                    </vue-scroll>
                </div>
            </div>
            <div class="blockBox">
                <div class="blockTitle">
                <!-- 问题占比 -->
                {{$t('message.dataBoard.problemRatio')}}
                </div>
                <div class="blockContent">
                    <div class="safeTrainChart" ref="safeTrainChart"></div>
                    <div class="descBox fullHeight">
                        <div>
                            <div v-for="(item,index) in inspectTypeNameList" :key="index" class="descItem descItem1">
                                <p v-if="index == 0" class="text"><i class="dot red"></i>{{item.inspectTypeName}}</p>
                                <p v-if="index == 1" class="text"><i class="dot purple"></i>{{item.inspectTypeName}}</p>
                                <p v-if="index == 2" class="text"><i class="dot green"></i>{{item.inspectTypeName}}</p>
                                <p class="num">{{item.num}}</p>
                            </div>
<!--                            <div class="descItem descItem1">-->
<!--                                <p class="text"><i class="dot purple"></i>月检</p>-->
<!--                                <p class="num">{{}}</p>-->
<!--                            </div>-->
<!--                            <div class="descItem">-->
<!--                                <p class="text"><i class="dot green"></i>年检</p>-->
<!--                                <p class="num">{{}}</p>-->
<!--                            </div>-->
                        </div>
                        <div
                                class="placeholderBox placeholderBox2"
                                v-if="inspectTypeNameList.length == 0"
                        >
                            <img src="@/assets/images/noData3.png" alt="" srcset="" />
                            <p>
                            <!-- 暂无数据 -->
                            {{$t('message.dataBoard.nodata')}}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="blockBox">
                <div class="blockTitle">
                <!-- 整改动态 -->
                {{$t('message.dataBoard.changeDynamic')}}
                </div>
                <div class="blockContent">
                    <vue-scroll>
                        <ul class="greenTable dynamicList">
                            <li v-for="(item,index) in activityList" :key="index">
                                {{$t('message.dataBoard.hasOne')}}<!-- 有一条 -->{{item.dutyRegion}}{{item.dangerDesc}}{{$t('message.dataBoard.problen')}}<!-- 的问题 -->
                            </li>
                        </ul>
                        <!-- <table class="greenTable">
                        <thead>
                            <tr>
                            <th>
                                {{ $t("message.environmentalOverview.table2.th1") }}
                            </th>
                            <th>
                                {{ $t("message.environmentalOverview.table2.th2") }}
                            </th>
                            <th>
                                {{ $t("message.environmentalOverview.table2.th3") }}
                            </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item, index) in alarmList" :key="index">
                            <td>
                                {{ item.deviceName }}
                            </td>
                            <td>{{ item.alarmTime }}</td>
                            <td>{{ item.alarmTypeName }}</td>
                            </tr>
                        </tbody>
                        </table> -->
                        <div
                                class="placeholderBox placeholderBox2"
                                v-if="activityList.length == 0"
                        >
                            <img src="@/assets/images/noData3.png" alt="" srcset="" />
                            <p>
                            <!-- 暂无数据 -->
                            {{$t('message.dataBoard.nodata')}}
                            </p>
                        </div>
                    </vue-scroll>
                </div>
            </div>
        </div>
        <!-- 手工录入列表 -->
        <el-dialog
                :modal-append-to-body="false"
                :title="$t('message.dataBoard.manualEntryList')"
                :visible.sync="dialogVisible"
                width="1622px"
                top="0px"
        >
            <el-table
                    :data="tableData"
                    class="tables"
                    style="width: 100%"
                    height="600px"
            >
            <!-- 检查类型 -->
                <el-table-column prop="inspectTypeName" :label="$t('message.dataBoard.checkedType')"></el-table-column>
                <!-- 检查人 -->
                <el-table-column prop="createUserName" :label="$t('message.dataBoard.checkedPeople')"></el-table-column>
                <!-- 问题类型 -->
                <el-table-column prop="checkContent" :label="$t('message.dataBoard.problemType')"></el-table-column>
                <!-- 整改人 -->
                <el-table-column prop="changeUserName" :label="$t('message.dataBoard.changePeople')"></el-table-column>
                <!-- 检查结果 -->
                <el-table-column prop="status" :label="$t('message.dataBoard.checkedResult')">
                    <template slot-scope="scope">
                        {{scope.row.status?statusArr1[scope.row.status-1]:''}}
<!--                        {{ scope.row.status == 1?'待整改': scope.row.status == 2?'待审核':scope.row.status == 3?'已闭合':'无需整改'}}-->
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    class="pagerBox"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNo"
                    :page-sizes="$store.state.PAGESIZRS"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next"
                    :total="total2"
                    background
            ></el-pagination>
        </el-dialog>
        <!-- 自动识别列表 -->
        <el-dialog
                :modal-append-to-body="false"
                :title="$t('message.dataBoard.automaticRecognitionList')"
                :visible.sync="dialogVisible2"
                width="1622px"
                top="0px"
        >
            <div  style="margin-bottom: 25px">
            <!-- 开始日期 结束日期 -->
                <el-date-picker
                        style="color: #6ce9f0;border: 1px solid #6ce9f0"
                        class="serarch_picker"
                        size="medium"
                        v-model="valueTime"
                        value-format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="-"
                        :start-placeholder="$t('message.dataBoard.startDate')"
                        :end-placeholder="$t('message.dataBoard.endDate')">
                </el-date-picker>
                <el-button style="margin-left: 30px;color: #6ce9f0;border: 1px solid #6ce9f0" type="primary" plain @click="selectAllAlarmList">
                <!-- 查询 -->
                {{$t('message.dataBoard.query')}}
                </el-button>
                <el-button style="margin-left: 30px;color: #6ce9f0;border: 1px solid #6ce9f0" type="primary" plain @click="Refresh">
                <!-- 刷新 -->
                {{$t('message.dataBoard.fresh')}}
                </el-button>
            </div>
            <el-table
                    :data="tableData"
                    class="tables"
                    style="width: 100%"
                    height="600px"
            >
            <!-- 报警类别 -->
                <el-table-column prop="alarmTypeName" :label="$t('message.dataBoard.alarmCate')"></el-table-column>
                <!-- 报警原因 -->
                <el-table-column prop="alarmReason" :label="$t('message.dataBoard.alarmreason')"></el-table-column>
                <!-- 报警时间 -->
                <el-table-column prop="alarmTime" :label="$t('message.dataBoard.alarmTime')"></el-table-column>
                <!-- 报警设备 -->
                <el-table-column prop="devName" :label="$t('message.dataBoard.alarmDev')"></el-table-column>
            </el-table>
            <el-pagination
                    class="pagerBox"
                    @size-change="handleSizeChangeTwo"
                    @current-change="handleCurrentChangeTwo"
                    :current-page="pageNo"
                    :page-sizes="$store.state.PAGESIZRS"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next"
                    :total="total2"
                    background
            ></el-pagination>
        </el-dialog>
    </div>
</template>
<script>
    import echarts from 'echarts4';;
    import {
        selectSecurityManageStatisticsApi,
        selectRectifiedSecurityManageListApi,
        getNewestSecurityManageDataListApi,
        getAllAlarmTotalApi,//自动总数
        selectAllAlarmListApi,//自动列表,
        securityManageListApi,//手动识别列表
        selectInspectTypeStatisticsListApi,//按照检查类型统计检查数
        selectHiddenDangerSecurityManageStatisticsApi
    } from "@/assets/js/api/dataBoard"

    export default {
        data(){
            return{
                // ['无需整改','待整改','待复查','合格','不合格'],
                statusArr1:this.$t('message.dataBoard.statusArr1'),
                inspectTypeNameList:[],
                dataType1:1,
                dataType2:1,
                total:{
                    closeNum: 0,
                    monthInspectNum: 0,
                    notRectificationNum: 0,
                    otherInspectNum: 0,
                    rectificationNum: 1,
                    reviewedNum: 0,
                    totalNum: 1,
                    weekInspectNum: 1
                },
                noData1:true,
                noData2:true,
                noData3:true,
                projectSn:'',
                alarmList:[],
                activityList:[],
                // ['待整改','待审核','闭合','无需整改'],
                statusArr:this.$t('message.dataBoard.statusArr'),
                totalNum2:0,

                pageNo: 1,
                pageSize: 10,
                total2: 0,
                tableData: [],
                dialogVisible2:false,
                dialogVisible:false,
                valueTime:''
            }
        },
        mounted(){
            this.projectSn=this.$store.state.projectSn
            console.log('this.projectSn',this.projectSn)
            this.getData1()
            this.getActivity()
            this.getNewestData()
        },
        methods:{
            //手动录入
            handleSizeChange(val) {
                this.pageSize = val;
                this.securityManageList();
            },
            handleCurrentChange(val) {
                this.pageNo = val;
                this.securityManageList();
            },
            //自动录入
            handleSizeChangeTwo(val) {
                this.pageSize = val;
                this.selectAllAlarmList();
            },
            handleCurrentChangeTwo(val) {
                this.pageNo = val;
                this.selectAllAlarmList();
            },
            //手动录入
            securityManageList(){
                let data = {
                    pageNo: this.pageNo,
                    pageSize: this.pageSize,
                    projectSn: this.projectSn,
                };
                securityManageListApi(data).then((res) => {
                    this.tableData = res.result.records
                    this.total2 = res.result.total
                    console.log(res);
                })
            },
            //自动录入
            selectAllAlarmList(){
                let data = {
                    startTime:this.valueTime?this.valueTime[0]:"",
                    endTime:this.valueTime?this.valueTime[1]:"",
                    pageNo: this.pageNo,
                    pageSize: this.pageSize,
                    projectSn: this.projectSn,
                };
                selectAllAlarmListApi(data).then((res) => {
                    this.tableData = res.result.records
                    this.total2 = res.result.total
                    console.log(res);
                })
            },
            Refresh(){
                this.valueTime = ''
                this.pageNo = 1;
                this.pageSize = 10;
                this.total2 = 0;
                this.selectAllAlarmList()
            },
            selectInspectTypeStatisticsList(){
                let data = {
                    projectSn: this.projectSn,
                };
                selectInspectTypeStatisticsListApi(data).then((res) => {
                    this.inspectTypeNameList = res.result
                    console.log(res);
                    this.createPieChart(
                        [
                            { value: this.inspectTypeNameList[0].num, name: "" },
                            {
                                value: this.inspectTypeNameList[1].num,
                                name: "",
                            },{
                            value: this.inspectTypeNameList[2].num,
                            name: "",
                        },
                        ],
                        this.$refs.safeTrainChart,
                        ["rgba(254, 108, 127, 1)","rgba(120, 111, 240, 1)", "rgba(68, 215, 182, 1)"],
                        this.$t('message.dataBoard.questionAllCounts'),this.inspectTypeNameList[0].num + this.inspectTypeNameList[1].num + this.inspectTypeNameList[2].num
                    );
                })
            },
            //获取数据
            // selectHiddenDangerSecurityManageStatistics(){
            //     let data = {
            //         projectSn: this.projectSn,
            //     };
            //     selectHiddenDangerSecurityManageStatisticsApi(data).then((res) => {
            //         console.log(res);
            //     })
            // },
            getData1(){
                let data = {
                    projectSn: this.projectSn,
                };
                selectHiddenDangerSecurityManageStatisticsApi(data).then((res) => {
                    console.log(res);
                    this.total = res.result.total;
                    this.selectInspectTypeStatisticsList()
                    this.getAllAlarmTotal()
                    // this.selectHiddenDangerSecurityManageStatistics()
                    // this.createPieChart(
                    //     [
                    //         { value: 1, name: "" },
                    //         {
                    //             value: 0,
                    //             name: "",
                    //         },
                    //     ],
                    //     this.$refs.ratioChart1,
                    //     ["#557DED", "rgba(68, 215, 182, 0.2)"],
                    //     "问题总数",this.total.totalNum
                    // );
                    this.createPieChart(
                        [
                            { value: 1, name: "" },
                            {
                                value: 0,
                                name: "",
                            },
                        ],
                        this.$refs.ratioChart2,
                        ["#7718fe", "rgba(68, 215, 182, 0.2)"],
                        this.$t('message.dataBoard.statusArr1')[2]+this.$t('message.dataBoard.problenNum'),this.total.reviewNum
                    );
                    // "待整改问题数"
                    this.createPieChart(
                        [
                            { value: 1, name: "" },
                            {
                                value: 0,
                                name: "",
                            },
                        ],
                        this.$refs.ratioChart3,
                        ["#fe6c7f", "rgba(68, 215, 182, 0.2)"],
                        this.$t('message.dataBoard.statusArr1')[0]+this.$t('message.dataBoard.problenNum'),this.total.rectificationNum
                    );
                    var ratioNum = this.total.totalNum?((this.total.closeNum/this.total.totalNum)*100).toFixed(2):0
                    this.createPieChart(
                        [
                            { value: ratioNum, name: "" },
                            {
                                value: 100-ratioNum,
                                name: "",
                            },
                        ],
                        this.$refs.ratioChart4,
                        ["rgba(68, 215, 182, 1)", "rgba(68, 215, 182, 0.2)"],this.$t('message.dataBoard.statusArr')[2]+this.$t('message.dataBoard.rate')/* "闭合率" */,ratioNum+'%'
                    );
                    var arr = res.result.monthList
                    var xData=[],yData1=[]
                    if(arr.length>0){
                        arr.forEach(element => {
                            var date = element.titleName.substr(5,element.titleName.length)
                            xData.push(date)
                            yData1.push(element.num)
                        });
                        this.noData3=false
                    }else{
                        this.noData3=true
                    }
                    this.createLineChart(xData,yData1)
                });
            },
            getAllAlarmTotal(){
                getAllAlarmTotalApi({projectSn:this.projectSn}).then( res => {
                    this.totalNum2 = res.result
                    this.createPieChart1()
                })
            },
            createPieChart1(){
                let that = this;
                let monitor = echarts.init(this.$refs.ratioChart1);
                // monitor.clear();
                var option = {
                    color: ["rgba(254, 108, 127, 1)","rgba(120, 111, 240, 1)"],
                    title: {
                        show: true,
                        text: this.total.totalNum + this.totalNum2,
                        x: "48%",
                        y: "36%",
                        z: 5,
                        textAlign: "center",
                        textStyle: {
                            color: "rgba(255, 255, 255, 1)",
                            fontSize: 20,
                        },
                        subtext: /* '问题总数', */this.$t('message.dataBoard.questionAllCounts'),
                        subtextStyle: {
                            color: "rgba(255, 255, 255, 0.8)",
                            fontSize: 13,
                        },
                    },
                    tooltip: {
                      data:/*  ['手工录入', '自动录入'], */this.$t('message.dataBoard.enteringStatus'),
                      trigger: "item",

                        formatter: function(a, b) {
                            return (
                                `${this.$t('message.dataBoard.enteringStatus')[0]}:${that.total.totalNum}/${((that.total.totalNum/(that.total.totalNum + that.totalNum2))*100).toFixed(2)}% </br>${this.$t('message.dataBoard.enteringStatus')[1]}: ${that.totalNum2}/${((that.totalNum2/(that.total.totalNum + that.totalNum2))*100).toFixed(2)}%`
                            )
                        }
                    },
                    grid: {
                        right: 0,
                    },
                    legend: {
                        show: false,
                    },
                    series: [
                        {
                            type: "pie",
                            radius: ["50%", "70%"],
                            avoidLabelOverlap: false,
                            hoverAnimation: false,
                            label: {
                                show: false,
                                position: "center",
                            },
                            labelLine: {
                                show: false,
                            },
                            data:
                                [
                                    { value: this.total.totalNum, name: this.$t('message.dataBoard.enteringStatus')[0] },
                                    { value: this.totalNum2, name: this.$t('message.dataBoard.enteringStatus')[1]},
                                ],
                            // minAngle: 10
                        },

                    ],
                };
                //   if(color){
                //       option.series[0].radius=["75%", "85%"]
                //       option.title.x="45%"
                //       option.legend.show=false
                //   }
                monitor.setOption(option);

                function eConsole(param) {
                    if(param.dataIndex == 1){
                        that.dialogVisible2 = true
                        that.pageNo = 1;
                        that.pageSize = 10;
                        that.total2 = 0;
                        that.tableData = [];
                        that.selectAllAlarmList()
                        //自动录入
                    }else if(param.dataIndex == 0){
                        //手动录入
                        that.dialogVisible = true
                        that.pageNo = 1;
                        that.pageSize = 10;
                        that.total2 = 0;
                        that.tableData = [];
                        that.securityManageList()
                    }
                }

                monitor.on("click", eConsole);
            },


            createPieChart(data, div, color, title,total) {
                let that = this;
                let monitor = echarts.init(div);
                // monitor.clear();
                var option = {
                    color: color ? color : ["#5181F6", "#61D2B9", "#F67F51", "#7851F6"],
                    title: {
                        show: true,
                        text: total,
                        x: "48%",
                        y: "36%",
                        z: 5,
                        textAlign: "center",
                        textStyle: {
                            color: "rgba(255, 255, 255, 1)",
                            fontSize: 20,
                        },
                        subtext: title,
                        subtextStyle: {
                            color: "rgba(255, 255, 255, 0.8)",
                            fontSize: 13,
                        },
                    },
                    grid: {
                        right: 0,
                    },
                    legend: {
                        show: false,
                    },
                    // tooltip: {
                    //   // data: ['在线', '离线'],
                    //   trigger: "item",
                    //   formatter: "{a} <br/>{b}: {c} ({d}%)",
                    // },
                    series: [
                        {
                            name: "",
                            type: "pie",
                            radius: ["50%", "70%"],
                            avoidLabelOverlap: false,
                            hoverAnimation: false,
                            label: {
                                show: false,
                                position: "center",
                            },
                            labelLine: {
                                show: false,
                            },
                            data: data,
                        },
                    ],
                };
                //   if(color){
                //       option.series[0].radius=["75%", "85%"]
                //       option.title.x="45%"
                //       option.legend.show=false
                //   }
                monitor.setOption(option);
            },
            createLineChart(xData,yData1){
                let monitor = echarts.init(this.$refs.lineChart);
                var option = option = {
                    tooltip: {
                        trigger: 'axis',
                        position: function (pt) {
                            return [pt[0], '10%'];
                        }
                    },
                    grid: {
                        top: 30,
                        left: 20,
                        bottom: 20,
                        right: 20,
                        containLabel: true,
                    },
                    xAxis: {
                        boundaryGap: false,
                        type: 'category',
                        data: xData,
                        axisTick:{
                            show:false
                        },
                        axisLine:{
                            show:false
                        },
                        axisLabel: {
                            color: "#9fa2ad",
                            fontSize: 12,
                        },
                    },
                    yAxis: {
                        type: 'value',
                        splitLine:{
                            lineStyle:{
                                type: "dashed",
                                color: "rgba(231, 233, 243, 0.2)",

                            }
                        },
                        axisLine:{
                            show:false
                        },
                        axisLabel: {
                            color: "#9fa2ad",
                        },
                    },
                    color:['rgba(248, 195, 21, 1)'],
                    series: [{
                        name:/* '问题数', */this.$t('message.dataBoard.problenNum'),
                        data: yData1,
                        type: 'line',
                        smooth: true,
                        symbolSize:0,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(248, 195, 21, 0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(248, 195, 21, 0)'
                            }])
                        },
                    }]
                };
                monitor.setOption(option);
            },
            //获取动态
            getActivity(){
                selectRectifiedSecurityManageListApi({projectSn: this.projectSn}).then(res=>{
                    console.log(res);
                    this.activityList=res.result
                })
            },
            //查询最新20条待整改的安全管理数据
            getNewestData(){
                getNewestSecurityManageDataListApi({projectSn: this.projectSn}).then(res=>{
                    console.log(res);
                    this.alarmList=res.result
                })
            },
        }
    }
</script>
<style lang="less" scoped>
    .pagerBox{
        margin-top: 0px;
        text-align: right;
    }
    /*#6ce9f0*/
    /deep/.el-pager{
        .number{
            background-color: #262D47 !important;
            color: #fff !important;
        }
        .active{
            color: #5181F6 !important;
        }
        .el-icon{
            background-color: #262D47 !important;
            color: #fff !important;
        }
    }
    /deep/.el-range-input{
        background: #262D47;
        color: #ffffff;
    }
    /deep/.el-range-separator{
        color: #ffffff;
    }
    /deep/.btn-prev{
        color: #ffffff !important;
    }
    /deep/.btn-next{
        color: #ffffff !important;
    }
    /deep/ .el-input__inner{
        height: 40px;
        background-color: #262D47;
        color: #ffffff;
    }
    /deep/ .el-table{
        th{
            background: #192135;
            color: #ffffff;
        }
        td{
            background: #192135;
            color: #ffffff;
        }
    }
    /deep/.tables{
        tr:nth-child(2n-1) td{
            background:  #20263E;
            color: #ffffff;
        }
        td{
            background:  #20263E;
            color: #ffffff;
        }
    }
    .el-dialog__wrapper {
        /deep/ .el-dialog {
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            margin: 0px;
            .el-dialog__body{
                background: #262D47;
                padding: 30px 86px;
            }
            .el-dialog__header{
                background: #262D47;
                text-align: center;
                .el-dialog__title{
                    color: #6ce9f0;
                    font-size: 17px;
                    font-weight: 900;
                    .el-dialog__headerbtn{
                        .el-dialog__close{
                            color: #262D47;
                        }
                    }
                }
                .el-dialog__title::before{
                    background: #262D47;
                }
            }
        }
    }
    // .quality{
    //     height: 100%;
    //     width:100%;
    //     text-align: center;
    // }
    .safeTrainChart {
        width: 50%;
        height: 100%;
        float: left;
    }
    .lineChart{
        width: 100%;
        height: 100%;
    }

    .circleBox{
        width: 25%;
        float: left;
        text-align: center;
        height: 100%;
    }
    .circleInner{
        border: 16px solid #557DED;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        .num{
            color: white;
            font-size: 24px;
            margin-bottom: 5px;
        }
        .text{
            font-size: 12px;
        }
        &.purple{
            border-color: rgba(119, 24, 254, 1);
        }
        &.red{
            border-color: rgba(254, 108, 127, 1);
        }
    }
    .ratioChart{
        width: 100%;
        height: 100%;
    }
    .dynamicList{
        text-align: center;
    }
</style>
