shuishen
2022-12-16 458f200bf7b207df04608b1f40465d9b8b55150c
Merge branch 'master' of http://192.168.0.105:10010/r/srs-police-affairs
4 files modified
615 ■■■■ changed files
src/styles/media/index.scss 311 ●●●●● patch | view | raw | blame | history
src/views/activity/index.vue 11 ●●●● patch | view | raw | blame | history
src/views/lyout/index.vue 67 ●●●● patch | view | raw | blame | history
src/views/police/index.vue 226 ●●●● patch | view | raw | blame | history
src/styles/media/index.scss
@@ -35,10 +35,30 @@
                            width: countSizeVw(132, 1920);
                            height: countSizeVh(36);
                            font-size: countSizeVh(18);
                            .sub-nav-list {
                                border-top: countSizeVh(14) solid transparent;
                                top: countSizeVh(28);
                                left: countSizeVw(72, 1920);
                                div {
                                    height: countSizeVh(36);
                                    line-height: countSizeVh(36);
                                    font-size: countSizeVh(16);
                                }
                                div:first-child {
                                    padding-top: countSizeVh(10);
                                }
                                div:last-child {
                                    padding-bottom: countSizeVh(10);
                                }
                            }
                        }
                    }
                }
                .main-content {
                    top: countSizeVh(60);
@@ -296,8 +316,6 @@
                            .el-icon-arrow-up:before {
                                font-size: countSizeVh(16);
                                line-height: countSizeVh(40);
                            }
                            .el-input__suffix {
@@ -306,10 +324,6 @@
                            .el-select-dropdown__wrap {
                                height: countSizeVh(274);
                            }
                            .el-select-dropdown {
                                width: 2000px;
                            }
                        }
@@ -499,6 +513,12 @@
                            .draw-btn {
                                margin: countSizeVh(8) countSizeVw(8, 1920);
                                height: countSizeVh(26);
                                .el-button--mini{
                                    font-size: countSizeVh(16);
                                    padding: countSizeVh(8) 0;
                                    border-radius: countSizeVh(4);
                                }
                            }
                            .range-input {
@@ -535,6 +555,58 @@
                            .list-show {
                                .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);
                                            }
                                        }
                                    }
                                }
                                .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);
                                }
                            }
                        }
@@ -592,8 +664,61 @@
                                        }
                                    }
                                    .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);
                                    }
                                    .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);
                                                }
                                            }
                                        }
                                    }
                                }
                            }
@@ -601,7 +726,7 @@
                    }
                    .activity-page {
                        &-content {
                        .container-content {
                            font-size: countSizeVh(24);
                            .title {
@@ -619,27 +744,73 @@
                                    .category {
                                        width: countSizeVw(88, 1920);
                                        font-size: countSizeVh(16);
                                    }
                                    .category-value{
                                        .category-input {
                                            width: 80%;
                                            height: countSizeVh(32);
                                            font-size: countSizeVh(14);
                                            border: countSizeVh(1) solid rgb(0, 92, 169);
                                            border-radius: countSizeVh(5) 0 0 countSizeVw(5, 1920);
                                        }
                                        .category-button {
                                            font-size: countSizeVh(20);
                                            // width: countSizeVw(60, 1920);
                                            width: 20%;
                                            height: countSizeVh(32);
                                            border: countSizeVh(1) solid rgb(0, 92, 169);
                                            border-radius: 0 countSizeVw(5, 1920) countSizeVh(5) 0;
                                        }
                                        .category-button:active {
                                            border: countSizeVh(1) solid rgb(0, 92, 169);
                                        }
                                        .el-range-editor.el-input__inner{
                                            width: 100%!important;
                                            height: countSizeVh(32);
                                        }
                                        .el-range-editor .el-range-input{
                                            font-size: countSizeVh(14);
                                            height: countSizeVh(32);
                                            line-height: countSizeVh(32);
                                        }
                                        .el-icon-date:before{
                                            font-size: countSizeVh(14);
                                        }
                                        .el-date-editor .el-range__icon{
                                           line-height: countSizeVh(32);
                                           height: countSizeVh(32);
                                           margin-left: countSizeVw(4, 1920);
                                        }
                                        .el-date-editor .el-range-separator{
                                           height: countSizeVh(32);
                                           line-height: countSizeVh(32);
                                           font-size: countSizeVh(14);
                                        }
                                        .el-select {
                                            width: 100%;
                                            height: countSizeVh(32);
                                        }
                                        .el-input--suffix .el-input__inner{
                                            height: countSizeVh(32);
                                            font-size: countSizeVh(14);
                                            padding-left: countSizeVw(10, 1920);
                                        }
                                        .el-select .el-input .el-select__caret{
                                            font-size: countSizeVh(14);
                                            line-height: countSizeVh(32);
                                        }
                                    }
                                    input {
                                        width: 209px;
                                        height: countSizeVh(32);
                                        font-size: countSizeVh(12);
                                        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;
                                    }
                                    button:active {
                                        border: countSizeVh(1) solid rgb(0, 92, 169);
                                    }
                                }
                            }
@@ -676,6 +847,33 @@
                                .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);
                                            }
                                        }
                                    }
                                }
                            }
                        }
