<template>
    <div id="index" ref="appRef" :class="{ pageisScale: true }" class="index_ssjc"
         style="   background-image:url('../../assets/bigScreen/img/bg.png');"
    >
        <div class="bg">
            <dv-loading v-if="loading">Loading...</dv-loading>
            <div v-else class="host-body">
                <!-- 头部 s -->
                <div class="d-flex jc-center title_wrap">
                    <div class="zuojuxing"></div>
                    <div class="youjuxing"></div>
                    <div class="guang"></div>
                    <div class="d-flex jc-center">
                        <div class="title">
                            <span class="title-text">
                                <img :src="logo" class="logo"
                                     style="vertical-align: middle; width: 50px; margin-top: -5px; margin-left: 100px"
                                     alt=""/>
                            {{ gongsi }}云平台</span>
                            <div style="float: right">
                                <div style="position: relative; color: #fff; display: flex; align-items: center;">
                                    <el-badge style="height: 40px; width: 40px;" :value="unreadCount">
                                        <img @click="toggleTooltip" src="../../assets/bigScreen/img/通知.png" alt="用户"
                                             class="user-icon"
                                        />
                                    </el-badge>

                                    <div v-if="showTooltip" class="tooltip" @click.stop style="height: 220px">

                                        <div class="gjcontainer">
                                            <div class="gjitem">
                                                <h2 style="color:#00FF6F;font-weight: 700;font-size: 28px;padding-top:15px;">
                                                    {{ alarmCountData[0].count }}</h2>
                                                <span>{{ alarmCountData[0].name }}</span>
                                            </div>
                                            <div class="gjitem">
                                                <h2 style="color:#FFCB2F;font-weight: 700;font-size: 28px;padding-top:15px">
                                                    {{ alarmCountData[1].count }}</h2>
                                                <span>{{ alarmCountData[1].name }}</span>
                                            </div>
                                            <div class="gjitem">
                                                <h2 style="color:#FF504D;font-weight: 700;font-size: 28px;">
                                                    {{ alarmCountData[2].count }}</h2>
                                                <span>{{ alarmCountData[2].name }}</span>
                                            </div>
                                        </div>

                                        <button
                                            style="width: 159px;height: 39px;background-color: #0076B0;color: #fff;border: none;"
                                            v-if="false" @click="handleButtonClick"
                                        >告警详情
                                        </button>
                                    </div>


                                    <div style="float: right; margin-left: 10px; display: flex; align-items: center;">
                                        <img src="../../assets/bigScreen/img/头像@2x.png" alt="设置"
                                             style="width: 20px; height: 20px; margin-right: 5px;"
                                             class="setting-icon"
                                        >
                                        <span>{{ userName }}</span>

                                        <el-dropdown>
                                                <span class="el-dropdown-link">
                                                      <img src="../../assets/bigScreen/img/arrow-down-s-fill@2x.png"
                                                           alt="设置"
                                                           style="width: 20px; height: 20px; margin-right: 5px;vertical-align: middle;"
                                                      >
                                                </span>
                                            <el-dropdown-menu
                                                style="background-color: #113160; color: #fff; border-color: #113160"
                                                slot="dropdown">
                                                <router-link to="/index">
                                                    <el-dropdown-item
                                                        style="background-color: #113160; color: #fff; border-color: #113160"
                                                    >
                                                        返回后台
                                                    </el-dropdown-item>
                                                </router-link>
                                                <el-dropdown-item @click.native="logout"
                                                                  style="background-color: #113160; color: #fff">
                                                    退出系统
                                                </el-dropdown-item>
                                            </el-dropdown-menu>
                                        </el-dropdown>

                                    </div>

                                </div>


                            </div>
                        </div>
                    </div>
                    <div class="timers">
                        {{ dateYear }} {{ dateWeek }} {{ dateDay }}
                        <i class=" blq-icon-shezhi02" style="margin-left:10px" @click="showSetting"></i>
                    </div>
                </div>

                <!-- 内容  s-->


                <div class="nr">
                    <div class="cebianlan card-ssjc">
                        <el-input
                            v-model="deptName"
                            placeholder="请输入部门名称"
                            clearable
                            size="small"
                            prefix-icon="el-icon-search"
                            style="margin-bottom: 20px;"
                        />
                        <div>
                            <el-tree
                                :data="deptOptions"
                                :props="defaultProps"
                                :expand-on-click-node="false"
                                :filter-node-method="filterNode"
                                ref="tree"
                                node-key="id"
                                :default-expand-all="false"
                                highlight-current
                                @node-click="handleNodeClick"
                            />
                        </div>
                    </div>

                    <div class="ssjc-right">
                        <el-card class="top-ssjc">
                    <span style="color: white">
                        按级别告警
                    </span>
                            <button style="width: 107px;margin-right: 8px; font-size: 16px;height: 30px;border-radius: 4px;border: 1px solid #FF5252;
