weighbridge-screen/src/components/page/Dashboard.vue

<!-- 首页 -->
<template>
    <div class="page_index">
        <div id="bg"></div>
        <div class="content">
            <!-- <div :class="tabsActive == 1 ? 'top top_bg_1' : 'top top_bg_2'">
                <div class="title fontMF">无人地磅数据可视化</div>
            </div> -->
            <div class="weather flex">
                <div class="flex fontMF MR40" style="padding-left: 40px;">
                    <span class="text">{{ weatherInfo && weatherInfo.info }}</span>
                </div>
                <div class="text flex fontMF MR40" style="margin-left: 40px;">
                    温度 &nbsp;<span class="num fontFx">{{ weatherInfo && weatherInfo.temperature }}<span
                            style="font-size: 18px"> ℃</span></span>
                </div>
            </div>
            <div class="time flex">
                <div class=" fontFx num" style="margin-right: 20px;">{{ timeInfo && timeInfo.ymd }}</div>
                <div class="fontFx num">{{ timeInfo && timeInfo.hms }}</div>
            </div>
            <div class="contain">
                <div class="mid_charts">
                    <div class="botChart">
                        <div class="left_charts">
                            <div class="leftdivitem newLeftdivitem" style="padding: 23px 26px;">
                                <div class="btnGroup">
                                    <div :class="current1 == 1 ? 'btn1' : 'btn2'" @click="current1 = 1">物流</div>
                                    <div :class="current1 == 2 ? 'btn1' : 'btn2'" style="position:relative;left:-6px"
                                        @click="current1 = 2">铲车</div>
                                </div>
                                <div class="title1">物流铲车司机排行榜 </div>
                                <div class="scroll_table">
                                    <div class="thead flex">
                                        <div class="th" style="width: 20%;padding-left: 10px;">排名</div>
                                        <div class="th" style="width: 36%">运单号</div>
                                        <div class="th" style="width: 24%">车牌号</div>
                                        <div class="th" style="width: 20%">超时状态</div>
                                    </div>
                                    <div class="tbody">
                                        <vue-seamless-scroll v-if="current1 == 1"
                                            :data="driverRanking.logistics_truck_driver_ranking" class="seamless-warp"
                                            style="height:800px;" :class-option="{
                                                step: 2, // 数值越大速度滚动越快
                                                limitMoveNum: 15, // 开始无缝滚动的数据量 this.dataList.length
                                                hoverStop: true, // 是否开启鼠标悬停stop
                                                direction: 1, // 0向下 1向上 2向左 3向右
                                                openWatch: true, // 开启数据实时监控刷新dom
                                                singleHeight: 32, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                                                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                                                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
                                            }">
                                            <div class="tr flex"
                                                v-for="(item, i) in driverRanking.logistics_truck_driver_ranking">
                                                <div class="td" style="width: 20%;padding-left: 10px;">{{ item.ranking
                                                    }}
                                                </div>
                                                <div class="td" style="width: 36%">{{ item.task_no }}</div>
                                                <div class="td" style="width: 24%">{{ item.license_plate }}
                                                </div>
                                                <div class="td" style="width: 20%;color:#01FFFF">
                                                    {{ item.timeout_status }}
                                                </div>
                                            </div>
                                        </vue-seamless-scroll>
                                        <vue-seamless-scroll v-if="current1 == 2" :data="driverRanking.driver_ranking"
                                            class="seamless-warp" style="height: 800px;" :class-option="{
                                                step: 2, // 数值越大速度滚动越快
                                                limitMoveNum: driverRanking.driver_ranking.length, // 开始无缝滚动的数据量 this.dataList.length
                                                hoverStop: true, // 是否开启鼠标悬停stop
                                                direction: 1, // 0向下 1向上 2向左 3向右
                                                openWatch: true, // 开启数据实时监控刷新dom
                                                singleHeight: 30, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                                                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                                                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
                                            }">
                                            <div class="tr flex" v-for="(item, i) in driverRanking.driver_ranking">
                                                <div class="td" style="width: 20%;padding-left: 10px;">{{ item.ranking
                                                }}
                                                </div>
                                                <div class="td" style="width: 36%">{{ item.task_no }}</div>
                                                <div class="td" style="width: 24%">{{ item.license_plate }}
                                                </div>
                                                <div class="td" style="width: 20%;color:#01FFFF">
                                                    {{ item.timeout_status }}
                                                </div>
                                            </div>
                                        </vue-seamless-scroll>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="left_charts newLeftdivitem" style="margin-left: 20px;">
                            <div class="leftdivitem leftdivitem1">
                                <div class="leftdivitemchild">
                                    <div class="title2">场内拥堵率</div>
                                    <div class="pie pie1">
                                        <Charts :eOption="pie" v-if="pie" style="height: 207px" />
                                    </div>
                                </div>
                                <div class="leftdivitemchild">
                                    <div class="title2">场内异常率</div>
                                    <div class="pie pie2">
                                        <Charts :eOption="pie2" v-if="pie2" style="height: 207px" />
                                    </div>
                                </div>
                            </div>
                            <div class="leftdivitem leftdivitem1" style="">
                                <div class="leftdivitemchild">
                                    <div class="title2">潜在接单司机</div>
                                    <Charts :eOption="bing" v-if="bing" style="height:250px" />
                                </div>
                                <div class="leftdivitemchild">
                                    <Charts :eOption="bar" v-if="bar" style="height: 250px;margin-top: 30px;" />
                                </div>
                            </div>
                            <div class="leftdivitem " style="padding: 14px 30px;">
                                <div class="title2">近30天出货量</div>
                                <div>
                                    <Charts :eOption="line" v-if="line" style="height: 250px"></Charts>
                                </div>
                            </div>


                        </div>


                        <div class="mid">
                            <div class="topChart flex">
                                <div class="toptitle">今日概况</div>
                                <div class="num_item" v-for="(item, i) in topChartList" :key="i">
                                    <div class="num_title"> <img src="../../assets/newimg/s.png" alt=""> {{ item.title
                                        }}</div>
                                    <div class="num_value">
                                        <div v-for="(obj, j) in item.value" :key="j" class="num fontFx">{{ obj }}</div>
                                        <div class="weight">{{ item.unit }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="midMap">
                                <div class="toptitle">矿区地图</div>
                                <div style="height: 100%;border-radius:20px;overflow: hidden;">
                                    <amap :zoom="6" :marker="Weighbridge" :center="center" @map-loaded="onMapLoaded">
                                    </amap>
                                </div>
                            </div>
                            <!-- <div class="middibu"></div> -->
                        </div>
                        <div class="right">
                            <div class="right_content">
                                <div class="rightcontent1">
                                    <div class="title2">地磅数据统计</div>
                                    <div class="btnGroup2">
                                        <div :class="current2 == 1 ? 'btn1' : 'btn2'" @click="current2 = 1">按月计算</div>
                                        <div :class="current2 == 2 ? 'btn1' : 'btn2'" @click="current2 = 2"
                                            style="position:relative;left:-6px">按年计算</div>
                                    </div>
                                    <div class="rightcontentitem1">
                                        <div>
                                            <p>{{
                                                current2 == 1 ?
                                                    statistics.month.vehicle_count : statistics.year.vehicle_count
                                            }}</p>
                                            <p>{{ current2 == 1 ? '月' : '年' }}过磅车辆/辆</p>
                                        </div>
                                        <div>
                                            <p>{{ current2 == 1 ? statistics.month.material_ton :
                                                statistics.year.material_ton
                                            }}</p>
                                            <p>{{ current2 == 1 ? '月' : '年' }}出货量/吨</p>
                                        </div>
                                    </div>
                                    <div class="rightcontentitem2">
                                        <div>
                                            <p>{{ current2 == 1 ? statistics.month.order_count :
                                                statistics.year.order_count
                                            }}</p>
                                            <p>{{ current2 == 1 ? '月' : '年' }}派单量/单</p>
                                        </div>
                                        <div>
                                            <p>{{
                                                current2 == 1 ?
                                                    statistics.month.exception_count : statistics.year.exception_count
                                            }}</p>
                                            <p>{{ current2 == 1 ? '月' : '年' }}异常处理量/单</p>
                                        </div>
                                    </div>
                                    <div class="detail">
                                        <div class="btnGroup">
                                            <div :class="current3 == 1 ? 'btn1' : 'btn2'" @click="current3 = 1">今日</div>
                                            <div :class="current3 == 2 ? 'btn1' : 'btn2'" @click="current3 = 2">本月</div>
                                        </div>
                                        <div class="aa a1">
                                            <p>{{ current3 == 1 ? "今日" : "本月" }}总量/吨</p>
                                            <p>{{ current3 == 1 ? overview.today.total : overview.month.total }}</p>
                                        </div>
                                        <div class="a3">
                                            <img src="@/assets/newimg/490f9990ec23ee5671551eca4d18f3aa.png" alt="">
                                            <!-- <p>订单</p>
                                            <p>详情</p> -->
                                            <!-- <p>{{ current3 == 1 ? overview.today.completion_rate :
                                                overview.month.completion_rate }}<span>%</span>
                                            </p>
                                            <p>完成率</p> -->
                                        </div>
                                        <div class="aa a2">
                                            <p>{{ current3 == 1 ? "今日" : "本月" }}车次/次</p>
                                            <p>{{ current3 == 1 ? overview.today.vehicle_count :
                                                overview.month.vehicle_count }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="rightcontent2">
                                    <div class="title1">异常过磅车辆数据库</div>
                                    <div class="scroll_table">
                                        <div class="thead flex">
                                            <div class="th" style="width: 20%;padding-left: 10px;">地磅名称</div>
                                            <div class="th" style="width: 24%">车牌号</div>
                                            <div class="th" style="width: 36%">异常时间</div>
                                            <div class="th" style="width: 20%">异常原因</div>
                                        </div>
                                        <div class="tbody">
                                            <vue-seamless-scroll :data="abnormal" class="seamless-warp"
                                                style="height: 370px;" :class-option="{
                                                    step: 2, // 数值越大速度滚动越快
                                                    limitMoveNum: abnormal.length, // 开始无缝滚动的数据量 this.dataList.length
                                                    hoverStop: true, // 是否开启鼠标悬停stop
                                                    direction: 1, // 0向下 1向上 2向左 3向右
                                                    openWatch: true, // 开启数据实时监控刷新dom
                                                    singleHeight: 30, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                                                    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                                                    waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
                                                }">
                                                <div class="tr flex" v-for="(item, i) in abnormal">
                                                    <div class="td" style="width: 20%;padding-left: 10px;">{{
                                                        item.wb_name }}
                                                    </div>
                                                    <div class="td" style="width: 24%">{{ item.license_plate }}</div>
                                                    <div class="td" style="width: 36%">{{ item.exception_time }}</div>
                                                    <div class="td" style="width: 20%;color:#01FFFF">
                                                        {{ item.exception_reason }}</div>
                                                </div>
                                            </vue-seamless-scroll>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="right">
                            <div class="right_content">

                                <div class="rightcontent2">
                                    <div class="title2">过磅记录数据库</div>
                                    <div class="list" style="overflow: hidden;margin-top: 17px;">
                                        <vue-seamless-scroll :data="overweightRecord" class="seamless-warp"
                                            style="height: 820px;" :class-option="{
                                                step: 2, // 数值越大速度滚动越快
                                                limitMoveNum: overweightRecord.length, // 开始无缝滚动的数据量 this.dataList.length
                                                hoverStop: true, // 是否开启鼠标悬停stop
                                                direction: 1, // 0向下 1向上 2向左 3向右
                                                openWatch: true, // 开启数据实时监控刷新dom
                                                singleHeight: 110, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                                                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                                                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
                                            }">
                                            <div class="item" v-for="(item, i) in overweightRecord"
                                                style="margin-bottom: 10px;">
                                                <p class="tt">地磅编号：{{ item.wb_code }}</p>
                                                <div>
                                                    <p><span>车牌号：</span>{{ item.license_plate }}</p>
                                                    <p><span>地磅名称：</span>{{ item.wb_name }}</p>
                                                </div>
                                                <div>
                                                    <p><span>过磅重量：</span>{{ item.tare_weight }}吨</p>
                                                    <p><span>过磅时间：</span>{{ item.recv_time }}</p>
                                                </div>
                                                <!-- <div>
                                                    <p><span>货品净重：</span>{{ item.actual_weight }}</p>
                                                    <p><span>出场时间：</span>{{ item.confirm_out_time }}</p>
                                                </div> -->
                                            </div>
                                        </vue-seamless-scroll>
                                    </div>
                                    <!-- <div class="scroll_table">
                                        <div class="tbody">
                                            <vue-seamless-scroll :data="orderSituationList" class="seamless-warp"
                                                style="height: 110px;" :class-option="defaultOption3">
                                                <div class="tr flex" v-for="(item, i) in orderSituationList">
                                                    <div class="td" style="width: 20%;padding-left: 10px;">{{ item.x1 }}
                                                    </div>
                                                    <div class="td" style="width: 24%">{{ item.x3 }}</div>
                                                    <div class="td" style="width: 36%">2025/05/08 12:22:32</div>
                                                    <div class="td" style="width: 20%;color:#01FFFF">超载</div>
                                                </div>
                                            </vue-seamless-scroll>
                                        </div>
                                    </div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import moment from 'moment';
