From d44dd830d1e8e5f0e2dbcd10abbcce1dd5fe01ed Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Sat, 04 Feb 2023 17:33:47 +0800
Subject: [PATCH] 1.点位查询树形数据展示，2.视频巡查数据筛选
---
src/views/video/region.vue | 22 +++--
src/views/layout/index.vue | 75 +++++++++++++-----
src/views/video/list.vue | 66 ++++++++++++++++
src/api/video/index.js | 21 ++++
src/styles/element-ui/element-ui.scss | 13 +++
5 files changed, 163 insertions(+), 34 deletions(-)
diff --git a/src/api/video/index.js b/src/api/video/index.js
index e7624a0..038148a 100644
--- a/src/api/video/index.js
+++ b/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
}
})
}
@@ -135,4 +136,20 @@
ids
}
})
+}
+
+/**
+ * 获取监控树形数据
+ * @param {*}
+ * @returns
+ */
+export const getTreeDevices = (params) => {
+ return request({
+ url: '/device/query/tree/36110000002009999000',
+ method: 'get',
+ requestBaseUrl: 'outside',
+ params: {
+ ...params
+ }
+ })
}
\ No newline at end of file
diff --git a/src/styles/element-ui/element-ui.scss b/src/styles/element-ui/element-ui.scss
index c80e0fd..c4c5f05 100644
--- a/src/styles/element-ui/element-ui.scss
+++ b/src/styles/element-ui/element-ui.scss
@@ -431,4 +431,17 @@
transform: translate(-50%, -100%);
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;
}
\ No newline at end of file
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index 4df41d1..dd14f17 100644
--- a/src/views/layout/index.vue
+++ b/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'
},
{
@@ -323,7 +357,7 @@
overflow: hidden;
letter-spacing: 6px;
- &>img {
+ & > img {
// width: 100%;
height: 80%;
margin: 0 10px 0 10px;
@@ -339,7 +373,7 @@
// border-radius: 10px 16px 10px 16px;
transform: skew(58deg);
- &>span {
+ & > span {
transform: skew(-58deg);
}
}
@@ -353,7 +387,7 @@
// border-radius: 16px 10px 16px 10px;
transform: skew(-58deg);
- &>span {
+ & > span {
transform: skew(58deg);
}
}
@@ -363,11 +397,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);
}
}
@@ -496,7 +529,7 @@
justify-content: space-around;
padding-top: 4px;
- &>div {
+ & > div {
width: 100px;
height: 40px;
background-color: rgba(168, 222, 255, 0.6);
diff --git a/src/views/video/list.vue b/src/views/video/list.vue
index 1b933bc..fd3dba4 100644
--- a/src/views/video/list.vue
+++ b/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 () {
diff --git a/src/views/video/region.vue b/src/views/video/region.vue
index f46ab75..b7baa7d 100644
--- a/src/views/video/region.vue
+++ b/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)
},
// 大小重置
--
Gitblit v1.9.3