background: #ff52521a;color:#FF5252;" @click="handleLevel(3)"
                            >严重
                            </button>
                            <button style="width: 107px;margin-right: 8px;font-size: 16px;height: 30px;border-radius: 4px;border: 1px solid #B69D2B;
background: #b69d2b1a;color:#B69D2B;" @click="handleLevel(2)"
                            >轻微
                            </button>
                            <button style="width: 107px;margin-right: 8px;font-size: 16px;height: 30px;border-radius: 4px;border: 1px solid #119262;
background: #1192621a;color:#119262;" @click="handleLevel(1)"
                            >提醒
                            </button>
                            <button style="width: 107px;margin-right: 8px;font-size: 16px;height: 30px;border-radius: 4px;border: 1px solid #1981b6;
background: #1192621a;color:#3f83e8;" @click="handleLevel(4)"
                            >全部
                            </button>
                        </el-card>
                        <el-card class="bottom-ssjc">
                            <div style="border-radius: 20px">
                                <el-radio-group v-model="radio1" @change="getlistGroup">
                                    <el-radio-button label="活动警告"></el-radio-button>
                                    <el-radio-button label="已确认"></el-radio-button>
                                </el-radio-group>
                            </div>
                            <div class="table-container" style="margin-top: 20px; height: 100%;">
                                <el-table
                                    class="ssjc-table"
                                    :data="tempDataList"
                                    style="width: 100%; white-space: nowrap;"
                                    :header-cell-style="{ fontSize: '16px', backgroundColor: '#153768', color: '#fff', fontWeight: 'bold'}"
                                >
                                    <el-table-column label="告警名称" align="center" prop="alertName"
                                                     :show-overflow-tooltip="true" width="150" />
                                    <el-table-column label="设备编号" align="center" prop="serialNumber"
                                                     :show-overflow-tooltip="true"/>
                                    <el-table-column label="设备名称" align="center" prop="deviceName"
                                                     :show-overflow-tooltip="true"/>
                                    <el-table-column label="告警级别" align="center" prop="alertLevel" width="120">
                                        <template slot-scope="scope">
                                            <dict-tag :options="dict.type.iot_alert_level"
                                                      :value="scope.row.alertLevel"/>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="告警时间" align="center" prop="createTime" width="170">
                                        <template slot-scope="scope">
                                            <span>{{
                                                    parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}')
                                                }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="数据" align="left" header-align="center" prop="detail"
                                                     :show-overflow-tooltip="true">
                                        <template slot-scope="scope">
                                            <div v-html="formatDetail(scope.row.detail)"></div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="处理状态" align="center" prop="status">
                                        <template slot-scope="scope">
                                            <dict-tag :options="dict.type.iot_process_status"
                                                      :value="scope.row.status"/>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" align="center" prop="operate" v-if="radio !== 3"
                                                     width="100">
                                        <template slot-scope="scope">
                                            <el-button type="text" @click="showDialog(scope.row)">处理</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-card>
                    </div>
                </div>
                <!-- 内容 e -->
                <div class="button-container">
                    <button class="button" @mouseover="hover = true" @mouseleave="hover = false"
                            @click="changePage('home')">
                        数据大屏
                    </button>
                    <button class="button" @mouseover="hover = true" @mouseleave="hover = false"
                            @click="changePage('gjzx')">
                        实时监控
                    </button>
                    <button class="button" @mouseover="hover = true" @mouseleave="hover = false"
                            @click="changePage('ssjc')">
                        告警中心
                    </button>
                    <button class="button" @mouseover="hover = true" @mouseleave="hover = false"
                            @click="changePage('bbgl')">
                        报表管理
                    </button>
                </div>
            </div>
        </div>
        <Setting ref="setting"/>
        <el-dialog
            :visible.sync="dialogVisible"
            title="处理告警"
            @close="dialogVisible = false"
            append-to-body
            custom-class="point-dialog-outer"
        >
            <div class="point-dialog"
                 style="width: 40%; height: 240px; padding: 20px; display: flex; flex-direction: column; justify-content: center;">
                <p style="font-size: 20px; color: #fff; text-align: center; margin-top: 20px;">处理告警</p>
                <div class="close-button" @click="dialogVisible = false"></div>
                <el-input
                    type="textarea"
                    v-model="remark"
                    placeholder="请输入备注"
                    style="width: 80%; margin-top: 20px; margin-right: 60px; margin-left: 60px; border: none; background-color: #285eb4; text-align: center; color: #fff;"
                ></el-input>
                <br/>
                <div style="margin-top: 20px; text-align: right; margin-right: 100px;">
                    <el-button size="small" @click="dialogVisible = false" style="border: none;">取消</el-button>
                    <el-button size="small" type="primary" @click="handleConfirm"
                               style="background-color: #285eb4; color: #fff; border: none;">确定
                    </el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import drawMixin from '../../utils/bigScreen/drawMixin';
