1

guanqb

2022-11-24 2087c35142ee713b1a165a7adb75c648f5ce6e9c

1

 src/api/video/index.js

@@ -14,10 +14,11 @@
 * 获取设备列表
 * @param {*} page 页数
 * @param {*} count 每页数量
 * @param {*} name 设备名称
 * @param {*} params 暂时不用传
 * @returns 
 */
export const getVideoList = (page = 1, count = 10, params = {}, requestBaseUrl = '') => {
export const getVideoList = (page = 1, count = 10, name, params = {}, requestBaseUrl = '') => {
    return request({
        url: '/device/query/devices',
        method: 'get',
@@ -25,6 +26,7 @@
        params: {
            page,
            count,
            name,
            ...params,
            requestBaseUrl
        }

 src/views/activity/index.vue

@@ -183,6 +183,18 @@
                </div>
            </div>

            <div class="row-box">
                <div class="category">开启轨迹：</div>
                <div class="category-value">
                    <el-switch
                        v-model="polylineBtnSwitch"
                        @change="switchBtnChange"
                        active-color="#13ce66"
                        inactive-color="#ccc"
                    ></el-switch>
                </div>
            </div>

            <!-- <div class="row-box">
                <div class="category">分析范围：</div>
                <div class="category-value">
@@ -197,7 +209,7 @@
            </div>-->
        </div>

        <div class="btn-box">
        <div class="btn-box" v-show="isTrackBtnShow">
            <ul>
                <li>
                    <button @click="play()">播放</button>
@@ -439,6 +451,7 @@
            dialogVisible: false,
            currentClickIndex: '',
            polylineSwitch: false,
            polylineBtnSwitch: false,
            analyseInput: 100,
            activityList: [
                {
@@ -483,6 +496,7 @@
            policeChooseVisible: false,
            overlayObj1: {},
            overlayObj2: {},
            isTrackBtnShow: false,
        }
    },
    created () {
@@ -638,6 +652,15 @@
            }
        },

        switchBtnChange (e) {
            // if (e == true) {
            //     this.isTrackBtnShow = true
            // } else {
            //     this.isTrackBtnShow = false
            // }
            this.isTrackBtnShow = e
        },

        analyseChange (e) {
            analyseLayer.removeOverlay(analysePolygon)
            let coords = global.DC.GeoTools.pointBuffer(`${this.activityDetails.lng}, ${this.activityDetails.lat}`, e)

 src/views/video/list.vue

@@ -13,7 +13,12 @@
    <div class="container">
        <div v-show="boxShow" class="container-content">
            <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>

@@ -29,37 +34,68 @@
                <input type="text" v-model="range" />
                <button @click="changeRange" class="btn">确定</button>
            </div>
            <div v-show="true" class="search-val-box">
                <div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index">{{ item.name }}
                </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>

            <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">
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                            @cell-click="rowClick"
                        >
                            <el-table-column prop="name" label="设备名称" min-width="50%"></el-table-column>
                            <el-table-column prop="manufacture" label="设备类型" min-width="50%"></el-table-column>
                        </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>
        </div>

        <el-dialog :title="dialogTitle" :modal="true" :visible.sync="dialogVisible" :before-close="dialogBeforeClose"
            :close-on-click-modal="true" class="car-video-box">
            <video id="videoElement" autoplay controls width="100%" height="100%" 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
                id="videoElement"
                autoplay
                controls
                width="100%"
                height="100%"
                style="object-fit: fill"
            ></video>
        </el-dialog>
        <el-dialog :title="drawDialogTitle" :modal="true" :visible.sync="drawDialogVisible"
            :before-close="drawDialogBeforeClose" :close-on-click-modal="true" class="video-draw-box">
        <el-dialog
            :title="drawDialogTitle"
            :modal="true"
            :visible.sync="drawDialogVisible"
            :before-close="drawDialogBeforeClose"
            :close-on-click-modal="true"
            class="video-draw-box"
        >
            <input type="text" v-model="drawName" placeholder="请输入绘制线或面的名称" />
            <button @click="saveDrawInfo">保存</button>
        </el-dialog>
@@ -101,7 +137,7 @@
    },

    created () {
        this.getVideoList()
        this.getVideoList(1, 10)
    },

    mounted () {
@@ -114,10 +150,14 @@
            this.currentPage = currentPage
        },

        getVideoList () {
            getVideoList(1, 10).then(res => {
        getVideoList (page, count, name) {
            getVideoList(page, count, name).then(res => {
                this.monitoringList = res.data.data.list
                this.monitoringSaveList = res.data.data.list
                this.$EventBus.$emit('mapRemoveLayer', {
                    layerName: 'monitoringLayers',
                    type: 'VectorLayer'
                })
                this.initMonitoringIcon()
            })
        },
@@ -206,22 +246,38 @@
            if (this.searchValue == '') {
                this.searchValBoxShow = false
                this.searchArray = []
                this.monitoringList = this.monitoringSaveList
                // this.monitoringList = this.monitoringSaveList
                this.getVideoList(1, 10, this.searchValue)
                this.$message({
                    message: '请输入搜索内容',
                    type: 'warning'
                })
            } else {
                this.searchArray = listQuery(this.monitoringSaveList, this.searchValue, 'name')
                this.searchValBoxShow = true
                this.getVideoList(1, 10, this.searchValue)
            }
        },

        searchClick () {
            this.searchValBoxShow = false
            this.monitoringList = accurateSearch(this.monitoringSaveList, this.searchValue, 'name')
            if (this.searchValue != '') {
                this.searchValBoxShow = false
                this.monitoringList = accurateSearch(this.monitoringSaveList, this.searchValue, 'name')
                this.getVideoList(1, 10, this.searchValue)
            } else {
                this.$message({
                    message: '请输入搜索内容',
                    type: 'warning'
                })
            }

        },

        searchVlaClick (item) {
            this.searchValBoxShow = false
            this.searchArray = []
            this.monitoringList = [item]
            this.searchValue = item.name
        },

        draw (type) {
@@ -286,6 +342,11 @@
            }
            getRegionList(1, 15, positionStr).then(res => {
                this.monitoringList = res.data.data.list
                this.$EventBus.$emit('mapRemoveLayer', {
                    layerName: 'monitoringLayers',
                    type: 'VectorLayer'
                })
                this.initMonitoringIcon()
            })
        },

@@ -437,7 +498,7 @@
            border-radius: 10px;
            overflow-y: auto;

            &>div {
            & > div {
                height: 100%;
                padding: 0 10px;
                line-height: 36px;
@@ -506,7 +567,7 @@
        .list-show {
            flex: 1;

            &>div {
            & > div {
                height: 100%;
                display: flex;
                flex-direction: column;

 src/views/video/region.vue

@@ -11,77 +11,82 @@

<template>
    <div class="container">
        <div v-show="boxShow" class="container-content">
            <div class="search-box">
                <input
                    v-model="searchValue"
                    @input="searchChange"
                    type="text"
                    placeholder="请输入搜索条件"
                />
                <button @click="searchClick" class="el-icon-search"></button>
            </div>
        <div class="left-container">
            <div v-show="boxShow" class="container-content">
                <div class="search-box">
                    <input
                        v-model="searchValue"
                        @input="searchChange"
                        type="text"
                        placeholder="请输入搜索条件"
                    />
                    <button @click="searchClick" class="el-icon-search"></button>
                </div>

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

            <div class="list-show">
                <div class="car-list">
                    <div class="list-box">
                        <el-table
                            :data="saveRangeList.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"
                        >
                            <el-table-column prop="name" label="范围名称" min-width="50%"></el-table-column>
                            <el-table-column prop="type" label="范围类型" min-width="50%">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.type == 1">线</span>
                                    <span v-else>面</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="id" label="操作" min-width="50%">
                                <template slot-scope="scope">
                                    <el-button
                                        @click="flytoRange(scope.row)"
                                        type="text"
                                        size="small"
                                        title="定位"
                                    >
                                        <i class="el-icon-location"></i>
                                    </el-button>
                                    <el-button
                                        @click="deleteRegionSaveList(scope.row.id)"
                                        type="text"
                                        size="small"
                                        title="删除"
                                    >
                                        <i class="el-icon-delete"></i>
                                    </el-button>
                                </template>
                            </el-table-column>
                        </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>
                <div class="list-show">
                    <div class="car-list">
                        <div class="list-box">
                            <el-table
                                :data="saveRangeList.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"
                            >
                                <el-table-column prop="name" label="范围名称" min-width="50%"></el-table-column>
                                <el-table-column prop="type" label="范围类型" min-width="50%">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.type == 1">线</span>
                                        <span v-else>面</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="id" label="操作" min-width="50%">
                                    <template slot-scope="scope">
                                        <el-button
                                            @click="flytoRange(scope.row)"
                                            type="text"
                                            size="small"
                                            title="定位"
                                        >
                                            <i class="el-icon-location"></i>
                                        </el-button>
                                        <el-button
                                            @click="deleteRegionSaveList(scope.row.id)"
                                            type="text"
                                            size="small"
                                            title="删除"
                                        >
                                            <i class="el-icon-delete"></i>
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </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>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right-container">
            <div class="item">1</div>
        </div>

        <el-dialog
@@ -341,116 +346,129 @@
<style scoped lang="scss">
.container {
    position: relative;
    width: 400px;
    display: flex;
    width: 100%;
    height: 100%;

    &-content {
        display: flex;
        flex-direction: column;
        width: 100%;
    .left-container {
        position: relative;
        width: 400px;
        height: 100%;
        color: #fff;
        background: $bg-color;

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

            input {
                flex: 1;
                height: 100%;
                font-size: 16px;
                text-indent: 1em;
                color: #ffffff;
                background-color: transparent;
                border: 1px solid rgb(0, 92, 169);
                border-radius: 20px 0 0 20px;
            }

            input:focus {
                outline: none;
            }

            input::-webkit-input-placeholder {
                color: rgba(238, 238, 238, 0.7);
            }

            button {
                font-size: 24px;
                font-weight: 700;
                width: 80px;
                height: 100%;
                background-color: rgb(0, 92, 169);
                color: #fff;
                border: 1px solid rgb(0, 92, 169);
                cursor: pointer;
                border-radius: 0 20px 20px 0;
            }

            button:active {
                background-color: rgb(0, 92, 169);
                border: 1px solid rgb(0, 92, 169);
            }
        }

        .search-val-box {
        .container-content {
            display: flex;
            flex-direction: column;
            position: absolute;
            top: 48px;
            left: 6px;
            width: calc(100% - 12px);
            max-height: 160px;
            text-align: left;
            width: 100%;
            height: 100%;
            color: #fff;
            background: rgba(16, 29, 74, 0.9);
            z-index: 1111;
            border-radius: 10px;
            overflow-y: auto;
            background: $bg-color;

            & > div {
                height: 100%;
                padding: 0 10px;
                line-height: 36px;
                cursor: pointer;
            }
        }

        .list-show {
            flex: 1;

            & > div {
                height: 100%;
            .search-box {
                padding: 8px;
                height: 48px;
                display: flex;
                flex-direction: column;

                // background-color: #fff;
                .list-box {
                input {
                    flex: 1;
                    .btn {
                        width: 60px;
                        height: 30px;
                        background-color: #65b1ff;
                        color: #fff;
                        border-radius: 4px;
                        cursor: pointer;
                        margin-top: 10px;
                    }
                    .btn:active {
                        background-color: rgb(0, 92, 169);
                        border: 1px solid rgb(0, 92, 169);
                    }
                    height: 100%;
                    font-size: 16px;
                    text-indent: 1em;
                    color: #ffffff;
                    background-color: transparent;
                    border: 1px solid rgb(0, 92, 169);
                    border-radius: 20px 0 0 20px;
                }

                input:focus {
                    outline: none;
                }

                input::-webkit-input-placeholder {
                    color: rgba(238, 238, 238, 0.7);
                }

                button {
                    font-size: 24px;
                    font-weight: 700;
                    width: 80px;
                    height: 100%;
                    background-color: rgb(0, 92, 169);
                    color: #fff;
                    border: 1px solid rgb(0, 92, 169);
                    cursor: pointer;
                    border-radius: 0 20px 20px 0;
                }

                button:active {
                    background-color: rgb(0, 92, 169);
                    border: 1px solid rgb(0, 92, 169);
                }
            }

            .pages {
                height: 40px;
            .search-val-box {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                position: absolute;
                top: 48px;
                left: 6px;
                width: calc(100% - 12px);
                max-height: 160px;
                text-align: left;
                color: #fff;
                background: rgba(16, 29, 74, 0.9);
                z-index: 1111;
                border-radius: 10px;
                overflow-y: auto;

                & > div {
                    height: 100%;
                    padding: 0 10px;
                    line-height: 36px;
                    cursor: pointer;
                }
            }

            .list-show {
                flex: 1;

                & > div {
                    height: 100%;
                    display: flex;
                    flex-direction: column;

                    // background-color: #fff;
                    .list-box {
                        flex: 1;
                        .btn {
                            width: 60px;
                            height: 30px;
                            background-color: #65b1ff;
                            color: #fff;
                            border-radius: 4px;
                            cursor: pointer;
                            margin-top: 10px;
                        }
                        .btn:active {
                            background-color: rgb(0, 92, 169);
                            border: 1px solid rgb(0, 92, 169);
                        }
                    }
                }

                .pages {
                    height: 40px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }
    }
    .right-container {
        position: relative;
        width: calc(100% - 400px);
        width: 1518px;
        height: 100%;
        background-color: #fff;
    }
}
</style>