1

shuishen

2022-12-15 daed08dc1fa2d6a9f2828276baadef6a99ae686d

1

 src/styles/media/index.scss

@@ -285,168 +285,201 @@

                    .police-page {
                        .switch-box {
                                padding: countSizeVh(6);
                            padding: countSizeVh(6);

                                .el-input__inner{
                                    height: countSizeVh(40);
                                    font-size: countSizeVh(16);
                            .el-input__inner {
                                height: countSizeVh(40);
                                font-size: countSizeVh(16);

                                }
                            }

                                .el-icon-arrow-up:before{
                                    font-size: countSizeVh(16);
                                    line-height: countSizeVh(40);
                            .el-icon-arrow-up:before {
                                font-size: countSizeVh(16);
                                line-height: countSizeVh(40);

                                    
                                }
                                .el-input__suffix {
                                    right: countSizeVw(5, 1920);
                                }
                                .el-select-dropdown__wrap{
                                    height: countSizeVh(274);
                                }
                                .el-select-dropdown{
                                    width: 2000px;
                                }

                            }

                            .el-input__suffix {
                                right: countSizeVw(5, 1920);
                            }

                            .el-select-dropdown__wrap {
                                height: countSizeVh(274);
                            }

                            .el-select-dropdown {
                                width: 2000px;
                            }

                        }

                        .list-show {
                                height: calc(100% - countSizeVh(50));
                            height: calc(100% - countSizeVh(50));

                                .search-box {
                                    padding: countSizeVh(6) countSizeVw(6, 1920);
                                    height: countSizeVh(46);
                            .search-box {
                                padding: countSizeVh(6) countSizeVw(6, 1920);
                                height: countSizeVh(46);

                                    input {
                                        font-size: countSizeVh(18);
                                        border-radius: countSizeVh(20) 0 0 countSizeVw(20,1920);
                                    }

                                    button {
                                        font-size: countSizeVh(24);
                                        width: countSizeVw(80,1920);
                                        border: countSizeVh(1) solid rgb(0, 92, 169);
                                        border-radius: 0 countSizeVw(20,1920) countSizeVh(20) 0;
                                    }

                                    button:active {
                                        border: countSizeVh(1) solid rgb(0, 92, 169);
                                    }
                                input {
                                    font-size: countSizeVh(18);
                                    border-radius: countSizeVh(20) 0 0 countSizeVw(20, 1920);
                                }
                                .search-val-box{
                                    top: countSizeVh(48);
                                    left: countSizeVw(6,1920);
                                    width: calc(100% - countSizeVw(12,1920));
                                    max-height: countSizeVh(160);
                                    border-radius: countSizeVh(10) countSizeVw(10,1920);

                                    & > div {
                                        padding: 0 countSizeVw(10,1920);
                                        line-height: countSizeVh(36);
                                    }
                                button {
                                    font-size: countSizeVh(24);
                                    width: countSizeVw(80, 1920);
                                    border: countSizeVh(1) solid rgb(0, 92, 169);
                                    border-radius: 0 countSizeVw(20, 1920) countSizeVh(20) 0;
                                }
                                .list {
                                    height: calc(100% - countSizeVh(48));
                                    .el-button--text {
                                        font-size: countSizeVh(14);
                                    }

                                    .pages {
                                        height: countSizeVh(40);
                                button:active {
                                    border: countSizeVh(1) solid rgb(0, 92, 169);
                                }
                            }

                                        .el-pagination .btn-next .el-icon, .el-pagination .btn-prev .el-icon{
                                           font-size: countSizeVh(16);
                                        }
                            .search-val-box {
                                top: countSizeVh(48);
                                left: countSizeVw(6, 1920);
                                width: calc(100% - countSizeVw(12, 1920));
                                max-height: countSizeVh(160);
                                border-radius: countSizeVh(10) countSizeVw(10, 1920);

                                        .el-pagination.is-background .btn-prev,.el-pagination.is-background .btn-next {
                                            width: countSizeVw(30,1920);
                                            height: countSizeVh(34);
                                            border-radius: countSizeVh(2);
                                        }
                                        .el-pagination.is-background .btn-next {
                                            margin-left:countSizeVw(6,1920);
                                        }
                                        .el-pagination.is-background .el-pager,.el-pagination.is-background .el-pager li{
                                            font-size: countSizeVh(18);
                                        }
                                        .el-pager {
                                            margin-top:countSizeVh(12);
                                            .number{
                                                 margin-left:countSizeVw(6,1920);
                                &>div {
                                    padding: 0 countSizeVw(10, 1920);
                                    line-height: countSizeVh(36);
                                }
                            }

                            .list {
                                height: calc(100% - countSizeVh(48));

                                .el-button--text {
                                    font-size: countSizeVh(14);
                                }

                                .pages {
                                    height: countSizeVh(40);

                                    &>div {
                                        display: flex;
                                        align-items: center;

                                        &>button {
                                            width: countSizeVh(32);
                                            height: countSizeVh(32);

                                            &>i {
                                                font-size: countSizeVh(16);
                                            }
                                        }

                                        &>ul {
                                            display: flex;
                                            align-items: center;

                                            li {
                                                width: countSizeVh(32);
                                                height: countSizeVh(32);
                                                line-height: countSizeVh(32);
                                                font-size: countSizeVh(16);
                                            }
                                        }
                                    }

                                    .state-box {
                                        width: countSizeVw(20,1920);
                                        height: countSizeVh(20);
                                        line-height: countSizeVh(20);
                                    }
                                    // .el-pagination .btn-next .el-icon, .el-pagination .btn-prev .el-icon{
                                    //    font-size: countSizeVh(16);
                                    // }

                                    .el-table__header-wrapper {
                                        height:countSizeVh(48);
                                    // .el-pagination.is-background .btn-prev,.el-pagination.is-background .btn-next {
                                    //     width: countSizeVw(30,1920);
                                    //     height: countSizeVh(34);
                                    //     border-radius: countSizeVh(2);
                                    // }
                                    // .el-pagination.is-background .btn-next {
                                    //     margin-left:countSizeVw(6,1920);
                                    // }
                                    // .el-pagination.is-background .el-pager,.el-pagination.is-background .el-pager li{
                                    //     font-size: countSizeVh(18);
                                    // }
                                    // .el-pager {
                                    //     margin-top:countSizeVh(12);
                                    //     .number{
                                    //          margin-left:countSizeVw(6,1920);
                                    //     }

                                        .el-table__header{
                                            height: 100%;

                                        }  
                                    } 

                                    .el-table th.el-table__cell{
                                        height: 100%;
                                    }

                                    .el-table .cell{
                                        line-height: countSizeVh(48);
                                        font-size: countSizeVh(16);
                                    }

                                    .el-table th.el-table__cell>.cell{
                                        height: 100%;
                                    }

                                    .el-table__empty-text{
                                        font-size: countSizeVh(16);
                                    }
                                    
                                   
                                    // }
                                }
                                

                                .state-box {
                                    width: countSizeVw(20, 1920);
                                    height: countSizeVh(20);
                                    line-height: countSizeVh(20);
                                }

                                .el-table__header-wrapper {
                                    height: countSizeVh(48);

                                    .el-table__header {
                                        height: 100%;

                                    }
                                }

                                .el-table th.el-table__cell {
                                    height: 100%;
                                }

                                .el-table .cell {
                                    line-height: countSizeVh(48);
                                    font-size: countSizeVh(16);
                                }

                                .el-table th.el-table__cell>.cell {
                                    height: 100%;
                                }

                                .el-table__empty-text {
                                    font-size: countSizeVh(16);
                                }


                            }

                        }

                        .track-box {
                                height: calc(100% - countSizeVh(50));
                            height: calc(100% - countSizeVh(50));

                                .back-btn {
                                    height: countSizeVh(42);
                                    line-height: countSizeVh(42);
                                    border-bottom: countSizeVh(1) solid #fff;
                            .back-btn {
                                height: countSizeVh(42);
                                line-height: countSizeVh(42);
                                border-bottom: countSizeVh(1) solid #fff;
                            }

                            .back-btn::before {
                                height: countSizeVh(28);
                                line-height: countSizeVh(28);
                                top: countSizeVh(4);
                                left: countSizeVw(8, 1920);
                            }

                            li {
                                padding: 0 countSizeVw(4, 1920);
                                height: countSizeVh(42);
                                line-height: countSizeVh(42);
                                border-bottom: countSizeVh(1) solid #fff;
                            }

                            li:last-child {
                                .el-button {
                                    width: countSizeVw(68, 1920);
                                    height: countSizeVh(32);
                                    line-height: countSizeVh(32);
                                }

                                .back-btn::before {
                                    height: countSizeVh(28);
                                    line-height: countSizeVh(28);
                                    top: countSizeVh(4);
                                    left: countSizeVw(8, 1920);
                                }

                                li {
                                    padding: 0 countSizeVw(4, 1920);
                                    height: countSizeVh(42);
                                    line-height: countSizeVh(42);
                                    border-bottom: countSizeVh(1) solid #fff;
                                }

                                li:last-child {
                                    .el-button {
                                        width: countSizeVw(68, 1920);
                                        height: countSizeVh(32);
                                        line-height: countSizeVh(32);
                                    }
                                }}
                            }
                        }
                    }

                    .video-page {
@@ -467,7 +500,7 @@
                                    border: countSizeVh(1) solid rgb(0, 92, 169);
                                    border-radius: 0 countSizeVw(20, 1920) countSizeVh(20) 0;
                                }
                    

                                button:active {
                                    border: countSizeVh(1) solid rgb(0, 92, 169);
                                }
@@ -480,7 +513,7 @@
                                max-height: countSizeVh(160);
                                border-radius: countSizeVh(10) countSizeVw(10, 1920);

                                & > div {
                                &>div {
                                    padding: 0 countSizeVw(10, 1920);
                                    line-height: countSizeVh(36);
                                }
@@ -504,19 +537,19 @@
                                    margin-top: countSizeVh(10);
                                    padding-left: countSizeVw(6, 1920);
                                }
                    

                                .btn {
                                    width: countSizeVw(60, 1920);
                                    height: countSizeVh(30);
                                    border-radius: countSizeVh(4)  ;
                                    border-radius: countSizeVh(4);
                                    margin-top: countSizeVh(10);
                                }
                    

                                .close {
                                    width: countSizeVw(20, 1920);
                                    height: countSizeVh(10);
                                }
                    

                                .close::before {
                                    font-size: countSizeVh(18);
                                }
@@ -524,30 +557,30 @@

                            .list-show {
                                .pages {
                                    height:  countSizeVh(40);
                                    height: countSizeVh(40);
                                }
                            }
                        }

                        .region {
                            .left-container{
                            .left-container {
                                .search-box {
                                    padding: countSizeVw(6, 1920) countSizeVh(6);
                                    height: countSizeVh(52);
    

                                    input {
                                        font-size: countSizeVh(18);
                                        border: countSizeVh(1) solid rgb(0, 92, 169);
                                        border-radius: countSizeVh(20) 0 0 countSizeVw(20, 1920);
                                    }
    

                                    button {
                                        font-size: countSizeVh(24);
                                        width: countSizeVw(80, 1920);
                                        border: countSizeVh(1) solid rgb(0, 92, 169);
                                        border-radius: 0 countSizeVw(20, 1920) countSizeVh(20) 0;
                                    }
                        

                                    button:active {
                                        border: countSizeVh(1) solid rgb(0, 92, 169);
                                    }
@@ -559,15 +592,15 @@
                                    width: calc(100% - countSizeVw(12, 1920));
                                    max-height: countSizeVh(160);
                                    border-radius: countSizeVh(10) countSizeVw(10, 1920);
    
                                    & > div {

                                    &>div {
                                        padding: 0 countSizeVw(10, 1920);
                                        line-height: countSizeVh(36);
                                    }
                                }

                                .list-show {
                                    & > div {
                                    &>div {
                                        .list-box {
                                            .btn {
                                                width: 60px;
@@ -575,22 +608,23 @@
                                                border-radius: countSizeVh(4) countSizeVw(4, 1920);
                                                margin-top: countSizeVh(10);
                                            }
                    

                                            .btn:active {
                                                border: countSizeVh(1) solid rgb(0, 92, 169);
                                            }
                                        }
                                    }

                                    .pages {
                                        height:  countSizeVh(40);
                                        height: countSizeVh(40);
                                    }
                                }
                            }
                        }
                    }

                    .activity-page{
                        &-content{
                    .activity-page {
                        &-content {
                            font-size: countSizeVh(24);

                            .title {
@@ -599,17 +633,17 @@
                                font-size: countSizeVh(24);
                                letter-spacing: countSizeVw(20, 1920);
                            }
    

                            .search-box {
                                padding: 0 countSizeVw(10, 1920);
                    
                                & > div {

                                &>div {
                                    margin-top: countSizeVh(10);
                    

                                    .category {
                                        width: countSizeVw(88, 1920);
                                    }
                    

                                    input {
                                        width: 209px;
                                        height: countSizeVh(32);
@@ -617,61 +651,61 @@
                                        border: countSizeVh(1) solid rgb(0, 92, 169);
                                        border-radius: countSizeVh(5) 0 0 countSizeVw(5, 1920);
                                    }
                    

                                    button {
                                        font-size: countSizeVh(20);
                                        width: countSizeVw(60, 1920);
                                        height: countSizeVh(32) ;
                                        border: countSizeVh(1)  solid rgb(0, 92, 169);
                                        border-radius: 0 countSizeVw(5, 1920) countSizeVh(5)  0;
                                        height: countSizeVh(32);
                                        border: countSizeVh(1) solid rgb(0, 92, 169);
                                        border-radius: 0 countSizeVw(5, 1920) countSizeVh(5) 0;
                                    }
                    

                                    button:active {
                                        border: countSizeVh(1)  solid rgb(0, 92, 169);
                                        border: countSizeVh(1) solid rgb(0, 92, 169);
                                    }
                                }
                            }
    

                            .result-content {
                                margin-top: countSizeVh(8);
                    

                                .table-box {
    

                                    .row-box {
                                        margin: countSizeVh(10) countSizeVw(10, 1920) ;
                                        padding: countSizeVh(10) countSizeVw(10, 1920) ;
                                        margin: countSizeVh(10) countSizeVw(10, 1920);
                                        padding: countSizeVh(10) countSizeVw(10, 1920);
                                        font-size: countSizeVh(14);
                    

                                        .row-content {
                                            & > div {
                                            &>div {
                                                line-height: countSizeVh(28);
                    

                                                .category {
                                                    width: countSizeVw(88, 1920) ;
                                                    width: countSizeVw(88, 1920);
                                                    font-size: countSizeVh(16);
                                                }
                                            }
                                        }
                                    }
                    

                                    .tableClass {
                                        width: countSizeVw(400, 1920) ;
                                        width: countSizeVw(400, 1920);
                                    }
                    

                                    .tableClass td {
                                        width: countSizeVw(300, 1920) ;
                                        width: countSizeVw(300, 1920);
                                    }
                                }
                    

                                .pages {
                                    height: countSizeVh(40);
                                }
                            }
                        }
                       

                        .draw-btn-box {
                            bottom: countSizeVh(40);
                    

                            ul {
                                li {
                                    button {
@@ -693,38 +727,38 @@
                        .second-container.spread {
                            left: countSizeVw(410, 1920);
                        }
                    

                        .second-container.take-back {
                            left: countSizeVw(10, 1920);
                        }
                    

                        .activity-details-box {
                            top: countSizeVh(90);
                            right: countSizeVw(10, 1920);
                            width: countSizeVw(400, 1920);
                            padding: countSizeVh(10) countSizeVw(10, 1920);
                            border-radius: countSizeVh(10) countSizeVw(10, 1920);
                    

                            .title {
                                height: countSizeVh(36);
                                line-height: countSizeVh(36);
                            }
                    

                            .row-box {
                                line-height: countSizeVh(28);
                    

                                .category {
                                    width: countSizeVw(96, 1920);
                                }
                            }
                        }
                    

                        .btn-box {
                            top: countSizeVh(78);
                            min-height: countSizeVh(40);
                            padding: countSizeVh(10) countSizeVw(10, 1920) 0 countSizeVw(10, 1920);
                            border-radius: countSizeVw(10, 1920);
                    

                            ul {
                                li {
                                    button {

 src/views/police/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-12-01 15:43:45
 * @LastEditTime: 2022-12-15 10:33:21
 * @FilePath: \srs-police-affairs\src\views\police\index.vue
 * @Description: 辖区管理
 * 
@@ -13,42 +13,28 @@
    <div class="police-page container">
        <div v-show="boxShow" class="container-content">
            <div class="switch-box">
                <el-select v-model="typeValue" @change="navClick" placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
                <el-selects v-model="typeValue" @change="navClick" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-selects>
            </div>

            <div class="list-show" ref="tableBox" v-show="!detailFlag">
                <div class="search-box" ref="tableSearchBox">
                    <input
                        v-model="searchValue"
                        @input="searchChange"
                        type="text"
                        placeholder="请输入搜索条件"
                    />
                    <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
                    <button @click="searchClick" class="el-icon-search"></button>
                </div>

                <div v-show="searchValBoxShow" class="search-val-box">
                    <div
                        @click="searchVlaClick(item)"
                        v-for="(item, index) in searchArray"
                        :key="index"
                    >{{ item.name }}</div>
                    <div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index">{{ item.name }}
                    </div>
                </div>

                <div class="list" v-show="navType == 1">
                    <el-table
                        :data="carList"
                    <el-table :data="carList"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
                        :height="currentTableHeight"
                    >
                        :height="currentTableHeight">
                        <el-table-column prop="serialNumber" label="编号" min-width="25%"></el-table-column>
                        <el-table-column prop="carType" label="类型" min-width="25%"></el-table-column>
                        <el-table-column prop="status" label="状态" min-width="25%">
@@ -59,20 +45,10 @@

                        <el-table-column label="操作" align="center" min-width="25%">
                            <template slot-scope="scope">
                                <el-button
                                    @click="rowClick(scope.row)"
                                    type="text"
                                    size="small"
                                    title="定位"
                                >
                                <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
                                    <i class="el-icon-location"></i>
                                </el-button>
                                <el-button
                                    @click="carDetail(scope.row)"
                                    type="text"
                                    size="small"
                                    title="轨迹"
                                >
                                <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹">
                                    <i class="el-icon-position"></i>
                                </el-button>
                            </template>
@@ -80,25 +56,18 @@
                    </el-table>

                    <div class="pages">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :page-size="pagesize"
                            :page-count="carPagesCount"
                            :current-page="currentPage"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                        <el-pagination background layout="prev, pager, next" :page-size="pagesize"
                            :page-count="carPagesCount" :current-page="currentPage"
                            @current-change="handleCurrentChange"></el-pagination>
                    </div>
                </div>

                <div class="list" v-show="navType == 2">
                    <el-table
                        :data="phoneList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                    <el-table :data="phoneList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
                        :height="currentTableHeight"
                    >
                        :height="currentTableHeight">
                        <el-table-column prop="name" label="名称" min-width="25%"></el-table-column>
                        <el-table-column prop="phoneType" label="类型" min-width="25%"></el-table-column>
                        <el-table-column prop="state" label="状态" min-width="25%">
@@ -109,20 +78,10 @@

                        <el-table-column label="操作" align="center" min-width="25%">
                            <template slot-scope="scope">
                                <el-button
                                    @click="rowClick(scope.row)"
                                    type="text"
                                    size="small"
                                    title="定位"
                                >
                                <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
                                    <i class="el-icon-location"></i>
                                </el-button>
                                <el-button
                                    @click="carDetail(scope.row)"
                                    type="text"
                                    size="small"
                                    title="轨迹"
                                >
                                <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹">
                                    <i class="el-icon-position"></i>
                                </el-button>
                            </template>
@@ -130,26 +89,18 @@
                    </el-table>

                    <div class="pages">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="phoneList.length"
                            :page-size="pagesize"
                            pager-count="3"
                            :current-page="currentPage"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                        <el-pagination background layout="prev, pager, next" :total="phoneList.length"
                            :page-size="pagesize" pager-count="3" :current-page="currentPage"
                            @current-change="handleCurrentChange"></el-pagination>
                    </div>
                </div>

                <div class="list" v-show="navType == 3">
                    <el-table
                        :data="dtList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                    <el-table :data="dtList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
                        :height="currentTableHeight"
                    >
                        :height="currentTableHeight">
                        <el-table-column prop="name" label="名称" min-width="25%"></el-table-column>
                        <el-table-column prop="dtType" label="类型" min-width="25%"></el-table-column>
                        <el-table-column prop="state" label="状态" min-width="25%">
@@ -160,20 +111,10 @@

                        <el-table-column label="操作" align="center" min-width="25%">
                            <template slot-scope="scope">
                                <el-button
                                    @click="rowClick(scope.row)"
                                    type="text"
                                    size="small"
                                    title="定位"
                                >
                                <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
                                    <i class="el-icon-location"></i>
                                </el-button>
                                <el-button
                                    @click="carDetail(scope.row)"
                                    type="text"
                                    size="small"
                                    title="轨迹"
                                >
                                <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹">
                                    <i class="el-icon-position"></i>
                                </el-button>
                            </template>
@@ -181,26 +122,18 @@
                    </el-table>

                    <div class="pages">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="dtList.length"
                            :page-size="pagesize"
                            pager-count="3"
                            :current-page="currentPage"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                        <el-pagination background layout="prev, pager, next" :total="dtList.length"
                            :page-size="pagesize" pager-count="3" :current-page="currentPage"
                            @current-change="handleCurrentChange"></el-pagination>
                    </div>
                </div>

                <div class="list" v-show="navType == 4">
                    <el-table
                        :data="zfList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                    <el-table :data="zfList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
                        :height="currentTableHeight"
                    >
                        :height="currentTableHeight">
                        <el-table-column prop="name" label="名称" min-width="25%"></el-table-column>
                        <el-table-column prop="phoneType" label="类型" min-width="25%"></el-table-column>
                        <el-table-column label="状态" min-width="25%">
@@ -211,20 +144,10 @@

                        <el-table-column label="操作" align="center" min-width="25%">
                            <template slot-scope="scope">
                                <el-button
                                    @click="rowClick(scope.row)"
                                    type="text"
                                    size="small"
                                    title="定位"
                                >
                                <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
                                    <i class="el-icon-location"></i>
                                </el-button>
                                <el-button
                                    @click="carDetail(scope.row)"
                                    type="text"
                                    size="small"
                                    title="轨迹"
                                >
                                <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹">
                                    <i class="el-icon-position"></i>
                                </el-button>
                            </template>
@@ -232,15 +155,9 @@
                    </el-table>

                    <div class="pages">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="zfList.length"
                            :page-size="pagesize"
                            pager-count="3"
                            :current-page="currentPage"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                        <el-pagination background layout="prev, pager, next" :total="zfList.length"
                            :page-size="pagesize" pager-count="3" :current-page="currentPage"
                            @current-change="handleCurrentChange"></el-pagination>
                    </div>
                </div>
            </div>
@@ -271,15 +188,9 @@
                    <li>
                        <div>选择时间：</div>
                        <div class="datetime">
                            <el-date-picker
                                v-model="trackTime"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                size="mini"
                                :editable="false"
                                end-placeholder="结束日期"
                            ></el-date-picker>
                            <el-date-picker v-model="trackTime" type="datetimerange" range-separator="至"
                                start-placeholder="开始日期" size="mini" :editable="false"
                                end-placeholder="结束日期"></el-date-picker>
                        </div>
                    </li>

@@ -312,15 +223,9 @@
                    <li>
                        <div>选择时间：</div>
                        <div class="datetime">
                            <el-date-picker
                                v-model="trackTime"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                size="mini"
                                :editable="false"
                                end-placeholder="结束日期"
                            ></el-date-picker>
                            <el-date-picker v-model="trackTime" type="datetimerange" range-separator="至"
                                start-placeholder="开始日期" size="mini" :editable="false"
                                end-placeholder="结束日期"></el-date-picker>
                        </div>
                    </li>

@@ -331,33 +236,14 @@
            </div>
        </div>

        <el-dialog
            :title="dialogTitle"
            :modal="true"
            :visible.sync="dialogVisible"
            :before-close="dialogBeforeClose"
            :close-on-click-modal="true"
            class="car-video-box"
        >
            <video
                src="/video/sp.mp4"
                autoplay
                controls
                width="100%"
                height="100%"
                ref="videoElement"
                style="object-fit: fill"
            ></video>
        <el-dialog :title="dialogTitle" :modal="true" :visible.sync="dialogVisible" :before-close="dialogBeforeClose"
            :close-on-click-modal="true" class="car-video-box">
            <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement"
                style="object-fit: fill"></video>
        </el-dialog>

        <el-dialog
            :title="phoneTitle"
            :modal="true"
            :visible.sync="phoneVisible"
            :before-close="phoneBeforeClose"
            :close-on-click-modal="true"
            class="phone-details-box"
        >
        <el-dialog :title="phoneTitle" :modal="true" :visible.sync="phoneVisible" :before-close="phoneBeforeClose"
            :close-on-click-modal="true" class="phone-details-box">
            <div class="item">
                <div>责任人：</div>
                <div>{{ phoneDetails.person }}</div>
@@ -828,7 +714,7 @@
            display: flex;
            justify-content: space-around;

            & > div {
            &>div {
                flex: 1;
            }
        }
@@ -895,7 +781,7 @@
                border-radius: 10px;
                overflow-y: auto;

                & > div {
                &>div {
                    height: 100%;
                    padding: 0 10px;
                    line-height: 36px;
@@ -975,18 +861,18 @@
                color: #fff;
                border-bottom: 1px solid #fff;

                & > div {
                &>div {
                    text-align: center;
                }

                & > div:first-child {
                &>div:first-child {
                    flex: 2;
                }

                & > div:last-child {
                &>div:last-child {
                    flex: 6;

                    & > div {
                    &>div {
                        width: 100% !important;
                    }
                }