import {
    formatTime,
} from '../../utils/bigScreen/index.js';
import Setting from './setting.vue';
import index from './indexs/index.vue';
import {getDeptByuserId, getInfo, logout} from '../../api/login';
import {checkPermi} from '../../utils/permission';
import {listAlertLog, listAlertLogEchartsByType, updateAlertLog} from '../../api/iot/alertLog';
import {deptTreeSelect, listUser} from '../energy/api/energy/deviceAreaBinding';
import {getDeviceStatistic} from '../../api/iot/device';
import {deptsTreeSelect} from "@/api/system/user";

export default {
    dicts: ['iot_process_status', 'iot_alert_level'],
    mixins: [drawMixin],
    components: {
        Setting,
        index,
    },
    data() {
        return {
            datalist: [],
            alarmCountData: [
                {name: '提醒', count: 0},
                {name: '轻微', count: 0},
                {name: '严重', count: 0},
            ],
            tempDataList: [],
            showTooltip: false, // 控制弹出框显示状态
            userRole: '',
            userName: '',
            unreadCount: 0,
            gongsi: '物联网',
            logo: '',
            timing: null,
            loading: true,
            dateDay: null,
            dateYear: null,
            dateWeek: null,
            weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
            httpStr: '',
            //头部命名数据
            deviceStatistic: {},
            Qyynsb_date: null,
            //内容命名
            activeName: 'first',
            filterText: '',
            // 归属机构
            deptName: undefined,
            deptOptions: undefined,
            defaultProps: {
                children: 'children',
                label: 'name',
            },
            //传递数据对象
            queryParams: {
                deviceName: undefined,
                type: undefined,
                id: undefined,
                typeName: undefined,
                deviceNum: undefined,
                status: undefined,
                pageNum: 1,
                pageSize: 999999,
                deptId: undefined,
            },  //地区名称
            qb_name: '计量设备清单',
            //仪表类型数组
            sourceEnergy: [],
            //巡行状态数组
            sourceStatus: [{value: '1', label: '未激活'}, {value: '2', label: '禁用'}, {
                value: '3',
                label: '在线',
            }, {value: '4', label: '离线'}],
            // 总条数
            total: 0,
            //数据接收数组
            //from对象
            ruleForm: [{
                deviceNum: undefined,
                deviceName: undefined,
                energyTypeName: undefined,
                location: undefined,
                district: undefined,
                azwz: undefined,
                status: undefined,
                fkzt: undefined,
            }],
            rules: {},
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            //组态还是数据
            zuandsj: true,
            open: false,
            radio1: '活动警告',
            radio: 2,
            dialogVisible: false,
            remark: '',
            alertLogId: null,
            alertList: [],
            tableHeight: 600
        };
    },
    filters: {
        numsFilter(msg) {
            return msg || 0;
        },
    },
    computed: {},
    created() {
        this.getDeptTree();
        getInfo().then((res) => {
            this.userRole = res.roles[0];
            let deptId = res.user.deptId;
            let userId = res.user.userId;
            this.userName = res.user.userName;
            console.log(deptId, userId);
            getDeptByuserId(userId, deptId).then((res) => {
                this.gongsi = res.data.deptName;
                this.logo = process.env.VUE_APP_BASE_API + res.data.logo;
            });

        });
        let data = {
            StartDate: '',
            endDate: '',
        };
        data.StartDate = new Date().toISOString().split('T')[0];

        data.endDate = data.StartDate; // 如果需要，可以设置相同的结束日期
        listAlertLogEchartsByType(data).then(rp => {
            //统计所有报警信息
            this.switper();
            this.getlistGroup();
        });
        this.getlist()
    },
    mounted() {
        this.timeFn();
        this.cancelLoading();
        document.addEventListener('click', this.handleClickOutside); // 添加全局点击事件监听
        this.tableHeight = window.innerHeight - 200; // 根据需要调整
    },
    beforeDestroy() {
        document.removeEventListener('click', this.handleClickOutside); // 移除事件监听
    },
    watch: {
        // 根据名称筛选机构树
        deptName(val) {
            this.$refs.tree.filter(val);
        },
    },
    methods: {
        getlist(){
            this.loading = true;
            // 获取告警列表
            listAlertLog(this.queryParams).then((rp) => {
                this.alertList = rp.rows;
                this.tempDataList = this.alertList;

                this.tempDataList = this.alertList.filter(item => {
                    if (this.radio === 2) {
                        return item.status !== 3; // 活动警告，不显示已处理的
                    } else if (this.radio === 3) {
                        return item.status === 3; // 已确认，只显示已处理的
                    }
                    return true;
                });
                this.alertList.forEach((item) => {
                    this.unreadCount += 1;
                    if (item.alertLevel === 1 && item.status === 2) {
                        this.alarmCountData[0].count += 1;
                    } else if (item.alertLevel === 2 && item.status === 2) {
                        this.alarmCountData[1].count += 1;
                    } else if (item.alertLevel === 3 && item.status === 2) {
                        this.alarmCountData[2].count += 1;
                    } else {
                        this.unreadCount -= 1;
                    }
                });
            });
            this.loading = false;
        },
        getlistGroup(value) {
            if (value === '已确认') {
                this.radio = 3;
            } else {
                this.radio = 2;
            }
            this.tempDataList = this.alertList.filter(item => {
                if (this.radio === 2) {
                    return item.status !== 3; // 活动警告，不显示已处理的
                } else if (this.radio === 3) {
                    return item.status === 3; // 已确认，只显示已处理的
                }
                return true;
            });
        },
        formatDetail(json) {
            if (json == null || json == '') {
                return;
            }
            let item = JSON.parse(json);
            let result = 'id：<span style="color:#F56C6C">' + item.id + '</span><br />';
            result = result + 'value：<span style="color:#F56C6C">' + item.value + '</span><br />';
            return result;
        },
        changePage(pageName) {
            this.$router.push({
                path: '/systemS/bigScreen/' + pageName,
            });
        },
        toggleTooltip() {
            this.showTooltip = !this.showTooltip; // 切换弹出框显示状态
            console.log('弹出');
        },
        handleClickOutside(event) {
            const tooltipElement = this.$el.querySelector('.tooltip');
            const badgeElement = this.$el.querySelector('.user-icon');
            if (tooltipElement && !tooltipElement.contains(event.target) && !badgeElement.contains(event.target)) {
                this.showTooltip = false; // 点击其他地方，关闭弹出框
            }
        },
        handleButtonClick() {
            this.$router.push({
                path: '/systemS/bigScreen/ssjc',
            });
        },
        async logout() {
            this.$confirm(this.$t('login.989807-31'), this.$t('login.989807-32'), {
                confirmButtonText: this.$t('confirm'),
                cancelButtonText: this.$t('cancel'),
                type: 'warning',
            })
                .then(() => {
                    this.$store.dispatch('LogOut').then(() => {
                        location.href = '/index';
                    });
                })
                .catch(() => {
                });
        },

        showSetting() {
            this.$refs.setting.init();
        },
        timeFn() {
            this.timing = setInterval(() => {
                this.dateDay = formatTime(new Date(), 'HH: mm: ss');
                this.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
                this.dateWeek = this.weekday[new Date().getDay()];
            }, 1000);
        },
        cancelLoading() {
            setTimeout(() => {
                this.loading = false;
            }, 500);
        },
        clearData() {
            if (this.timer) {
                clearInterval(this.timer);
                this.timer = null;
            }
        },
        //轮询
        switper() {
            if (this.timer) {
                return;
            }
            let looper = (a) => {
                this.getMqttStats();
            };
            this.timer = setInterval(looper, 60000);
        },
        // 节点单击事件
        handleNodeClick(data, v) {
            this.queryParams.workshopid = data.id;
            this.type = v.level;
            if (v.level == 1) {
                this.address = data.name;
                this.region = data.name;
            } else if (v.level == 2) {
                this.address = `${v.parent.data.name}-${data.name}`;
                this.region = `${v.parent.data.name}-${data.name}`;
            } else if (v.level == 3) {
                this.address = `${v.parent.parent.data.name}-${v.parent.data.name}-${data.name}`;
                this.region = `${v.parent.data.name}-${data.name}`;
            } else if (v.level == 4) {
                this.address = `${v.parent.parent.parent.data.name}-${v.parent.parent.data.name}-${v.parent.data.name}-${data.name}`;
                this.region = `${v.parent.data.name}-${data.name}`;
            }
            this.level = v.level;
            if (v.level == 4) {
                this.getlist();
            }
        },

        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.ybbh);
            this.single = selection.length != 1;
            this.multiple = !selection.length;
        },
        /** 查询设备统计信息 */
        getDeviceStatistic() {
            getDeviceStatistic().then((response) => {
                this.deviceStatistic = response.data;
            });
        },
        /** 查询机构下拉树结构 */
        /** 查询部门下拉树结构 */
        getDeptTree() {
            let _this = this;
            deptTreeSelect().then((response) => {
                _this.deptOptions = response.data || [];
            });
        },
        // 筛选节点
        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        showDialog(row) {
            this.remark = '';
            this.dialogVisible = true;
            this.alertLogId = row.alertLogId;
        },
        // 处理告警信息
        handleConfirm() {
            if (this.remark === '') {
                this.$message.error('请输入处理备注');
                return;
            }
            let params = {
                alertLogId: this.alertLogId,
                status: 3,
                remark: this.remark,
            };
            this.dialogVisible = false;
            updateAlertLog(params).then((res) => {
                console.log(res);
                this.$message.success('处理成功');
                this.getlist(); // 重新获取和过滤数据
            });
        },
        //
        handleLevel(value) {
            // 根据级别过滤数据
            this.tempDataList = this.alertList.filter(item => {
                if (value === 1) {
                    return item.alertLevel === 1;
                } else if (value === 2) {
                    return item.alertLevel === 2;
                } else if (value === 3) {
                    return item.alertLevel === 3;
                } else if (value === 4) {
                    // 不用过滤
                    return true;
                }
                return true;
            });
        }
    },
};
</script>
<style lang="scss">
@import "./home.scss";
</style>
<style lang="scss" scoped>
@import '../../assets/bigScreen/css/theme/index.css';
@import "../../assets/bigScreen/css/index.scss";

