shuishen
2023-01-03 e5315e6d0bf6b01dfd503b62b6e0c61eed5e7e0f
src/views/home/components/rightContainer.vue
@@ -1,18 +1,20 @@
<template>
    <div class="container" ref="Container">
        <div class="case-box" ref="caseBox">
            <div class="title" ref="alertBoxTitle">
                <div>值班信息(当日)</div>
            </div>
            <div class="table-box">
                <el-table size="small" :height="tableHeight" :data="schedulingList" style="width: 100%"
                    :header-cell-style="{ 'text-align': 'center' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                    :row-class-name="tableRowClassName">
                    <el-table-column prop="station" label="岗位"></el-table-column>
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column prop="contact" label="联系方式"></el-table-column>
                </el-table>
            <div class="box">
                <div class="title" ref="alertBoxTitle">
                    <div>值班信息(当日)</div>
                </div>
                <div class="table-box">
                    <el-table size="small" :height="tableHeight" :data="schedulingList" style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                        :row-class-name="tableRowClassName">
                        <el-table-column prop="station" label="岗位"></el-table-column>
                        <el-table-column prop="name" label="姓名"></el-table-column>
                        <el-table-column prop="contact" label="联系方式"></el-table-column>
                    </el-table>
                </div>
            </div>
            <svg class="border-svg">
@@ -54,15 +56,17 @@
        </div>
        <div class="alert-box" ref="alertBox ">
            <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>
            <div class="box">
                <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>
                    </div>
                </div>
                <div id="EventChangeEcharts" class="echarts-box"></div>
            </div>
            <div id="EventChangeEcharts" class="echarts-box"></div>
            <svg class="border-svg">
                <defs>
@@ -131,14 +135,16 @@
        </div>-->
        <div class="crowd-box" ref="crowdBox">
            <div class="title">
                <div>现有设备</div>
                <div class="title-tab">
                    <span :class="{ choosed: linetype == 0 }" @click="lineTabClick(0)">设备种类</span>/
                    <span :class="{ choosed: linetype == 1 }" @click="lineTabClick(1)">设备状态</span>
            <div class="box">
                <div class="title">
                    <div>现有设备</div>
                    <div class="title-tab">
                        <span :class="{ choosed: linetype == 0 }" @click="lineTabClick(0)">设备种类</span>/
                        <span :class="{ choosed: linetype == 1 }" @click="lineTabClick(1)">设备状态</span>
                    </div>
                </div>
                <div style="overflow: hidden;" id="EquipmentEcharts" class="echarts-box"></div>
            </div>
            <div style="overflow: hidden;" id="EquipmentEcharts" class="echarts-box"></div>
            <svg class="border-svg">
                <defs>
@@ -782,6 +788,17 @@
        //     margin-left: 8px;
        // }
        .box {
            display: flex;
            position: absolute;
            flex-direction: column;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 11;
        }
        .title {
            display: flex;
            justify-content: space-between;
@@ -887,7 +904,7 @@
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        z-index: 1;
    }
}
</style>