guoyuepeng
/
qa-prevention-gwj-vue
1
0
Fork 3
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

门口门禁增加摄像头

pull/8/head
zhaoyu 2024-01-23 18:57:28 +08:00
parent 54ab694f2f
commit bd6bd0a8a4
4 changed files with 743 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/views/mkmj/area/components/editGate.vue
View File

@ -19,6 +19,15 @@
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="闸机类别：" prop="GATE_CATEGORY">
<el-select v-model="form.GATE_CATEGORY" style="width: 100%;">
<el-option v-for="item in categoryList" :key="item.ID" :label="item.NAME" :value="item.ID" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="闸机类型：" prop="GATE_TYPE">
@ -87,6 +96,7 @@ export default {
GATE_NAME: '',
GATE_NUMBER: '',
GATE_TYPE: '',
GATE_CATEGORY: '',
GATE_MODEL: '',
GATE_POSITION: '',
IS_ADJACENT: '',
@ -99,6 +109,7 @@ export default {
rules: {
GATE_NAME: [{ required: true, message: '闸机名称不为空', trigger: 'blur' }],
GATE_TYPE: [{ required: true, message: '闸机类型不为空', trigger: 'blur' }],
GATE_CATEGORY: [{ required: true, message: '闸机类别不为空', trigger: 'blur' }],
IS_ADJACENT: [{ required: true, message: '是否相邻区域不为空', trigger: 'blur' }],
ADJACENT_AREA_ID: [{ required: true, message: '相邻区域不为空', trigger: 'blur' }]
},
@ -111,6 +122,10 @@ export default {
},
multipleSelection: [],
accidentList: [],
categoryList: [
{ ID: '1', NAME: '人员' },
{ ID: '2', NAME: '车辆' }
],
leaveList: [
{ ID: '1', NAME: '入' },
{ ID: '2', NAME: '出' }

151
src/views/mkmj/area/components/listGate.vue
View File

@ -34,15 +34,28 @@
<el-table-column type="index" label="序号" width="55" align="center"/>
<el-table-column prop="GATE_NAME" label="闸机名称"/>
<el-table-column prop="GATE_NUMBER" label="闸机标识"/>
<el-table-column label="闸机类别">
<template slot-scope="{row}">
<span v-if="row.GATE_CATEGORY === '1'" >人员</span>
<span v-if="row.GATE_CATEGORY === '2'" >车辆</span>
</template>
</el-table-column>
<el-table-column label="闸机类型">
<template slot-scope="{row}">
<span v-if="row.AREA_LEAVE === '1'" >入</span>
<span v-if="row.AREA_LEAVE === '2'" >出</span>
<span v-if="row.GATE_TYPE === '1'" >入</span>
<span v-if="row.GATE_TYPE === '2'" >出</span>
</template>
</el-table-column>
<el-table-column prop="GATE_MODEL" label="闸机型号"/>
<el-table-column prop="GATE_POSITION" label="闸机位置"/>
<el-table-column prop="ADJACENT_AREA_NAME" label="相邻区域名称"/>
<el-table-column label="是否定位">
<template slot-scope="{row}">
<span v-if="row.LATITUDE && row.LONGITUDE">已定位</span>
<span v-else>未定位</span>
</template>
</el-table-column>
<el-table-column prop="VIDEOCOUNT" label="摄像头数量"/>
<el-table-column label="操作" width="400">
<template slot-scope="{row}">
<el-button
@ -52,7 +65,10 @@
size="mini"
@click="handleEdit(row.AREA_GATE_ID)">编辑
</el-button>
<el-button type="info" icon="el-icon-location-information" size="mini" @click="handleMap(row)">定位</el-button>
<el-button type="success" icon="el-icon-location-information" size="mini" @click="handleVideo(row)">摄像头</el-button>
<el-button
v-if="row.VIDEOCOUNT==0"
type="danger"
icon="el-icon-delete"
size="mini"
@ -76,6 +92,18 @@
<div class="ui-foot">
<el-button plain type="info" @click="goBack">返 回</el-button>
</div>
<el-dialog :visible.sync="dialogFormMap" title="定位" width="1050px" class="dy-dialog">
<div id="map" />
<div slot="footer" class="dialog-footer">
<span>经度：</span>
<el-input v-model="form.LONGITUDE" style="width: 200px" placeholder="请输入内容" disabled />
<span>纬度：</span>
<el-input v-model="form.LATITUDE" style="width: 200px" placeholder="请输入内容" disabled />
<el-button @click="dialogFormMap = false">取 消</el-button>
<el-button type="primary" @click="setPosition">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
@ -85,14 +113,23 @@ import { requestFN } from '@/utils/request'
import waves from '@/directive/waves' // waves directive
import SelectTree from '@/components/SelectTree'
import TiandiMap from '../../../../components/TianMap/TiandiMap'
export default {
components: { Pagination, SelectTree },
components: { Pagination, SelectTree, TiandiMap },
directives: { waves },
data() {
return {
map: null,
marker: null,
BMap: '',
clientHeight: 500,
inputLocation: '',
msg: 'add',
config: config,
dialogFormMap: false,
AREA_ID: '',
AREA_LEAVE: '',
addBtnType: true,
@ -104,6 +141,11 @@ export default {
page: 1,
limit: 20
},
form: {
AREA_GATE_ID: '',
LATITUDE: '',
LONGITUDE: ''
},
ls: [],
dates: [],
total: 0,
@ -131,6 +173,67 @@ export default {
this.hasButton()
},
methods: {
/**
* 初始化天地图对象
*/
initTDT() {
return new Promise((resolve, reject) => {
if (window.T) {
console.log('天地图初始化成功...')
resolve(window.T)
reject('error')
}
}).then(T => {
window.T = T
})
},
/**
* 初始化地图
* @param {*} lng 经度
* @param {*} lat 纬度
* @param {*} zoom 缩放比例(1~18)
*/
initMap(lng, lat, zoom) {
this.initTDT().then((T) => {
const imageURL = 'http://t0.tianditu.gov.cn/img_w/wmts?' + 'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' + '&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=e8a16137fd226a62a23cc7ba5c9c78ce'
// 创建自定义图层对象
this.lay = new window.T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 })
// 初始化地图对象
this.map = new window.T.Map('map')
this.initCenter(lng, lat, zoom)
})
},
initCenter(lng, lat, zoom) {
// 设置显示地图的中心点和级别
if (!this.form.LONGITUDE && !this.form.LATITUDE) {
this.map.centerAndZoom(new window.T.LngLat(119.58, 39.94), zoom)
this.marker && this.map.removeOverLay(this.marker)
} else {
this.map.centerAndZoom(new window.T.LngLat(lng, lat), zoom)
this.marker && this.map.removeOverLay(this.marker)
this.form.LONGITUDE = lng
this.form.LATITUDE = lat
this.marker = new window.T.Marker(new window.T.LngLat(lng, lat))
// 向地图上添加标注
this.map.addOverLay(this.marker)
}
// 创建卫星和路网的混合视图
this.map.setMapType(window.TMAP_HYBRID_MAP)
// 允许鼠标滚轮缩放地图
this.map.enableScrollWheelZoom()
// 允许鼠标移动地图
this.map.enableInertia()
// 向地图上添加标注
this.map.addEventListener('click', this.MapClick)
},
MapClick(event) {
this.marker && this.map.removeOverLay(this.marker)
this.form.LONGITUDE = event.lnglat.getLng()
this.form.LATITUDE = event.lnglat.getLat()
this.marker = new window.T.Marker(new window.T.LngLat(event.lnglat.getLng(), event.lnglat.getLat()))
// 向地图上添加标注
this.map.addOverLay(this.marker)
},
filterNode(value, data) {
if (!value) return true
return data.name.indexOf(value) !== -1
@ -145,7 +248,12 @@ export default {
handleAdd() {
this.$parent.activeName = 'EditGate'
this.$parent.AREA_ID = this.AREA_ID
this.$parent.AREA_GATE_ID == ''
this.$parent.AREA_GATE_ID = ''
},
handleVideo(row) {
this.$parent.activeName = 'VideoList'
this.$parent.AREA_GATE_ID = row.AREA_GATE_ID
console.log(this.$parent.AREA_GATE_ID)
},
// 搜索
getQuery() {
@ -179,6 +287,18 @@ export default {
this.$parent.AREA_GATE_ID = AREA_GATE_ID
this.$parent.activeName = 'EditGate'
},
handleMap(row) {
this.dialogFormMap = true
this.form = {
AREA_GATE_ID: row.AREA_GATE_ID,
LATITUDE: row.LATITUDE,
LONGITUDE: row.LONGITUDE
}
this.$nextTick(() => {
if (!this.map) this.initMap(this.form.LONGITUDE, this.form.LATITUDE, 16)
else this.initCenter(this.form.LONGITUDE, this.form.LATITUDE, 16)
})
},
handleDelete(row) {
this.$confirm('确定要删除[' + row.GATE_NAME + ']吗?', {
confirmButtonText: '确定',
@ -206,7 +326,24 @@ export default {
}).catch(() => {
})
},
setPosition() {
this.dialogFormMap = false
this.listLoading = true
requestFN(
'/mkmjAreaGate/savePosition',
{
LATITUDE: this.form.LATITUDE,
LONGITUDE: this.form.LONGITUDE,
AREA_GATE_ID: this.form.AREA_GATE_ID
}
).then((data) => {
this.listLoading = false
this.dialogForm = false
this.getList()
}).catch((e) => {
this.listLoading = false
})
},
hasButton: function() {
var keys = 'mkmjArea:add,mkmjArea:del,mkmjArea:edit,toExcel'
requestFN(
@ -238,6 +375,10 @@ export default {
</script>
<style scoped>
#map{
width: 1000px;
height: 500px;
}
.returnBtn {
float: right;
}

579
src/views/mkmj/area/components/videoList.vue Normal file
View File

@ -0,0 +1,579 @@
<template>
<div class="app-container">
<div class="filter-container">
<el-form label-width="100px">
<el-row>
<el-col :span="5">
<el-form-item label="关键字搜索">
<el-input v-model="KEYWORDS" placeholder="搜索关键字" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label-width="10px">
<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
搜索
</el-button>
<el-button v-waves class="filter-item" type="success" icon="el-icon-refresh" @click="goKeyReset">
重置
</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<el-table
v-loading="listLoading"
ref="multipleTable"
:data="varList"
:row-key="getRowKey"
:header-cell-style="{
'font-weight': 'bold',
'color': '#000'
}"
tooltip-effect="dark"
border
fit
highlight-current-row
>
<el-table-column
:reserve-selection="true"
type="selection"
width="55"
align="center"/>
<el-table-column type="index" label="序号" width="50" align="center" />
<el-table-column prop="NAME" label="视频名称" />
<el-table-column prop="POSITION" label="状态" width="100">
<template slot-scope="{row}">
<span v-if="row.LATITUDE && row.LONGITUDE">已定位</span>
<span v-else>未定位</span>
</template>
</el-table-column>
<el-table-column label="操作" align="left" width="500">
<template slot-scope="{row}">
<el-button :disabled="STATE == 2" type="success" icon="el-icon-caret-right" size="mini" @click="showVideo(row)">播放</el-button>
<el-button type="info" icon="el-icon-location-information" size="mini" @click="handleMap(row)">定位</el-button>
<el-button v-show="del" :disabled="STATE == 2" type="danger" icon="el-icon-delete" plain @click="handleDelete(row.VIDEOMANAGER_ID)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="page-btn-group" style="margin-bottom: 50px;">
<div>
<el-button v-show="add" :disabled="STATE == 2" type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
</div>
<pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
</div>
<div class="ui-foot">
<el-button plain type="info" @click="goBack">返 回</el-button>
</div>
<el-dialog :visible.sync="dialogFormMap" title="定位" width="1050px" class="dy-dialog">
<div id="map" />
<div slot="footer" class="dialog-footer">
<span>经度：</span>
<el-input v-model="form.LONGITUDE" style="width: 200px" placeholder="请输入内容" disabled />
<span>纬度：</span>
<el-input v-model="form.LATITUDE" style="width: 200px" placeholder="请输入内容" disabled />
<el-button @click="dialogFormMap = false">取 消</el-button>
<el-button type="primary" @click="setPosition">确 定</el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="dialogForm" :title="msg==='add'?'新增':'编辑'" width="600px">
<el-form ref="form" :model="form" :rules="rules" label-width="110px" style="width: 500px;">
<el-form-item label="视频类型">
<el-radio-group v-model="form.VIDEO_TYPE" @change="changeType($event)">
<el-radio :label="1">固定摄像头</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.VIDEO_TYPE===0" label="视频监控信息" prop="VIDEO_RESOURCES_ID">
<el-button type="success" icon="el-icon-caret-right" size="mini" @click="selectBobileVideo()">选择</el-button>
</el-form-item>
<el-form-item v-if="form.VIDEO_TYPE===1" label="视频选择">
<el-button type="success" icon="el-icon-caret-right" size="mini" @click="selectVideo()">选择</el-button>
</el-form-item>
<el-form-item label="视频名称" prop="VIDEONAME">
<el-input :disabled="true" v-model="form.VIDEONAME" placeholder="这里输入视频名称..." />
</el-form-item>
<el-form-item v-if="form.VIDEO_TYPE===0" label="播放地址" prop="VIDEOURL">
<el-input :disabled="true" v-model="form.VIDEOURL" placeholder="这里输入播放地址..." />
</el-form-item>
<el-form-item label="摄像头编号" prop="CODE">
<el-input :disabled="true" v-model="form.CODE" placeholder="这里输入摄像头编号..." />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="back">取 消</el-button>
<el-button type="primary" @click="upload">确 定</el-button>
</div>
</el-dialog>
<el-dialog v-if="dialogVideo" :visible.sync="dialogVideo" title="视频" width="600px">
<iframe :src="VIDEOURL" width="100%" height="380" allowfullscreen allow="autoplay; fullscreen;microphone" style="position: relative;border:none"/>
<div slot="footer" class="dialog-footer">
<el-button @click="back">取 消</el-button>
</div>
</el-dialog>
<el-dialog v-if="dialogVideoHLS" :visible.sync="dialogVideoHLS" :before-close="handleBack" title="视频" width="600px">
<div id="aLiVideoPlayer" class="prism-player"/>
<div slot="footer" class="dialog-footer">
<el-button @click="back">取 消</el-button>
</div>
</el-dialog>
<el-dialog v-if="dialogVideoAll" :visible.sync="dialogVideoAll" :before-close="handleBack" title="视频" width="1200px">
<!-- <iframe src="http://192.168.192.121:10800/?menu=no/#/screen" width="100%" height="500px" allowfullscreen allow="autoplay; fullscreen" style="position: relative;border:none"/>-->
<div style="display: flex;flex-wrap: wrap;justify-content: space-between">
<div v-for="(video,index) in videoList" :key="index" style="margin-bottom: 10px;width: 45%">
<iframe v-if="video.GBSVIDEOURL" :src="video.GBSVIDEOURL" width="100%" height="380" allowfullscreen allow="autoplay; fullscreen;microphone" style="position: relative;border:none"/>
<div v-if="video.HLSVIDEOURL" :id="'aLiVideoPlayer'+index" class="prism-player"/>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="back">取 消</el-button>
</div>
</el-dialog>
<platformvideo ref="platformvideo" @handleSelected="handleSelected"/>
</div>
</template>
<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves'
import Platformvideo from '../../../keyprojects/videomanager/components/platformvideo'
import TiandiMap from '../../../../components/TianMap/TiandiMap'
export default {
components: { Platformvideo, Pagination, TiandiMap },
directives: { waves },
data() {
return {
map: null,
marker: null,
BMap: '',
clientHeight: 500,
inputLocation: '',
msg: 'add',
config: config,
listLoading: true,
dialogForm: false,
dialogImageUrl: '',
dialogVisible: false,
dialogSelect: false,
add: true,
del: true,
edit: true,
dialogFormMap: false,
listQuery: {
page: 1,
limit: 20
},
total: 0,
KEYWORDS: '',
STATE: this.$parent.STATE,
dates: [],
videoList: [],
videoResourcesList: [],
varList: [],
LATITUDE: '',
LONGITUDE: '',
disabledForm: true,
form: {
AREA_GATE_ID: '',
VIDEO_RESOURCES_ID: '',
PLATFORMVIDEOMANAGEMENT_ID: '',
LATITUDE: '',
LONGITUDE: ''
},
zoom: 10,
rules: {
VIDEONAME: [{ required: true, message: '视频名称不能为空', trigger: 'blur' }],
VIDEOURL: [{ required: true, message: '播放地址不能为空', trigger: 'blur' }],
VIDEO_RESOURCES_ID: [{ required: true, message: '不能为空', trigger: 'change' }],
CODE: [{ required: true, message: '摄像头编号不能为空', trigger: 'blur' }]
},
dialogVideo: false,
timer: '',
dialogVideoHLS: false,
dialogVideoAll: false,
VIDEOURL: '',
player: {},
playerList: []
}
},
created() {
this.form.AREA_GATE_ID = this.$parent.AREA_GATE_ID
this.getList()
this.getVideoResourcesSelect()
},
beforeDestroy() {
this.map && this.map.removeEventListener('click', this.MapClick)
console.log('定时器关闭')
clearInterval(this.timer)
},
methods: {
getVideoResourcesSelect() {
requestFN(
'/videoResources/listAll', {
UNITS_ID: this.$parent.UNITS_ID
}
).then((res) => {
this.videoResourcesList = res.varList
})
},
/**
* 初始化天地图对象
*/
initTDT() {
return new Promise((resolve, reject) => {
if (window.T) {
console.log('天地图初始化成功...')
resolve(window.T)
reject('error')
}
}).then(T => {
window.T = T
})
},
/**
* 初始化地图
* @param {*} lng 经度
* @param {*} lat 纬度
* @param {*} zoom 缩放比例(1~18)
*/
initMap(lng, lat, zoom) {
this.initTDT().then((T) => {
const imageURL = 'http://t0.tianditu.gov.cn/img_w/wmts?' + 'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' + '&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=e8a16137fd226a62a23cc7ba5c9c78ce'
// 创建自定义图层对象
this.lay = new window.T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 })
// 初始化地图对象
this.map = new window.T.Map('map')
this.initCenter(lng, lat, zoom)
})
},
initCenter(lng, lat, zoom) {
// 设置显示地图的中心点和级别
if (!this.form.LONGITUDE && !this.form.LATITUDE) {
this.map.centerAndZoom(new window.T.LngLat(119.58, 39.94), zoom)
this.marker && this.map.removeOverLay(this.marker)
} else {
this.map.centerAndZoom(new window.T.LngLat(lng, lat), zoom)
this.marker && this.map.removeOverLay(this.marker)
this.form.LONGITUDE = lng
this.form.LATITUDE = lat
this.marker = new window.T.Marker(new window.T.LngLat(lng, lat))
// 向地图上添加标注
this.map.addOverLay(this.marker)
}
// 创建卫星和路网的混合视图
this.map.setMapType(window.TMAP_HYBRID_MAP)
// 允许鼠标滚轮缩放地图
this.map.enableScrollWheelZoom()
// 允许鼠标移动地图
this.map.enableInertia()
// 向地图上添加标注
this.map.addEventListener('click', this.MapClick)
},
MapClick(event) {
this.marker && this.map.removeOverLay(this.marker)
this.form.LONGITUDE = event.lnglat.getLng()
this.form.LATITUDE = event.lnglat.getLat()
this.marker = new window.T.Marker(new window.T.LngLat(event.lnglat.getLng(), event.lnglat.getLat()))
// 向地图上添加标注
this.map.addOverLay(this.marker)
},
handleMap(row) {
this.dialogFormMap = true
var AREA_GATE_ID = this.form.AREA_GATE_ID
this.form = {
AREA_GATE_ID: AREA_GATE_ID,
GATE_VIDEO_ID: row.GATE_VIDEO_ID,
LATITUDE: row.LATITUDE,
LONGITUDE: row.LONGITUDE
}
this.$nextTick(() => {
if (!this.map) this.initMap(this.form.LONGITUDE, this.form.LATITUDE, 16)
else this.initCenter(this.form.LONGITUDE, this.form.LATITUDE, 16)
})
},
getRowKey(row) {
return row.VIDEOMANAGER_ID
},
// 搜索
getQuery() {
this.$refs.multipleTable.clearSelection()
this.getList()
},
// 五分钟关闭视频播放页面定时任务
start() {
console.log('定时器开启')
this.timer = setInterval(this.closeVideoStart, (5 * 60 * 1000)) // 5分钟;
},
over() {
// 定时器手动关闭
console.log('定时器手动关闭')
clearInterval(this.timer)
},
closeVideoStart() {
this.dialogVideo = false
this.dialogVideoHLS = false
this.dialogVideoAll = false
this.over()
},
// 播放
showVideo(row) {
this.$message.warning('单次播放最多五分钟')
this.start()
if (!row.PLATFORMVIDEOMANAGEMENT_ID) {
this.VIDEOURL = row.VIDEOURL
this.dialogVideo = true
} else {
requestFN(
'/platformvideomanagement/getHlsPath',
{
INDEXCODE: row.INDEXCODE
}
).then((res) => {
this.dialogVideoHLS = true
this.$nextTick(() => {
// eslint-disable-next-line no-undef
this.player = new Aliplayer({
'id': 'aLiVideoPlayer',
'source': res.data.url,
'width': '100%',
'height': '500px',
'autoplay': true,
'isLive': true,
'rePlay': false,
'playsinline': true,
'preload': true,
'controlBarVisibility': 'hover',
'useH5Prism': true
}, function(player) {
console.log('The player is created')
})
})
}).catch((e) => {
this.listLoading = false
})
}
},
setPosition() {
this.dialogFormMap = false
this.listLoading = true
console.log(132)
requestFN(
'/mkmjGateVideo/savePosition',
{
LATITUDE: this.form.LATITUDE,
LONGITUDE: this.form.LONGITUDE,
GATE_VIDEO_ID: this.form.GATE_VIDEO_ID
}
).then((data) => {
this.listLoading = false
this.dialogForm = false
this.getList()
}).catch((e) => {
this.listLoading = false
})
},
// 获取列表
getList() {
this.listLoading = true
requestFN(
'/mkmjGateVideo/list?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
{
KEYWORDS: this.KEYWORDS,
AREA_GATE_ID: this.form.AREA_GATE_ID
}
).then((data) => {
this.listLoading = false
this.varList = data.varList
this.total = data.page.totalResult
this.hasButton()
}).catch((e) => {
this.listLoading = false
})
},
// 添加
handleAdd() {
this.msg = 'add'
this.resetForm()
this.dialogForm = true
},
selectBobileVideo() {
this.$refs.bobileCamer.init(this.$parent.UNITS_ID)
},
selectVideo(row) {
this.$refs.platformvideo.init()
},
handleSelected(row) {
this.$set(this.form, 'VIDEONAME', row.NAME)
this.$set(this.form, 'CODE', row.INDEXCODE)
this.$set(this.form, 'LATITUDE', row.LATITUDE)
this.$set(this.form, 'LONGITUDE', row.LONGITUDE)
this.$set(this.form, 'PLATFORMVIDEOMANAGEMENT_ID', row.PLATFORMVIDEOMANAGEMENT_ID)
},
// 保存
upload() {
this.$refs.form.validate(valid => {
console.log(this.form)
if (valid) {
this.listLoading = true
requestFN(
'/mkmjGateVideo/add',
{
PLATFORMVIDEOMANAGEMENT_ID: this.form.PLATFORMVIDEOMANAGEMENT_ID,
LONGITUDE: this.form.LONGITUDE,
LATITUDE: this.form.LATITUDE,
AREA_GATE_ID: this.form.AREA_GATE_ID
}
).then((data) => {
this.listLoading = false
this.dialogForm = false
this.getList()
}).catch((e) => {
this.listLoading = false
})
} else {
return false
}
})
},
handleDelete(id) {
this.$confirm('确定要删除吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.listLoading = true
console.log(this.VIDEOMANAGER_ID)
requestFN(
'/mkmjGateVideo/delete',
{
GATE_VIDEO_ID: id
}
).then(() => {
this.$message({
message: '删除成功',
type: 'success'
})
this.listLoading = false
this.varList = []
this.listQuery.page = 1
this.getList()
}).catch((e) => {
this.listLoading = false
})
}).catch(() => {
})
},
// 判断按钮权限，用于是否显示按钮
hasButton: function() {
var keys = 'videomanager:add,videomanager:del,videomanager:edit,toExcel'
requestFN(
'/head/hasButton',
{
keys: keys
}
).then((data) => {
this.add = data.videomanagerfhadminadd // 新增权限
this.del = data.videomanagerfhadmindel // 删除权限
this.edit = data.videomanagerfhadminedit // 修改权限
}).catch((e) => {
this.listLoading = false
})
},
goKeyReset() {
this.KEYWORDS = ''
this.getList()
},
changeType(e) {
if (e === 1) {
this.form.VIDEO_TYPE = 1
} else {
this.form.VIDEO_TYPE = 0
}
this.form.VIDEO_RESOURCES_ID = ''
this.form.VIDEONAME = ''
this.form.VIDEOURL = ''
this.form.CODE = ''
},
changeRid(e) {
console.log(e)
this.disabledForm = true
requestFN(
'/videoResources/findById',
{
VIDEO_RESOURCES_ID: e
}
).then((data) => {
this.form.VIDEOURL = data.pd.VIDEOURL
this.form.VIDEONAME = data.pd.VIDEONAME
this.form.CODE = data.pd.CODE
}).catch((e) => {
})
},
back() {
if (this.dialogVideo) this.dialogVideo = false
if (this.dialogVideoAll) {
this.dialogVideoAll = false
for (let i = 0; i < this.playerList.length; i++) {
this.playerList[i].dispose()
}
}
if (this.dialogForm) this.dialogForm = false
if (this.dialogVideoHLS) {
this.dialogVideoHLS = false
this.player.dispose()
}
},
handleBack() {
if (this.dialogVideoAll) {
for (let i = 0; i < this.playerList.length; i++) {
this.playerList[i].dispose()
}
this.dialogVideoAll = false
}
if (this.dialogVideoHLS) {
this.player.dispose()
this.dialogVideoHLS = false
}
},
resetForm() {
var AREA_GATE_ID = this.form.AREA_GATE_ID
this.form = {
VIDEO_TYPE: 1,
CODE: '',
AREA_GATE_ID: AREA_GATE_ID,
VIDEO_RESOURCES_ID: '',
PLATFORMVIDEOMANAGEMENT_ID: '',
LATITUDE: '',
LONGITUDE: ''
}
},
goBack() {
this.$parent.activeName = 'ListGate'
}
}
}
</script>
<style>
.hide .el-upload--picture-card {
display: none;
}
#map{
width: 1000px;
height: 500px;
}
</style>

3
src/views/mkmj/area/index.vue
View File

@ -8,6 +8,7 @@
<Edit v-if="activeName=='Edit'" />
<EditGate v-if="activeName=='EditGate'" />
<ListLog v-if="activeName=='ListLog'" />
<VideoList v-if="activeName=='VideoList'" />
</div>
</template>
@ -19,9 +20,11 @@ import ListGate from './components/listGate'
import Edit from './components/edit'
import EditGate from './components/editGate'
import ListLog from './components/listLog'
import VideoList from './components/videoList'
export default {
components: {
VideoList: VideoList,
List: List,
Edit: Edit,
ListTwo: ListTwo,