.cebianlan .el-input__inner {
    background-color: #113160 !important;
    color: white !important;
}

.user-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;

}

.el-badge__content.is-fixed {
    top: 10px !important;
    right: 20px !important;
}

.notification-badge {
    height: 15px;
    width: 15px;
    position: absolute;
    top: 10px;
    right: 110px;
    bgcolor: red;
    background: red;
    color: white;
    border-radius: 50%;
    font-size: 7px;
}

.backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* 背景颜色 */
    z-index: 9; /* 确保在弹窗下方 */
}

.dropdown-menu {
    position: absolute;
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 10; /* 确保弹窗在其他元素之上 */
    width: 297px;
    height: 272px;
    flex-shrink: 0;
    border-radius: 12px;
    background: #113160;
    box-shadow: 0 4px 39.1px 0 #00000040;
    top: 40px;
    right: 10px;
}

.popper__arrow::after {

    border-top-color: #113160 !important;
    border-bottom-color: #113160 !important;
}

.el-badge__content {
    background-color: red;
    border: none;
}


.tooltip {
    height: 250px;
    width: 270px;
    position: absolute; /* 绝对定位 */
    top: 50px; /* 调整弹出框的垂直位置，需根据实际情况调整 */
    right: 10px; /* 左对齐 */
    background-color: #113160; /* 背景颜色 */
    color: white; /* 字体颜色 */
    padding: 5px; /* 内边距 */
    border-radius: 5px; /* 圆角 */
    z-index: 1; /* 确保弹出框在其他元素之上 */
}