import $ from 'jquery';
import Charts from '@/components/selfCP/charts.vue';
import { POST, GET } from '@/server/api/common';
import { pie, pie2, initBing, barData, initLine } from './data';
import * as echarts from "echarts";
import 'echarts-gl'
import amap from './amap.vue'
export default {
    name: 'dashboard',
    components: {
        Charts,
        amap
    },
    data() {
        return {
            weatherTimer: null, // 定时器  更新天气信息
            weatherInfo: null, // 天气信息
            timer: null, // 定时器  更新时间
            timeInfo: null, //  时间信息

            SalesProportion: null,
            energy_consumption: null, // 能源消耗
            yield: null, // 实时产量
            sales_volumn: null, // 实时销量
            chartsTimer: null, // 左侧charts定时器
            typeList: [], // 分类列表

            CalciumOxideTimer: null, // 氧化钙轮播定时器
            modal_charts: null, // 弹窗 charts
            messageList: [], // 消息队列
            messageIndex: 0, // 当前消息下标
            client: null, // mqtt
            saveChart: null, // 节能减排
            formInline: {
                type: 1,
                nickName: '',
                startDate: moment().format('YYYY-MM-DD'),
                endDate: moment().format('YYYY-MM-DD')
            },
            modalTitle: '',
            modalTimeIndex: 1,
            time_title: moment().format('YYYY-MM-DD'),
            modalType: 1,
            mineralTypeList: [], // 矿产类别
            oxideTimer: null,
            loadedMap: false,
            topicCate: null,
            apiUrl: null,
            videoList: [], // 视频列表
            topChartList: [
                { title: '总入场车次/辆', value: [0, 6, 9, 2, 3, 6] },
                { title: '总出场车次/辆', value: [0, 6, 9, 2, 3, 6] },
                { title: '当前总出货量/吨', value: [0, 6, 9, 2, 3, 6] },
                { title: '当前场内车辆/辆', value: [0, 9, 2, 3] },
                { title: '异常过磅/辆', value: [0, 9, 2, 3] },

            ],
            wait_entry_num: 0,
            running_num: 0,
            total_running_num: 0,
            salesForShihui: [],
            salesForYanghuagai: [],
            salesForKHxse: [],
            sevenDaysShipmentOption: null,
            sevenDaysSaleOption: null,
            saleNumProportion: null,
            salePriceProportion: null,
            numsStatictis: null,
            tabsActive: 1,
            pie: null,
            pie2: null,
            bar: null,
            line: null,
            bing: null,
            list: ['#001', '#002', '#003', '#004', '#005'],
            center: [103.530507, 29.473931], // 北京坐标
            mapInstance: null,
            AMap: null,
            marker: [[103.53031386349485, 29.473982265482523]],
            data: {

            },
            orderSituationList: [],
            driverRanking: {
                driver_ranking: [],
                logistics_truck_driver_ranking: []
            },
            current1: 1,
            current2: 1,
            current3: 1,
            statistics: {
                "month": {
                    "vehicle_count": 0,
                    "material_ton": 0,
                    "order_count": 0,
                    "exception_count": 0
                },
                "year": {
                    "vehicle_count": 0,
                    "material_ton": 0,
                    "order_count": 0,
                    "exception_count": 0
                }
            },
            overview: {
                "today": {
                    "total": 0,
                    "completion_rate": 0,
                    "vehicle_count": 0
                },
                "month": {
                    "total": 0,
                    "completion_rate": 0,
                    "vehicle_count": 0
                }
            },
            abnormal: [],
            overweightRecord: [],
            timer: null,
            Weighbridge: []
        };
    },
    mounted() {

        moment.locale('zh-cn');
        this.getWeather()
        this.getTime()
        this.getApi()
        this.getApi2()
        this.cycleGetApi()
    },
    destoryed() {
        clearInterval(this.timer);

    },
    computed: {

    },
    methods: {
        cycleGetApi() {
            clearInterval(this.timer)
            this.timer = setInterval(() => {

                this.getApi2()
            }, 2 * 60 * 1000)
        },
        getApi2() {

            //地磅数据统计
            POST(`${this.$config.api}/large_screen/getTodayCompanyWbStatistics`).then(res => {
                console.log(res);

                this.topChartList = [
                    { title: '总入场车次/辆', value: this.numberSplit(res.data.total_arrival_vehicle_count) },
                    { title: '总出场车次/辆', value: this.numberSplit(res.data.total_departure_vehicle_count) },
                    { title: '当前总出货量/吨', value: this.numberSplit(res.data.total_departure_material_ton) },
                    { title: '当前场内车辆/辆', value: this.numberSplit(res.data.current_field_vehicle_count) },
                    { title: '异常过磅/辆', value: this.numberSplit(res.data.exception_overweight_vehicle_count) },
                ]

                pie.title[1].text = `${res.data.congestion_rate}%`
                pie.series[0].data = [res.data.congestion_rate]
                this.pie = pie

                pie2.title[1].text = `${res.data.exception_rate}%`
                pie2.series[0].data = [res.data.exception_rate]
                this.pie2 = pie2
            })
            //今日订单概况总量、完成率、车次
            POST(`${this.$config.api}/large_screen/getTodayMonthOrderOverview`).then(res => {
                this.overview = res.data
            })
            //地磅信息
            POST(`${this.$config.api}/large_screen/getWeighbridgeInfo`).then(res => {
                this.Weighbridge = res.data.map(r => {
                    return {
                        "truckNo": r.name,
                        "businessStatus": 1,
                        "runStatus": 2,
                        "lat": "112.32956",
                        "lng": "34.651725",
                        "detailAddress": null,
                        "speed": 0.0,
                        "gpsTime": "2024-04-17 14:31:09",
                        lnglat: [r.lng, r.lat]
                    }
                })
            })
            //近30天出货量
            POST(`${this.$config.api}/large_screen/getOutboundMaterialTon`).then(res => {
                this.line = initLine(res.data[0].data.map(r => r.time), res.data[0].data.map(r => r.shipment), res.data[1].data.map(r => r.shipment), res.data[2].data.map(r => r.shipment))
            })
            //过磅记录
            POST(`${this.$config.api}/large_screen/getOverweightRecord`).then(res => {
                this.overweightRecord = res.data
            })
            //异常过磅车辆
            POST(`${this.$config.api}/large_screen/getExceptionOverweightVehicle`).then(res => {
                this.abnormal = res.data
            })

            //物流铲车司机排行榜
            POST(`${this.$config.api}/large_screen/getDriverRanking`).then(res => {
                this.driverRanking = res.data
            })
        },
        getApi() {

            //按月、年地磅数据统计
            POST(`${this.$config.api}/large_screen/getCompanyWbStatistics`).then(res => {
                this.statistics = res.data
            })

            //潜在接单司机
            POST(`${this.$config.api}/large_screen/getPotentialDriverCount`).then(res => {
                let colors = ['#3A92FE', '#01FFFF', '#47FD7F']
                let xData = res.data.distance.map(r => r.distance)
                let yData = res.data.distance.map(r => r.count)
                // 传入数据生成 option
                let optionsData = [];
                for (let i = 0; i < xData.length; i++) {
                    optionsData.push(
                        {
                            name: xData[i],
                            value: yData[i],
                            itemStyle: {
                                color: colors[i],
                            }
                        }
                    );
                }
                let bing = initBing(optionsData)
                this.bing = bing
                barData.series[1].data = [res.data.time.current, res.data.time.next_hour]
                barData.series[2].data = this.getSymbolData([res.data.time.current, res.data.time.next_hour])
                this.bar = barData
            })
        },
        numberSplit(num) {
            const targetLength = 6; // 目标数组长度
            const digits = Array.from(String(num.toFixed(0)), Number); // [1, 2, 3]
            const zerosToAdd =(targetLength > digits.length)? targetLength - digits.length : digits.length; // 需要补的 0 的数量
            const result = Array(zerosToAdd).fill(0).concat(digits);
            return result
        },
        onMapLoaded(map, AMap) {
            this.mapInstance = map
            this.AMap = AMap
            console.log('地图加载完成')
        },
        getWeather() {
            const self = this;
            $.ajax({
                url: 'http://www.nmc.cn/rest/weather?stationid=JKQBL&_=' + new Date().getTime(),
                dataType: 'json',
                type: 'GET',
                success: (res) => {
                    const data = res.data.real.weather;
                    self.weatherInfo = {
                        info: data.info,
                        temperature: data.temperature,
                        rain: data.rain,
                        humidity: data.humidity,
                        img: `http://image.nmc.cn/assets/img/w/35x35/1/${data.img}.png`
                    };
                }
            });
        },
        // 获取时间信息
        getTime() {
            this.timeInfo = {
                week: moment().format('dddd'),
                ymd: moment().format('YYYY-MM-DD'),
                hms: moment().format('HH:mm:ss')
            };
            this.timer = setInterval(() => {
                this.getTime();
            }, 1000);
        },



        getSymbolData(datas) {
            let arr = []
            for (var i = 0; i < datas.length; i++) {
                arr.push({
                    value: datas[i],
                    symbolPosition: 'end',
                })
            }
            return arr
        },

        b64Decode(str) {
            return decodeURIComponent(atob(str));
        },
        b64Encode(str) {
            return btoa(encodeURIComponent(str));
        },
        formatNumber(num) {
            let reg = /(?=(\B)(\d{3})+$)/g;
            return num.toString().replace(reg, ",");
        },

        // 弹窗时间选择
        handleChangeTime(index) {
            this.modalTimeIndex = index;
            if (index == 1) {
                this.formInline.startDate = moment().format('YYYY-MM-DD');
                this.formInline.endDate = moment().format('YYYY-MM-DD');
                this.time_title = this.formInline.startDate;
            } else if (index == 2) {
                this.formInline.startDate = moment().subtract(7, 'days').format('YYYY-MM-DD');
                this.formInline.endDate = moment().format('YYYY-MM-DD');
                this.time_title = this.formInline.startDate + ' 至 ' + this.formInline.endDate;
            } else if (index == 3) {
                this.formInline.startDate = moment().subtract(30, 'days').format('YYYY-MM-DD');
                this.formInline.endDate = moment().format('YYYY-MM-DD');
                this.time_title = this.formInline.startDate + ' 至 ' + this.formInline.endDate;
            }
            this.buildModalCharts(this.modalType);
        },
        // 弹窗搜索
        onSubmit() {
            this.buildModalCharts(this.modalType);
        },
        // 弹窗重置
        onReset() {
            this.formInline = {
                type: 1,
                nickName: '',
                startDate: moment().format('YYYY-MM-DD'),
                endDate: moment().format('YYYY-MM-DD')
            };
            this.modalTimeIndex = 1;
            this.time_title = moment().format('YYYY-MM-DD');
            this.buildModalCharts(this.modalType);
        },



        getRankingItemWIdth(item) {
            const width = 480 * (parseInt(item.value) / parseInt(this.salesForKHxse[0].value));
            return width + 'px';
        },
        formatMoney(str) {
            return parseFloat(str).toLocaleString('en-US');
        },
        getRadioWidth(pct) {
            let width = (76 / 100) * parseFloat(pct);
            return width + 'px';
        }
    }
};
</script>