@@ -699,6 +897,28 @@
                        .second-container {
                            top: countSizeVh(10);
                            width: countSizeVw(240, 1920);
                            .el-tree-node__content{
                                height: countSizeVh(30);
                                font-size: countSizeVh(16);
                            }
                            .el-tree-node__label{
                                font-size: countSizeVh(16);
                            }
                            .el-checkbox .el-checkbox__inner{
                                height: countSizeVh(20);
                                width: countSizeVh(20);
                                border-radius: countSizeVh(2);
                            }
                            .el-tree-node__expand-icon{
                                font-size: countSizeVh(16);
                            }
                            .el-checkbox .el-checkbox__inner::after{
                                height: countSizeVh(16);
                                left:countSizeVw(7, 1920);
                            }
                        }
                        .second-container.spread {
@@ -750,6 +970,10 @@
                        }
                    }
                }
                .flexible-btn{
                    font-size: countSizeVh(24);
                }
                .main-content.spread {
@@ -864,7 +1088,40 @@
                }
            }
        }
        .option-css,.activity-option {
            height: countSizeVh(40);
            line-height: countSizeVh(40);
            font-size: countSizeVh(16);
        }
        .option-css:hover,.option-css.selected {
            color: #409EFF;
        }
        .option-css:hover {
            background-color:rgba(0, 92, 169, 0.3) !important;
        }
        .el-select-dropdown__wrap {
            max-height: countSizeVh(200);
        }
        .el-picker-panel{
            width: countSizeVw(536, 1920)!important;
        }
        .el-date-range-picker__header div{
            font-size: countSizeVh(16);
            height: countSizeVh(36);
            line-height: countSizeVh(36);
        }
        .el-picker-panel .el-date-range-picker__header button {
            font-size: countSizeVh(16);
            height: countSizeVh(36);
            line-height: countSizeVh(36);
        }
        .el-date-table td span,.el-date-table th{
            font-size: countSizeVh(16);
        }
        .el-date-table tr{
            height: countSizeVh(22);
        }
    }
}
src/views/activity/index.vue
@@ -28,6 +28,7 @@
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                class="activity-option"
                            ></el-option>
                        </el-select>
                    </div>
@@ -35,8 +36,13 @@
                <div>
                    <div class="category">活动名称:</div>
                    <div class="category-value">
                        <input type="text" placeholder="请输入搜索条件" v-model="searchActivity" />
                        <button class="el-icon-search" @click="searchClick"></button>
                        <input
                            type="text"
                            placeholder="请输入搜索条件"
                            v-model="searchActivity"
                            class="category-input"
                        />
                        <button class="category-button el-icon-search" @click="searchClick"></button>
                    </div>
                </div>
                <div>
@@ -60,7 +66,6 @@
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions"
                            style="width:268px"
                            @change="activityTimeChange"
                        ></el-date-picker>
                    </div>
src/views/lyout/index.vue
@@ -13,13 +13,23 @@
        <div class="main-header">
            <!-- <div class="title"></div> -->
            <div class="menu-list left">
                <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
                    @click="goToPath(item)" v-for="(item, index) in menuLeftList" :key="index">
                <div
                    @mouseenter="item.childrenFlag = true"
                    @mouseleave="item.childrenFlag = false"
                    class="nav-list"
                    @click="goToPath(item)"
                    v-for="(item, index) in menuLeftList"
                    :key="index"
                >
                    <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span>
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">
                        <div
                            v-for="(subItem, subIndex) in item.children"
                            :key="subIndex"
                            @click="goToPath(subItem)"
                        >
                            {{
                                    subItem.menuName
                            subItem.menuName
                            }}
                        </div>
                    </div>
