<template>
    <div class="page_index">
        <div class="video_box">
            <div class="-datav-wraper" style="width: 4227px; height: 1152px; pointer-events: auto;">
                <video src="../../assets/img/bg_video.mp4" muted autoplay loop width="4227" height="1152"
                    class="video-switch" style="object-fit: fill">
                </video>
            </div>
        </div>
        <div class="content">
            <div class="topbg">
                <div class="top">
                    <div class="title">矿拉拉-物流集散调度中心</div>
                </div>
            </div>
            <div class="contain">
                <div class="mid_charts">
                    <div class="mid_content_one">
                        <div class="mid_Top">
                            <div class="mid_TopBox">
                                <div class="textBox">
                                    <div>今日运单</div>
                                    <div class="num_box">
                                        <count bg :startVal='0' :endVal='todayTasks' :decimals="0" />
                                        <span>车</span>
                                    </div>
                                </div>
                            </div>
                            <div class="mid_TopBox">
                                <div class="textBox">
                                    <div>今日运载</div>
                                    <div class="num_box">
                                        <count bg :startVal='0' :endVal='todayWeight' :decimals="0" />
                                        <span>吨</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mid">
                            <div class="iframe_box">
                                <iframe ref="iframe" id="iframe" src="https://saas.sckaiwu.cn/wyenuxmd4j.html"
                                    frameborder="0"></iframe>
                            </div>
                        </div>
                        <div class="mid_BottomBox">
                            <div style="width: 100%;position: relative;">
                                <div class="content_titles ">运力车次趋势分析</div>
                                <Charts :eOption="taskTableOption" v-if="taskTableOption"
                                    style="height: 155px;position: absolute;" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right_charts">
                    <div class="charts">
                        <div>
                            <div class="right_content_one">
                                <div class="right_one_box">
                                    <div class="two_tit">车辆入驻统计</div>
                                    <Charts :eOption="truckRegisterOption" v-if="truckRegisterOption"
                                        style="width: 667px;height: 516px"></Charts>
                                </div>
                            </div>
                            <div class="right_content_two">
                                <div class="two_tit">运力服务排行（车次）</div>
                                <Charts :eOption="customerTaskOption" v-if="customerTaskOption"
                                    style="width: 100%;height: 249px" />
                            </div>
                        </div>
                        <div>
                            <div class="right_content_three">
                                <img class="bgimg" src="../../assets/img/chart_bg1.png" alt="">
                                <div class="three_tit">入驻车辆</div>
                                <div class="three_box">
                                    <div class="tree_item">
                                        <div class="i_tit c_1">新能源</div>
                                        <div class="i_right">
                                            <img class="car_img" src="../../assets/img/icon_car.png" alt="">
                                            <div class="car_num">{{ newTruck }}</div>
                                        </div>
                                    </div>
                                    <div class="tree_item">
                                        <div class="i_tit c_2">氢能源</div>
                                        <div class="i_right">
                                            <img class="car_img" src="../../assets/img/icon_car1.png" alt="">
                                            <div class="car_num">{{ truckH2 }}</div>
                                        </div>
                                    </div>
                                    <div class="tree_item">
                                        <div class="i_tit c_3">传统能源</div>
                                        <div class="i_right">
                                            <img class="car_img" src="../../assets/img/icon_car2.png" alt="">
                                            <div class="car_num">{{ truckOre }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="right_content_bot">
                                <div class="bot_chart" style="margin-left: 20px;">
                                    <div class="bot_tit">运行中车型分布图</div>
                                    <div class="chart_boxs">
                                        <Chartsbar :seriesData="barData" :eOption="runningTruckTypeOption"
                                            v-if="runningTruckTypeOption" style="width: 100%;height: 264px" />
                                    </div>
                                </div>
                                <div class="bot_chart">
                                    <div class="bot_tit">入驻车型分布图</div>
                                    <div class="chart_boxs">
                                        <Chartsbar :seriesData="barData1" :eOption="registerTruckOption"
                                            v-if="registerTruckOption" style="width: 100%;height: 264px" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import moment from 'moment';
import Charts from '@/components/selfCP/charts.vue';
import Chartsbar from '@/components/selfCP/chartsbar.vue';
import count from './count.vue';
import { POST, GET } from '@/server/api/common';
import * as echarts from "echarts";
let time1, time2
export default {
    name: 'dashboard',
    components: {
        Charts,
        Chartsbar,
        count
    },
    computed: {
        defaultOption() {
            return {
                step: 2, // 数值越大速度滚动越快
                limitMoveNum: 18, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 55, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            };
        },
        defaultOption1() {
            return {
                step: 2, // 数值越大速度滚动越快
                limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 57, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            };
        }
    },
    data() {
        return {
            newTruck: 0,
            truckH2: 0,
            truckOre: 0,
            calciumOxideTimer: null,
            customerTaskOption: null,
            taskTableOption: null,
            truckRegisterOption: null,
            runningTruckTypeOption: null,
            registerTruckOption: null,
            orderSituationList: [],
            totalTasks: 0,
            totalWeight: 0,
            totalRunnings: 0,
            totalEntry: 0,
            running: 0,
            todayTasks: 0,
            todayWeight: 0,
            orderList: [],
            barData: [],
            barData1: [],
        }
    },
    mounted() {
        console.log(this.$config);
        if (this.$route.query && this.$route.query.companyId) {
            this.mineId = this.$route.query.companyId;
        }
        this.getApiUrl();
        moment.locale('zh-cn');
        clearInterval(time1)
        clearInterval(time2)
        time1 = setInterval(() => {
            this.getdata()
        }, this.$config.time * 1000);
        time2 = setInterval(() => {
            this.getdatas()
        }, this.$config.time1 * 1000);
    },
    destoryed() {
        clearInterval(this.calciumOxideTimer);
        this.calciumOxideTimer = null;
    },
    methods: {
        getApiUrl() {
            const self = this;
            this.getTaskList()
            this.getTotalTasks()
            this.getTotalWeight()
            this.getTotalRunnings()
            this.getTotalEntry()
            this.getRunning()
            this.getOrder()
            this.getTodayTasks()
            this.getTodayWeight()
            this.getTaskTable()
            this.getTruckRegister()
            this.getCustomerTask()
            this.getNewTruck()
            this.getTruckH2()
            this.getTruckOre()
            this.getRunningTruckType()
            this.getRegisterTruckOption()
        },
        getdata() {
            this.getTotalTasks()
            this.getTotalWeight()
            this.getTotalRunnings()
            this.getTotalEntry()
            this.getRunning()
            this.getTodayTasks()
            this.getTodayWeight()
            this.getNewTruck()
            this.getTruckH2()
            this.getTruckOre()
        },
        getdatas() {
            this.getTaskList()
            this.getOrder()
            this.getTaskTable()
            this.getTruckRegister()
            this.getCustomerTask()
            this.getRunningTruckType()
            this.getRegisterTruckOption()
        },
        //运单简要
        getTaskList() {
            GET(this.$config.taskList.url).then((res) => {
                this.orderSituationList = res.data
            })
        },
        //累计运单
        getTotalTasks() {
            GET(this.$config.totalTasks.url).then((res) => {
                this.totalTasks = res.data[0].value
            })
        },
        //累计装载
        getTotalWeight() {
            GET(this.$config.totalWeight.url).then((res) => {
                this.totalWeight = res.data[0].value
            })
        },
        //运行中
        getTotalRunnings() {
            GET(this.$config.totalRunnings.url).then((res) => {
                this.totalRunnings = res.data[0].value
            })
        },
        //等待进场
        getTotalEntry() {
            GET(this.$config.totalEntry.url).then((res) => {
                this.totalEntry = res.data[0].value
            })
        },
        //配送中
        getRunning() {
            GET(this.$config.running.url).then((res) => {
                this.running = res.data[0].value
            })
        },
        //订单
        getOrder() {
            GET(this.$config.order.url).then((res) => {
                this.orderList = res.data
            })
        },
        //今日运单
        getTodayTasks() {
            GET(this.$config.todayTasks.url).then((res) => {
                this.todayTasks = res.data[0].value
            })
        },
        //今日装载
        getTodayWeight() {
            GET(this.$config.todayWeight.url).then((res) => {
                this.todayWeight = res.data[0].value
            })
        },
        //车次排行
        getCustomerTask() {
            GET(this.$config.customerTask.url).then((res) => {
                if (res.status == 200) {
                    let dataList = res.data;
                    var colorList = ['#0A73FF'];
                    this.customerTaskOption = {
                        tooltip: {
                            show: false,
                        },
                        legend: {
                            show: false
                        },
                        grid: {
                            left: 0,
                            right: '5%',
                            top: '5%',
                            bottom: '2%',
                            containLabel: true
                        },
                        xAxis: {
                            show: false,
                            type: 'value'
                        },
                        yAxis: [{
                            type: 'category',
                            inverse: true,
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisPointer: {
                                label: {
                                    show: true,
                                    margin: 30
                                }
                            },
                            data: dataList.map(item => item.content),
                            axisLabel: {
                                margin: 50,
                                fontSize: 14,
                                align: 'left',
                                color: '#333',
                                rich: {
                                    a1: {
                                        color: '#fff',
                                        backgroundColor: colorList[0],
                                        width: 30,
                                        height: 30,
                                        align: 'center',
                                        borderRadius: 2
                                    },
                                    a2: {
                                        color: '#fff',
                                        backgroundColor: colorList[0],
                                        width: 30,
                                        height: 30,
                                        align: 'center',
                                        borderRadius: 2
                                    },
                                    a3: {
                                        color: '#fff',
                                        backgroundColor: colorList[0],
                                        width: 30,
                                        height: 30,
                                        align: 'center',
                                        borderRadius: 2
                                    },
                                    b: {
                                        color: '#fff',
                                        backgroundColor: colorList[0],
                                        width: 30,
                                        height: 30,
                                        align: 'center',
                                        borderRadius: 2
                                    }
                                },
                                formatter: function (params) {
                                    var index = dataList.map(item => item.content).indexOf(params);
                                    index = index + 1;
                                    if (index - 1 < 3) {
                                        return [
                                            '{a' + index + '|' + index + '}'
                                        ].join('\n')
                                    } else {
                                        return [
                                            '{b|' + index + '}'
                                        ].join('\n')
                                    }
                                }
                            }
                        },],
                        series: [{
                            z: 2,
                            name: 'value',
                            type: 'bar',
                            barCategoryGap: '40%',
                            barGap: 5,
                            barWidth: 30,
                            itemStyle: {
                                normal: {
                                    barBorderRadius: 0,
                                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                        {
                                            offset: 0,
                                            color: '#16C8FB',
                                        },
                                        {
                                            offset: 1,
                                            color: '#0958D2',
                                        },
                                    ]),
                                },
                            },
                            data: dataList.map((item, i) => {
                                return {
                                    value: item.value,
                                };
                            }),
                            label: {
                                normal: {
                                    color: '#666',
                                    show: true,
                                    position: [20, 0],
                                    textStyle: {
                                        fontSize: 12,
                                        color: '#fff',
                                        lineHeight: 30
                                    },
                                    formatter: function (a, b) {
                                        return a.name
                                    }
                                }
                            }
                        }

                        ]
                    };
                }
            });
        },
        //运力车次趋势分析
        getTaskTable() {
            GET(this.$config.taskTable.url).then((res) => {
                if (res.status == 200) {
                    let dataList = res.data;
                    let xAxis = []
                    let yAxis = []
                    dataList.forEach((item) => {
                        xAxis.push(item.date)
                        yAxis.push(item.nums)
                    })
                    this.taskTableOption = {
                        grid: {
                            top: 10,
                            left: 30,
                            right: 30,
                            bottom: 40,
                            itemGap: 25,
                            itemWidth: 18,
                            containLabel: true,
                        },
                        tooltip: {
                            show: false
                        },
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                axisLabel: {
                                    interval: 20,
                                    formatter: '{value}',
                                    fontSize: 14,
                                    margin: 10,
                                    textStyle: {
                                        color: '#616161',
                                    },
                                },
                                axisLine: {
                                    lineStyle: {
                                        width: 3,
                                        color: '#616161',
                                    },
                                },
                                splitLine: {
                                    interval: 15,
                                    show: true,
                                    lineStyle: {
                                        color: '#243753',
                                    },
                                },
                                axisTick: {
                                    show: false,
                                },
                                data: xAxis,
                            },
                        ],
                        yAxis: [
                            {
                                boundaryGap: false,
                                type: 'value',
                                axisLabel: {
                                    textStyle: {
                                        color: '#616161',
                                    },
                                },
                                nameTextStyle: {
                                    color: '#fff',
                                    fontSize: 12,
                                    lineHeight: 40,
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: '#243753',
                                    },
                                },
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        width: 3,
                                        color: '#616161',
                                    },
                                },
                                axisTick: {
                                    show: false,
                                },
                            },
                        ],
                        series: [
                            {
                                name: '',
                                type: 'line',
                                smooth: true,
                                showSymbol: true,
                                symbolSize: 2,
                                zlevel: 3,
                                itemStyle: {
                                    color: '#19a3df',
                                    borderColor: '#a3c8d8',
                                },
                                lineStyle: {
                                    normal: {
                                        width: 1,
                                        color: '#19a3df',
                                    },
                                },
                                areaStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(
                                            0,
                                            0,
                                            0,
                                            1,
                                            [
                                                {
                                                    offset: 0,
                                                    color: 'rgba(15, 125, 228,1)',
                                                },
                                                {
                                                    offset: 0.8,
                                                    color: 'rgba(15, 125, 228,0.4)',
                                                },
                                            ],
                                            false
                                        ),
                                    },
                                },
                                data: yAxis,
                            },
                        ],
                    };
                }
            });
        },
        getTruckRegister() {
            GET(this.$config.truckRegister.url).then((res) => {
                let dataList = res.data
                let xAxis = []
                let arr1 = []
                let arr2 = []
                let arr3 = []
                dataList.forEach((item) => {
                    if (item.s == 1) {
                        xAxis.push(item.date)
                        arr1.push(item.y)
                    }
                    if (item.s == 2) {
                        arr2.push(item.y)
                    }
                    if (item.s == 3) {
                        arr3.push(item.y)
                    }
                })
                this.truckRegisterOption = {
                    backgroundColor: '#25282F',
                    tooltip: {
                        show: false,
                    },
                    legend: {
                        data: ['传统能源', '氢能源', '新能源'],
                        align: 'right',
                        right: 10,
                        textStyle: {
                            color: "#fff"
                        },
                        top: 20,
                        itemWidth: 10,
                        itemHeight: 10,
                        itemGap: 35
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: xAxis,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#616161",
                                width: 1,
                                type: "solid"
                            }
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#616161",
                            }
                        },
                    },

                    ],
                    yAxis: [{
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}',
                            textStyle: {
                                color: "#616161",
                            }
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#616161",
                                width: 1,
                                type: "solid"
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "#616161",
                            }
                        }
                    },],
                    series: [{
                        name: '传统能源',
                        type: 'bar',
                        data: arr1,
                        barWidth: 10, //柱子宽度
                        barGap: 1, //柱子之间间距
                        showBackground: true,
                        label: {
                            normal: {
                                show: true,
                                position: "top",
                                distance: 20,
                                formatter: function (params) {
                                    return params.data.value;
                                },
                                textStyle: {
                                    color: "#fff",
                                    fontSize: 12
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#BE2238'
                                }, {
                                    offset: 1,
                                    color: '#BE2238'
                                }]),
                                opacity: 1,
                            }
                        }
                    }, {
                        name: '氢能源',
                        type: 'bar',
                        data: arr2,
                        barWidth: 10,
                        barGap: 1,
                        showBackground: true,
                        label: {
                            normal: {
                                show: true,
                                position: "top",
                                distance: 20,
                                formatter: function (params) {
                                    return params.data.value;
                                },
                                textStyle: {
                                    color: "#fff",
                                    fontSize: 12
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#00BFFE'
                                }, {
                                    offset: 1,
                                    color: '#00BFFE'
                                }]),
                                opacity: 1,
                            }
                        }
                    }, {
                        name: '新能源',
                        type: 'bar',
                        data: arr3,
                        barWidth: 10,
                        barGap: 1,
                        showBackground: true,
                        label: {
                            normal: {
                                show: true,
                                position: "top",
                                distance: 20,
                                formatter: function (params) {
                                    return params.data.value;
                                },
                                textStyle: {
                                    color: "#fff",
                                    fontSize: 12
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#7DC13C'
                                }, {
                                    offset: 1,
                                    color: '#7DC13C'
                                }]),
                                opacity: 1,
                            }
                        }
                    },
                    ]
                }
            })
        },
        //新能源车辆
        getNewTruck() {
            GET(this.$config.newTruck.url).then((res) => {
                if (res.status == 200) {
                    this.newTruck = res.data[0].value
                }
            });
        },
        //氢能源车辆
        getTruckH2() {
            GET(this.$config.truckH2.url).then((res) => {
                if (res.status == 200) {
                    this.truckH2 = res.data[0].value
                }
            });
        },
        //传统能源车辆
        getTruckOre() {
            GET(this.$config.truckOre.url).then((res) => {
                if (res.status == 200) {
                    this.truckOre = res.data[0].value
                }
            });
        },
        getRunningTruckType() {
            GET(this.$config.runningTruckType.url).then((res) => {
                if (res.status == 200) {
                    let dataList = res.data
                    let arr = []
                    let num = 0
                    dataList.forEach(item => {
                        item.name = item.type
                        num = num + item.value
                        arr.push(item.value)
                    })
                    let pie = Number(dataList[0].value / num * 100).toFixed(0)
                    this.barData = dataList
                    this.runningTruckTypeOption = {

                        color: ['#F52E5A', '#37FDA3', '#FFA523', '#3779FD', '#4CFFE6'],
                        legend: {
                            data: ['六轴', '五轴', '四轴', '三轴', '二轴'],
                            show: true,
                            align: 'left',
                            // right: 10,
                            textStyle: {
                                color: "#fff"
                            },
                            bottom: 10,
                            itemWidth: 10,
                            itemHeight: 10,
                            itemGap: 4
                        },
                        grid: {
                            top: '10%',
                            left: '0%',
                            right: '5%',
                            bottom: '0%',
                            containLabel: true
                        },
                        title: [
                            {
                                text: dataList[0].name,
                                x: "center",
                                top: "57%",
                                textStyle: {
                                    color: "#FFFFFF",
                                    fontSize: 22,
                                    fontWeight: "600",
                                },
                            },
                            {
                                text: pie + '%',
                                x: "center",
                                y: "center",
                                textStyle: {
                                    fontSize: 40,
                                    color: "#FFFFFF",
                                    fontFamily: "DINAlternate-Bold, DINAlternate",
                                    foontWeight: "600",
                                },
                            },
                        ],
                        backgroundColor: "#111",
                        polar: {
                            radius: ["70%", "76%"],
                            center: ["50%", "50%"],
                        },
                        angleAxis: {
                            max: 100,
                            show: false,
                        },
                        radiusAxis: {
                            type: "category",
                            show: true,
                            axisLabel: {
                                show: false,
                            },
                            axisLine: {
                                show: false,
                            },
                            axisTick: {
                                show: false,
                            },
                        },
                        series: [
                            {
                                name: '',
                                type: 'pie',
                                radius: ['60%', '70%'],
                                avoidLabelOverlap: false,
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: false,
                                        fontSize: '85',
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: dataList
                            }
                        ],
                    }
                }
            });

        },
        getRegisterTruckOption() {
            GET(this.$config.registerTruckOption.url).then((res) => {
                if (res.status == 200) {
                    let dataList = res.data
                    let arr = []
                    let num = 0
                    dataList.forEach(item => {
                        item.name = item.type
                        num = num + item.value
                        arr.push(item.value)
                    })
                    let pie = Number(dataList[0].value / num * 100).toFixed(0)
                    this.barData1 = dataList
                    this.registerTruckOption = {
                        legend: {
                            data: ['六轴', '五轴', '四轴', '三轴', '二轴'],
                            show: true,
                            align: 'left',
                            // right: 10,
                            textStyle: {
                                color: "#fff"
                            },
                            bottom: 10,
                            itemWidth: 10,
                            itemHeight: 10,
                            itemGap: 4
                        },
                        color: ['#F52E5A', '#37FDA3', '#FFA523', '#3779FD', '#4CFFE6'],
                        grid: {
                            top: '10%',
                            left: '0%',
                            right: '5%',
                            bottom: '0%',
                            containLabel: true
                        },
                        title: [
                            {
                                text: dataList[0].name,
                                x: "center",
                                top: "57%",
                                textStyle: {
                                    color: "#FFFFFF",
                                    fontSize: 22,
                                    fontWeight: "600",
                                },
                            },
                            {
                                text: pie + '%',
                                x: "center",
                                y: "center",
                                textStyle: {
                                    fontSize: 40,
                                    color: "#FFFFFF",
                                    fontFamily: "DINAlternate-Bold, DINAlternate",
                                    foontWeight: "600",
                                },
                            },
                        ],
                        backgroundColor: "#111",
                        polar: {
                            radius: ["70%", "76%"],
                            center: ["50%", "50%"],
                        },
                        angleAxis: {
                            max: 100,
                            show: false,
                        },
                        radiusAxis: {
                            type: "category",
                            show: true,
                            axisLabel: {
                                show: false,
                            },
                            axisLine: {
                                show: false,
                            },
                            axisTick: {
                                show: false,
                            },
                        },
                        series: [
                            {
                                name: '',
                                type: 'pie',
                                radius: ['60%', '70%'],
                                avoidLabelOverlap: false,
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: false,
                                        fontSize: '85',
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: dataList
                            }
                        ],
                    }
                }
            });

        },
        getRadioWidth(pct) {
            let width = (76 / 100) * parseFloat(pct);
            return width + 'px';
        }
    }
}
</script>
<style lang="less" scoped>
@font-face {
    font-family: MFLiHei;
    src: url('./font/MFLiHei_Noncommercial-Regular.otf') format('opentype');
}