<style scoped lang="less">
@font-face {
    font-family: MFLiHei;
    src: url('./font/MFLiHei_Noncommercial-Regular.otf') format('opentype');
}

@font-face {
    font-family: FXLed;
    src: url('./font/FX-LED Bold.TTF');
}

.fontMF {
    font-family: MFLiHei;
}

.fontFx {
    font-family: FXLed;
}

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

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

    #bg {
        height: 1152px;
        width: 100%;
        background-image: url(../../assets/newimg/bg.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .content {
        position: absolute;
        top: 0;
        left: 0;
        height: calc(100% - 20px);
        z-index: 1;
        width: calc(100% - 120px);
        background: url(../../assets/newimg/waikuang.png) no-repeat;
        background-size: 100% 100%;
        margin: 0 60px;
        box-sizing: border-box;

        .title1 {
            width: 220px;
            height: 31px;
            font-family: MFLiHei;
            font-weight: 400;
            font-size: 16px;
            color: #FFFFFF;
            line-height: 30px;
            padding-left: 20px;
            background: url(../../assets/newimg/title1.png) no-repeat;
            background-size: 100% 100%;
            background-position: 0 8px;
            position: relative;
        }

        .title2 {
            width: 162px;
            height: 31px;
            font-family: MFLiHei;
            font-weight: 400;
            font-size: 16px;
            color: #FFFFFF;
            line-height: 30px;
            padding-left: 20px;
            background: url(../../assets/newimg/title2.png) no-repeat;
            background-size: 100% 100%;
            background-position: 0 8px;

        }

        .top {
            display: flex;
            justify-content: center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            gap: 280px;

            .title {
                text-align: center;
                background: linear-gradient(0deg, #769dd6 0%, #ffffff 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                line-height: 30px;
                font-weight: 400;
                color: #ffffff;
                font-size: 42px;
                padding: 15px 0 50px;
                letter-spacing: 2px;
            }

            .btn {
                font-size: 24px;
                font-weight: bold;
                color: #ffffff;
                line-height: 30px;
                padding-top: 24px;
            }
        }

        .top_bg_1 {
            background-image: url(../../assets/img/title_bg_1.png);
        }

        .top_bg_2 {
            background-image: url(../../assets/img/title_bg_2.png);
        }

        .charts {
            background-image: url(../../assets/img/data_bg.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            overflow: hidden;
        }

        .charts1 {
            background-image: url(../../assets/img/data_bg1.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            overflow: hidden;
        }

        .charts2 {
            background-image: url(../../assets/img/data_bg2.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            overflow: hidden;
        }

        .contain {
            margin-top: 122px;
            padding: 0 34px;
            box-sizing: border-box;

            .content_title {
                font-size: 14px;
                font-weight: 400;
                color: #ffffff;
                background-image: url(https://ore-1302260927.cos.ap-chengdu.myqcloud.com/data_screen/image/17.png);
                background-repeat: no-repeat;
                padding: 0 0 10px 20px;
            }

            .left_charts {
                width: 601px;

                .leftdivitem {
                    width: 601px;
                    // background: url(../../assets/newimg/left.png) no-repeat;
                    background-size: 100% 100%;
                    margin-bottom: 4px;
                    box-sizing: border-box;
                    position: relative;
                }

                .btnGroup {
                    position: absolute;
                    right: 25px;
                    top: 30px;
                    display: flex;

                    .btn1 {
                        width: 58px;
                        height: 16px;
                        background: url(../../assets/newimg/btn1.png) no-repeat;
                        background-size: 100% 100%;
                        font-family: MFLiHei;
                        font-weight: 400;
                        font-size: 11px;
                        color: #fff;
                        line-height: 16px;
                        text-align: center;
                        cursor: pointer;
                        letter-spacing: 1px;
                    }

                    .btn2 {
                        width: 58px;
                        height: 16px;
                        background: url(../../assets/newimg/btn2.png) no-repeat;
                        background-size: 100% 100%;
                        font-family: MFLiHei;
                        font-weight: 400;
                        font-size: 11px;
                        color: #fff;
                        line-height: 16px;
                        text-align: center;
                        position: relative;
                        cursor: pointer;
                        letter-spacing: 1px;

                    }
                }

                .leftdivitem1 {
                    display: flex;
                    padding: 23px 26px;

                    .leftdivitemchild {
                        width: 50%;

                        .pie {
                            margin: 0 auto;
                            width: 207px;
                            height: 207px;
                            margin-top: 10px;
                        }

                        .pie1 {
                            background: url(../../assets/newimg/pie1.png) no-repeat;
                            background-size: 100% 100%;
                        }

                        .pie2 {
                            background: url(../../assets/newimg/pie2.png) no-repeat;
                            background-size: 100% 100%;
                        }
                    }
                }

                .left_content_three {
                    width: 580px;
                    height: 348px;
                    overflow: hidden;

                    .hide_box {
                        position: relative;
                        overflow: hidden;
                        height: 300px;
                        margin-top: 20px;
                    }

                    .banner_box {
                        position: absolute;
                        width: 90%;
                        left: 5%;
                        top: 0;

                        .banner_item {
                            padding-bottom: 30px;

                            .content_box {
                                display: flex;
                                align-items: center;
                                flex-wrap: wrap;
                                gap: 10px 15px;

                                .item {
                                    justify-content: space-between;
                                    background-color: rgba(255, 255, 255, 0.1);
                                    width: 160px;
                                    height: 24px;
                                    font-size: 12px;
                                    font-weight: 500;
                                    color: #ffffff;
                                }
                            }
                        }
                    }
                }
            }

            .mid_charts {
                padding: 0 30px;

                .middibu {
                    width: 832px;
                    height: 55px;
                    background: url(../../assets/newimg/middibu.png) no-repeat;
                    background-size: 100% 100%;
                }

                .midMap {
                    width: 1546px;
                    flex: 1;
                    background: url(../../assets/newimg/midbottom.png) no-repeat;
                    background-size: 100% 100%;
                    position: relative;
                    overflow: hidden;
                    padding: 20px;
                    box-sizing: border-box;

                    .toptitle {
                        width: 84px;
                        position: absolute;
                        top: 0;
                        left: 50%;
                        margin-left: -42px;
                        color: #fff;
                        font-size: 18px;
                        font-weight: bold;
                        font-family: MFLiHei;
                        letter-spacing: 3px;
                    }
                }

                .topChart {
                    width: 1546px;
                    justify-content: space-between;
                    background-image: url(../../assets/newimg/midtopbg.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    height: 120px;
                    padding: 0 64px;
                    margin-bottom: 4px;
                    position: relative;
                    box-sizing: border-box;

                    .toptitle {
                        width: 84px;
                        position: absolute;
                        top: 0;
                        left: 50%;
                        margin-left: -42px;
                        color: #fff;
                        font-size: 18px;
                        font-weight: bold;
                        font-family: MFLiHei;
                        letter-spacing: 3px;
                    }

                    .num_item {
                        flex: 1;
                        margin-top: 9px;

                        .num_title {
                            font-size: 14px;
                            font-weight: 500;
                            color: #ffffff;
                            line-height: 18px;
                            text-align: center;

                            img {
                                position: relative;
                                top: 5px;
                            }
                        }

                        .num_value {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 3px;

                            .num {
                                background-image: url(https://ore-1302260927.cos.ap-chengdu.myqcloud.com/data_screen/image/num_bg.png);
                                background-repeat: no-repeat;
                                background-size: 100% 100%;
                                font-size: 30px;
                                font-weight: normal;
                                color: #fffffe;
                                padding: 4px;
                            }

                            .weight {
                                font-size: 16px;
                                font-weight: bold;
                                color: #fffffe;
                                align-self: end;
                            }
                        }
                    }
                }

                .botChart {
                    height: 925px;
                    display: flex;
                    justify-content: space-between;

                    .left {
                        width: 580px;
                        height: 848px;

                        .left_content {
                            padding: 30px 20px 0;
                        }
                    }

                    .mid {
                        margin: 0 20px;
                        flex: 1;
                        display: flex;
                        flex-direction: column;

                        .charts2 {
                            flex: 1;
                        }

                        .left_content_three {
                            height: 100%;
                            overflow: hidden;
                            padding-top: 20px;

                            .hide_box {
                                position: relative;
                                overflow: hidden;
                                height: 300px;
                                margin-top: 20px;
                            }

                            .banner_box {
                                position: absolute;
                                width: 90%;
                                left: 5%;
                                top: 0;

                                .banner_item {
                                    padding-bottom: 30px;

                                    .content_box {
                                        display: flex;
                                        align-items: center;
                                        flex-wrap: wrap;
                                        gap: 10px 15px;

                                        .item {
                                            justify-content: space-between;
                                            background-color: rgba(255, 255, 255, 0.1);
                                            width: 160px;
                                            height: 24px;
                                            font-size: 12px;
                                            font-weight: 500;
                                            color: #ffffff;
                                        }
                                    }
                                }
                            }
                        }




                    }

                    .right {
                        width: 601px;
                        height: 925px;
                        padding: 28px 45px;
                        background: url(../../assets/newimg/right2.png) no-repeat;
                        background-size: 100% 100%;
                        box-sizing: border-box;
                        margin-left: 20px;

                        .rightcontent2 {

                            box-sizing: border-box;

                            box-sizing: border-box;


                            .list {
                                .item {
                                    width: 100%;
                                    background: rgba(255, 255, 255, 0.1);
                                    padding: 20px;
                                    padding-bottom: 10px;
                                    box-sizing: border-box;
                                    padding-right: 37px;
                                    div {
                                        display: flex;
                                        justify-content: space-between;
                                        margin-bottom: 10px;
                                    }

                                    p {
                                        font-size: 12px;
                                        color: #fff;
                                        line-height: 20px;
                                        margin: 0;
                                        text-align: left;
                                        width: 180px;

                                        span {
                                            width: 60px;
                                            display: inline-block;
                                            text-align: right;
                                        }
                                    }

                                    p.tt {
                                        font-weight: bold;
                                        font-size: 12px;
                                        color: #01FFFF;
                                        line-height: 20px;
                                        margin-bottom: 13px;
                                    }
                                }
                            }
                        }

                        .right_content {
                            box-sizing: border-box;

                            .detail {
                                background: url(../../assets/newimg/detail.png) no-repeat;
                                background-size: 100% 100%;
                                width: 100%;
                                height: 150px;
                                box-sizing: border-box;
                                position: relative;
                                background-position-y: 8px;

                                .btnGroup {
                                    position: absolute;
                                    right: 25px;
                                    top: 20px;
                                    display: flex;

                                    .btn1 {
                                        width: 58px;
                                        height: 16px;
                                        background: url(../../assets/newimg/btn1.png) no-repeat;
                                        background-size: 100% 100%;
                                        font-family: MFLiHei;
                                        font-weight: 400;
                                        font-size: 11px;
                                        color: #fff;
                                        line-height: 16px;
                                        text-align: center;
                                        cursor: pointer;
                                        letter-spacing: 1px;
                                    }

                                    .btn2 {
                                        width: 58px;
                                        height: 16px;
                                        background: url(../../assets/newimg/btn2.png) no-repeat;
                                        background-size: 100% 100%;
                                        font-family: MFLiHei;
                                        font-weight: 400;
                                        font-size: 11px;
                                        color: #fff;
                                        line-height: 16px;
                                        text-align: center;
                                        position: relative;
                                        cursor: pointer;
                                        letter-spacing: 1px;

                                    }
                                }

                                .a3 {
                                    text-align: center;
                                    position: absolute;
                                    top: 19px;
                                    left: 50%;
                                    width: 116px;
                                    height: 116px;
                                    margin-left: -61px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    img {
                                        width: 50px;
                                    }

                                    p {
                                        font-family: FXLED;
                                        font-size: 40px;
                                        color: #01FFFF;
                                        margin: 0;

                                        span {
                                            font-size: 20px;
                                        }
                                    }

                                    p:first-child {
                                        font-weight: bold;
                                        font-size: 14px;
                                        color: #fff;
                                        margin-bottom: 5px;
                                    }

                                    p:last-child {
                                        font-weight: bold;
                                        font-size: 14px;
                                        color: #fff;
                                        margin-top: 5px;
                                    }
                                }

                                .a2 {
                                    top: 50px;
                                    right: 50px;
                                    text-align: center;
                                    position: absolute;

                                    p {
                                        font-family: FXLED;
                                        font-weight: bold;
                                        font-size: 30px;
                                        color: #fff;
                                    }

                                    p:first-child {
                                        font-family: PingFang SC;
                                        font-weight: bold;
                                        font-size: 14px;
                                        color: #01FFFF;
                                    }
                                }

                                .a1 {
                                    top: 50px;
                                    left: 25px;
                                    text-align: center;
                                    position: absolute;

                                    p {
                                        font-family: FXLED;
                                        font-weight: bold;
                                        font-size: 30px;
                                        color: #fff;
                                    }

                                    p:first-child {
                                        font-family: PingFang SC;
                                        font-weight: bold;
                                        font-size: 14px;
                                        color: #01FFFF;
                                    }
                                }
                            }

                            .rightcontentitem2 {


                                height: 98px;
                                width: 100%;
                                background: url(../../assets/newimg/zhibiao2.png) no-repeat;
                                background-size: 100%;
                                display: flex;
                                color: #fff;
                                padding-right: 98px;
                                box-sizing: border-box;

                                div {
                                    width: 50%;
                                    text-align: center;
                                    font-size: 12px;
                                    padding-top: 26px;
                                }

                                p:first-child {
                                    font-family: FXLed;
                                    font-weight: normal;
                                    font-size: 24px;
                                    color: #FFFFFF;
                                    margin-bottom: 0;
                                }
                            }

                            .rightcontentitem1 {
                                margin-top: 10px;
                                height: 98px;
                                width: 100%;
                                background: url(../../assets/newimg/zhibiao1.png) no-repeat;
                                background-size: 100%;
                                display: flex;
                                color: #fff;
                                padding-left: 98px;
                                box-sizing: border-box;

                                div {
                                    width: 50%;
                                    text-align: center;
                                    font-size: 12px;
                                    padding-top: 26px;
                                }

                                p:first-child {
                                    font-family: FXLed;
                                    font-weight: normal;
                                    font-size: 24px;
                                    color: #FFFFFF;
                                    margin-bottom: 0;
                                }
                            }

                            .rightcontent1 {
                                position: relative;
                                width: 100%;
                                height: 428px;
                                box-sizing: border-box;
                                background-size: 100% 100%;
                            }

                            .btnGroup2 {
                                position: absolute;
                                right: 30px;
                                top: 24px;
                                display: flex;

                                .btn1 {
                                    width: 78px;
                                    height: 16px;
                                    background: url(../../assets/newimg/btn11.png) no-repeat;
                                    background-size: 100% 100%;
                                    font-family: MFLiHei;
                                    font-weight: 400;
                                    font-size: 10px;
                                    color: #fff;
                                    line-height: 16px;
                                    text-align: center;
                                    cursor: pointer;
                                    letter-spacing: 1px;
                                }

                                .btn2 {
                                    width: 78px;
                                    height: 16px;
                                    background: url(../../assets/newimg/btn22.png) no-repeat;
                                    background-size: 100% 100%;
                                    font-family: MFLiHei;
                                    font-weight: 400;
                                    font-size: 10px;
                                    color: #fff;
                                    line-height: 16px;
                                    text-align: center;
                                    position: relative;
                                    cursor: pointer;

                                    letter-spacing: 1px;
                                }
                            }

                        }
                    }
                }
            }


        }
    }
}

.weather {
    width: 30%;
    height: 25px;
    position: absolute;
    top: 50px;
    left: 100px;

    .text {
        font-size: 20px;
        font-weight: 400;
        color: #fffffe;
    }

    .num {
        font-size: 24px;
        font-weight: normal;
        color: #fffffe;
    }
}



.time {
    position: absolute;
    top: 50px;
    right: 100px;
    width: 30%;
    height: 25px;
    justify-content: flex-end;
    padding-right: 20px;

    .text {
        font-size: 20px;
        font-weight: 400;
        color: #fffffe;
    }

    .num {
        font-size: 24px;
        font-weight: normal;
        color: #fffffe;
    }
}

.scroll_table {
    width: 100%;

    .thead {}

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

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

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

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

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

        .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;
            }
        }
    }
}

.newLeftdivitem {
    width: 601px !important;
    height: 925px !important;
    background: url('../../assets/newimg/newLeftBG.png') no-repeat !important;
    background-size: 100% 100% !important;
    box-sizing: border-box !important;
}
</style>