警情

shuishen

2023-01-06 dbd6d2ca8cb996d49593c19f2e07eb54f31d1d1a

 src/views/home/components/rightContainer.vue

@@ -1,31 +1,53 @@
<template>
    <div class="container" ref="Container">
        <div class="case-box" ref="caseBox">
            <div class="title" ref="alertBoxTitle">
                <div>值班信息(当日)</div>
            <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>
            <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>

            <svg class="border-svg">
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite">
                    </animate>
                </use>
            </svg>
        </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">
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite">
                    </animate>
                </use>
            </svg>
        </div>

        <!-- <div class="alert-box" ref="alertBox">
@@ -57,14 +79,25 @@
        </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">
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite">
                    </animate>
                </use>
            </svg>
        </div>
    </div>
</template>
@@ -647,6 +680,7 @@
    .case-box,
    .alert-box,
    .crowd-box {
        position: relative;
        margin: 8px;
        flex: 1;
        display: flex;
@@ -669,6 +703,17 @@
        //     box-shadow: 0px 0px 8px 2px #43bafe;
        //     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;
@@ -768,5 +813,14 @@
            height: 40px;
        }
    }

    .border-svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
}
</style>