1

guanqb

2022-11-18 44fabf6fc585ff1036d55e0939275fb0eff99782

1

 src/api/video/index.js

@@ -48,10 +48,14 @@
 * @param {*} params 包含参数 range 参数值参考 116.292735,40.0717; 116.476708, 40.083625; 116.476708, 40.083625; 116.292735, 40.0717
 * @returns 
 */
export const getRegionList = (page = 1, count = 15, params) => {
export const getRegionList = (page = 1, count = 15, range) => {
    return request({
        url: '/device/query/SpatialQueryList',
        method: 'get',
        params: params
        params: {
            page,
            count,
            range
        }
    })
}

 src/views/home/index.vue

@@ -1534,7 +1534,7 @@
        width: 400px;
        height: calc(100% - 80px);
        background: $bg-color;
        z-index: 99;
        z-index: 90;
    }

    .right-container {
@@ -1546,7 +1546,7 @@
        width: 400px;
        height: calc(100% - 80px);
        background: $bg-color;
        z-index: 99;
        z-index: 90;
    }

    .center-container {
@@ -1555,7 +1555,7 @@
        left: 50%;
        bottom: 320px;
        transform: translate(-50%, 0);
        z-index: 99;
        z-index: 90;

        .layers-control-btn {
            display: flex;

 src/views/lyout/index.vue

@@ -19,14 +19,22 @@

            <!-- 菜单导航 -->
            <div class="menu-list">
                <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
                    :class="{ on: currentUrl.indexOf(item.path) != -1 }" @click="goToPath(item)"
                    v-for="(item, index) in menuList" :key="index">
                <div
                    @mouseenter="item.childrenFlag = true"
                    @mouseleave="item.childrenFlag = false"
                    class="nav-list"
                    :class="{ on: currentUrl.indexOf(item.path) != -1 }"
                    @click="goToPath(item)"
                    v-for="(item, index) in menuList"
                    :key="index"
                >
                    {{ item.menuName }}
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">
                            {{ subItem.menuName }}
                        </div>
                        <div
                            v-for="(subItem, subIndex) in item.children"
                            :key="subIndex"
                            @click="goToPath(subItem)"
                        >{{ subItem.menuName }}</div>
                    </div>
                </div>
            </div>
@@ -40,15 +48,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>
@@ -229,7 +245,7 @@
            overflow: hidden;
            letter-spacing: 6px;

            &>img {
            & > img {
                // width: 100%;
                height: 80%;
                margin: 0 10px 0 10px;
@@ -266,6 +282,7 @@
                    top: 60px;
                    width: 100%;
                    cursor: default;
                    z-index: 999;

                    div {
                        height: 36px;
@@ -287,8 +304,6 @@
                }
            }
        }

        .user-infor {}
    }

    .main-container {

 src/views/video/list.vue

@@ -22,6 +22,19 @@
                <button @click="searchClick" class="el-icon-search"></button>
            </div>

            <div class="draw-btn">
                <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>
                <el-button type="primary" size="mini">保存</el-button>
            </div>
            <div class="range-input" v-show="inputpopup">
                <div class="close" @click="closeRangeInput"></div>
                <h3>请输入距离</h3>
                <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)"
@@ -83,7 +96,7 @@
import EntityDraw from "@/utils/EntityDraw.js"
import { listQuery, accurateSearch } from "@/utils/search.js"
import monitoringList from '@/assets/data/monitoring.js'
import { getVideoList, getDevices } from '@/api/video/index.js'
import { getVideoList, getDevices, getRegionList } from '@/api/video/index.js'
import flvjs from 'flv.js'

let graphicLayer = null
@@ -101,6 +114,9 @@
            searchValBoxShow: false,
            boxShow: true,
            flvPlayer: null,
            range: 100,
            inputpopup: false,
            changeBtn: false,
        }
    },

