1.点位查询树形数据展示，2.视频巡查数据筛选

guanqb

2023-02-04 d44dd830d1e8e5f0e2dbcd10abbcce1dd5fe01ed

1.点位查询树形数据展示，2.视频巡查数据筛选

 src/api/video/index.js

@@ -111,14 +111,15 @@
 * @param {*} current 当前页
 * @param {*} size 每页数据数量
 */
export const getRegionSaveList = (current, size, name) => {
export const getRegionSaveList = (current, size, deptId, name) => {
    return request({
        url: '/api/range/range/page',
        method: 'get',
        params: {
            current,
            size,
            name
            name,
            deptId
        }
    })
}
@@ -136,3 +137,19 @@
        }
    })
}

/**
 * 获取监控树形数据 
 * @param {*} 
 * @returns 
 */
export const getTreeDevices = (params) => {
    return request({
        url: '/device/query/tree/36110000002009999000',
        method: 'get',
        requestBaseUrl: 'outside',
        params: {
            ...params
        }
    })
}

 src/styles/element-ui/element-ui.scss

@@ -432,3 +432,16 @@

    border-color: transparent transparent rgba(35, 50, 167, 0.7) transparent;
}

.el-tree {
    color: #fff;
    background: transparent;
}

.el-tree-node__content:hover {
    background: transparent;
}

.el-tree-node:focus>.el-tree-node__content{
    background-color: #5daaf0;
}

 src/views/layout/index.vue

@@ -12,13 +12,25 @@
    <div class="wrapper">
        <div class="main-header">
            <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
                        }}</div>
                            }}
                        </div>
                    </div>
                </div>
            </div>
@@ -29,13 +41,25 @@

            <!-- 菜单导航 -->
            <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
                        }}</div>
                            }}
                        </div>
                    </div>
                </div>
            </div>
@@ -74,15 +98,25 @@
            <!-- 地图区域 -->
            <map-box ref="modalForm">
                <!-- 主体内容区域 -->
                <div slot="mainContent" class="main-content" id="MainContent"
                    :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }">
                <div
                    slot="mainContent"
                    class="main-content"
                    id="MainContent"
                    :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
                >
                    <router-view ref="target-name"></router-view>
                </div>

                <el-button slot="showButton" v-show="leftShow" class="flexible-btn"
                <el-button
                    slot="showButton"
                    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>
            </map-box>
        </div>
    </div>