.gjcontainer {
    //height: 120px;
    display: grid; /* 启用 Grid 布局 */
    grid-template-columns: repeat(2, 1fr); /* 两列 */
    gap: 0px; /* 列间距 */
}

.gjitem {

    //margin: 10px;
    text-align: center; /* 内容居中显示 */
}

.contetn_center_top {
    width: 100%;

}

// 中间
.contetn_center {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 100%;
    height: 60%;
}

.contetn_center-bottom {
    height: 255px;
}

//左边 右边 结构一样
.contetn_left,
.contetn_right {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;

}

.button-container {
    //margin-top: 200px;
    width: 800px;
    position: absolute;
    //left: 30%;
    bottom: 40px;
    left: 558px;
    display: flex;
    justify-content: space-between; /* 水平对齐 */
}

.button {
    width: 57px;
    height: 60px;
    background-color: transparent;
    background-image: url('../../assets/bigScreen/img/底部tab未选择.png');
    background-position: 50% 25%;
    background-size: 100%, 100%; /* 使背景图片完全覆盖按钮，保持比例 */
    background-repeat: no-repeat; /* 背景图片不重复 */

    flex-shrink: 0;
    border: none; /* 去掉边框 */
    color: #76F1FF; /* 默认字体颜色为蓝色 */
    padding: 10px 20px; /* 按钮内边距 */
    cursor: pointer; /* 鼠标悬停时显示为手型 */
    transition: color 0.3s; /* 颜色变化过渡效果 */
}