@@ -33,13 +43,23 @@
            <!-- 菜单导航 -->
            <div class="menu-list right">
                <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
                    @click="goToPath(item)" v-for="(item, index) in menuRightList" :key="index">
                <div
                    @mouseenter="item.childrenFlag = true"
                    @mouseleave="item.childrenFlag = false"
                    class="nav-list"
                    @click="goToPath(item)"
                    v-for="(item, index) in menuRightList"
                    :key="index"
                >
                    <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span>
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">
                        <div
                            v-for="(subItem, subIndex) in item.children"
                            :key="subIndex"
                            @click="goToPath(subItem)"
                        >
                            {{
                                    subItem.menuName
                            subItem.menuName
                            }}
                        </div>
                    </div>
@@ -59,15 +79,23 @@
            <mapBox ref="modalForm" />
            <!-- 主体内容区域 -->
            <div class="main-content" id="MainContent"
                :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }">
            <div
                class="main-content"
                id="MainContent"
                :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
            >
                <router-view ref="target-name"></router-view>
            </div>
            <el-button v-show="leftShow" class="flexible-btn"
            <el-button
                v-show="leftShow"
                class="flexible-btn"
                :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
                :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'" id="FlexibleBtn" type="primary"
                @click="flexibelClick"></el-button>
                :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"
                id="FlexibleBtn"
                type="primary"
                @click="flexibelClick"
            ></el-button>
        </div>
    </div>
</template>
@@ -280,7 +308,7 @@
            overflow: hidden;
            letter-spacing: 6px;
            &>img {
            & > img {
                // width: 100%;
                height: 80%;
                margin: 0 10px 0 10px;
@@ -296,7 +324,7 @@
                // border-radius: 10px 16px 10px 16px;
                transform: skew(58deg);
                &>span {
                & > span {
                    transform: skew(-58deg);
                }
            }
@@ -310,7 +338,7 @@
                // border-radius: 16px 10px 16px 10px;
                transform: skew(-58deg);
                &>span {
                & > span {
                    transform: skew(58deg);
                }
            }
@@ -320,11 +348,10 @@
            display: flex;
            align-items: center;
            &>.nav-list {
            & > .nav-list {
                // color: rgba(32, 106, 181, 1);
                // border-bottom: 2px solid #409eff;
                &>span.on {
                & > span.on {
                    color: rgba(252, 189, 86, 1);
                }
            }
@@ -372,7 +399,7 @@
                    }
                    div:hover {
                        background: $table-body-tr-2n-color;
                        background: $table-body-tr-2n-color !important;
                    }
                }
            }
src/views/police/index.vue
@@ -13,28 +13,48 @@
    <div class="police-page container">
        <div v-show="boxShow" class="container-content">
            <div class="switch-box">
                <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>
                <el-select
                    v-model="typeValue"
                    @change="navClick"
                    placeholder="请选择"
                    class="type-select-css"
                >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        class="option-css"
                    ></el-option>
                </el-select>
            </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%">
@@ -45,10 +65,20 @@
                        <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>
@@ -56,18 +86,25 @@
                    </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%">
@@ -78,10 +115,20 @@
                        <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>
@@ -89,18 +136,26 @@
                    </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%">
@@ -111,10 +166,20 @@
                        <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>
@@ -122,18 +187,26 @@
                    </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%">
@@ -144,10 +217,20 @@
                        <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>
@@ -155,9 +238,15 @@
                    </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>
@@ -188,9 +277,15 @@
                    <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>
@@ -223,9 +318,15 @@
                    <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>
@@ -236,14 +337,33 @@
            </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>
@@ -714,7 +834,7 @@
            display: flex;
            justify-content: space-around;
            &>div {
            & > div {
                flex: 1;
            }
        }
@@ -781,7 +901,7 @@
                border-radius: 10px;
                overflow-y: auto;
                &>div {
                & > div {
                    height: 100%;
                    padding: 0 10px;
                    line-height: 36px;
@@ -861,18 +981,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;
                    }
                }