样式调整

shuishen

2022-11-26 2f26fbc8e76dc8f4c87696367e2ead8f6b7a452a

 src/views/home/components/rightContainer.vue

@@ -1,48 +1,29 @@
<template>
    <div class="container">
        <div class="case-box">
    <div class="container" ref="Container">
        <div class="case-box" ref="caseBox">
            <div class="title">
                案件统计
                <div class="timer">
                    <el-date-picker
                        v-model="eventTime"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions"
                    ></el-date-picker>
                    <el-date-picker v-model="eventTime" type="daterange" align="right" unlink-panels range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
                    </el-date-picker>
                </div>
            </div>
            <div id="EventChangeEcharts" class="echarts-box"></div>
        </div>
        <div class="alert-box">
            <div class="title">

        <div class="alert-box" ref="alertBox">
            <div class="title" ref="alertBoxTitle">
                <span style="margin-right:130px">安保活动</span>
                <span
                    class="activity"
                    :class="{ choosed: acttype == 0 }"
                    @click="actTabClick(0)"
                >正在进行</span>
                <span class="activity" :class="{ choosed: acttype == 0 }" @click="actTabClick(0)">正在进行</span>
                <span>/</span>
                <span
                    class="activity"
                    :class="{ choosed: acttype == 1 }"
                    @click="actTabClick(1)"
                >历史活动</span>
                <span class="activity" :class="{ choosed: acttype == 1 }" @click="actTabClick(1)">历史活动</span>
            </div>
            <div id="peopleList" class="echarts-box">
                <el-table
                    :data="acttype == 0 ? underwayArr : historyArr"
                    style="width: 100%"
                <el-table :height="tableHeight" :data="acttype == 0 ? underwayArr : historyArr" style="width: 100%"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                    :row-class-name="tableRowClassName"
                    ref="activityTable"
                    @row-click="activityRowClick"
                >
                    :row-class-name="tableRowClassName" ref="activityTable" @row-click="activityRowClick">
                    <el-table-column prop="activityName" label="活动名称"></el-table-column>
                    <el-table-column prop="startTime" label="开始时间"></el-table-column>
                    <el-table-column prop="endTime" label="结束时间"></el-table-column>
@@ -50,20 +31,13 @@
                </el-table>
            </div>
        </div>
        <div class="crowd-box">

        <div class="crowd-box" ref="crowdBox">
            <div class="title">
                <span style="margin-right:130px">现有设备</span>
                <span
                    class="equiment"
                    :class="{ choosed: linetype == 0 }"
                    @click="lineTabClick(0)"
                >设备种类</span>
                <span class="equiment" :class="{ choosed: linetype == 0 }" @click="lineTabClick(0)">设备种类</span>
                <span>/</span>
                <span
                    class="activity"
                    :class="{ choosed: linetype == 1 }"
                    @click="lineTabClick(1)"
                >设备状态</span>
                <span class="activity" :class="{ choosed: linetype == 1 }" @click="lineTabClick(1)">设备状态</span>
            </div>
            <div style="overflow: hidden;" id="EquipmentEcharts" class="echarts-box"></div>
        </div>
@@ -130,6 +104,7 @@
            spareNewArr: [],
            overhaulNewArr: [],
            disableNewArr: [],
            tableHeight: 0
        }
    },
    created () {
@@ -145,8 +120,12 @@
        this.clickEquimentChart()
        this.historyArr = historyArr
        this.underwayArr = underwayArr

        this.$nextTick(() => {
            window.addEventListener("resize", this.echartsResize)
            this.tableHeight = this.$refs.Container.offsetHeight - this.$refs.caseBox.offsetHeight - this.$refs.crowdBox.offsetHeight - this.$refs.alertBoxTitle.offsetHeight - 52

            console.log(this.tableHeight, this.$refs.Container.offsetHeight, this.$refs.caseBox.offsetHeight, this.$refs.crowdBox.offsetHeight, this.$refs.alertBoxTitle.offsetHeight, 32)
        })
        this.equipmentEchartsCarousel()
    },
@@ -674,32 +653,20 @@
    width: 100%;

    .case-box {
        height: 30%;
    }

    .alert-box,
    .crowd-box {
        height: 35%;

        .echarts-box {
            overflow-x: hidden;
            overflow-y: auto;
        }
    }

    .alert-box {
        flex: 1;
        height: 300px;
    }

    .crowd-box {
        height: 310px;
        height: 300px;
    }

    .case-box,
    .alert-box,
    .crowd-box {
        margin: 8px;
        display: flex;
        flex-direction: column;
        background: $bg-color;

        .title::after {
            content: '';
@@ -720,7 +687,7 @@
            text-align: left;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            font-size: 16px;
            background-image: linear-gradient(to right, #2e4aba, #010d3e);

            .timer {
@@ -766,7 +733,7 @@
                border: 1px solid rgba(20, 50, 123, 1);
                cursor: pointer;

                & > div {
                &>div {
                    height: 26px;
                    line-height: 26px;
                }
@@ -786,5 +753,16 @@
            height: 100%;
        }
    }

    .alert-box {
        flex: 1;
        margin-top: 0;
        margin-bottom: 0;

        .echarts-box {
            overflow-x: hidden;
            overflow-y: auto;
        }
    }
}
</style>