@font-face {
    font-family: FXLed;
    src: url('./font/DSDIGI1.ttf');
}

.fontMF {
    font-family: MFLiHei;
}

.fontFx {
    font-family: FXLed;
}

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

.MR40 {
    margin-right: 40px;
}

.page_index {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;

    .video_box {
        width: 4227px;
        height: 1147px;
        z-index: 0;
        transform: rotate(0deg);
        opacity: 0.5;
        pointer-events: none;
        left: 5px;
        top: -4px;
    }

    .absolute {
        // position: absolute !important;
        // margin: 0 !important;
    }

    .content {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 1;
        width: calc(100% - 80px);
        padding: 0 20px;

        .topbg {
            width: 4220px;
            height: 312px;
            z-index: 0;
            transform: rotate(0deg);
            opacity: 1;
            pointer-events: none;
            left: -15px;
            top: -4px;
            position: absolute;
        }

        .top {
            position: absolute !important;
            margin: 0 !important;
            width: 4220px;
            height: 312px;
            display: flex;
            justify-content: space-between;
            background-image: url(../../assets/img/title_bg.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;

            .title {
                text-align: center;
                line-height: 25px;
                flex: 1;
                padding: 25px 0;
                pointer-events: auto;
                color: rgb(255, 255, 255);
                font-weight: bold;
                font-family: "Microsoft Yahei", Arial, "sans-serif";
                font-size: 40px;
                writing-mode: horizontal-tb;
                letter-spacing: 0px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }
        }

        .contain {
            display: flex;
            margin-top: 130px;

            .three_tits {
                width: 279px;
                height: 40px;
                pointer-events: auto;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                color: rgb(204, 204, 204);
                font-weight: bold;
                font-family: "Microsoft Yahei", Arial, "sans-serif";
                font-size: 18px;
                writing-mode: horizontal-tb;
                letter-spacing: 0px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                padding-left: 32px;
                padding-top: 20px;
            }

            .left_charts {
                .rows {
                    margin-left: 20px;
                }

                .charts {
                    display: flex;

                    .left_content_one {
                        width: 541px;
                        height: 1005px;
                        pointer-events: auto;
                        border-radius: 0px;
                        border-style: solid;
                        border-image: url(../../assets/img/chart_bg.png);
                        border-image-slice: 288 500 272 680;
                        border-image-width: 288px 500px 272px 680px;
                        border-image-repeat: repeat;
                        border-width: 1px;
                        background: none;

                        .scroll_table {
                            width: 520px;
                            margin: 0 auto;

                            .thead {}

                            .tbody {
                                .seamless-warp {
                                    overflow: hidden;
                                    height: 880px;
                                    width: 520px;
                                }
                            }

                            th {
                                text-align: left;
                                font-size: 12px;
                                font-weight: 400;
                                color: #ffffff;
                                line-height: 55px;
                            }

                            .td {
                                font-size: 12px;
                                font-weight: 400;
                                color: #ffffff;
                                line-height: 55px;
                            }

                            .tr:nth-child(even) {
                                background-color: rgba(255, 255, 255, 0.1);
                                // background-color: rgba(255, 255, 255, 0.399);
                            }

                            .radio_td {
                                display: flex;
                                align-items: center;

                                .radio {
                                    position: relative;
                                    min-width: 6px;
                                    height: 10px;
                                    background: linear-gradient(90deg, #29abe3, #01ffff);
                                    margin-right: 4px;

                                    .div {
                                        width: 6px;
                                        height: 16px;
                                        background: #ffffff;
                                        position: absolute;
                                        top: -3px;
                                        right: 0;
                                    }
                                }
                            }
                        }
                    }

                    .left_content_two {
                        width: 803px;
                        height: 563px;
                        pointer-events: auto;
                        border-radius: 0px;
                        border-style: solid;
                        border-image: url(../../assets/img/chart_bg.png);
                        border-image-slice: 288 500 272 680;
                        border-image-width: 288px 500px 272px 680px;
                        border-image-repeat: repeat;
                        border-width: 1px;
                        background: none;

                        .quantity_box {
                            padding: 50px;

                            .quantity_top {
                                height: 129px;
                                // background-color: #ccc;
                                // opacity: 0.1;
                                display: flex;
                                justify-content: space-between;
                                margin-top: 30px;

                                .quantity_topOne {
                                    background-color: rgba(36, 38, 45, 0.25);
                                    height: 129px;
                                    width: 336px;
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: center;


                                    .quantity_txt {
                                        color: rgb(213, 213, 213);
                                        font-weight: normal;
                                        font-family: "Microsoft Yahei", Arial, "sans-serif";
                                        font-size: 20px;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        overflow: hidden;
                                        line-height: normal;
                                        text-align: left;
                                        padding-left: 10px;

                                    }


                                    .quantity_num {
                                        color: rgb(55, 121, 253);
                                        font-size: 53px;
                                        font-weight: bold;
                                        letter-spacing: 0;
                                        display: flex;
                                        align-items: baseline;
                                        padding-left: 10px;

                                        .quantity_unit {
                                            font-size: 18px;
                                            color: #d9d9d9;
                                            font-weight: bolder;
                                            vertical-align: super;
                                            font-family: Microsoft Yahei;
                                        }
                                    }
                                }

                            }

                            .quantity_bottom {
                                height: 279px;
                                // background-color: #ccc;
                                // opacity: 0.1;
                                display: flex;
                                justify-content: space-between;
                                margin-top: 40px;

                                .quantity_left {
                                    width: 332px;
                                    height: 279px;
                                    background-color: rgba(36, 38, 45, 0.25);
                                    color: #fff;
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: center;
                                    padding-left: 10px;

                                    .quantity_txt {
                                        color: rgb(213, 213, 213);
                                        font-weight: normal;
                                        font-family: "Microsoft Yahei", Arial, "sans-serif";
                                        font-size: 32px;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        overflow: hidden;
                                        line-height: normal;
                                        text-align: left;

                                    }

                                    .quantity_num {
                                        color: rgb(245, 46, 90);
                                        font-size: 128px;
                                        font-weight: bold;
                                        letter-spacing: 0;
                                        display: flex;
                                        align-items: baseline;

                                        .quantity_unit {
                                            font-size: 36px;
                                            color: #d9d9d9;
                                            font-weight: bolder;
                                            vertical-align: super;
                                            font-family: Microsoft Yahei;
                                        }
                                    }
                                }

                                .quantity_right {
                                    width: 336px;
                                    height: 279px;


                                    .quantity_rightBox {
                                        display: flex;
                                        justify-content: space-between;
                                        width: 336px;
                                        height: 129px;
                                        align-items: center;
                                        background-color: rgba(36, 38, 45, 0.25);
                                        color: #fff;
                                        margin-bottom: 20px;

                                        .quantity_txtBox {
                                            padding-left: 10px;

                                            .quantity_txt {
                                                font-weight: normal;
                                                font-family: "Microsoft Yahei", Arial, "sans-serif";
                                                font-size: 24px;
                                                text-overflow: ellipsis;
                                                white-space: nowrap;
                                                overflow: hidden;
                                                line-height: normal;
                                            }

                                            .quantity_num {
                                                font-size: 53px;
                                                font-weight: bold;
                                                letter-spacing: 0;
                                                display: flex;
                                                align-items: baseline;
                                                color: rgb(255, 255, 255);
                                            }

                                            .quantity_unit {
                                                font-size: 18px;
                                                color: #d9d9d9;
                                                font-weight: bolder;
                                                vertical-align: super;
                                                font-family: Microsoft Yahei;
                                            }
                                        }

                                        .quantity_image {
                                            width: 144px;
                                            height: 97px;
                                            pointer-events: auto;
                                            image-rendering: -webkit-optimize-contrast;
                                            background-repeat: no-repeat;
                                            background-size: 100% 100%;
                                            background-image: url('../../assets/img/icon_car3.png');
                                            -webkit-mask-image: none;
                                            -webkit-mask-repeat: initial;
                                            -webkit-mask-size: initial;
                                            background-color: initial;
                                            border-radius: 0px;
                                            cursor: pointer;
                                        }

                                        .quantity_image1 {
                                            background-image: url('../../assets/img/icon_car4.png');
                                        }
                                    }
                                }
                            }
                        }

                    }

                    .left_content_three {
                        margin-top: 20px;
                        width: 802px;
                        height: 415px;
                        pointer-events: auto;
                        border-radius: 0px;
                        border-style: solid;
                        border-image: url(../../assets/img/chart_bg.png);
                        border-image-slice: 288 500 272 680;
                        border-image-width: 288px 500px 272px 680px;
                        border-image-repeat: repeat;
                        border-width: 1px;
                        background: none;

                        .scroll_table {
                            width: 762px;
                            margin: 0 auto;
                            margin-top: 50px;

                            .thead {
                                background-color: rgb(0, 80, 179);
                            }

                            .tbody {
                                .seamless-warp {
                                    overflow: hidden;
                                    // height: 360px;
                                    height: 285px;
                                    width: 100%;
                                }
                            }

                            th {
                                text-align: left;
                                font-size: 12px;
                                font-weight: 400;
                                color: #ffffff;
                                line-height: 57px;
                                background-color: rgb(0, 80, 179);
                            }

                            .td {
                                font-size: 12px;
                                font-weight: 400;
                                color: #ffffff;
                                line-height: 57px;
                            }

                            .tr {
                                background-color: #032255;
                                // background-color: rgba(255, 255, 255, 0.399);
                            }

                            .radio_td {
                                display: flex;
                                align-items: center;
                                color: #ffffff;

                                .radio {
                                    position: relative;
                                    min-width: 6px;
                                    height: 10px;
                                    background: linear-gradient(90deg, #29abe3, #01ffff);
                                    margin-right: 4px;

                                    .div {
                                        width: 6px;
                                        height: 16px;
                                        background: #ffffff;
                                        position: absolute;
                                        top: -3px;
                                        right: 0;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .mid_charts {
                margin-left: 20px;

                .mid_content_one {
                    width: 1350px;
                    height: 993px;
                    pointer-events: auto;
                    border-radius: 0px;
                    border-style: solid;
                    border-image: url(../../assets/img/charts_bg.png);
                    border-image-slice: 17 24 18 19;
                    border-image-width: 17px 24px 18px 19px;
                    border-image-repeat: repeat;
                    border-width: 1px;
                    background: none;

                    .mid_Top {
                        display: flex;

                        .mid_TopBox {
                            width: 684px;
                            height: 179px;
                            pointer-events: auto;
                            border-radius: 0px;
                            border-style: solid;
                            border-image-source: url('../../assets/img/data_bg3.png');
                            border-image-slice: 423 606 410 652;
                            border-image-width: 423px 606px 410px 652;
                            border-image-repeat: repeat;
                            border-width: 1px;
                            background: none;
                            color: #ffffff;

                            .textBox {
                                width: 421px;
                                height: 135px;
                                margin: 0 auto;
                                margin-top: 40px;
                                color: rgb(191, 191, 191);
                                font-weight: lighter;
                                font-family: "Microsoft Yahei", Arial, "sans-serif";
                                font-size: 18px;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                overflow: hidden;
                                line-height: normal;

                                .num_box {
                                    display: flex;
                                    align-items: baseline;
                                    font-size: 70px;
                                    font-weight: bolder;
                                    letter-spacing: 0.02em;
                                    margin-right: 0.1em;
                                    border-radius: 0px;
                                    width: 70px;
                                    height: 92px;
                                    line-height: 92px;
                                    color: #ffffff;
                                    // font-family: DS-Digital;
                                    font-family: FXLed;

                                    span {
                                        font-size: 20px;
                                        color: #ffffff;
                                        font-weight: bolder;
                                        vertical-align: super;
                                        font-family: Microsoft Yahei;
                                    }
                                }
                            }

                            // margin: 0 15px;
                        }
                    }

                    .mid {
                        width: 1293px;
                        height: 619px;
                        pointer-events: auto;
                        margin: 0 auto;

                        // background-color: green;
                        .iframe_box {
                            width: 100%;
                            height: 619px;
                            // background-image: url(../../assets/img/iframe_bg.png);
                            // background-repeat: no-repeat;
                            // background-size: 100% 100%;
                            overflow: hidden;

                            #iframe {
                                // margin: 10px 12px;
                                width: 1293px;
                                height: 619px;
                                // border-radius: 30px;
                            }
                        }
                    }

                    .mid_BottomBox {
                        width: 1295px;
                        height: 155px;
                        pointer-events: auto;
                        border: none;
                        border-radius: 0px;
                        background: rgb(38, 38, 38);
                        margin: 0 auto;
                        margin-top: 15px;

                        .content_titles {
                            font-size: 18px;
                            font-weight: 400;
                            color: #ffffff;
                            padding: 10px 0 0px 20px;
                        }

                    }
                }
            }

            .right_charts {
                margin-left: 20px;

                .charts {
                    display: flex;

                    .right_content_one {
                        width: 734px;
                        height: 663px;
                        pointer-events: auto;
                        border-radius: 0px;
                        border-style: solid;
                        border-image-source: url(../../assets/img/chart_bg.png);
                        border-image-slice: 288 500 272 680;
                        border-image-width: 288px 500px 272px 680px;
                        border-image-repeat: repeat;
                        border-width: 1px;
                        background: none;

                        .right_one_box {
                            width: 667px;
                            height: 557px;
                            pointer-events: auto;
                            border: none;
                            border-radius: 0px;
                            background: rgb(36, 38, 45);
                            margin: 0 auto;
                            margin-top: 60px;

                            .two_tit {
                                height: 39px;
                                pointer-events: auto;
                                border: none;
                                border-radius: 0px;
                                background: rgb(29, 30, 36);
                                padding-left: 30px;
                                pointer-events: auto;
                                display: flex;
                                align-items: center;
                                justify-content: flex-start;
                                color: rgb(204, 204, 204);
                                font-weight: bold;
                                font-family: "Microsoft Yahei", Arial, "sans-serif";
                                font-size: 18px;
                                writing-mode: horizontal-tb;
                                letter-spacing: 0px;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                overflow: hidden;
                            }
                        }
                    }

                    .right_content_two {
                        margin-top: 20px;
                        width: 734px;
                        height: 309px;
                        pointer-events: auto;
                        border-radius: 0px;
                        border-style: solid;
                        border-image-source: url(../../assets/img/chart_bg.png);
                        border-image-slice: 288 500 272 680;
                        border-image-width: 288px 500px 272px 680px;
                        border-image-repeat: repeat;
                        border-width: 1px;
                        background: none;

                        .two_tit {
                            width: 279px;
                            height: 40px;
                            pointer-events: auto;
                            display: flex;
                            align-items: center;
                            justify-content: flex-start;
                            color: rgb(204, 204, 204);
                            font-weight: bold;
                            font-family: "Microsoft Yahei", Arial, "sans-serif";
                            font-size: 18px;
                            writing-mode: horizontal-tb;
                            letter-spacing: 0px;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            overflow: hidden;
                            padding-left: 32px;
                            padding-top: 20px;
                        }
                    }

                    .right_content_three {
                        position: relative;
                        width: 688px;
                        height: 688px;
                        pointer-events: auto;
                        border-radius: 0px;
                        border-style: solid;
                        border-image: url(../../assets/img/chart_bgtit.png);
                        border-image-slice: 101 690 35 693;
                        border-image-width: 101px 690px 35px 693px;
                        border-image-repeat: repeat;
                        border-width: 1px;
                        background: none;

                        .bgimg {
                            position: absolute;
                            width: 688px;
                            height: 688px;
                            left: 50%;
                            top: 50%;
                            transform: translate(-50%, -50%);
                        }

                        .three_tit {
                            width: 239px;
                            height: 42px;
                            pointer-events: auto;
                            display: flex;
                            align-items: center;
                            cursor: default;
                            background-color: initial;
                            border: none;
                            border-radius: 0px;
                            justify-content: center;
                            font-weight: bold;
                            font-family: "Microsoft Yahei", Arial, "sans-serif";
                            font-size: 28px;
                            writing-mode: horizontal-tb;
                            letter-spacing: 0px;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            overflow: hidden;
                            margin: 0 auto;
                            overflow: unset;
                            text-overflow: unset;
                            white-space: unset;
                            color: unset;
                            background-image: linear-gradient(135deg, rgb(0, 222, 255) 0%, rgb(0, 139, 255) 100%);
                            background-clip: text;
                            -webkit-text-fill-color: transparent;
                        }

                        .three_box {
                            margin-top: 30px;

                            .tree_item {
                                display: flex;
                            }

                            .i_tit {
                                width: 130px;
                                height: 56px;
                                pointer-events: auto;
                                display: flex;
                                align-items: center;
                                cursor: default;
                                background-color: initial;
                                border: none;
                                border-radius: 0px;
                                justify-content: center;
                                font-weight: bold;
                                font-family: "Microsoft Yahei", Arial, "sans-serif";
                                font-size: 28px;
                                writing-mode: horizontal-tb;
                                letter-spacing: 0px;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                overflow: hidden;
                                overflow: unset;
                                text-overflow: unset;
                                white-space: unset;
                                color: unset;
                                background-clip: text;
                                -webkit-text-fill-color: transparent;
                            }

                            .c_1 {
                                background-image: linear-gradient(rgb(180, 236, 81) 0%, rgb(66, 147, 33) 100%);
                            }

                            .c_2 {
                                background-image: linear-gradient(rgb(61, 83, 231) 0%, rgb(35, 132, 255) 100%);
                            }

                            .c_3 {
                                background-image: linear-gradient(rgb(245, 81, 95) 0%, rgb(159, 4, 27) 100%);
                            }

                            .i_right {
                                display: flex;
                                align-items: center;

                                .car_img {
                                    width: 319px;
                                    height: 170px;
                                    pointer-events: auto;
                                    border-radius: 0px;
                                    cursor: pointer;
                                }

                                .car_num {
                                    width: 245px;
                                    height: 199px;
                                    pointer-events: auto;
                                    display: flex;
                                    align-items: center;
                                    cursor: default;
                                    background-color: initial;
                                    border: none;
                                    border-radius: 0px;
                                    justify-content: center;
                                    font-weight: bold;
                                    font-family: "Microsoft Yahei", Arial, "sans-serif";
                                    font-size: 72px;
                                    writing-mode: horizontal-tb;
                                    letter-spacing: 0px;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: unset;
                                    white-space: unset;
                                    color: unset;
                                    background-image: linear-gradient(135deg, rgb(0, 222, 255) 0%, rgb(0, 139, 255) 100%);
                                    background-clip: text;
                                    -webkit-text-fill-color: transparent;
                                }
                            }
                        }
                    }

                    .right_content_bot {
                        margin-top: 20px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .bot_chart {
                            width: 295px;
                            height: 295px;
                            pointer-events: auto;
                            border: none;
                            border-radius: 0px;

                            // background: rgb(36, 38, 45);
                            .bot_tit {
                                width: 100%;
                                height: 32px;
                                line-height: 32px;
                                pointer-events: auto;
                                background-color: #1D1E24;
                                color: rgb(204, 204, 204);
                                font-weight: bold;
                                font-family: "Microsoft Yahei", Arial, "sans-serif";
                                font-size: 18px;
                                writing-mode: horizontal-tb;
                                letter-spacing: 0px;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                overflow: hidden;
                                text-indent: 15px;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>