569 lines
19 KiB
Vue
569 lines
19 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-form label-width="100px">
|
||
<el-row>
|
||
<el-col :span="6">
|
||
<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>
|
||
<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="corpName" label="企业名称" />
|
||
<el-table-column prop="NAME" label="视频名称" />
|
||
<el-table-column prop="fangquNames" label="所属区域" />
|
||
<el-table-column prop="regionName" 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="400">
|
||
<template slot-scope="{row}">
|
||
<el-button 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="goEdit(row)">定位</el-button>-->
|
||
<el-button type="primary" icon="el-icon-edit" size="mini" @click="goEdit(row)">编辑</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="page-btn-group">
|
||
<div>
|
||
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
|
||
<!-- <el-button type="success" icon="el-icon-caret-right" @click="showAll">播放全部</el-button>-->
|
||
</div>
|
||
<pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getAllList" />
|
||
</div>
|
||
|
||
<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 :visible.sync="dialogFormMap" title="定位" width="1050px" class="dy-dialog">
|
||
<el-form ref="form" :model="form" :rules="rules">
|
||
<el-form-item>
|
||
<div id="map" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<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="所属企业" prop="CORPINFO_ID">
|
||
<el-select v-model="form.CORPINFO_ID" placeholder="请选择申请状态" clearable >
|
||
<el-option v-for="item in corpList" :key="item.CORPINFO_ID" :label="item.CORP_NAME" :value="item.CORPINFO_ID" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="所属区域" prop="bianjiequyu">
|
||
<el-select v-model="form.SUOSHUQUYU" placeholder="请选择" @change="getSendDic">
|
||
<el-option v-for="item in statusList" :key="item.DICTIONARIES_ID" :label="item.name" :value="item.DICTIONARIES_ID" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="边界入侵区域" prop="bianjiequyu">
|
||
<el-select v-model="form.bianjiequyu" multiple placeholder="请选择监理单位" style="width: 100%;">
|
||
<el-option v-for="item in quyuList" :key="item.DICTIONARIES_ID" :label="item.name" :value="item.DICTIONARIES_ID" />
|
||
</el-select>
|
||
</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="CODE">
|
||
<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-item label="坐标">
|
||
<el-input v-model="form.LONGITUDEANDLATITUDE" style="width: 200px" placeholder="请输入内容" disabled />
|
||
<el-button type="info" icon="el-icon-location-information" size="mini" @click="handleMap(row)">定位</el-button>
|
||
</el-form-item>
|
||
|
||
</el-form>
|
||
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="closeDia()">取 消</el-button>
|
||
<el-button type="primary" @click="upload">确 定</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' // waves directive
|
||
import TiandiMap from '../../../components/TianMap/TiandiMap'
|
||
import Platformvideo from '../platformelectronic/components/platformvideo.vue'
|
||
import SelectTree from '@/components/SelectTree'
|
||
export default {
|
||
components: { Pagination, TiandiMap, Platformvideo, SelectTree },
|
||
directives: { waves },
|
||
data() {
|
||
// eslint-disable-next-line no-unused-vars
|
||
return {
|
||
map: null,
|
||
marker: null,
|
||
BMap: '',
|
||
listLoading: true,
|
||
listQuery: {
|
||
page: 1,
|
||
limit: 20
|
||
},
|
||
total: 0,
|
||
KEYWORDS: '',
|
||
tempList: [],
|
||
varList: [],
|
||
dialogVideoHLS: false,
|
||
player: {},
|
||
dialogFormMap: false,
|
||
corpList: [],
|
||
form: {
|
||
CORPINFO_ID: '',
|
||
bianjiequyu: [],
|
||
PLATFORMELECTRONIC_ID: '',
|
||
LONGITUDEANDLATITUDE: '',
|
||
VIDEOMANAGER_ID: '',
|
||
VIDEO_RESOURCES_ID: '',
|
||
VIDEO_TYPE: 1,
|
||
VIDEONAME: '', //
|
||
VIDEOURL: '',
|
||
CODE: '',
|
||
PLATFORMVIDEOMANAGEMENT_ID: '',
|
||
LATITUDE: '',
|
||
LONGITUDE: '',
|
||
SUOSHUQUYU: ''
|
||
},
|
||
rules: {
|
||
CORPINFO_ID: [
|
||
{ required: true, message: '请选择企业', trigger: 'blur' }
|
||
],
|
||
bianjiequyu: [
|
||
{ required: true, message: '请选择区域', trigger: 'blur' }
|
||
],
|
||
CODE: [
|
||
{ required: true, message: '请选择摄像头', trigger: 'blur' }
|
||
]
|
||
},
|
||
dialogForm: false,
|
||
msg: 'add',
|
||
defaultProps: {
|
||
value: 'id',
|
||
children: 'nodes',
|
||
label: 'name'
|
||
},
|
||
quyuList: [],
|
||
shexiangtouForm: {},
|
||
statusList: []
|
||
}
|
||
},
|
||
async created() {
|
||
this.getCorpList()
|
||
await this.getAllList()
|
||
await this.getquyuList()
|
||
},
|
||
methods: {
|
||
getRowKey(row) {
|
||
return row.PERSONNELMANAGEMENT_ID
|
||
},
|
||
|
||
// 搜索
|
||
getQuery() {
|
||
this.$refs.multipleTable.clearSelection()
|
||
this.listQuery.page = 1
|
||
this.getAllList()
|
||
},
|
||
goKeyReset() {
|
||
this.KEYWORDS = ''
|
||
this.getQuery()
|
||
},
|
||
getquyuList() { // 获取区域字典信息
|
||
requestFN(
|
||
'/dictionaries/listSelectTree',
|
||
{
|
||
DICTIONARIES_ID: '7da8205a07074a1785116fc8c9a7bfc4'
|
||
}
|
||
).then((data) => {
|
||
this.quyuList = JSON.parse(data.zTreeNodes)
|
||
})
|
||
},
|
||
getCorpList() { // 获取所有的企业信息
|
||
requestFN(
|
||
'/corpinfo/listAll',
|
||
{}
|
||
).then((data) => {
|
||
this.corpList = data.varList
|
||
}).catch((e) => {
|
||
})
|
||
},
|
||
|
||
getAllList() { // 获取公司的所有摄像头
|
||
return new Promise(resolve => {
|
||
requestFN(
|
||
'/platformelectronic/list?showCount=' + this.listQuery.limit + '¤tPage=' + this.listQuery.page,
|
||
{
|
||
KEYWORDS: this.KEYWORDS
|
||
}
|
||
).then((data) => {
|
||
this.varList = data.varList
|
||
this.listLoading = false
|
||
this.total = data.page.totalResult
|
||
resolve()
|
||
}).catch((e) => {
|
||
this.listLoading = false
|
||
})
|
||
})
|
||
},
|
||
handleAdd(row) {
|
||
this.msg = 'add'
|
||
this.resetForm()
|
||
this.dialogForm = true
|
||
this.getDic()
|
||
},
|
||
resetForm() {
|
||
this.shexiangtouForm.LONGITUDE = ''
|
||
this.shexiangtouForm.LATITUDE = ''
|
||
this.shexiangtouForm.SUOSHUQUYU = ''
|
||
this.form.LONGITUDEANDLATITUDE = ''
|
||
this.shexiangtouForm = {}
|
||
this.form = {
|
||
CORPINFO_ID: '',
|
||
bianjiequyu: '',
|
||
LONGITUDEANDLATITUDE: '',
|
||
VIDEOMANAGER_ID: '',
|
||
VIDEO_RESOURCES_ID: '',
|
||
VIDEO_TYPE: 1,
|
||
VIDEONAME: '', //
|
||
VIDEOURL: '',
|
||
CODE: '',
|
||
PLATFORMVIDEOMANAGEMENT_ID: '',
|
||
LATITUDE: '',
|
||
LONGITUDE: ''
|
||
}
|
||
},
|
||
|
||
upload() {
|
||
var _this = this
|
||
this.$refs.form.validate(valid => {
|
||
if (valid) {
|
||
this.shexiangtouForm.CORPINFO_ID = this.form.CORPINFO_ID
|
||
if (_this.form.bianjiequyu) {
|
||
var bianjiequyu = ''
|
||
_this.form.bianjiequyu.forEach(item => {
|
||
bianjiequyu += item + ','
|
||
})
|
||
this.shexiangtouForm.FANGQU_IDS = bianjiequyu.substr(0, bianjiequyu.length - 1)
|
||
}
|
||
this.shexiangtouForm.SUOSHUQUYU = this.form.SUOSHUQUYU
|
||
this.dialogFormMap = false
|
||
this.dialogForm = false
|
||
this.listLoading = true
|
||
requestFN(
|
||
'/platformelectronic/savePosition',
|
||
this.shexiangtouForm
|
||
).then(async(data) => {
|
||
await this.getAllList()
|
||
this.getList()
|
||
this.shexiangtouForm = {}
|
||
}).catch((e) => {
|
||
this.listLoading = false
|
||
})
|
||
} else {
|
||
return false
|
||
}
|
||
})
|
||
},
|
||
selectVideo(row) {
|
||
this.$refs.platformvideo.init()
|
||
},
|
||
goEdit(row) {
|
||
this.dialogForm = true
|
||
this.listLoading = true
|
||
this.getDic()
|
||
return new Promise(resolve => {
|
||
requestFN(
|
||
'/platformelectronic/goEdit',
|
||
{
|
||
PLATFORMELECTRONIC_ID: row.PLATFORMELECTRONIC_ID
|
||
}
|
||
).then((data) => {
|
||
this.shexiangtouForm = data.pd
|
||
this.form.SUOSHUQUYU = data.pd.SUOSHUQUYU
|
||
this.getSendDic()
|
||
this.form.bianjiequyu = data.pd.FANGQU_IDS.split(',')
|
||
this.form.CORPINFO_ID = data.pd.CORPINFO_ID
|
||
this.form.VIDEONAME = data.pd.NAME
|
||
this.form.CODE = data.pd.INDEXCODE
|
||
|
||
this.form.LONGITUDEANDLATITUDE = data.pd.LONGITUDE + ',' + data.pd.LATITUDE
|
||
this.listLoading = false
|
||
resolve()
|
||
}).catch((e) => {
|
||
this.listLoading = false
|
||
})
|
||
})
|
||
},
|
||
handleSelected(row) {
|
||
this.shexiangtouForm = {
|
||
PLATFORMELECTRONIC_ID: row.PLATFORMELECTRONIC_ID,
|
||
CORPINFO_ID: row.CORPINFO_ID,
|
||
INDEXCODE: row.indexCode,
|
||
REGIONINDEXCODE: row.regionIndexCode,
|
||
EXTERNALINDEXCODE: row.externalIndexCode,
|
||
NAME: row.name,
|
||
LONGITUDE: row.LONGITUDE,
|
||
LATITUDE: row.LATITUDE,
|
||
CAMERATYPE: row.cameraType,
|
||
CASCADECODE: row.cascadeCode,
|
||
DECODETAG: row.decodeTag,
|
||
RESOURCETYPE: row.resourceType,
|
||
CREATETIME: row.createTime,
|
||
UPDATETIME: row.updateTime,
|
||
SORT: row.sort,
|
||
DISORDER: row.disOrder,
|
||
RECORDLOCATION: row.recordLocation,
|
||
CASCADETYPE: row.cascadeType,
|
||
REGIONNAME: row.regionName,
|
||
REGIONPATH: row.regionPath,
|
||
REGIONPATHNAM: row.regionPathName,
|
||
VIDEONAME: row.name,
|
||
CODE: row.indexCode
|
||
}
|
||
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)
|
||
},
|
||
// 获取列表
|
||
setPosition() {
|
||
// eslint-disable-next-line no-empty
|
||
if (this.shexiangtouForm.PLATFORMELECTRONIC_ID != null) {
|
||
}
|
||
this.shexiangtouForm.LONGITUDE = this.form.LONGITUDE
|
||
this.shexiangtouForm.LATITUDE = this.form.LATITUDE
|
||
this.form.LONGITUDEANDLATITUDE = this.form.LONGITUDE + ',' + this.form.LATITUDE
|
||
this.dialogFormMap = false
|
||
},
|
||
|
||
// 播放
|
||
showVideo(row) {
|
||
console.info(row)
|
||
requestFN(
|
||
'/platformelectronic/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) => {
|
||
})
|
||
},
|
||
|
||
handleMap(row) {
|
||
if (row != null) {
|
||
this.form.LONGITUDE = row.LONGITUDE
|
||
this.form.LATITUDE = row.LATITUDE
|
||
this.shexiangtouForm = row
|
||
}
|
||
this.dialogFormMap = true
|
||
this.$nextTick(() => {
|
||
if (!this.map) this.initMap(this.form.LONGITUDE, this.form.LATITUDE, 16)
|
||
else this.initCenter(this.form.LONGITUDE, this.form.LATITUDE, 16)
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 初始化天地图对象
|
||
*/
|
||
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)
|
||
},
|
||
|
||
back() {
|
||
this.dialogVideoHLS = false
|
||
this.player.dispose()
|
||
},
|
||
|
||
handleBack() {
|
||
this.player.dispose()
|
||
this.dialogVideoHLS = false
|
||
},
|
||
|
||
getDic() { // 获取区域字典信息
|
||
const loading = this.$loading({
|
||
lock: true,
|
||
text: 'Loading',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(0, 0, 0, 0.7)'
|
||
})
|
||
requestFN('/dictionaries/listSelectTree', { DICTIONARIES_ID: 'f0bae7becdee4d779a2cb82037948ab4' }
|
||
).then((data) => {
|
||
this.statusList = JSON.parse(data.zTreeNodes)
|
||
loading.close()
|
||
}).catch((e) => {
|
||
loading.close()
|
||
})
|
||
},
|
||
getSendDic() {
|
||
const loading = this.$loading({
|
||
lock: true,
|
||
text: 'Loading',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(0, 0, 0, 0.7)'
|
||
})
|
||
this.form.quyuList = []
|
||
requestFN('/dictionaries/listSelectTree', { DICTIONARIES_ID: this.form.SUOSHUQUYU }
|
||
).then((data) => {
|
||
loading.close()
|
||
this.quyuList = JSON.parse(data.zTreeNodes)
|
||
}).catch((e) => {
|
||
loading.close()
|
||
})
|
||
},
|
||
closeDia() {
|
||
this.dialogForm = false
|
||
this.form = {
|
||
CORPINFO_ID: '',
|
||
bianjiequyu: [],
|
||
PLATFORMELECTRONIC_ID: '',
|
||
LONGITUDEANDLATITUDE: '',
|
||
VIDEOMANAGER_ID: '',
|
||
VIDEO_RESOURCES_ID: '',
|
||
VIDEO_TYPE: 1,
|
||
VIDEONAME: '', //
|
||
VIDEOURL: '',
|
||
CODE: '',
|
||
PLATFORMVIDEOMANAGEMENT_ID: '',
|
||
LATITUDE: '',
|
||
LONGITUDE: '',
|
||
SUOSHUQUYU: ''
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
#map{
|
||
width: 1000px;
|
||
height: 500px;
|
||
}
|
||
</style>
|