首页底部更改

shuishen

2022-10-29 3b985acf17b1cc89b269718465da61061da46ce6

首页底部更改

 package-lock.json

@@ -5056,6 +5056,11 @@
                }
            }
        },
        "comutils": {
            "version": "1.1.19",
            "resolved": "https://registry.npmjs.org/comutils/-/comutils-1.1.19.tgz",
            "integrity": "sha512-JxXB67juILiwhdLwOsYyjUqwWEhHdObI0EClOPk+JDtEuTbac59s0pxGpfCBnNNQ5JommifmcMGneW/4Cg7YWw=="
        },
        "concat-map": {
            "version": "0.0.1",
            "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -14010,6 +14015,14 @@
            "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz",
            "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
        },
        "vue-seamless-scroll": {
            "version": "1.1.23",
            "resolved": "https://registry.npmjs.org/vue-seamless-scroll/-/vue-seamless-scroll-1.1.23.tgz",
            "integrity": "sha512-HBjUub8WwsKJzbFCrwKPDrZn4e+SSbkKgwWtjKtfLwesiFGwSsVxP44/Z6d3kpXy94qIFOiflJH6l0/9pj7SGA==",
            "requires": {
                "comutils": "^1.1.9"
            }
        },
        "vue-style-loader": {
            "version": "4.1.3",
            "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",

 package.json

@@ -19,6 +19,7 @@
        "vue": "^2.6.11",
        "vue-axios": "^3.3.7",
        "vue-router": "^3.2.0",
        "vue-seamless-scroll": "^1.1.23",
        "vuex": "^3.4.0"
    },
    "devDependencies": {

 src/views/activity/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-09-27 16:01:02
 * @LastEditTime: 2022-10-29 11:38:12
 * @FilePath: \srs-police-affairs\src\views\activity\index.vue
 * @Description: 安保活动
 * 
@@ -18,12 +18,8 @@
                    <div class="category">活动类型：</div>
                    <div class="category-value">
                        <el-select size="small" v-model="activityType" placeholder="请选择">
                            <el-option
                                v-for="item in activityOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                            <el-option v-for="item in activityOptions" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </div>
                </div>
@@ -37,25 +33,16 @@
                <div>
                    <div class="category">选择时间：</div>
                    <div class="category-value">
                        <el-date-picker
                            size="small"
                            v-model="selectTime"
                            type="date"
                            placeholder="选择日期"
                            style="width:268px"
                        ></el-date-picker>
                        <el-date-picker size="small" v-model="selectTime" type="date" placeholder="选择日期"
                            style="width:268px"></el-date-picker>
                    </div>
                </div>
            </div>
            <div class="result-content">
                <div class="table-box">
                    <div
                        class="row-box"
                        :class="{on: currentClickIndex === index}"
                        v-for="(item, index) in activityList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                        :key="index"
                        @click="goAbDetail(item, index)"
                    >
                    <div class="row-box" :class="{ on: currentClickIndex === index }"
                        v-for="(item, index) in activityList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        :key="index" @click="goAbDetail(item, index)">
                        <div class="row-title">常规安保</div>
                        <div class="row-content">
                            <div>
@@ -64,9 +51,7 @@
                            </div>
                            <div>
                                <div class="category">活动时间：</div>
                                <div
                                    class="category-value"
                                >2022-08-01 00:00:00 至 2022-09-01 00:00:00</div>
                                <div class="category-value">2022-08-01 00:00:00 至 2022-09-01 00:00:00</div>
                            </div>
                            <div>
                                <div class="category">活动详情：</div>
@@ -75,16 +60,11 @@
                        </div>
                    </div>
                </div>

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

@@ -130,13 +110,8 @@
        </div>

        <div class="second-container">
            <el-tree
                :data="treeData"
                show-checkbox
                node-key="id"
                @check="treeCheckClick"
                @node-click="treeNodeClick"
            ></el-tree>
            <el-tree :data="treeData" show-checkbox node-key="id" @check="treeCheckClick" @node-click="treeNodeClick">
            </el-tree>
        </div>

        <div v-show="dialogVisible" class="activity-details-box">
@@ -159,16 +134,14 @@

            <div class="row-box">
                <div class="category">活动内容1：</div>
                <div
                    class="category-value"
                >在接到停电通知的状况下，管理运作部应事先将停电线路、区域、时光、电梯使用 以及安全防范要求等状况通知每个住户和商户，并在主要出入口发布停电通告；同时， 工程物料部应做好停电前的应变工作。</div>
                <div class="category-value">在接到停电通知的状况下，管理运作部应事先将停电线路、区域、时光、电梯使用 以及安全防范要求等状况通知每个住户和商户，并在主要出入口发布停电通告；同时，
                    工程物料部应做好停电前的应变工作。</div>
            </div>

            <div class="row-box">
                <div class="category">活动内容2：</div>
                <div
                    class="category-value"
                >在没有接到任何通知、突然发生停电的状况下，工程物料部应立即确认是内部故障 停电还是外部停电。若系内部故障停电，应立即派人查找原因采取措施，防止故障扩 大；若系外部停电，一方面要防止突然来电引发事故，一方面致电电力局查询停电状 况，了解何时恢复供电，并将了解的状况通知管理运作部。</div>
                <div class="category-value">在没有接到任何通知、突然发生停电的状况下，工程物料部应立即确认是内部故障 停电还是外部停电。若系内部故障停电，应立即派人查找原因采取措施，防止故障扩
                    大；若系外部停电，一方面要防止突然来电引发事故，一方面致电电力局查询停电状 况，了解何时恢复供电，并将了解的状况通知管理运作部。</div>
            </div>

            <div class="row-box">
@@ -179,25 +152,16 @@
            <div class="row-box">
                <div class="category">撤离路线：</div>
                <div class="category-value">
                    <el-switch
                        v-model="polylineSwitch"
                        @change="switchChange"
                        active-color="#13ce66"
                        inactive-color="#ccc"
                    ></el-switch>
                    <el-switch v-model="polylineSwitch" @change="switchChange" active-color="#13ce66"
                        inactive-color="#ccc"></el-switch>
                </div>
            </div>

            <div class="row-box">
                <div class="category">分析范围：</div>
                <div class="category-value">
                    <el-input
                        @input="analyseChange"
                        size="mini"
                        type="number"
                        v-model="analyseInput"
                        placeholder="请输入范围"
                    ></el-input>
                    <el-input @input="analyseChange" size="mini" type="number" v-model="analyseInput"
                        placeholder="请输入范围"></el-input>
                </div>
            </div>
        </div>
@@ -214,7 +178,7 @@
                    <button @click="restore()">恢复</button>
                </li>
                <li>
                    <button @click="view('1',-20,100)">第一视角</button>
                    <button @click="view('1', -20, 100)">第一视角</button>
                </li>
                <li>
                    <button @click="view('2')">上帝视角</button>
@@ -687,8 +651,8 @@
        background: $bg-color;

        .title {
            height: 51px;
            line-height: 58px;
            height: 40px;
            line-height: 40px;
            font-weight: 700;
            font-size: 24px;
            letter-spacing: 20px;
@@ -697,7 +661,11 @@
        .search-box {
            padding: 0 10px;

            & > div {
            &>div:first-child {
                margin-top: 0;
            }

            &>div {
                margin-top: 10px;
                display: flex;
                align-items: center;
@@ -771,7 +739,7 @@
                    font-size: 14px;

                    .row-content {
                        & > div {
                        &>div {
                            display: flex;
                            line-height: 28px;

@@ -788,6 +756,7 @@
                        }
                    }
                }

                .row-box:hover {
                    background-color: rgb(1, 76, 137);
                }
@@ -799,6 +768,7 @@
                :deep(.el-dialog) {
                    margin-right: 0px;
                }

                .tableClass {
                    margin: 0 auto;
                    width: 400px;
@@ -809,6 +779,14 @@
                .tableClass td {
                    width: 300px;
                }
            }


            .pages {
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
@@ -853,6 +831,7 @@
        :deep(.el-tree-node__content) {
            background: transparent;
        }

        :deep(.el-tree-node) {
            background: $bg-color;
            color: #fff;
@@ -891,7 +870,7 @@
            line-height: 28px;
            display: flex;

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


 src/views/home/components/bottomContainer.vue

@@ -14,6 +14,39 @@
        </div>

        <div class="body" ref="tableBox">
            <ul>
                <li style="color: #fff; background: rgb(1, 76, 137);">
                    <span class="num">序号</span>
                    <span class="type">警情类别</span>
                    <span class="comingPhone">报警电话</span>
                    <span class="dealTime">接警时间</span>
                    <span class="dealPolice">经办民警</span>
                    <span class="callPeople">报警人</span>
                    <span class="callPhone">报警人联系人</span>
                    <span class="callContent">报警内容</span>
                </li>
            </ul>
            <vue-seamless-scroll :data="timetype == 0 ? pliceSituationWeekArr : pliceSituationMouthArr" class="warp"
                :style="{
                    height: currentTableHeight - 44 + 'px', width: '100%'
                }">
                <ul class="item">
                    <li v-for="(item, index) in (timetype == 0 ? pliceSituationWeekArr : pliceSituationMouthArr)"
                        :key="index">
                        <span class="num" v-text="item.num"></span>
                        <span class="type" v-text="item.type"></span>
                        <span class="comingPhone" v-text="item.comingPhone"></span>
                        <span class="dealTime" v-text="item.dealTime"></span>
                        <span class="dealPolice" v-text="item.dealPolice"></span>
                        <span class="callPeople" v-text="item.callPeople"></span>
                        <span class="callPhone" v-text="item.callPhone"></span>
                        <span class="callContent" v-text="item.callContent"></span>
                    </li>
                </ul>
            </vue-seamless-scroll>
        </div>

        <!-- <div class="body" ref="tableBox">
            <el-table :data="timetype == 0 ? pliceSituationWeekArr : pliceSituationMouthArr" style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" :row-class-name="tableRowClassName"
@@ -27,12 +60,13 @@
                <el-table-column prop="callPhone" label="报警人联系人"></el-table-column>
                <el-table-column prop="callContent" label="报警内容"></el-table-column>
            </el-table>
        </div>
        </div> -->
    </div>
</template>

<script>
let interTime
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
    data () {
@@ -44,6 +78,10 @@
                { 'num': '3', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-09', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
                { 'num': '4', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-12', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
                { 'num': '5', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-19', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
                { 'num': '6', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-19', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
                { 'num': '7', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-19', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
                { 'num': '8', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-19', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
                { 'num': '9', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-19', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
            ],
            pliceSituationMouthArr: [
                { 'num': '1', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-01', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
@@ -51,15 +89,22 @@
                { 'num': '3', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-13', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
                { 'num': '4', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-20', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
                { 'num': '5', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-21', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
                { 'num': '6', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-21', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
                { 'num': '7', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-21', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
                { 'num': '8', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-21', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
                { 'num': '9', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-21', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
            ],
            currentTableHeight: 0,

        }
    },

    components: {
        vueSeamlessScroll
    },

    mounted () {
        this.$nextTick(() => {
            this.tableScroll()
            // this.tableScroll()
            this.setDomStyle()
        })

@@ -166,6 +211,61 @@
        height: calc(100% - 56px);

        /* 解决自定义滚动条 x 轴显示问题 */
        .warp {
            margin: 0 auto;
            overflow: hidden;
        }

        ul {

            li {
                height: 44px;
                line-height: 44px;
                display: flex;

                .num {
                    width: 8%;
                }

                .type {
                    width: 10%;
                }

                .comingPhone {
                    width: 14%;
                }

                .dealTime {
                    width: 12%;
                }

                .dealPolice {
                    width: 12%;
                }

                .callPeople {
                    width: 12%;
                }

                .callPhone {
                    width: 14%;
                }

                .callContent {
                    flex: 1;
                }
            }

            li:nth-child(2n) {
                background: rgba(20, 50, 123, 1.0);
                color: #fff !important;
            }

            li:nth-child(2n-1) {
                background: rgba(29, 38, 105, 1.0);
                color: #fff;
            }
        }
    }
}
</style>

 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-10-24 11:41:03
 * @LastEditTime: 2022-10-29 10:51:40
 * @FilePath: \srs-police-affairs\src\views\police\index.vue
 * @Description: 辖区管理
 * 
@@ -13,41 +13,31 @@
    <div class="container">
        <div class="switch-box">
            <div class="police-car" @click="navClick(1)" :class="{'choosed':navType == 1}">警车</div>
            <div class="interphone" @click="navClick(2)" :class="{'choosed':navType == 2}">手台</div>
            <div class="interphone" @click="navClick(2)" :class="{ 'choosed': navType == 2 }">手台</div>
        </div>

        <div class="list-show" ref="tableBox" v-show="!detailFlag">
            <div class="search-box">
                <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>
                    <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>

            <div class="list" v-show="navType == 1">
                <el-table
                    :data="carList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                <el-table :data="carList.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"
                >
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
                    :height="currentTableHeight">
                    <el-table-column type="index" label="序号" width="50">
                        <template slot-scope="scope">
                            <span>{{(currentPage - 1) * pagesize + scope.$index + 1}}</span>
                            <span>{{ (currentPage - 1) * pagesize + scope.$index + 1 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="名称" width="140"></el-table-column>
@@ -55,20 +45,10 @@

                    <el-table-column label="操作" align="center">
                        <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>
@@ -76,46 +56,42 @@
                </el-table>

                <div class="pages">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="carList.length"
                        :page-size="pagesize"
                        pager-count="3"
                        :current-page="currentPage"
                        @current-change="handleCurrentChange"
                    ></el-pagination>
                    <el-pagination background layout="prev, pager, next" :total="carList.length" :page-size="pagesize"
                        pager-count="3" :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'}"
                    @cell-click="rowClick"
                    :height="currentTableHeight"
                >
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
                    :height="currentTableHeight">
                    <el-table-column type="index" label="序号" width="50">
                        <template slot-scope="scope">
                            <span>{{(currentPage - 1) * pagesize + scope.$index + 1}}</span>
                            <span>{{ (currentPage - 1) * pagesize + scope.$index + 1 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="名称" width="170"></el-table-column>
                    <el-table-column prop="phoneType" label="手台类型" width="180"></el-table-column>
                    <el-table-column prop="name" label="名称" width="120"></el-table-column>
                    <el-table-column prop="phoneType" label="手台类型" width="120"></el-table-column>

                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <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="轨迹">
                                <i class="el-icon-position"></i>
                            </el-button>
                        </template>
                    </el-table-column>
                </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>
@@ -126,39 +102,68 @@
                    <i class="el-icon-back"></i>
                </el-button>详细资料及轨迹查询
            </div>
            <ul>
            <ul v-show="navType == 1">
                <li>
                    <div>车辆型号：</div>
                    <div>1</div>
                    <div>SC7103</div>
                </li>

                <li>
                    <div>责任人：</div>
                    <div>2</div>
                    <div>高德光</div>
                </li>

                <li>
                    <div>出场日期：</div>
                    <div>3</div>
                    <div>2019-12-02 00:00:00</div>
                </li>

                <li>
                    <div>厂商：</div>
                    <div>4</div>
                    <div>重庆长安铃木汽车有限公司</div>
                </li>

                <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>

                <li>
                    <el-button type="text" @click="lookTrack">查看轨迹</el-button>
                </li>
            </ul>

            <ul v-show="navType == 2">
                <li>
                    <div>手台型号：</div>
                    <div>350m</div>
                </li>

                <li>
                    <div>责任人：</div>
                    <div>高德光</div>
                </li>

                <li>
                    <div>出场日期：</div>
                    <div>2019-12-02 00:00:00</div>
                </li>

                <li>
                    <div>厂商：</div>
                    <div>摩托罗拉</div>
                </li>

                <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>
                    </div>
                </li>

@@ -168,61 +173,32 @@
            </ul>
        </div>

        <el-dialog
            :title="dialogTitle"
            :modal="true"
            :visible.sync="dialogVisible"
            :before-close="dialogBeforeClose"
            :close-on-click-modal="true"
            class="car-video-box"
        >
            <div
                style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;"
            >
                <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">
            <div style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;">
                <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement"
                    style="object-fit: fill"></video>
            </div>
        </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 style="flex: 1; display: flex; flex-direction: column; width: 100%; height: 100%;">
                <div
                    style="flex: 1; display: flex; justify-content: space-between; align-items: center;"
                >
                <div style="flex: 1; display: flex; justify-content: space-between; align-items: center;">
                    <div>责任人：</div>
                    <div>{{phoneDetails.person}}</div>
                    <div>{{ phoneDetails.person }}</div>
                </div>
                <div
                    style="flex: 1; display: flex; justify-content: space-between; align-items: center;"
                >
                <div style="flex: 1; display: flex; justify-content: space-between; align-items: center;">
                    <div>联系方式：</div>
                    <div>{{phoneDetails.phoneID}}</div>
                    <div>{{ phoneDetails.phoneID }}</div>
                </div>
                <div
                    style="flex: 1; display: flex; justify-content: space-between; align-items: center;"
                >
                <div style="flex: 1; display: flex; justify-content: space-between; align-items: center;">
                    <div>手台类型：</div>
                    <div>{{phoneDetails.phoneType}}</div>
                    <div>{{ phoneDetails.phoneType }}</div>
                </div>
                <div
                    style="flex: 1; display: flex; justify-content: space-between; align-items: center;"
                >
                <div style="flex: 1; display: flex; justify-content: space-between; align-items: center;">
                    <div>所在地址：</div>
                    <div>{{phoneDetails.location}}</div>
                    <div>{{ phoneDetails.location }}</div>
                </div>
            </div>
        </el-dialog>
@@ -279,8 +255,12 @@
        },

        navClick (type) {
            console.log(global.viewer.entities)
            if (!type) { type = 1 }
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'polylineLayer',
                type: 'VectorLayer'
            })

            this.detailFlag = false
            this.navType = type

@@ -402,6 +382,11 @@
        goBack () {
            this.detailFlag = !this.detailFlag
            this.trackTime = []

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'polylineLayer',
                type: 'VectorLayer'
            })
        },

        lookTrack () {
@@ -440,6 +425,20 @@
                ":" +
                this.disposeTime(endTime.getSeconds())

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'polylineLayer',
                type: 'VectorLayer'
            })

            this.$EventBus.$emit('layerPolylineAdd', {
                layerName: 'polylineLayer',
                positions: '116.025000, 28.686000; 116.025000, 28.678000; 116.020000, 28.678000',
                material: global.DC.Namespace.Cesium.Color.fromBytes(
                    255, 17, 0,
                    255
                ),
                width: 4
            })
        },

        // 处理时间补零操作
@@ -463,6 +462,11 @@
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapClearLayer', {
            layerName: 'polylineLayer',
            type: 'VectorLayer'
        })

        window.removeEventListener('resize', this.setTableHeight)
    }
}
@@ -482,7 +486,7 @@
        display: flex;
        justify-content: space-around;

        & > div {
        &>div {
            box-sizing: border-box;
            width: 50%;
            height: 50px;
@@ -560,7 +564,7 @@
            border-radius: 10px;
            overflow: hidden;

            & > div {
            &>div {
                height: 100%;
                overflow-y: auto;

@@ -590,13 +594,14 @@
        height: calc(100% - 50px);
        background: rgba(20, 50, 123, 1);

        & > div {
        &>div {
            position: relative;
            height: 42px;
            line-height: 42px;
            text-align: center;
            color: #fff;
            border-bottom: 1px solid #fff;

            .el-button {
                padding: 0 !important;
                position: absolute;
@@ -607,10 +612,12 @@
                line-height: 28px;
            }
        }

        ul {
            margin: 0;
            padding: 0px;
        }

        li {
            margin: 0;
            padding: 0 4px;
@@ -620,15 +627,19 @@
            display: flex;
            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;
                }
            }
@@ -637,6 +648,7 @@
        li:last-child {
            text-align: center;
            position: relative;

            .el-button {
                position: absolute;
                top: 0;

 src/views/video/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-10-25 15:40:54
 * @LastEditTime: 2022-10-29 11:03:33
 * @FilePath: \srs-police-affairs\src\views\video\index.vue
 * @Description: 辖区管理
 * 
@@ -17,34 +17,28 @@
        </div>

        <div class="draw-btn">
            <button @click="draw('polygon')">绘制面</button>
            <button @click="draw('polyline')">绘制线</button>
            <button @click="removeDrawLayer">清除</button>
            <el-button type="primary" size="mini" @click="draw('polygon')">绘制面</el-button>
            <el-button type="primary" size="mini" @click="draw('polyline')">绘制线</el-button>
            <el-button type="primary" size="mini" @click="removeDrawLayer">清除</el-button>
        </div>

        <div v-show="searchValBoxShow" class="search-val-box">
            <div>
                <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>

        <div class="list-show">
            <div class="car-list">
                <div class="list-box">
                    <el-table
                        :data="monitoringList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                    <el-table :data="monitoringList.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'}"
                        @cell-click="rowClick"
                    >
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="rowClick">
                        <el-table-column type="index" label="序号" width="50">
                            <template slot-scope="scope">
                                <span>{{(currentPage - 1) * pagesize + scope.$index + 1}}</span>
                                <span>{{ (currentPage - 1) * pagesize + scope.$index + 1 }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="设备名称" width="150"></el-table-column>
@@ -52,39 +46,18 @@
                    </el-table>
                </div>
                <div class="pages">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="monitoringList.length"
                        :page-size="pagesize"
                        pager-count="3"
                        :current-page="currentPage"
                        @current-change="handleCurrentChange"
                    ></el-pagination>
                    <el-pagination background layout="prev, pager, next" :total="monitoringList.length"
                        :page-size="pagesize" pager-count="3" :current-page="currentPage"
                        @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
        </div>

        <el-dialog
            :title="dialogTitle"
            :modal="true"
            :visible.sync="dialogVisible"
            :before-close="dialogBeforeClose"
            :close-on-click-modal="true"
            class="car-video-box"
        >
            <div
                style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;"
            >
                <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">
            <div style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;">
                <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement"
                    style="object-fit: fill"></video>
            </div>
        </el-dialog>
    </div>
@@ -222,14 +195,14 @@
    background: $bg-color;

    .search-box {
        padding: 5px;
        padding: 8px;
        height: 48px;
        display: flex;

        input {
            flex: 1;
            height: 100%;
            font-size: 18px;
            font-size: 16px;
            text-indent: 1em;
            color: #ffffff;
            background-color: transparent;
@@ -278,7 +251,7 @@
        border-radius: 10px;
        overflow: hidden;

        & > div {
        &>div {
            height: 100%;
            overflow-y: auto;

@@ -291,14 +264,22 @@
    }

    .draw-btn {
        margin: 8px;
        margin-top: 0;
        display: flex;
        height: 36px;
        align-items: center;
        justify-content: space-around;
        height: 26px;

        .el-button {
            flex: 1;
        }
    }

    .list-show {
        flex: 1;

        & > div {
        &>div {
            height: 100%;
            display: flex;
            flex-direction: column;
@@ -308,6 +289,13 @@
                flex: 1;
            }
        }

        .pages {
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>