@@ -223,9 +239,56 @@
            this.monitoringList = [item]
        },

        draw (type) {
            if (type == 'polyline') {
                this.inputpopup = true
            } else {
                this.inputpopup = false
            }
            const that = this
            graphicLayer.activate(type, (lastEventData) => {
                console.log('数据更新', JSON.stringify(lastEventData))
                this.getRegionList(JSON.stringify(lastEventData))
            })

        },

        removeDrawLayer () {
            this.inputpopup = false
            graphicLayer.clearLayer()
        },

        // 修改范围
        setRegion (range) {
            graphicLayer.addPolyLineGon(range, (lastEventData) => {
                console.log('数据更新', JSON.stringify(lastEventData))
            })
        },

        // 大小重置
        boxResize (val) {
            this.boxShow = val
        },

        changeRange () {
            this.setRegion(this.range)
        },

        closeRangeInput () {
            this.inputpopup = false
        },

        getRegionList (data) {
            const chinaSouth = '77.100744,34.645318;136.443312,46.379954;116.241876,12.205314;77.100744,34.645318;'//范围内有两个监控
            let positionStr = ''
            JSON.parse(data).forEach(item => {
                positionStr = positionStr + item.lng + ',' + item.lat + ';'
            })
            positionStr = positionStr + JSON.parse(data)[0].lng + ',' + JSON.parse(data)[0].lat + ';'
            // console.log(11111, positionStr)
            getRegionList(1, 15, positionStr).then(res => {
                console.log('1111111', res)
            })
        }
    },

@@ -329,6 +392,60 @@
            }
        }

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

            .el-button {
                flex: 1;
            }
        }

        .range-input {
            position: absolute;
            right: -190px;
            top: 20px;
            width: 180px;
            height: 100px;
            background-color: $bg-color;
            input {
                outline: none;
                border: 1px solid #005ca9;
                background-color: transparent;
                width: 160px;
                height: 30px;
                margin-top: 10px;
                color: #fff;
                padding-left: 6px;
            }
            .btn {
                width: 60px;
                height: 30px;
                background-color: #65b1ff;
                color: #fff;
                border-radius: 4px;
                cursor: pointer;
                margin-top: 10px;
            }
            .close {
                position: absolute;
                top: 0;
                right: 0;
                width: 20px;
                height: 10px;
            }
            .close::before {
                content: '\e6db';
                font-family: element-icons;
                font-size: 18px;
                cursor: pointer;
            }
        }

        .list-show {
            flex: 1;


 src/views/video/region.vue

@@ -22,23 +22,6 @@
                <button @click="searchClick" class="el-icon-search"></button>
            </div>

            <div class="draw-btn">
                <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>
                <el-button
                    type="primary"
                    size="mini"
                    @click="inputpopup = true"
                    v-show="changeBtn"
                >修改范围</el-button>
            </div>
            <div class="range-input" v-show="changeBtn && inputpopup">
                <h3>请输入距离</h3>
                <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)"
@@ -118,9 +101,6 @@
            searchValBoxShow: false,
            boxShow: true,
            flvPlayer: null,
            range: 5000,
            inputpopup: false,
            changeBtn: false,
        }
    },

@@ -243,40 +223,9 @@
            this.monitoringList = [item]
        },

        draw (type) {
            if (type == 'polyline') {
                this.inputpopup = false
                this.changeBtn = true
            } else {
                this.changeBtn = false
            }
            const that = this
            graphicLayer.activate(type, (lastEventData) => {
                console.log('数据更新', JSON.stringify(lastEventData))
            })

        },

        removeDrawLayer () {
            this.changeBtn = false
            graphicLayer.clearLayer()
        },

        // 修改范围
        setRegion (range) {
            graphicLayer.addPolyLineGon(range, (lastEventData) => {
                console.log('数据更新', JSON.stringify(lastEventData))
            })
        },

        // 大小重置
        boxResize (val) {
            this.boxShow = val
        },

        changeRange () {
            this.setRegion(this.range)
            this.inputpopup = false
        }
    },

@@ -380,47 +329,6 @@
            }
        }

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

            .el-button {
                flex: 1;
            }
        }

        .range-input {
            position: absolute;
            right: -190px;
            top: 20px;
            width: 180px;
            height: 100px;
            background-color: $bg-color;
            input {
                outline: none;
                border: 1px solid #005ca9;
                background-color: transparent;
                width: 160px;
                height: 30px;
                margin-top: 10px;
                color: #fff;
                padding-left: 6px;
            }
            .btn {
                width: 60px;
                height: 30px;
                background-color: #65b1ff;
                color: #fff;
                border-radius: 4px;
                cursor: pointer;
                margin-top: 10px;
            }
        }

        .list-show {
            flex: 1;

@@ -444,4 +352,4 @@
        }
    }
}
</style>
</style>