@@ -121,7 +155,7 @@
                    childrenFlag: false,
                    children: [
                        {
                            menuName: '设备查询',
                            menuName: '点位查询',
                            path: '/layout/video/list'
                        },
                        {
@@ -364,7 +398,6 @@
            align-items: center;

            &>.nav-list {

                // color: rgba(32, 106, 181, 1);
                // border-bottom: 2px solid #409eff;
                &>span.on {

 src/views/video/list.vue

@@ -44,7 +44,9 @@
                >{{ item.name }}</div>
            </div>

            <div class="list-show">
            <el-tree :props="props" :load="loadNode" lazy @node-click="treeClick"></el-tree>

            <div class="list-show" v-if="false">
                <div class="car-list">
                    <div class="list-box">
                        <el-table
@@ -153,7 +155,7 @@
<script>
import EntityDraw from "@/utils/EntityDraw.js"
import { listQuery, accurateSearch } from "@/utils/search.js"
import { getVideoList, getDevices, getRegionList, insertRegionSaveList } from '@/api/video/index.js'
import { getVideoList, getDevices, getRegionList, insertRegionSaveList, getTreeDevices } from '@/api/video/index.js'
import { getSearchExtensively } from '@/api/dept/index.js'
import flvjs from 'flv.js'

@@ -186,6 +188,15 @@
            searchExtensivelyValue: '',
            searchExtensivelyValBoxShow: false,
            searchExtensivelyArray: [],
            props: {
                label: 'name',
                children: 'zones',
                isLeaf: (data, node) => {
                    if (node.level === 4) {
                        return true
                    }
                }
            },
        }
    },

@@ -574,6 +585,57 @@
            this.searchExtensivelyValue = ''
            this.searchExtensivelyChange()
        },

        async loadNode (node, resolve) {
            if (node.level === 0) {
                return resolve([{ name: '信州分局' }])
            }
            if (node.level === 1) {
                let data = []
                await getTreeDevices({ page: 1, count: 100, parentId: 361102, onlyCatalog: false }).then(res => {
                    data = res.data.data.list
                })
                return resolve(data)
            }
            if (node.level > 1) {
                let data = []
                await getTreeDevices({ page: 1, count: 100, parentId: node.data.id, onlyCatalog: false }).then(res => {
                    data = res.data.data.list
                })
                return resolve(data)
            }
        },

        async treeClick (node) {
            if (node.parent == false) {
                console.log(node, node.name, node.id, node.basicData.channelId)
                let flvUrl = ''
                await this.getDevices(node.id).then(res => {
                    flvUrl = res
                })
                console.log(flvUrl, 111)
                if (typeof flvUrl === 'object') {
                    this.$message.error(flvUrl.msg)
                    return
                }
                this.dialogVisible = true

                if (flvjs.isSupported()) {
                    this.$nextTick(() => {
                        var videoElement = document.getElementById('videoElement')
                        this.flvPlayer = flvjs.createPlayer({
                            type: 'flv',
                            isLive: true,
                            hasAudio: false,
                            url: flvUrl
                        })
                        this.flvPlayer.attachMediaElement(videoElement)
                        this.flvPlayer.load()
                        this.flvPlayer.play()
                    })
                }
            }
        },
    },

    destroyed () {

 src/views/video/region.vue

@@ -341,6 +341,8 @@
let graphicLayer = null

export default {
    inject: ['userInfo'],

    data () {
        return {
            currentPage: 1,
@@ -404,7 +406,9 @@

    created () {
        // this.getVideoList(1, 100)
        this.getRegionSaveList(this.currentPage, this.pagesize)
        this.getRegionSaveList(this.currentPage, this.pagesize, this.userInfo.dept_id)
        console.log(this.userInfo.dept_id, 888888)

    },

    mounted () {
@@ -415,7 +419,7 @@
    methods: {
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage
            this.getRegionSaveList(this.currentPage, this.pagesize)
            this.getRegionSaveList(this.currentPage, this.pagesize, this.userInfo.dept_id)

        },

@@ -492,8 +496,8 @@
            this.playVideoList(`flvPlayer${args}`, `${this.monitorOption[val].flvUrl}`, `videoElement${args}`)
        },

        getRegionSaveList (current, size, name) {
            getRegionSaveList(current, size, name).then(res => {
        getRegionSaveList (current, size, deptId, name) {
            getRegionSaveList(current, size, deptId, name).then(res => {
                this.saveRangeList = res.data.data.records
                this.pagesCount = res.data.data.pages
                this.initRangeListLayer()
@@ -507,7 +511,7 @@
                        message: '删除成功',
                        type: 'warning'
                    })
                    this.getRegionSaveList(this.currentPage, this.pagesize)
                    this.getRegionSaveList(this.currentPage, this.pagesize, this.userInfo.dept_id)
                } else {
                    this.$message({
                        message: '删除失败'
@@ -697,7 +701,7 @@
            if (this.searchValue == '') {
                this.searchValBoxShow = false
                this.searchArray = []
                this.getRegionSaveList(this.currentPage, this.pagesize, this.searchValue)
                this.getRegionSaveList(this.currentPage, this.pagesize, this.userInfo.dept_id, this.searchValue)
                this.$message({
                    message: '请输入搜索内容',
                    type: 'warning'
@@ -705,14 +709,14 @@
            } else {
                this.searchArray = listQuery(this.saveRangeList, this.searchValue, 'name')
                this.searchValBoxShow = true
                this.getRegionSaveList(this.currentPage, this.pagesize, this.searchValue)
                this.getRegionSaveList(this.currentPage, this.pagesize, this.userInfo.dept_id, this.searchValue)
            }
        },

        searchClick () {
            if (this.searchValue != '') {
                this.searchValBoxShow = false
                this.getRegionSaveList(this.currentPage, this.pagesize, this.searchValue)
                this.getRegionSaveList(this.currentPage, this.pagesize, this.userInfo.dept_id, this.searchValue)
            } else {
                this.$message({
                    message: '请输入搜索内容',
@@ -726,7 +730,7 @@
            this.searchArray = []
            // this.monitoringList = [item]
            this.searchValue = item.name
            this.getRegionSaveList(this.currentPage, this.pagesize, this.searchValue)
            this.getRegionSaveList(this.currentPage, this.pagesize, this.userInfo.dept_id, this.searchValue)
        },

        // 大小重置