.button:hover {
    background-image: url('../../assets/bigScreen/img/按钮未选中.png');
    height: 50px;
    color: white; /* 鼠标悬停时字体颜色为白色 */
}

.cebianlan {
    padding-left: 10px;
    margin: 30px 30px;
    border-radius: 10px;
    background-color: #113160;
    color: white;
    height: 800px;
    width: 300px;
}

.nr {
    display: flex;


}

.ssjc-right {
    height: 850px;
    width: calc(100% - 300px);
}

.top-ssjc {
    margin-top: 30px;
    height: 86px;
    flex-shrink: 0;
    background: linear-gradient(90deg, #1742837d 0%, #0e284f00 100%);
    display: flex;
    align-items: center;
    text-align: center;
}

.bottom-ssjc {
    margin-top: 30px;
    flex-shrink: 0;
    border-radius: 20px;
    background: linear-gradient(180deg, #092650 0%, #09265000 100%);
    height: 600px; /* 设置一个固定的高度 */
    overflow-y: auto !important;/* 启用垂直滚动条 */
    position: relative !important/* 相对定位，用于表头的sticky定位 */
}

/* 滚动条总体样式 */
.bottom-ssjc::-webkit-scrollbar {
    width: 10px /* 滚动条宽度 */ !important; /* 滚动条宽度 */
}

/* 滚动条滑块样式 */
.bottom-ssjc::-webkit-scrollbar-thumb {
    background-color: #1856b0 /* 滑块背景色 */ !important;
    border-radius: 5px /* 滑块边角 */ !important;
}

/* 滚动条轨道样式 */
.bottom-ssjc::-webkit-scrollbar-track {
    background-color: #092650FF /* 轨道背景色 */ !important;
}

/* 表格 */
.ssjc-table {
    width: 100%;
    border-collapse: collapse /* 去除表格边框间距 */ !important;
}

/* 表头 */
.ssjc-table th {
    position: sticky;
    top: 0;
    background-color: #153768;
    color: #fff;
    z-index: 10;
    white-space: nowrap; /* 防止内容换行 */
}

/* 表格单元格 */
.ssjc-table td, .ssjc-table th {
    min-width: 100px; /* 设置最小宽度，根据实际内容调整 */
    white-space: nowrap; /* 防止内容换行 */
}


</style>
