Merge remote-tracking branch 'origin/pet' into pet
limingyu
commit
86a0d4b88c
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
|
|
@ -0,0 +1,288 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="关键词">
|
||||
<el-input v-model="KEYWORDS" placeholder="盒子名称"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="创建人">
|
||||
<el-input v-model="CREATOR" placeholder="创建人"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="dates"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
style="width: 80%;"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label-width="10px">
|
||||
<el-button v-waves type="primary" icon="el-icon-search" @click="getQuery">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button type="success" icon="el-icon-view" size="mini" @click="getReset">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
:data="varList"
|
||||
:header-cell-style="{
|
||||
'font-weight': 'bold',
|
||||
'color': '#000'
|
||||
}"
|
||||
tooltip-effect="dark"
|
||||
border
|
||||
fit
|
||||
highlight-current-row
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="50" align="center" />
|
||||
<el-table-column prop="AIBOX_NAME" label="盒子名称" align="center"/>
|
||||
<el-table-column prop="PROMISE_NAME" label="创建企业" align="center">
|
||||
<template slot-scope="{row}">
|
||||
<span v-if="row.CORP_NAME != null">{{ row.CORP_NAME }} </span>
|
||||
<span v-else>秦皇岛港股份有限公司</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="CREATOR_NAME" label="创建人" align="center"/>
|
||||
<el-table-column prop="CREATE_TIME" label="创建时间" align="center"/>
|
||||
<el-table-column prop="STATE" label="设备状态" align="center">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.STATE === '0' ? '离线' : '在线' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="CAPACITY" label="已配置算法/总视频数" align="center">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.ALGO_COUNT + '/' + row.setCount }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="420">
|
||||
<template slot-scope="{row}">
|
||||
<el-button type="primary" icon="el-icon-s-tools" size="mini" @click="handleEdit(row)">查看</el-button>
|
||||
<el-button v-if="edit && row.STATE === '1'" style="background-color: grey; color: white" type="Info" icon="el-icon-error" plain @click="handleOnline(row.AIBOX_ID,0)">离线</el-button>
|
||||
<el-button v-if="edit && row.STATE === '0'" style="background-color: seagreen; color: white" type="info" icon="el-icon-success" plain @click="handleOnline(row.AIBOX_ID,1)">上线</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="page-btn-group">
|
||||
<div/>
|
||||
<pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
|
||||
import { requestFN } from '@/utils/request'
|
||||
import waves from '@/directive/waves' // waves directive
|
||||
export default {
|
||||
components: { Pagination },
|
||||
directives: { waves },
|
||||
data() {
|
||||
return {
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 20
|
||||
},
|
||||
total: 0,
|
||||
KEYWORDS: '',
|
||||
add: '',
|
||||
del: '',
|
||||
edit: '',
|
||||
CREATOR: '',
|
||||
dates: [],
|
||||
varList: [],
|
||||
corpinfoAllList: [],
|
||||
capacityList: [{ name: '4', value: 4 }, { name: '8', value: 8 }, { name: '12', value: 12 }],
|
||||
addForm: {
|
||||
dialogType: 'add', // 增or改
|
||||
dialogVisible: false,
|
||||
rules: {
|
||||
AIBOX_NAME: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
CAPACITY: [{ required: true, message: '不可为空', trigger: 'blur' }]
|
||||
},
|
||||
info: {
|
||||
AIBOX_NAME: '',
|
||||
CAPACITY: '',
|
||||
CORPINFO_ID: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getCoroInfoAll()
|
||||
this.getList()
|
||||
this.hasButton()
|
||||
},
|
||||
methods: {
|
||||
handleOnline(AIBOX_ID, STATE) {
|
||||
requestFN(
|
||||
'/aibox/edit',
|
||||
{
|
||||
AIBOX_ID: AIBOX_ID,
|
||||
STATE: STATE
|
||||
}
|
||||
).then((data) => {
|
||||
this.$message.success('保存成功')
|
||||
this.getList()
|
||||
this.addForm.dialogVisible = false
|
||||
}).catch((e) => {
|
||||
})
|
||||
},
|
||||
getCoroInfoAll() {
|
||||
requestFN(
|
||||
'/corpinfo/listSelect',
|
||||
{ }
|
||||
).then((data) => {
|
||||
this.corpinfoAllList = data.list
|
||||
}).catch((e) => {
|
||||
})
|
||||
},
|
||||
// 搜索
|
||||
getQuery() {
|
||||
this.getList()
|
||||
},
|
||||
// 搜索
|
||||
getReset() {
|
||||
this.KEYWORDS = ''
|
||||
this.dates = []
|
||||
this.CREATOR = ''
|
||||
this.listQuery = {
|
||||
page: 1,
|
||||
limit: 20
|
||||
}
|
||||
this.total = 0
|
||||
this.getQuery()
|
||||
},
|
||||
// 获取列表
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/aibox/list?showCount=' + this.listQuery.limit + '¤tPage=' + this.listQuery.page,
|
||||
{
|
||||
KEYWORDS: this.KEYWORDS,
|
||||
CREATOR: this.CREATOR,
|
||||
START_TIME: this.dates && this.dates[0],
|
||||
END_TIME: this.dates && this.dates[1]
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.varList = data.varList
|
||||
this.total = data.page.totalResult
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
goView(AIBOX_ID) {
|
||||
requestFN(
|
||||
'/aibox/goEdit',
|
||||
{
|
||||
AIBOX_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.dialog.data = { ...data.varList, COVERPEOPLE: 'XXX' }
|
||||
this.dialog.visible = true
|
||||
})
|
||||
},
|
||||
handleDelete(id) {
|
||||
this.$confirm('确定要删除吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/aibox/delete',
|
||||
{
|
||||
AIBOX_ID: id
|
||||
}
|
||||
).then((data) => {
|
||||
if (data.result === 'success') {
|
||||
this.$message({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
this.$message.error(data.msg)
|
||||
}
|
||||
this.listLoading = false
|
||||
this.varList = []
|
||||
this.listQuery.page = 1
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
confirm() {
|
||||
this.$refs.addForm.validate(valid => {
|
||||
if (valid) {
|
||||
requestFN(
|
||||
'/aibox/' + this.addForm.dialogType,
|
||||
{
|
||||
...this.addForm.info
|
||||
}
|
||||
).then((data) => {
|
||||
this.$message.success('保存成功')
|
||||
this.getList()
|
||||
this.addForm.dialogVisible = false
|
||||
}).catch((e) => {
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
resetAddForm() {
|
||||
this.addForm.info = {
|
||||
AIBOX_ID: '',
|
||||
AIBOX_NAME: '',
|
||||
CORPINFO_ID: ''
|
||||
}
|
||||
},
|
||||
handleEdit(row) {
|
||||
this.$parent.activeName = 'VideoList'
|
||||
this.$parent.AIBOX_ID = row.AIBOX_ID
|
||||
this.$parent.AIBOX_NAME = row.AIBOX_NAME
|
||||
this.$parent.CAPACITY = row.CAPACITY
|
||||
},
|
||||
// 添加
|
||||
handleAdd() {
|
||||
this.resetAddForm()
|
||||
this.addForm.dialogType = 'add'
|
||||
this.addForm.dialogVisible = true
|
||||
},
|
||||
// 判断按钮权限，用于是否显示按钮
|
||||
hasButton: function() {
|
||||
var keys = 'aiboxManager:add,aiboxManager:del,aiboxManager:edit'
|
||||
requestFN(
|
||||
'/head/hasButton',
|
||||
{
|
||||
keys: keys
|
||||
}
|
||||
).then((data) => {
|
||||
this.add = data.aiboxManagerfhadminadd // 新增权限
|
||||
this.del = data.aiboxManagerfhadmindel // 删除权限
|
||||
this.edit = data.aiboxManagerfhadminedit // 修改权限
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,865 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="3">
|
||||
<el-page-header content="算法配置申请" @back="goBack"/>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="关键词">
|
||||
<el-input v-model="KEYWORDS" placeholder="视频名称"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label-width="10px">
|
||||
<el-button v-waves type="primary" icon="el-icon-search" @click="getQuery">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button type="success" icon="el-icon-view" size="mini" @click="getReset">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
ref="multipleTable"
|
||||
:data="varList"
|
||||
: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="VIDEO_NAME" label="视频名称" align="center"/>
|
||||
<el-table-column prop="VIDEO_URL" label="播放地址" align="center"/>
|
||||
<el-table-column prop="LONGITUDE" label="经纬度" align="center">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.LONGITUDE ? row.LONGITUDE + '-' + row.LATITUDE : '未定位' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="ALGO_NAME" label="算法" align="center">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.ALGO_NAME ? row.ALGO_NAME : '未配置' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="STATE" label="状态" align="center">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.STATE === '0' ? '离线' : '在线' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="REVIEW_STATE" label="审核状态" align="center">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.REVIEW_STATE === '0' ? '未提交' : row.REVIEW_STATE === '1' ? '待审核' : row.REVIEW_STATE === '2' ? '审核打回' : row.REVIEW_STATE === '3' ? '审核通过' : '未申请' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="500">
|
||||
<template slot-scope="{row}">
|
||||
<el-button v-if="row.REVIEW_STATE && row.REVIEW_STATE !== '2'" type="success" icon="el-icon-view" size="mini" @click="handleAlgorithm(row,'view')">查看</el-button>
|
||||
<el-button type="success" icon="el-icon-caret-right" size="mini" @click="showVideo(row)">播放</el-button>
|
||||
<el-button v-if="edit" type="info" icon="el-icon-location-information" size="mini" @click="handleMap(row)">定位</el-button>
|
||||
<el-button v-if="edit && row.VIDEO_TYPE === '0'" type="warning" size="mini" @click="getRTSP(row)">获取rtsp地址</el-button>
|
||||
<el-button v-if="edit && !row.REVIEW_STATE || row.REVIEW_STATE === '' || row.REVIEW_STATE === '0' && row.REVIEW_STATE !== '1'" type="primary" icon="el-icon-edit" size="mini" @click="handleAlgorithm(row,'add')">配置算法</el-button>
|
||||
<el-button v-else-if="edit && row.REVIEW_STATE && row.REVIEW_STATE !== '1' && row.REVIEW_STATE !== '2'" type="primary" icon="el-icon-edit" size="mini" @click="handleAlgorithm(row,'edit')">更改算法</el-button>
|
||||
<el-button v-else-if="edit && row.REVIEW_STATE && row.REVIEW_STATE !== '1' && row.REVIEW_STATE === '2'" type="danger" icon="el-icon-edit" size="mini" @click="handleAlgorithm(row,'edit')">重新配置</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="page-btn-group">
|
||||
<div/>
|
||||
<pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
|
||||
</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="addForm.info.LONGITUDE" style="width: 200px" placeholder="请输入内容" disabled />
|
||||
<span>纬度：</span>
|
||||
<el-input v-model="addForm.info.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="addForm.dialogVisible" :title="addForm.dialogType==='add'?'新增': addForm.dialogType==='edit' ? '配置算法' : '查看'" width="600px">
|
||||
<el-form ref="addForm" :model="addForm.info" :rules="addForm.rules" label-width="110px" style="width: 600px;">
|
||||
<el-form-item label="视频名称" prop="VIDEO_NAME">
|
||||
<el-input :disabled="true" v-model="addForm.info.VIDEO_NAME" style="width: 80%" placeholder="这里输入视频名称..." />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="摄像头编号" prop="CODE">
|
||||
<el-input :disabled="true" v-model="addForm.info.CODE" style="width: 80%" placeholder="这里输入摄像头编号..." />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="算法数量：" prop="ALGO_LIMIT">
|
||||
<el-select v-model="addForm.info.ALGO_LIMIT" placeholder="请选择" style="width: 80%;" @change="removeExceed()">
|
||||
<el-option
|
||||
v-for="item in algoLimitList"
|
||||
:key="item.value"
|
||||
:label="item.value"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button v-if="addForm.info.ALGO_LIMIT > addForm.info.ALGORITHM.length" type="primary" style="width: 80% ; height: 35px ;" @click="addCollateral">增加算法</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<el-col v-for="(item, index) in addForm.info.ALGORITHM" :key="item.id">
|
||||
<el-form-item :label="'算法' + (index + 1) + '：'" prop="ALGORITHM">
|
||||
<el-select v-model="item.BIANMA" style="width: 80%" placeholder="请选择" @change="setDisable">
|
||||
<el-option
|
||||
v-for="item in algorithmList"
|
||||
:key="item.DICTIONARIES_ID"
|
||||
:label="item.NAME"
|
||||
:value="item.BIANMA"
|
||||
:disabled="item.disabled"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="back">取消</el-button>
|
||||
<el-button v-show="addForm.dialogType !== 'view'" type="primary" @click="confirm">提交申请</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-if="dialogVideo" :visible.sync="dialogVideo" :show-close="false" title="视频2" 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" :show-close="false" 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%">
|
||||
<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>
|
||||
</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'
|
||||
|
||||
export default {
|
||||
components: { 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: '',
|
||||
del: '',
|
||||
edit: '',
|
||||
dialogFormMap: false,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 20
|
||||
},
|
||||
total: 0,
|
||||
KEYWORDS: '',
|
||||
dates: [],
|
||||
videoList: [],
|
||||
varList: [],
|
||||
LATITUDE: '',
|
||||
LONGITUDE: '',
|
||||
zoom: 10,
|
||||
rules: {
|
||||
VIDEONAME: [{ required: true, message: '视频名称不能为空', trigger: 'blur' }],
|
||||
CODE: [{ required: true, message: '摄像头编号不能为空', trigger: 'blur' }]
|
||||
},
|
||||
dialogVideo: false,
|
||||
dialogVideoHLS: false,
|
||||
dialogVideoBack: false,
|
||||
dialogVideoAll: false,
|
||||
player: {},
|
||||
playerList: [],
|
||||
VIDEOURL: '',
|
||||
corpinfoAllList: [],
|
||||
algoLimitList: [{ name: '4', value: 4 }, { name: '8', value: 8 }, { name: '12', value: 12 }],
|
||||
algorithmList: [],
|
||||
AIBOX_RELATION_ID: '',
|
||||
addForm: {
|
||||
dialogType: 'add', // 增or改
|
||||
dialogVisible: false,
|
||||
rules: {
|
||||
VIDEO_NAME: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
CODE: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
ALGO_LIMIT: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
ALGORITHM: [{ required: true, message: '不可为空', trigger: 'blur' }]
|
||||
},
|
||||
info: {
|
||||
AIBOX_ID: this.$parent.AIBOX_ID,
|
||||
VIDEO_ID: '',
|
||||
VIDEO_TYPE: 0,
|
||||
VIDEO_NAME: '', //
|
||||
VIDEO_URL: '',
|
||||
CODE: '',
|
||||
LATITUDE: '',
|
||||
LONGITUDE: '',
|
||||
ALGORITHM: [],
|
||||
ALGO_LIMIT: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getCoroInfoAll()
|
||||
this.getList()
|
||||
this.hasButton()
|
||||
},
|
||||
beforeDestroy() {
|
||||
console.log('定时器关闭')
|
||||
clearInterval(this.timer)
|
||||
this.map && this.map.removeEventListener('click', this.MapClick)
|
||||
},
|
||||
methods: {
|
||||
// 选项处理
|
||||
setDisable() {
|
||||
this.algorithmList.forEach(item => {
|
||||
item.disabled = false
|
||||
this.addForm.info.ALGORITHM.forEach(value => {
|
||||
if (value.BIANMA === item.BIANMA) {
|
||||
item.disabled = true
|
||||
}
|
||||
})
|
||||
})
|
||||
this.$forceUpdate()
|
||||
},
|
||||
removeExceed() {
|
||||
if (this.addForm.info.ALGO_LIMIT < this.addForm.info.ALGORITHM.length) {
|
||||
while (this.addForm.info.ALGO_LIMIT < this.addForm.info.ALGORITHM.length) {
|
||||
this.addForm.info.ALGORITHM.pop()
|
||||
}
|
||||
}
|
||||
this.$forceUpdate()
|
||||
},
|
||||
addCollateral() {
|
||||
this.setDisable()
|
||||
this.addForm.info.ALGORITHM.push({ BIANMA: '' })
|
||||
},
|
||||
bobilehandleSelected(row) {
|
||||
this.$set(this.addForm.info, 'VIDEO_URL', row.VIDEOURL)
|
||||
this.$set(this.addForm.info, 'VIDEO_NAME', row.VIDEONAME)
|
||||
this.$set(this.addForm.info, 'CODE', row.CODE)
|
||||
this.$set(this.addForm.info, 'VIDEO_ID', row.VIDEO_RESOURCES_ID)
|
||||
this.$forceUpdate()
|
||||
},
|
||||
getCoroInfoAll() {
|
||||
requestFN(
|
||||
'/corpinfo/listSelect',
|
||||
{ }
|
||||
).then((data) => {
|
||||
this.corpinfoAllList = data.list
|
||||
}).catch((e) => {
|
||||
})
|
||||
},
|
||||
selectBobileVideo() {
|
||||
this.$refs.bobileCamer.init()
|
||||
},
|
||||
// 搜索
|
||||
getReset() {
|
||||
this.KEYWORDS = ''
|
||||
this.listQuery = {
|
||||
page: 1,
|
||||
limit: 20
|
||||
}
|
||||
this.total = 0
|
||||
this.getQuery()
|
||||
},
|
||||
/**
|
||||
* 初始化天地图对象
|
||||
*/
|
||||
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.addForm.info.LONGITUDE && !this.addForm.info.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.addForm.info.LONGITUDE = lng
|
||||
this.addForm.info.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.addForm.info.LONGITUDE = event.lnglat.getLng()
|
||||
this.addForm.info.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
|
||||
this.AIBOX_RELATION_ID = row.AIBOX_RELATION_ID
|
||||
this.addForm.info = {
|
||||
...this.addForm.info,
|
||||
LATITUDE: row.LATITUDE,
|
||||
LONGITUDE: row.LONGITUDE
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
if (!this.map) this.initMap(this.addForm.info.LONGITUDE, this.addForm.info.LATITUDE, 16)
|
||||
else this.initCenter(this.addForm.info.LONGITUDE, this.addForm.info.LATITUDE, 16)
|
||||
})
|
||||
},
|
||||
getRowKey(row) {
|
||||
return row.AIBOX_RELATION_ID
|
||||
},
|
||||
// 搜索
|
||||
getQuery() {
|
||||
this.$refs.multipleTable.clearSelection()
|
||||
this.getList()
|
||||
},
|
||||
// 五分钟关闭视频播放页面定时任务
|
||||
start() {
|
||||
console.log('定时器开启')
|
||||
this.timer = setInterval(this.closeVideoStart, (5 * 60 * 1000)) // 5分钟
|
||||
},
|
||||
over() {
|
||||
// 定时器手动关闭
|
||||
console.log('定时器自动关闭')
|
||||
this.$message.warning('单次播放时长已到5分钟自动关闭')
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
closeVideoStart() {
|
||||
this.dialogVideo = false
|
||||
this.dialogVideoHLS = false
|
||||
this.dialogVideoBack = false
|
||||
this.dialogVideoAll = false
|
||||
this.over()
|
||||
},
|
||||
// 播放
|
||||
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
|
||||
}
|
||||
},
|
||||
showVideo(row) {
|
||||
this.$message.warning('单次播放最多五分钟')
|
||||
this.start()
|
||||
if (row.VIDEO_TYPE === '0') {
|
||||
this.VIDEOURL = row.VIDEO_URL
|
||||
this.dialogVideo = true
|
||||
} else {
|
||||
requestFN(
|
||||
'/platformvideomanagement/getHlsPath',
|
||||
{
|
||||
INDEXCODE: row.CODE
|
||||
}
|
||||
).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.over()
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
setPosition() {
|
||||
this.dialogFormMap = false
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/aiboxVideo/edit',
|
||||
{
|
||||
LATITUDE: this.addForm.info.LATITUDE,
|
||||
LONGITUDE: this.addForm.info.LONGITUDE,
|
||||
AIBOX_RELATION_ID: this.AIBOX_RELATION_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.$message.success('定位成功')
|
||||
this.listLoading = false
|
||||
this.dialogForm = false
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
getRTSP(row) {
|
||||
requestFN(
|
||||
'/platformvideomanagement/getRtspPath',
|
||||
{
|
||||
INDEXCODE: row.CODE
|
||||
}
|
||||
).then((res) => {
|
||||
this.notify(res.data.url)
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
showAll() {
|
||||
const _selectData = this.$refs.multipleTable.selection
|
||||
if (_selectData == null || _selectData.length == 0) {
|
||||
this.$message({
|
||||
message: '请选中要播放的视频...',
|
||||
type: 'error'
|
||||
})
|
||||
return false
|
||||
}
|
||||
const ids = _selectData.map((item, index) => {
|
||||
return item.VIDEO_ID
|
||||
}).join(',')
|
||||
this.videoList = []
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/gateVideo/goAllVideo',
|
||||
{
|
||||
DATA_IDS: ids
|
||||
}
|
||||
).then((data) => {
|
||||
this.videoList = data.videoList
|
||||
this.listLoading = false
|
||||
this.dialogVideoAll = true
|
||||
this.playerList = []
|
||||
this.$nextTick(() => {
|
||||
for (let i = 0; i < this.videoList.length; i++) {
|
||||
if (!this.videoList[i].HLSVIDEOURL) continue
|
||||
// eslint-disable-next-line no-undef
|
||||
const player = new Aliplayer({
|
||||
'id': 'aLiVideoPlayer' + i,
|
||||
'source': this.videoList[i].HLSVIDEOURL.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')
|
||||
})
|
||||
this.playerList.push(player)
|
||||
}
|
||||
})
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 获取列表
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/aiboxVideo/list?showCount=' + this.listQuery.limit + '¤tPage=' + this.listQuery.page,
|
||||
{
|
||||
KEYWORDS: this.KEYWORDS,
|
||||
AIBOX_ID: this.$parent.AIBOX_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.varList = data.varList
|
||||
this.total = data.page.totalResult
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 添加
|
||||
handleAdd() {
|
||||
this.resetAddForm()
|
||||
this.addForm.dialogType = 'add'
|
||||
this.addForm.dialogVisible = true
|
||||
},
|
||||
|
||||
getAlgorithmList() {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/dictionaries/getLevels',
|
||||
{
|
||||
DICTIONARIES_ID: 'abee5542786e4b25a3bfc835215f2a28'
|
||||
}
|
||||
).then((data) => {
|
||||
this.algorithmList = data.list
|
||||
this.listLoading = false
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
handleAlgorithm(row, dialogType) {
|
||||
this.getAlgorithmList()
|
||||
this.resetAddForm()
|
||||
this.AIBOX_RELATION_ID = row.AIBOX_RELATION_ID
|
||||
this.addForm.info.VIDEO_ID = row.VIDEO_ID
|
||||
this.addForm.info.AIBOX_ID = row.AIBOX_ID
|
||||
this.addForm.info.VIDEO_NAME = row.VIDEO_NAME
|
||||
this.addForm.info.VIDEO_URL = row.VIDEO_URL
|
||||
this.addForm.info.CODE = row.CODE
|
||||
this.addForm.info.VIDEO_TYPE = parseInt(row.VIDEO_TYPE)
|
||||
if (dialogType === 'edit' || dialogType === 'view') {
|
||||
requestFN(
|
||||
'/aiboxAlgorithm/findByRelation',
|
||||
{
|
||||
AIBOX_RELATION_ID: row.AIBOX_RELATION_ID
|
||||
}
|
||||
).then((data) => {
|
||||
const result = data.dataPd
|
||||
this.addForm.info.ALGO_LIMIT = result.ALGO_LIMIT
|
||||
const bianmaList = result.BIANMA.replace(/,$/, '').split(',')
|
||||
for (let i = 0; i < bianmaList.length; i++) {
|
||||
this.addForm.info.ALGORITHM.push({ 'BIANMA': bianmaList[i] })
|
||||
}
|
||||
this.setDisable()
|
||||
this.listLoading = false
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
this.addForm.dialogType = dialogType
|
||||
this.addForm.dialogVisible = true
|
||||
},
|
||||
|
||||
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, 'PLATFORMVIDEOMANAGEMENT_ID', row.PLATFORMVIDEOMANAGEMENT_ID)
|
||||
},
|
||||
|
||||
// 获取详情
|
||||
getData() {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/gateVideo/goEdit',
|
||||
{
|
||||
GATEVIDEO_ID: this.form.GATEVIDEO_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.form = data.pd
|
||||
this.listLoading = false
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 保存
|
||||
save() {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/gateVideo/' + this.msg,
|
||||
{
|
||||
VIDEONAME: this.form.VIDEONAME,
|
||||
CODE: this.form.CODE,
|
||||
GATEVIDEO_ID: this.form.GATEVIDEO_ID,
|
||||
GATE_AREA_ID: this.$parent.GATE_AREA_ID,
|
||||
PLATFORMVIDEOMANAGEMENT_ID: this.form.PLATFORMVIDEOMANAGEMENT_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.dialogForm = false
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
resetAddForm() {
|
||||
this.AIBOX_RELATION_ID = ''
|
||||
this.addForm.info = {
|
||||
VIDEO_TYPE: '',
|
||||
VIDEO_NAME: '',
|
||||
VIDEO_URL: '',
|
||||
CODE: '',
|
||||
LATITUDE: '',
|
||||
LONGITUDE: '',
|
||||
ALGORITHM: [],
|
||||
ALGO_LIMIT: ''
|
||||
}
|
||||
this.addForm.dialogType = ''
|
||||
},
|
||||
changeType(e) {
|
||||
if (e === 1) {
|
||||
this.addForm.info.VIDEO_TYPE = 1
|
||||
} else {
|
||||
this.addForm.info.VIDEO_TYPE = 0
|
||||
}
|
||||
this.addForm.info.VIDEO_NAME = ''
|
||||
this.addForm.info.VIDEO_URL = ''
|
||||
this.addForm.info.CODE = ''
|
||||
this.addForm.info.LATITUDE = ''
|
||||
this.addForm.info.LONGITUDE = ''
|
||||
this.addForm.info.ALGO_LIMIT = ''
|
||||
this.$forceUpdate()
|
||||
},
|
||||
confirm() {
|
||||
if (this.addForm.info.ALGORITHM.length < 1) {
|
||||
this.$message.warning('选择的算法数量不能小于1')
|
||||
} else {
|
||||
for (let i = 0; i < this.addForm.info.ALGORITHM.length; i++) {
|
||||
if (this.addForm.info.ALGORITHM[i].BIANMA === '') {
|
||||
this.$message.warning('您选择的第' + (i + 1) + '个算法为空，请检查后提交')
|
||||
return
|
||||
}
|
||||
}
|
||||
let BIANMA = ''
|
||||
if (this.addForm.info.ALGORITHM) {
|
||||
for (let i = 0; i < this.addForm.info.ALGORITHM.length; i++) {
|
||||
if (this.addForm.info.ALGORITHM[i].BIANMA !== '' && this.addForm.info.ALGORITHM[i].BIANMA !== null) {
|
||||
BIANMA = BIANMA + this.addForm.info.ALGORITHM[i].BIANMA + ','
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$refs.addForm.validate(valid => {
|
||||
if (valid) {
|
||||
requestFN(
|
||||
'/aiboxAlgorithm/' + this.addForm.dialogType,
|
||||
{
|
||||
...this.addForm.info,
|
||||
BIANMA: BIANMA,
|
||||
AIBOX_RELATION_ID: this.AIBOX_RELATION_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.$message.success('保存成功')
|
||||
this.getList()
|
||||
this.addForm.dialogVisible = false
|
||||
}).catch((e) => {
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
handleDelete(id) {
|
||||
this.$confirm('确定要删除吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/aiboxVideo/delete',
|
||||
{
|
||||
AIBOX_RELATION_ID: id
|
||||
}
|
||||
).then((data) => {
|
||||
if (data.result === 'success') {
|
||||
this.$message({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
this.$message.error(data.msg)
|
||||
}
|
||||
this.listLoading = false
|
||||
this.varList = []
|
||||
this.listQuery.page = 1
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
batchDel() {
|
||||
const _selectData = this.$refs.multipleTable.selection
|
||||
if (_selectData == null || _selectData.length == 0) {
|
||||
this.$message({
|
||||
message: '请选中要删除的项...',
|
||||
type: 'error'
|
||||
})
|
||||
return false
|
||||
}
|
||||
const ids = _selectData.map((item, index) => {
|
||||
return item.GATEVIDEO_ID
|
||||
}).join(',')
|
||||
|
||||
this.$confirm('确定要删除选中的数据吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/gateVideo/deleteAll',
|
||||
{
|
||||
DATA_IDS: ids
|
||||
}
|
||||
).then(() => {
|
||||
this.listLoading = false
|
||||
this.varList = []
|
||||
this.listQuery.page = 1
|
||||
this.$refs.multipleTable.clearSelection()
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
goKeyReset() {
|
||||
this.KEYWORDS = ''
|
||||
this.getList()
|
||||
},
|
||||
|
||||
back() {
|
||||
if (this.addForm.dialogVisible) this.addForm.dialogVisible = false
|
||||
if (this.dialogVideo) this.dialogVideo = false
|
||||
if (this.dialogVideoBack) this.dialogVideoBack = 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()
|
||||
}
|
||||
},
|
||||
|
||||
resetForm() {
|
||||
this.form = {
|
||||
GATEVIDEO_ID: '',
|
||||
VIDEONAME: '', //
|
||||
PLATFORMVIDEOMANAGEMENT_ID: ''
|
||||
}
|
||||
},
|
||||
goBack() {
|
||||
this.$parent.activeName = 'List'
|
||||
this.$parent.GATE_MACHINE_ID = ''
|
||||
},
|
||||
// 判断按钮权限，用于是否显示按钮
|
||||
hasButton: function() {
|
||||
var keys = 'aiboxApply:add,aiboxApply:del,aiboxApply:edit'
|
||||
requestFN(
|
||||
'/head/hasButton',
|
||||
{
|
||||
keys: keys
|
||||
}
|
||||
).then((data) => {
|
||||
this.add = data.aiboxApplyfhadminadd // 新增权限
|
||||
this.del = data.aiboxApplyfhadmindel // 删除权限
|
||||
this.edit = data.aiboxApplyfhadminedit // 修改权限
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.ui-foot-xuan {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
position: inherit;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
background-color: #f1f1f1;
|
||||
text-align: center;
|
||||
}
|
||||
#map{
|
||||
width: 1000px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<transition name="fade" mode="out-in">
|
||||
<component :is="activeName"/>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import List from './components/list'
|
||||
import VideoList from './components/videoList'
|
||||
export default {
|
||||
components: { List, VideoList },
|
||||
data() {
|
||||
return {
|
||||
activeName: 'List',
|
||||
PROMISE_ID: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,454 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="关键词">
|
||||
<el-input v-model="KEYWORDS" placeholder="盒子名称"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="创建人">
|
||||
<el-input v-model="CREATOR" placeholder="创建人"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="dates"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
style="width: 80%;"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4" style="text-align: right">
|
||||
<el-form-item label-width="10px">
|
||||
<el-button v-waves type="primary" icon="el-icon-search" @click="getQuery">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button type="success" icon="el-icon-view" size="mini" @click="getReset">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
:data="varList"
|
||||
:header-cell-style="{
|
||||
'font-weight': 'bold',
|
||||
'color': '#000'
|
||||
}"
|
||||
tooltip-effect="dark"
|
||||
border
|
||||
fit
|
||||
highlight-current-row
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="50" align="center" />
|
||||
<el-table-column prop="AIBOX_NAME" label="盒子名称" align="center"/>
|
||||
<el-table-column prop="PROMISE_NAME" label="创建企业" align="center">
|
||||
<template slot-scope="{row}">
|
||||
<span v-if="row.CORP_NAME != null">{{ row.CORP_NAME }} </span>
|
||||
<span v-else>秦皇岛港股份有限公司</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="CREATOR_NAME" label="创建人" align="center"/>
|
||||
<el-table-column prop="CREATE_TIME" label="创建时间" align="center"/>
|
||||
<el-table-column prop="STATE" label="设备状态" align="center">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.STATE === '0' ? '离线' : '在线' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="CAPACITY" label="容量" align="center"/>
|
||||
<el-table-column label="操作" align="center" width="420">
|
||||
<template slot-scope="{row}">
|
||||
<el-button type="success" icon="el-icon-view" size="mini" @click="goView(row)">查看</el-button>
|
||||
<el-button v-if="edit" type="primary" icon="el-icon-edit" size="mini" @click="handleEdit(row)">修改</el-button>
|
||||
<el-button v-if="edit && row.STATE === '1'" style="background-color: grey; color: white" type="Info" icon="el-icon-error" plain @click="handleOnline(row.AIBOX_ID,0)">离线</el-button>
|
||||
<el-button v-if="edit && row.STATE === '0'" style="background-color: seagreen; color: white" type="info" icon="el-icon-success" plain @click="handleOnline(row.AIBOX_ID,1)">上线</el-button>
|
||||
<el-button v-if="del" type="danger" icon="el-icon-delete" plain @click="handleDelete(row.AIBOX_ID)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="page-btn-group">
|
||||
<div>
|
||||
<el-button v-if="add" 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>
|
||||
|
||||
<el-dialog
|
||||
:visible.sync="addForm.dialogVisible"
|
||||
:title="addForm.dialogType === 'add' ? '新增' : addForm.dialogType === 'edit' ? '编辑' : '查看'"
|
||||
width="40%">
|
||||
<el-form
|
||||
ref="addForm"
|
||||
:rules="addForm.rules"
|
||||
:model="addForm.info"
|
||||
label-position="right"
|
||||
label-width="150px"
|
||||
style="padding:10px 10px">
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-row>
|
||||
<el-form-item label="盒子名称：" prop="AIBOX_NAME">
|
||||
<el-input v-model="addForm.info.AIBOX_NAME" placeholder="请输入内容" style="width: 80%;"/>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-row>
|
||||
<el-form-item label="设备名称：" prop="DEVICE_NAME">
|
||||
<el-input v-model="addForm.info.DEVICE_NAME" placeholder="请输入内容" style="width: 80%;"/>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-row>
|
||||
<el-form-item label="序列号：" prop="SERIAL_NUMBER">
|
||||
<el-input v-model="addForm.info.SERIAL_NUMBER" placeholder="请输入内容" style="width: 80%;"/>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-row>
|
||||
<el-form-item label="软件版本：" prop="VERSION">
|
||||
<el-input v-model="addForm.info.VERSION" placeholder="请输入内容" style="width: 80%;"/>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-row>
|
||||
<el-form-item label="LAN1：" prop="LAN1">
|
||||
<el-input v-model="addForm.info.LAN1" placeholder="请输入内容" style="width: 80%;"/>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-row>
|
||||
<el-form-item label="LAN2：" prop="LAN2">
|
||||
<el-input v-model="addForm.info.LAN2" placeholder="请输入内容" style="width: 80%;"/>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-row>
|
||||
<el-form-item label="WFI：" prop="WFI">
|
||||
<el-input v-model="addForm.info.WFI" placeholder="请输入内容" style="width: 80%;"/>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-form-item label="容量：" prop="CAPACITY">
|
||||
<el-select v-model="addForm.info.CAPACITY" placeholder="请选择" style="width: 80%;" @change="$forceUpdate()">
|
||||
<el-option
|
||||
v-for="item in capacityList"
|
||||
:key="item.value"
|
||||
:label="item.value"
|
||||
:value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-form-item label="所属企业：" prop="CORPINFO_ID">
|
||||
<el-select v-model="addForm.info.CORPINFO_ID" style="width: 80%;">
|
||||
<el-option v-for="item in corpinfoAllList" :key="item.CORPINFO_ID" :value="item.CORPINFO_ID" :label="item.CORP_NAME"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-row>
|
||||
<el-form-item label="备注：" prop="BEIZHU">
|
||||
<el-input v-model="addForm.info.BEIZHU" placeholder="请输入内容" style="width: 80%;"/>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div v-if="addForm.dialogType!== 'view'" slot="footer" class="dialog-footer">
|
||||
<el-button @click="addForm.dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="confirm">提 交</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
|
||||
import { requestFN } from '@/utils/request'
|
||||
import waves from '@/directive/waves' // waves directive
|
||||
export default {
|
||||
components: { Pagination },
|
||||
directives: { waves },
|
||||
data() {
|
||||
return {
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 20
|
||||
},
|
||||
add: '',
|
||||
del: '',
|
||||
edit: '',
|
||||
total: 0,
|
||||
KEYWORDS: '',
|
||||
CREATOR: '',
|
||||
dates: [],
|
||||
varList: [],
|
||||
corpinfoAllList: [],
|
||||
capacityList: [{ name: '4', value: 4 }, { name: '8', value: 8 }, { name: '12', value: 12 }],
|
||||
stateList: [{ name: '在线', value: '1' }, { name: '离线', value: '0' }],
|
||||
addForm: {
|
||||
dialogType: 'add', // 增or改
|
||||
dialogVisible: false,
|
||||
rules: {
|
||||
AIBOX_NAME: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
DEVICE_NAME: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
SERIAL_NUMBER: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
VERSION: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
LAN1: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
LAN2: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
WFI: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
CORPINFO_ID: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
STATE: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
CAPACITY: [{ required: true, message: '不可为空', trigger: 'blur' }]
|
||||
},
|
||||
info: {
|
||||
AIBOX_NAME: '',
|
||||
DEVICE_NAME: '',
|
||||
SERIAL_NUMBER: '',
|
||||
VERSION: '',
|
||||
LAN1: '',
|
||||
LAN2: '',
|
||||
WFI: '',
|
||||
BEIZHU: '',
|
||||
CAPACITY: '',
|
||||
STATE: '',
|
||||
CORPINFO_ID: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getCoroInfoAll()
|
||||
this.getList()
|
||||
this.hasButton()
|
||||
},
|
||||
methods: {
|
||||
getCoroInfoAll() {
|
||||
requestFN(
|
||||
'/corpinfo/listSelect',
|
||||
{ }
|
||||
).then((data) => {
|
||||
this.corpinfoAllList = data.list
|
||||
}).catch((e) => {
|
||||
})
|
||||
},
|
||||
// 搜索
|
||||
getQuery() {
|
||||
this.getList()
|
||||
},
|
||||
// 搜索
|
||||
getReset() {
|
||||
this.KEYWORDS = ''
|
||||
this.CREATOR = ''
|
||||
this.dates = []
|
||||
this.listQuery = {
|
||||
page: 1,
|
||||
limit: 20
|
||||
}
|
||||
this.total = 0
|
||||
this.getQuery()
|
||||
},
|
||||
// 获取列表
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/aibox/list?showCount=' + this.listQuery.limit + '¤tPage=' + this.listQuery.page,
|
||||
{
|
||||
KEYWORDS: this.KEYWORDS,
|
||||
CREATOR: this.CREATOR,
|
||||
START_TIME: this.dates && this.dates[0],
|
||||
END_TIME: this.dates && this.dates[1]
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.varList = data.varList
|
||||
this.total = data.page.totalResult
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
// goView(AIBOX_ID) {
|
||||
// requestFN(
|
||||
// '/aibox/goEdit',
|
||||
// {
|
||||
// AIBOX_ID
|
||||
// }
|
||||
// ).then((data) => {
|
||||
// this.dialog.data = { ...data.varList, COVERPEOPLE: 'XXX' }
|
||||
// this.dialog.visible = true
|
||||
// })
|
||||
// },
|
||||
handleDelete(id) {
|
||||
this.$confirm('确定要删除吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/aibox/delete',
|
||||
{
|
||||
AIBOX_ID: id
|
||||
}
|
||||
).then((data) => {
|
||||
if (data.result === 'success') {
|
||||
this.$message({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
this.$message.error(data.msg)
|
||||
}
|
||||
this.listLoading = false
|
||||
this.varList = []
|
||||
this.listQuery.page = 1
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
confirm() {
|
||||
this.$refs.addForm.validate(valid => {
|
||||
this.addForm.info.LATITUDE = this.LATITUDE
|
||||
this.addForm.info.LONGITUDE = this.LONGITUDE
|
||||
if (valid) {
|
||||
requestFN(
|
||||
'/aibox/' + this.addForm.dialogType,
|
||||
{
|
||||
...this.addForm.info
|
||||
}
|
||||
).then((data) => {
|
||||
this.$message.success('保存成功')
|
||||
this.getList()
|
||||
this.addForm.dialogVisible = false
|
||||
}).catch((e) => {
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
handleOnline(AIBOX_ID, STATE) {
|
||||
requestFN(
|
||||
'/aibox/edit',
|
||||
{
|
||||
AIBOX_ID: AIBOX_ID,
|
||||
STATE: STATE
|
||||
}
|
||||
).then((data) => {
|
||||
this.$message.success('保存成功')
|
||||
this.getList()
|
||||
this.addForm.dialogVisible = false
|
||||
}).catch((e) => {
|
||||
})
|
||||
},
|
||||
resetAddForm() {
|
||||
this.addForm.info = {
|
||||
AIBOX_ID: '',
|
||||
AIBOX_NAME: '',
|
||||
CAPACITY: '',
|
||||
SERIAL_NUMBER: '',
|
||||
DEVICE_NAME: '',
|
||||
VERSION: '',
|
||||
LAN1: '',
|
||||
LAN2: '',
|
||||
WFI: '',
|
||||
STATE: '',
|
||||
BEIZHU: '',
|
||||
CORPINFO_ID: ''
|
||||
}
|
||||
},
|
||||
handleEdit(row) {
|
||||
this.resetAddForm()
|
||||
this.addForm.info.AIBOX_ID = row.AIBOX_ID
|
||||
this.addForm.info.AIBOX_NAME = row.AIBOX_NAME
|
||||
this.addForm.info.CAPACITY = row.CAPACITY
|
||||
this.addForm.info.DEVICE_NAME = row.DEVICE_NAME
|
||||
this.addForm.info.SERIAL_NUMBER = row.SERIAL_NUMBER
|
||||
this.addForm.info.VERSION = row.VERSION
|
||||
this.addForm.info.LAN1 = row.LAN1
|
||||
this.addForm.info.LAN2 = row.LAN2
|
||||
this.addForm.info.WFI = row.WFI
|
||||
this.addForm.info.CORPINFO_ID = row.CORPINFO_ID
|
||||
this.addForm.info.STATE = row.STATE
|
||||
this.addForm.info.BEIZHU = row.BEIZHU
|
||||
this.addForm.dialogType = 'edit'
|
||||
this.addForm.dialogVisible = true
|
||||
},
|
||||
goView(row) {
|
||||
this.resetAddForm()
|
||||
this.addForm.info.AIBOX_ID = row.AIBOX_ID
|
||||
this.addForm.info.AIBOX_NAME = row.AIBOX_NAME
|
||||
this.addForm.info.CAPACITY = row.CAPACITY
|
||||
this.addForm.info.DEVICE_NAME = row.DEVICE_NAME
|
||||
this.addForm.info.SERIAL_NUMBER = row.SERIAL_NUMBER
|
||||
this.addForm.info.VERSION = row.VERSION
|
||||
this.addForm.info.LAN1 = row.LAN1
|
||||
this.addForm.info.LAN2 = row.LAN2
|
||||
this.addForm.info.WFI = row.WFI
|
||||
this.addForm.info.CORPINFO_ID = row.CORPINFO_ID
|
||||
this.addForm.info.STATE = row.STATE
|
||||
this.addForm.info.BEIZHU = row.BEIZHU
|
||||
this.addForm.dialogType = 'view'
|
||||
this.addForm.dialogVisible = true
|
||||
},
|
||||
// 添加
|
||||
handleAdd() {
|
||||
this.resetAddForm()
|
||||
this.addForm.dialogType = 'add'
|
||||
this.addForm.dialogVisible = true
|
||||
},
|
||||
// 判断按钮权限，用于是否显示按钮
|
||||
hasButton: function() {
|
||||
var keys = 'aiboxManager:add,aiboxManager:del,aiboxManager:edit'
|
||||
requestFN(
|
||||
'/head/hasButton',
|
||||
{
|
||||
keys: keys
|
||||
}
|
||||
).then((data) => {
|
||||
this.add = data.aiboxManagerfhadminadd // 新增权限
|
||||
this.del = data.aiboxManagerfhadmindel // 删除权限
|
||||
this.edit = data.aiboxManagerfhadminedit // 修改权限
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<transition name="fade" mode="out-in">
|
||||
<component :is="activeName"/>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import List from './components/list'
|
||||
export default {
|
||||
components: { List },
|
||||
data() {
|
||||
return {
|
||||
activeName: 'List',
|
||||
PROMISE_ID: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,289 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="关键词">
|
||||
<el-input v-model="KEYWORDS" placeholder="盒子名称"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="创建人">
|
||||
<el-input v-model="CREATOR" placeholder="创建人"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="dates"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
style="width: 80%;"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label-width="10px">
|
||||
<el-button v-waves type="primary" icon="el-icon-search" @click="getQuery">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button type="success" icon="el-icon-view" size="mini" @click="getReset">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
:data="varList"
|
||||
:header-cell-style="{
|
||||
'font-weight': 'bold',
|
||||
'color': '#000'
|
||||
}"
|
||||
tooltip-effect="dark"
|
||||
border
|
||||
fit
|
||||
highlight-current-row
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="50" align="center" />
|
||||
<el-table-column prop="AIBOX_NAME" label="盒子名称" align="center"/>
|
||||
<el-table-column prop="PROMISE_NAME" label="创建企业" align="center">
|
||||
<template slot-scope="{row}">
|
||||
<span v-if="row.CORP_NAME != null">{{ row.CORP_NAME }} </span>
|
||||
<span v-else>秦皇岛港股份有限公司</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="CREATOR_NAME" label="创建人" align="center"/>
|
||||
<el-table-column prop="CREATE_TIME" label="创建时间" align="center"/>
|
||||
<el-table-column prop="STATE" label="设备状态" align="center">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.STATE === '0' ? '离线' : '在线' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="CAPACITY" label="配置容量/总容量" align="center">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.setCount + '/' + row.CAPACITY }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="REVIEW_COUNT" label="待审核数" align="center"/>
|
||||
<el-table-column label="操作" align="center" width="420">
|
||||
<template slot-scope="{row}">
|
||||
<el-button type="primary" icon="el-icon-s-tools" size="mini" @click="handleEdit(row)">查看</el-button>
|
||||
<el-button v-if="edit && row.STATE === '1'" style="background-color: grey; color: white" type="Info" icon="el-icon-error" plain @click="handleOnline(row.AIBOX_ID,0)">离线</el-button>
|
||||
<el-button v-if="edit && row.STATE === '0'" style="background-color: seagreen; color: white" type="info" icon="el-icon-success" plain @click="handleOnline(row.AIBOX_ID,1)">上线</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="page-btn-group">
|
||||
<div/>
|
||||
<pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
|
||||
import { requestFN } from '@/utils/request'
|
||||
import waves from '@/directive/waves' // waves directive
|
||||
export default {
|
||||
components: { Pagination },
|
||||
directives: { waves },
|
||||
data() {
|
||||
return {
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 20
|
||||
},
|
||||
total: 0,
|
||||
add: '',
|
||||
del: '',
|
||||
edit: '',
|
||||
KEYWORDS: '',
|
||||
CREATOR: '',
|
||||
dates: [],
|
||||
varList: [],
|
||||
corpinfoAllList: [],
|
||||
capacityList: [{ name: '4', value: 4 }, { name: '8', value: 8 }, { name: '12', value: 12 }],
|
||||
addForm: {
|
||||
dialogType: 'add', // 增or改
|
||||
dialogVisible: false,
|
||||
rules: {
|
||||
AIBOX_NAME: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
CAPACITY: [{ required: true, message: '不可为空', trigger: 'blur' }]
|
||||
},
|
||||
info: {
|
||||
AIBOX_NAME: '',
|
||||
CAPACITY: '',
|
||||
CORPINFO_ID: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getCoroInfoAll()
|
||||
this.getList()
|
||||
this.hasButton()
|
||||
},
|
||||
methods: {
|
||||
handleOnline(AIBOX_ID, STATE) {
|
||||
requestFN(
|
||||
'/aibox/edit',
|
||||
{
|
||||
AIBOX_ID: AIBOX_ID,
|
||||
STATE: STATE
|
||||
}
|
||||
).then((data) => {
|
||||
this.$message.success('保存成功')
|
||||
this.getList()
|
||||
this.addForm.dialogVisible = false
|
||||
}).catch((e) => {
|
||||
})
|
||||
},
|
||||
getCoroInfoAll() {
|
||||
requestFN(
|
||||
'/corpinfo/listSelect',
|
||||
{ }
|
||||
).then((data) => {
|
||||
this.corpinfoAllList = data.list
|
||||
}).catch((e) => {
|
||||
})
|
||||
},
|
||||
// 搜索
|
||||
getQuery() {
|
||||
this.getList()
|
||||
},
|
||||
// 搜索
|
||||
getReset() {
|
||||
this.KEYWORDS = ''
|
||||
this.dates = []
|
||||
this.CREATOR = ''
|
||||
this.listQuery = {
|
||||
page: 1,
|
||||
limit: 20
|
||||
}
|
||||
this.total = 0
|
||||
this.getQuery()
|
||||
},
|
||||
// 获取列表
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/aibox/list?showCount=' + this.listQuery.limit + '¤tPage=' + this.listQuery.page,
|
||||
{
|
||||
KEYWORDS: this.KEYWORDS,
|
||||
CREATOR: this.CREATOR,
|
||||
START_TIME: this.dates && this.dates[0],
|
||||
END_TIME: this.dates && this.dates[1]
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.varList = data.varList
|
||||
this.total = data.page.totalResult
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
goView(AIBOX_ID) {
|
||||
requestFN(
|
||||
'/aibox/goEdit',
|
||||
{
|
||||
AIBOX_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.dialog.data = { ...data.varList, COVERPEOPLE: 'XXX' }
|
||||
this.dialog.visible = true
|
||||
})
|
||||
},
|
||||
handleDelete(id) {
|
||||
this.$confirm('确定要删除吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/aibox/delete',
|
||||
{
|
||||
AIBOX_ID: id
|
||||
}
|
||||
).then((data) => {
|
||||
if (data.result === 'success') {
|
||||
this.$message({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
this.$message.error(data.msg)
|
||||
}
|
||||
this.listLoading = false
|
||||
this.varList = []
|
||||
this.listQuery.page = 1
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
confirm() {
|
||||
this.$refs.addForm.validate(valid => {
|
||||
if (valid) {
|
||||
requestFN(
|
||||
'/aibox/' + this.addForm.dialogType,
|
||||
{
|
||||
...this.addForm.info
|
||||
}
|
||||
).then((data) => {
|
||||
this.$message.success('保存成功')
|
||||
this.getList()
|
||||
this.addForm.dialogVisible = false
|
||||
}).catch((e) => {
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
resetAddForm() {
|
||||
this.addForm.info = {
|
||||
AIBOX_ID: '',
|
||||
AIBOX_NAME: '',
|
||||
CORPINFO_ID: ''
|
||||
}
|
||||
},
|
||||
handleEdit(row) {
|
||||
this.$parent.activeName = 'VideoList'
|
||||
this.$parent.AIBOX_ID = row.AIBOX_ID
|
||||
this.$parent.AIBOX_NAME = row.AIBOX_NAME
|
||||
this.$parent.CAPACITY = row.CAPACITY
|
||||
},
|
||||
// 添加
|
||||
handleAdd() {
|
||||
this.resetAddForm()
|
||||
this.addForm.dialogType = 'add'
|
||||
this.addForm.dialogVisible = true
|
||||
},
|
||||
// 判断按钮权限，用于是否显示按钮
|
||||
hasButton: function() {
|
||||
var keys = 'aiboxManager:add,aiboxManager:del,aiboxManager:edit'
|
||||
requestFN(
|
||||
'/head/hasButton',
|
||||
{
|
||||
keys: keys
|
||||
}
|
||||
).then((data) => {
|
||||
this.add = data.aiboxManagerfhadminadd // 新增权限
|
||||
this.del = data.aiboxManagerfhadmindel // 删除权限
|
||||
this.edit = data.aiboxManagerfhadminedit // 修改权限
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,882 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="3">
|
||||
<el-page-header content="算法配置审核" @back="goBack"/>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="关键词">
|
||||
<el-input v-model="KEYWORDS" placeholder="视频名称"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="审核状态：" class="is-required">
|
||||
<el-select v-model="STATE" placeholder="请选择" style="width: 205px">
|
||||
<el-option
|
||||
v-for="item in stateList"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label-width="10px">
|
||||
<el-button v-waves type="primary" icon="el-icon-search" @click="getQuery">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button type="success" icon="el-icon-view" size="mini" @click="getReset">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
ref="multipleTable"
|
||||
:data="varList"
|
||||
: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="VIDEO_NAME" label="视频名称" align="center"/>
|
||||
<el-table-column prop="VIDEO_URL" label="播放地址" align="center"/>
|
||||
<el-table-column prop="LONGITUDE" label="经纬度" align="center">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.LONGITUDE ? row.LONGITUDE + '-' + row.LATITUDE : '未定位' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="ALGO_NAME" label="算法" align="center">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.ALGO_NAME ? row.ALGO_NAME : '未配置' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="REVIEW_STATE" label="审核状态" align="center">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.REVIEW_STATE === '0' ? '未提交' : row.REVIEW_STATE === '1' ? '待审核' : row.REVIEW_STATE === '2' ? '审核打回' : row.REVIEW_STATE === '3' ? '审核通过' : '未提交' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="500">
|
||||
<template slot-scope="{row}">
|
||||
<el-button v-show="row.REVIEW_STATE" type="success" icon="el-icon-view" size="mini" @click="handleAlgorithm(row,'view')">查看</el-button>
|
||||
<el-button type="success" icon="el-icon-caret-right" size="mini" @click="showVideo(row)">播放</el-button>
|
||||
<el-button v-if="edit" type="info" icon="el-icon-location-information" size="mini" @click="handleMap(row)">定位</el-button>
|
||||
<el-button v-if="edit && row.VIDEO_TYPE === '0'" type="warning" size="mini" @click="getRTSP(row)">获取rtsp地址</el-button>
|
||||
<el-button v-if="edit && row.REVIEW_STATE && row.REVIEW_STATE === '1'" type="primary" icon="el-icon-edit" size="mini" @click="handleAlgorithm(row,'edit')">审核</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="page-btn-group">
|
||||
<div/>
|
||||
<pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
|
||||
</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="addForm.info.LONGITUDE" style="width: 200px" placeholder="请输入内容" disabled />
|
||||
<span>纬度：</span>
|
||||
<el-input v-model="addForm.info.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="addForm.dialogVisible" :title="addForm.dialogType==='add'?'新增': addForm.dialogType==='edit' ? '审核' : '查看'" width="600px">
|
||||
<el-form ref="addForm" :model="addForm.info" :rules="addForm.rules" label-width="110px" style="width: 600px;">
|
||||
<el-form-item label="视频名称" prop="VIDEO_NAME">
|
||||
<el-input :disabled="true" v-model="addForm.info.VIDEO_NAME" style="width: 80%;" placeholder="这里输入视频名称..." />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="摄像头编号" prop="CODE">
|
||||
<el-input :disabled="true" v-model="addForm.info.CODE" style="width: 80%;" placeholder="这里输入摄像头编号..." />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="算法数量：" prop="CAPACITY">
|
||||
<el-select :disabled="true" v-model="addForm.info.ALGO_LIMIT" style="width: 80%;" placeholder="请选择" @change="removeExceed()">
|
||||
<el-option
|
||||
v-for="item in algoLimitList"
|
||||
:key="item.value"
|
||||
:label="item.value"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-col v-for="(item, index) in form.ALGORITHM" :key="item.id">
|
||||
<el-form-item :label="'算法' + (index + 1) + '：'">
|
||||
<el-select :disabled="true" v-model="item.BIANMA" placeholder="请选择" style="width: 80%;" @change="setDisable">
|
||||
<el-option
|
||||
v-for="item in algorithmList"
|
||||
:key="item.DICTIONARIES_ID"
|
||||
:label="item.NAME"
|
||||
:value="item.BIANMA"
|
||||
:disabled="item.disabled"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button v-show="addForm.dialogType === 'view'" @click="back">返 回</el-button>
|
||||
<el-button v-show="addForm.dialogType !== 'view'" type="danger" @click="confirm('2')">打 回</el-button>
|
||||
<el-button v-show="addForm.dialogType !== 'view'" type="primary" @click="confirm('3')">通 过</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-if="dialogVideo" :visible.sync="dialogVideo" :show-close="false" title="视频2" 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" :show-close="false" 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%">
|
||||
<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>
|
||||
</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'
|
||||
|
||||
export default {
|
||||
components: { 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: '',
|
||||
del: '',
|
||||
edit: '',
|
||||
dialogFormMap: false,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 20
|
||||
},
|
||||
total: 0,
|
||||
KEYWORDS: '',
|
||||
STATE: '1',
|
||||
stateList: [{ name: '未提交', value: '0' }, { name: '待审核', value: '1' }, { name: '被打回', value: '2' }, { name: '审核通过', value: '3' }],
|
||||
dates: [],
|
||||
videoList: [],
|
||||
varList: [],
|
||||
LATITUDE: '',
|
||||
LONGITUDE: '',
|
||||
form: {
|
||||
ALGORITHM: []
|
||||
},
|
||||
zoom: 10,
|
||||
rules: {
|
||||
VIDEONAME: [{ required: true, message: '视频名称不能为空', trigger: 'blur' }],
|
||||
CODE: [{ required: true, message: '摄像头编号不能为空', trigger: 'blur' }]
|
||||
},
|
||||
dialogVideo: false,
|
||||
dialogVideoHLS: false,
|
||||
dialogVideoBack: false,
|
||||
dialogVideoAll: false,
|
||||
player: {},
|
||||
playerList: [],
|
||||
VIDEOURL: '',
|
||||
corpinfoAllList: [],
|
||||
algoLimitList: [{ name: '4', value: 4 }, { name: '8', value: 8 }, { name: '12', value: 12 }],
|
||||
algorithmList: [],
|
||||
levels: [],
|
||||
AIBOX_RELATION_ID: '',
|
||||
AIBOX_REVIEW_ID: '',
|
||||
addForm: {
|
||||
dialogType: 'add', // 增or改
|
||||
dialogVisible: false,
|
||||
rules: {
|
||||
VIDEO_NAME: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
CODE: [{ required: true, message: '不可为空', trigger: 'blur' }]
|
||||
},
|
||||
info: {
|
||||
AIBOX_ID: this.$parent.AIBOX_ID,
|
||||
VIDEO_ID: '',
|
||||
VIDEO_TYPE: 0,
|
||||
VIDEO_NAME: '', //
|
||||
VIDEO_URL: '',
|
||||
CODE: '',
|
||||
LATITUDE: '',
|
||||
LONGITUDE: '',
|
||||
ALGO_LIMIT: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getCoroInfoAll()
|
||||
this.getAlgorithmList()
|
||||
this.getList()
|
||||
this.hasButton()
|
||||
},
|
||||
beforeDestroy() {
|
||||
console.log('定时器关闭')
|
||||
clearInterval(this.timer)
|
||||
this.map && this.map.removeEventListener('click', this.MapClick)
|
||||
},
|
||||
methods: {
|
||||
// 选项处理
|
||||
setDisable() {
|
||||
this.algorithmList.forEach(item => {
|
||||
item.disabled = false
|
||||
this.form.ALGORITHM.forEach(value => {
|
||||
if (value.BIANMA === item.BIANMA) {
|
||||
item.disabled = true
|
||||
}
|
||||
})
|
||||
})
|
||||
this.$forceUpdate()
|
||||
},
|
||||
removeExceed() {
|
||||
if (this.addForm.info.ALGO_LIMIT < this.form.ALGORITHM.length) {
|
||||
while (this.addForm.info.ALGO_LIMIT < this.form.ALGORITHM.length) {
|
||||
this.form.ALGORITHM.pop()
|
||||
}
|
||||
}
|
||||
this.$forceUpdate()
|
||||
},
|
||||
addCollateral() {
|
||||
this.form.ALGORITHM.push({ BIANMA: '' })
|
||||
},
|
||||
bobilehandleSelected(row) {
|
||||
this.$set(this.addForm.info, 'VIDEO_URL', row.VIDEOURL)
|
||||
this.$set(this.addForm.info, 'VIDEO_NAME', row.VIDEONAME)
|
||||
this.$set(this.addForm.info, 'CODE', row.CODE)
|
||||
this.$set(this.addForm.info, 'VIDEO_ID', row.VIDEO_RESOURCES_ID)
|
||||
this.$forceUpdate()
|
||||
},
|
||||
getCoroInfoAll() {
|
||||
requestFN(
|
||||
'/corpinfo/listSelect',
|
||||
{ }
|
||||
).then((data) => {
|
||||
this.corpinfoAllList = data.list
|
||||
}).catch((e) => {
|
||||
})
|
||||
},
|
||||
selectBobileVideo() {
|
||||
this.$refs.bobileCamer.init()
|
||||
},
|
||||
// 搜索
|
||||
getReset() {
|
||||
this.KEYWORDS = ''
|
||||
this.STATE = ''
|
||||
this.listQuery = {
|
||||
page: 1,
|
||||
limit: 20
|
||||
}
|
||||
this.total = 0
|
||||
this.getQuery()
|
||||
},
|
||||
/**
|
||||
* 初始化天地图对象
|
||||
*/
|
||||
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.addForm.info.LONGITUDE && !this.addForm.info.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.addForm.info.LONGITUDE = lng
|
||||
this.addForm.info.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) {
|
||||
console.log(1111)
|
||||
this.marker && this.map.removeOverLay(this.marker)
|
||||
this.addForm.info.LONGITUDE = event.lnglat.getLng()
|
||||
this.addForm.info.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
|
||||
this.AIBOX_RELATION_ID = row.AIBOX_RELATION_ID
|
||||
this.addForm.info = {
|
||||
...this.addForm.info,
|
||||
LATITUDE: row.LATITUDE,
|
||||
LONGITUDE: row.LONGITUDE
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
if (!this.map) this.initMap(this.addForm.info.LONGITUDE, this.addForm.info.LATITUDE, 16)
|
||||
else this.initCenter(this.addForm.info.LONGITUDE, this.addForm.info.LATITUDE, 16)
|
||||
})
|
||||
},
|
||||
getRowKey(row) {
|
||||
return row.GATEVIDEO_ID
|
||||
},
|
||||
// 搜索
|
||||
getQuery() {
|
||||
this.$refs.multipleTable.clearSelection()
|
||||
this.getList()
|
||||
},
|
||||
// 五分钟关闭视频播放页面定时任务
|
||||
start() {
|
||||
console.log('定时器开启')
|
||||
this.timer = setInterval(this.closeVideoStart, (5 * 60 * 1000)) // 5分钟
|
||||
},
|
||||
over() {
|
||||
// 定时器手动关闭
|
||||
console.log('定时器自动关闭')
|
||||
this.$message.warning('单次播放时长已到5分钟自动关闭')
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
closeVideoStart() {
|
||||
this.dialogVideo = false
|
||||
this.dialogVideoHLS = false
|
||||
this.dialogVideoBack = false
|
||||
this.dialogVideoAll = false
|
||||
this.over()
|
||||
},
|
||||
// 播放
|
||||
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
|
||||
}
|
||||
},
|
||||
showVideo(row) {
|
||||
this.$message.warning('单次播放最多五分钟')
|
||||
this.start()
|
||||
if (row.VIDEO_TYPE === '0') {
|
||||
this.VIDEOURL = row.VIDEO_URL
|
||||
this.dialogVideo = true
|
||||
} else {
|
||||
requestFN(
|
||||
'/platformvideomanagement/getHlsPath',
|
||||
{
|
||||
INDEXCODE: row.CODE
|
||||
}
|
||||
).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.over()
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
setPosition() {
|
||||
this.dialogFormMap = false
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/aiboxVideo/edit',
|
||||
{
|
||||
LATITUDE: this.addForm.info.LATITUDE,
|
||||
LONGITUDE: this.addForm.info.LONGITUDE,
|
||||
AIBOX_RELATION_ID: this.AIBOX_RELATION_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.$message.success('定位成功')
|
||||
this.listLoading = false
|
||||
this.dialogForm = false
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
getRTSP(row) {
|
||||
requestFN(
|
||||
'/platformvideomanagement/getRtspPath',
|
||||
{
|
||||
INDEXCODE: row.CODE
|
||||
}
|
||||
).then((res) => {
|
||||
this.notify(res.data.url)
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
showAll() {
|
||||
const _selectData = this.$refs.multipleTable.selection
|
||||
if (_selectData == null || _selectData.length == 0) {
|
||||
this.$message({
|
||||
message: '请选中要播放的视频...',
|
||||
type: 'error'
|
||||
})
|
||||
return false
|
||||
}
|
||||
const ids = _selectData.map((item, index) => {
|
||||
return item.VIDEO_ID
|
||||
}).join(',')
|
||||
this.videoList = []
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/gateVideo/goAllVideo',
|
||||
{
|
||||
DATA_IDS: ids
|
||||
}
|
||||
).then((data) => {
|
||||
this.videoList = data.videoList
|
||||
this.listLoading = false
|
||||
this.dialogVideoAll = true
|
||||
this.playerList = []
|
||||
this.$nextTick(() => {
|
||||
for (let i = 0; i < this.videoList.length; i++) {
|
||||
if (!this.videoList[i].HLSVIDEOURL) continue
|
||||
console.log(this.videoList[i].HLSVIDEOURL.data.url)
|
||||
// eslint-disable-next-line no-undef
|
||||
const player = new Aliplayer({
|
||||
'id': 'aLiVideoPlayer' + i,
|
||||
'source': this.videoList[i].HLSVIDEOURL.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')
|
||||
})
|
||||
this.playerList.push(player)
|
||||
console.log(this.playerList)
|
||||
}
|
||||
})
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 获取列表
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/aiboxVideo/listForReview?showCount=' + this.listQuery.limit + '¤tPage=' + this.listQuery.page,
|
||||
{
|
||||
KEYWORDS: this.KEYWORDS,
|
||||
STATE: this.STATE,
|
||||
AIBOX_ID: this.$parent.AIBOX_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.varList = data.varList
|
||||
this.total = data.page.totalResult
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 添加
|
||||
handleAdd() {
|
||||
this.resetAddForm()
|
||||
this.addForm.dialogType = 'add'
|
||||
this.addForm.dialogVisible = true
|
||||
},
|
||||
|
||||
getAlgorithmList() {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/dictionaries/getLevels',
|
||||
{
|
||||
DICTIONARIES_ID: 'abee5542786e4b25a3bfc835215f2a28'
|
||||
}
|
||||
).then((data) => {
|
||||
this.algorithmList = data.list
|
||||
this.listLoading = false
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
handleAlgorithm(row, dialogType) {
|
||||
this.getAlgorithmList()
|
||||
this.form.ALGORITHM = []
|
||||
this.resetAddForm()
|
||||
this.AIBOX_RELATION_ID = row.AIBOX_RELATION_ID
|
||||
this.AIBOX_REVIEW_ID = row.AIBOX_REVIEW_ID
|
||||
this.addForm.info.VIDEO_ID = row.VIDEO_ID
|
||||
this.addForm.info.AIBOX_ID = row.AIBOX_ID
|
||||
this.addForm.info.VIDEO_NAME = row.VIDEO_NAME
|
||||
this.addForm.info.VIDEO_URL = row.VIDEO_URL
|
||||
this.addForm.info.CODE = row.CODE
|
||||
this.addForm.info.VIDEO_TYPE = parseInt(row.VIDEO_TYPE)
|
||||
if (dialogType === 'edit' || dialogType === 'view') {
|
||||
requestFN(
|
||||
'/aiboxAlgorithm/findByRelation',
|
||||
{
|
||||
AIBOX_RELATION_ID: row.AIBOX_RELATION_ID
|
||||
}
|
||||
).then((data) => {
|
||||
const result = data.dataPd
|
||||
this.addForm.info.ALGO_LIMIT = result.ALGO_LIMIT
|
||||
const bianmaList = result.BIANMA.replace(/,$/, '').split(',')
|
||||
for (let i = 0; i < bianmaList.length; i++) {
|
||||
this.form.ALGORITHM.push({ 'BIANMA': bianmaList[i] })
|
||||
}
|
||||
this.setDisable()
|
||||
this.listLoading = false
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
this.addForm.dialogType = dialogType
|
||||
this.addForm.dialogVisible = true
|
||||
},
|
||||
|
||||
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, 'PLATFORMVIDEOMANAGEMENT_ID', row.PLATFORMVIDEOMANAGEMENT_ID)
|
||||
},
|
||||
|
||||
// 获取详情
|
||||
getData() {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/gateVideo/goEdit',
|
||||
{
|
||||
GATEVIDEO_ID: this.form.GATEVIDEO_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.form = data.pd
|
||||
this.listLoading = false
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 保存
|
||||
save() {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/gateVideo/' + this.msg,
|
||||
{
|
||||
VIDEONAME: this.form.VIDEONAME,
|
||||
CODE: this.form.CODE,
|
||||
GATEVIDEO_ID: this.form.GATEVIDEO_ID,
|
||||
GATE_AREA_ID: this.$parent.GATE_AREA_ID,
|
||||
PLATFORMVIDEOMANAGEMENT_ID: this.form.PLATFORMVIDEOMANAGEMENT_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.dialogForm = false
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
resetAddForm() {
|
||||
this.AIBOX_RELATION_ID = ''
|
||||
this.addForm.info = {
|
||||
VIDEO_TYPE: '',
|
||||
VIDEO_NAME: '',
|
||||
VIDEO_URL: '',
|
||||
CODE: '',
|
||||
LATITUDE: '',
|
||||
LONGITUDE: '',
|
||||
ALGO_LIMIT: ''
|
||||
}
|
||||
this.addForm.dialogType = ''
|
||||
},
|
||||
changeType(e) {
|
||||
if (e === 1) {
|
||||
this.addForm.info.VIDEO_TYPE = 1
|
||||
} else {
|
||||
this.addForm.info.VIDEO_TYPE = 0
|
||||
}
|
||||
this.addForm.info.VIDEO_NAME = ''
|
||||
this.addForm.info.VIDEO_URL = ''
|
||||
this.addForm.info.CODE = ''
|
||||
this.addForm.info.LATITUDE = ''
|
||||
this.addForm.info.LONGITUDE = ''
|
||||
this.addForm.info.ALGO_LIMIT = ''
|
||||
this.$forceUpdate()
|
||||
},
|
||||
confirm(STATE) {
|
||||
let BIANMA = ''
|
||||
let ALGO_NAME = ''
|
||||
if (this.form.ALGORITHM) {
|
||||
for (let i = 0; i < this.form.ALGORITHM.length; i++) {
|
||||
BIANMA = BIANMA + this.form.ALGORITHM[i].BIANMA + ','
|
||||
}
|
||||
}
|
||||
if (BIANMA !== '') {
|
||||
const bianmaList = BIANMA.replace(/,$/, '').split(',')
|
||||
let algoName = ''
|
||||
for (let j = 0; j < bianmaList.length; j++) {
|
||||
for (let k = 0; k < this.algorithmList.length; k++) {
|
||||
if (bianmaList[j] === this.algorithmList[k].BIANMA) {
|
||||
algoName = algoName + this.algorithmList[k].NAME + '-'
|
||||
}
|
||||
}
|
||||
}
|
||||
ALGO_NAME = algoName.replace(/-$/, '')
|
||||
}
|
||||
this.$refs.addForm.validate(valid => {
|
||||
if (valid) {
|
||||
requestFN(
|
||||
'/aiboxAlgorithm/review',
|
||||
{
|
||||
AIBOX_REVIEW_ID: this.AIBOX_REVIEW_ID,
|
||||
AIBOX_RELATION_ID: this.AIBOX_RELATION_ID,
|
||||
AIBOX_ID: this.addForm.info.AIBOX_ID,
|
||||
ALGO_NAME: ALGO_NAME,
|
||||
STATE: STATE
|
||||
}
|
||||
).then((data) => {
|
||||
this.$message.success('保存成功')
|
||||
this.getList()
|
||||
this.addForm.dialogVisible = false
|
||||
}).catch((e) => {
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
handleDelete(id) {
|
||||
this.$confirm('确定要删除吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/aiboxVideo/delete',
|
||||
{
|
||||
AIBOX_RELATION_ID: id
|
||||
}
|
||||
).then((data) => {
|
||||
if (data.result === 'success') {
|
||||
this.$message({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
this.$message.error(data.msg)
|
||||
}
|
||||
this.listLoading = false
|
||||
this.varList = []
|
||||
this.listQuery.page = 1
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
batchDel() {
|
||||
const _selectData = this.$refs.multipleTable.selection
|
||||
if (_selectData == null || _selectData.length == 0) {
|
||||
this.$message({
|
||||
message: '请选中要删除的项...',
|
||||
type: 'error'
|
||||
})
|
||||
return false
|
||||
}
|
||||
const ids = _selectData.map((item, index) => {
|
||||
return item.GATEVIDEO_ID
|
||||
}).join(',')
|
||||
|
||||
this.$confirm('确定要删除选中的数据吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/gateVideo/deleteAll',
|
||||
{
|
||||
DATA_IDS: ids
|
||||
}
|
||||
).then(() => {
|
||||
this.listLoading = false
|
||||
this.varList = []
|
||||
this.listQuery.page = 1
|
||||
this.$refs.multipleTable.clearSelection()
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
goKeyReset() {
|
||||
this.KEYWORDS = ''
|
||||
this.getList()
|
||||
},
|
||||
|
||||
back() {
|
||||
if (this.addForm.dialogVisible) this.addForm.dialogVisible = false
|
||||
if (this.dialogVideo) this.dialogVideo = false
|
||||
if (this.dialogVideoBack) this.dialogVideoBack = 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()
|
||||
}
|
||||
},
|
||||
|
||||
resetForm() {
|
||||
this.form = {
|
||||
GATEVIDEO_ID: '',
|
||||
VIDEONAME: '', //
|
||||
PLATFORMVIDEOMANAGEMENT_ID: ''
|
||||
}
|
||||
},
|
||||
goBack() {
|
||||
this.$parent.activeName = 'List'
|
||||
this.$parent.GATE_MACHINE_ID = ''
|
||||
},
|
||||
// 判断按钮权限，用于是否显示按钮
|
||||
hasButton: function() {
|
||||
var keys = 'aiboxReview:add,aiboxReview:del,aiboxReview:edit'
|
||||
requestFN(
|
||||
'/head/hasButton',
|
||||
{
|
||||
keys: keys
|
||||
}
|
||||
).then((data) => {
|
||||
this.add = data.aiboxReviewfhadminadd // 新增权限
|
||||
this.del = data.aiboxReviewfhadmindel // 删除权限
|
||||
this.edit = data.aiboxReviewfhadminedit // 修改权限
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.ui-foot-xuan {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
position: inherit;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
background-color: #f1f1f1;
|
||||
text-align: center;
|
||||
}
|
||||
#map{
|
||||
width: 1000px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<transition name="fade" mode="out-in">
|
||||
<component :is="activeName"/>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import List from './components/list'
|
||||
import VideoList from './components/videoList'
|
||||
export default {
|
||||
components: { List, VideoList },
|
||||
data() {
|
||||
return {
|
||||
activeName: 'List',
|
||||
PROMISE_ID: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,294 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-if="visible"
|
||||
:visible.sync="visible"
|
||||
:before-close="handleClose"
|
||||
:append-to-body="true"
|
||||
title="移动摄像头"
|
||||
width="85%">
|
||||
<div class="app-container">
|
||||
<div class="filter-container">
|
||||
<el-form label-width="100px">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="5">
|
||||
<el-form-item label="关键字">
|
||||
<el-input v-model="serachForm.KEYWORDS" placeholder="请输入关键字" class="filter-item"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-form-item label="所属相关方：" >
|
||||
<el-select v-model="serachForm.UNITS_ID" filterable clearable placeholder="请选择施工相关方">
|
||||
<el-option v-for="item in unitsList" :key="item.UNITS_ID" :label="item.UNITS_NAME" :value="item.UNITS_ID" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-form-item label="使用单位：" >
|
||||
<el-input v-model="serachForm.UNIT_USE" placeholder="请输入内容"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-form-item label="负责人：" >
|
||||
<el-input v-model="serachForm.UNITS_USER_ID" style="width:206px" placeholder="请输入内容"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<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-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
ref="multipleTable"
|
||||
:data="varList"
|
||||
:row-key="getRowKey"
|
||||
border
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%">
|
||||
<el-table-column type="index" label="序号" width="55" align="center"/>
|
||||
<el-table-column :formatter="getUnitName" prop="UNITS_ID" label="所属相关方"/>
|
||||
<el-table-column prop="UNIT_USE" label="所属单位"/>
|
||||
<el-table-column prop="MODEL" label="视频型号"/>
|
||||
<el-table-column prop="VIDEONAME" label="视频名称"/>
|
||||
<el-table-column prop="VIDEOURL" label="播放地址"/>
|
||||
<el-table-column prop="CODE" label="摄像头编号"/>
|
||||
<el-table-column prop="PERSON" label="负责人"/>
|
||||
<el-table-column prop="PHONE" label="手机号"/>
|
||||
<el-table-column label="操作" width="250px">
|
||||
<template slot-scope="{row}">
|
||||
<el-button type="success" icon="el-icon-caret-right" size="mini" @click="showVideo(row)">播放</el-button>
|
||||
<el-button type="success" icon="el-icon-circle-check" size="mini" @click="selectVideo(row)">选择</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="page-btn-group">
|
||||
<div/>
|
||||
<pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="closeWindow">关 闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-dialog v-if="dialogVideo" :visible.sync="dialogVideo" title="视频" append-to-body 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>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
|
||||
import { requestFN } from '@/utils/request'
|
||||
import waves from '@/directive/waves'
|
||||
export default {
|
||||
components: { Pagination },
|
||||
directives: { waves },
|
||||
data() {
|
||||
return {
|
||||
// 播放
|
||||
add: '',
|
||||
del: '',
|
||||
edit: '',
|
||||
dialogVideo: false,
|
||||
dialogVideoHLS: false,
|
||||
dialogVideoBack: false,
|
||||
dialogVideoAll: false,
|
||||
VIDEOURL: '',
|
||||
player: {},
|
||||
//
|
||||
config: config,
|
||||
visible: false,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 20
|
||||
},
|
||||
total: 0,
|
||||
KEYWORDS: '',
|
||||
UNITS_ID: '',
|
||||
serachForm: {
|
||||
KEYWORDS: '',
|
||||
UNITS_USER_ID: '',
|
||||
UNIT_USE: '',
|
||||
UNITS_ID: ''
|
||||
},
|
||||
varList: [],
|
||||
unitsList: [],
|
||||
allCodes: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
async init() {
|
||||
this.visible = true
|
||||
this.varList = []
|
||||
await this.getUnitsList()
|
||||
this.getList()
|
||||
},
|
||||
getRowKey(row) {
|
||||
return row.VIDEO_RESOURCES_ID
|
||||
},
|
||||
getUnitsList() {
|
||||
requestFN(
|
||||
'/units/listAll'
|
||||
).then((data) => {
|
||||
this.unitsList = data.varList
|
||||
}).catch((e) => {
|
||||
})
|
||||
},
|
||||
getUnitName(e) {
|
||||
const unit = this.unitsList.filter(t => {
|
||||
return t.UNITS_ID == e.UNITS_ID
|
||||
})
|
||||
if (unit.length > 0) {
|
||||
return unit[0].UNITS_NAME
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
// 搜索
|
||||
getQuery() {
|
||||
this.$refs.multipleTable.clearSelection()
|
||||
this.getList()
|
||||
},
|
||||
// 播放
|
||||
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
|
||||
}
|
||||
},
|
||||
back() {
|
||||
if (this.dialogVideo) this.dialogVideo = false
|
||||
if (this.dialogVideoBack) this.dialogVideoBack = 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()
|
||||
}
|
||||
},
|
||||
showVideo(row) {
|
||||
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
|
||||
})
|
||||
}
|
||||
},
|
||||
// 播放 end-------------
|
||||
// 获取列表
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
this.varList = []
|
||||
requestFN(
|
||||
'/videoResources/listOptimize?showCount=' + this.listQuery.limit + '¤tPage=' + this.listQuery.page,
|
||||
{
|
||||
VIDEONAME: this.serachForm.KEYWORDS,
|
||||
PERSONNELMANAGEMENT_ID: this.serachForm.UNITS_USER_ID,
|
||||
UNIT_USE: this.serachForm.UNIT_USE,
|
||||
UNITS_ID: this.serachForm.UNITS_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.varList = data.varList
|
||||
this.total = data.page.totalResult
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
selectVideo(row) {
|
||||
this.$emit('bobilehandleSelected', row)
|
||||
this.closeWindow()
|
||||
},
|
||||
|
||||
goKeyReset() {
|
||||
this.serachForm = {
|
||||
KEYWORDS: '',
|
||||
UNITS_USER_ID: '',
|
||||
UNIT_USE: '',
|
||||
UNITS_ID: ''
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
|
||||
handleClose() {
|
||||
this.visible = false
|
||||
},
|
||||
closeWindow() {
|
||||
this.handleClose()
|
||||
},
|
||||
// 判断按钮权限，用于是否显示按钮
|
||||
hasButton: function() {
|
||||
var keys = 'aiboxManager:add,aiboxManager:del,aiboxManager:edit'
|
||||
requestFN(
|
||||
'/head/hasButton',
|
||||
{
|
||||
keys: keys
|
||||
}
|
||||
).then((data) => {
|
||||
this.add = data.aiboxManagerfhadminadd // 新增权限
|
||||
this.del = data.aiboxManagerfhadmindel // 删除权限
|
||||
this.edit = data.aiboxManagerfhadminedit // 修改权限
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.hide .el-upload--picture-card {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,290 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-form label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="关键词">
|
||||
<el-input v-model="KEYWORDS" placeholder="盒子名称"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label="创建人">
|
||||
<el-input v-model="CREATOR" placeholder="创建人"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="dates"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
style="width: 80%;"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-form-item label-width="10px">
|
||||
<el-button v-waves type="primary" icon="el-icon-search" @click="getQuery">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button type="success" icon="el-icon-view" size="mini" @click="getReset">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
:data="varList"
|
||||
:header-cell-style="{
|
||||
'font-weight': 'bold',
|
||||
'color': '#000'
|
||||
}"
|
||||
tooltip-effect="dark"
|
||||
border
|
||||
fit
|
||||
highlight-current-row
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="50" align="center" />
|
||||
<el-table-column prop="AIBOX_NAME" label="盒子名称" align="center"/>
|
||||
<el-table-column prop="PROMISE_NAME" label="创建企业" align="center">
|
||||
<template slot-scope="{row}">
|
||||
<span v-if="row.CORP_NAME != null">{{ row.CORP_NAME }} </span>
|
||||
<span v-else>秦皇岛港股份有限公司</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="CREATOR_NAME" label="创建人" align="center"/>
|
||||
<el-table-column prop="CREATE_TIME" label="创建时间" align="center"/>
|
||||
<el-table-column prop="STATE" label="设备状态" align="center">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.STATE === '0' ? '离线' : '在线' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="CAPACITY" label="视频数/总容量" align="center">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.setCount + '/' + row.CAPACITY }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="420">
|
||||
<template slot-scope="{row}">
|
||||
<el-button type="primary" icon="el-icon-s-tools" size="mini" @click="handleEdit(row)">查看</el-button>
|
||||
<el-button v-if="edit && row.STATE === '1'" style="background-color: grey; color: white" type="Info" icon="el-icon-error" plain @click="handleOnline(row.AIBOX_ID,0)">离线</el-button>
|
||||
<el-button v-if="edit && row.STATE === '0'" style="background-color: seagreen; color: white" type="info" icon="el-icon-success" plain @click="handleOnline(row.AIBOX_ID,1)">上线</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="page-btn-group">
|
||||
<div/>
|
||||
<pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
|
||||
</div>
|
||||
</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'
|
||||
|
||||
export default {
|
||||
components: { Pagination, TiandiMap },
|
||||
directives: { waves },
|
||||
data() {
|
||||
return {
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 20
|
||||
},
|
||||
add: '',
|
||||
del: '',
|
||||
edit: '',
|
||||
total: 0,
|
||||
KEYWORDS: '',
|
||||
CREATOR: '',
|
||||
dates: [],
|
||||
varList: [],
|
||||
corpinfoAllList: [],
|
||||
capacityList: [{ name: '4', value: 4 }, { name: '8', value: 8 }, { name: '12', value: 12 }],
|
||||
addForm: {
|
||||
dialogType: 'add', // 增or改
|
||||
dialogVisible: false,
|
||||
rules: {
|
||||
AIBOX_NAME: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
CAPACITY: [{ required: true, message: '不可为空', trigger: 'blur' }]
|
||||
},
|
||||
info: {
|
||||
AIBOX_NAME: '',
|
||||
CAPACITY: '',
|
||||
CORPINFO_ID: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getCoroInfoAll()
|
||||
this.getList()
|
||||
this.hasButton()
|
||||
},
|
||||
methods: {
|
||||
handleOnline(AIBOX_ID, STATE) {
|
||||
requestFN(
|
||||
'/aibox/edit',
|
||||
{
|
||||
AIBOX_ID: AIBOX_ID,
|
||||
STATE: STATE
|
||||
}
|
||||
).then((data) => {
|
||||
this.$message.success('保存成功')
|
||||
this.getList()
|
||||
this.addForm.dialogVisible = false
|
||||
}).catch((e) => {
|
||||
})
|
||||
},
|
||||
getCoroInfoAll() {
|
||||
requestFN(
|
||||
'/corpinfo/listSelect',
|
||||
{ }
|
||||
).then((data) => {
|
||||
this.corpinfoAllList = data.list
|
||||
}).catch((e) => {
|
||||
})
|
||||
},
|
||||
// 搜索
|
||||
getQuery() {
|
||||
this.getList()
|
||||
},
|
||||
// 搜索
|
||||
getReset() {
|
||||
this.KEYWORDS = ''
|
||||
this.dates = []
|
||||
this.CREATOR = ''
|
||||
this.listQuery = {
|
||||
page: 1,
|
||||
limit: 20
|
||||
}
|
||||
this.total = 0
|
||||
this.getQuery()
|
||||
},
|
||||
// 获取列表
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/aibox/list?showCount=' + this.listQuery.limit + '¤tPage=' + this.listQuery.page,
|
||||
{
|
||||
KEYWORDS: this.KEYWORDS,
|
||||
CREATOR: this.CREATOR,
|
||||
START_TIME: this.dates && this.dates[0],
|
||||
END_TIME: this.dates && this.dates[1]
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.varList = data.varList
|
||||
this.total = data.page.totalResult
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
goView(AIBOX_ID) {
|
||||
requestFN(
|
||||
'/aibox/goEdit',
|
||||
{
|
||||
AIBOX_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.dialog.data = { ...data.varList, COVERPEOPLE: 'XXX' }
|
||||
this.dialog.visible = true
|
||||
})
|
||||
},
|
||||
handleDelete(id) {
|
||||
this.$confirm('确定要删除吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/aibox/delete',
|
||||
{
|
||||
AIBOX_ID: id
|
||||
}
|
||||
).then((data) => {
|
||||
if (data.result === 'success') {
|
||||
this.$message({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
this.$message.error(data.msg)
|
||||
}
|
||||
this.listLoading = false
|
||||
this.varList = []
|
||||
this.listQuery.page = 1
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
confirm() {
|
||||
this.$refs.addForm.validate(valid => {
|
||||
if (valid) {
|
||||
requestFN(
|
||||
'/aibox/' + this.addForm.dialogType,
|
||||
{
|
||||
...this.addForm.info
|
||||
}
|
||||
).then((data) => {
|
||||
this.$message.success('保存成功')
|
||||
this.getList()
|
||||
this.addForm.dialogVisible = false
|
||||
}).catch((e) => {
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
resetAddForm() {
|
||||
this.addForm.info = {
|
||||
AIBOX_ID: '',
|
||||
AIBOX_NAME: '',
|
||||
CORPINFO_ID: ''
|
||||
}
|
||||
},
|
||||
handleEdit(row) {
|
||||
this.$parent.activeName = 'VideoList'
|
||||
this.$parent.AIBOX_ID = row.AIBOX_ID
|
||||
this.$parent.AIBOX_NAME = row.AIBOX_NAME
|
||||
this.$parent.CAPACITY = row.CAPACITY
|
||||
},
|
||||
// 添加
|
||||
handleAdd() {
|
||||
this.resetAddForm()
|
||||
this.addForm.dialogType = 'add'
|
||||
this.addForm.dialogVisible = true
|
||||
},
|
||||
// 判断按钮权限，用于是否显示按钮
|
||||
hasButton: function() {
|
||||
var keys = 'aiboxManager:add,aiboxManager:del,aiboxManager:edit'
|
||||
requestFN(
|
||||
'/head/hasButton',
|
||||
{
|
||||
keys: keys
|
||||
}
|
||||
).then((data) => {
|
||||
this.add = data.aiboxManagerfhadminadd // 新增权限
|
||||
this.del = data.aiboxManagerfhadmindel // 删除权限
|
||||
this.edit = data.aiboxManagerfhadminedit // 修改权限
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
v-if="visible"
|
||||
:visible.sync="visible"
|
||||
:before-close="handleClose"
|
||||
:append-to-body="true"
|
||||
title="平台视频"
|
||||
width="60%">
|
||||
<div class="app-container">
|
||||
<div class="filter-container">
|
||||
<el-input v-model="KEYWORDS" placeholder="请输入关键字" class="filter-item" style="width: 150px;"/>
|
||||
<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>
|
||||
</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="REGIONNAME" label="区域" />
|
||||
<el-table-column label="操作" align="left" width="500">
|
||||
<template slot-scope="{row}">
|
||||
<el-button v-show="row.in !== 1" type="success" icon="el-icon-caret-right" size="mini" @click="selectVideo(row)">选择</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="page-btn-group">
|
||||
<div/>
|
||||
<pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="closeWindow">关 闭</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
|
||||
import { requestFN } from '@/utils/request'
|
||||
import waves from '@/directive/waves'
|
||||
export default {
|
||||
components: { Pagination },
|
||||
directives: { waves },
|
||||
data() {
|
||||
return {
|
||||
add: '',
|
||||
del: '',
|
||||
edit: '',
|
||||
config: config,
|
||||
visible: false,
|
||||
listLoading: true,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 20
|
||||
},
|
||||
total: 0,
|
||||
KEYWORDS: '',
|
||||
varList: [],
|
||||
allCodes: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
async init() {
|
||||
this.visible = true
|
||||
this.varList = []
|
||||
this.KEYWORDS = ''
|
||||
await this.getAllList()
|
||||
this.getList()
|
||||
},
|
||||
getRowKey(row) {
|
||||
return row.PLATFORMVIDEOMANAGEMENT_ID
|
||||
},
|
||||
// 搜索
|
||||
getQuery() {
|
||||
this.$refs.multipleTable.clearSelection()
|
||||
this.getList()
|
||||
},
|
||||
|
||||
getAllList() {
|
||||
// return new Promise(resolve => {
|
||||
// requestFN(
|
||||
// '/videomanager/list?showCount=1000¤tPage=1',
|
||||
// {
|
||||
// OUTSOURCED_ID: this.$parent.$parent.OUTSOURCED_ID
|
||||
// }
|
||||
// ).then((data) => {
|
||||
// const tempList = data.varList
|
||||
// const allCodes = []
|
||||
// tempList.forEach(item => {
|
||||
// allCodes.push(item.INDEXCODE)
|
||||
// })
|
||||
// this.allCodes = allCodes
|
||||
// resolve()
|
||||
// }).catch((e) => {
|
||||
// })
|
||||
// })
|
||||
},
|
||||
|
||||
// 获取列表
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/platformvideomanagement/list?showCount=' + this.listQuery.limit + '¤tPage=' + this.listQuery.page,
|
||||
{
|
||||
KEYWORDS: this.KEYWORDS
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
const tempList = data.varList
|
||||
// tempList.forEach(item => {
|
||||
// if (this.allCodes.indexOf(item.INDEXCODE) !== -1) {
|
||||
// item.in = 1
|
||||
// }
|
||||
// })
|
||||
this.varList = tempList
|
||||
this.total = data.page.totalResult
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
selectVideo(row) {
|
||||
this.$emit('handleSelected', row)
|
||||
this.closeWindow()
|
||||
},
|
||||
|
||||
goKeyReset() {
|
||||
this.KEYWORDS = ''
|
||||
this.getList()
|
||||
},
|
||||
|
||||
handleClose() {
|
||||
this.visible = false
|
||||
},
|
||||
closeWindow() {
|
||||
this.handleClose()
|
||||
},
|
||||
// 判断按钮权限，用于是否显示按钮
|
||||
hasButton: function() {
|
||||
var keys = 'aiboxVideo:add,aiboxVideo:del,aiboxVideo:edit'
|
||||
requestFN(
|
||||
'/head/hasButton',
|
||||
{
|
||||
keys: keys
|
||||
}
|
||||
).then((data) => {
|
||||
this.add = data.aiboxVideofhadminadd // 新增权限
|
||||
this.del = data.aiboxVideofhadmindel // 删除权限
|
||||
this.edit = data.aiboxVideofhadminedit // 修改权限
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.hide .el-upload--picture-card {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,803 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="3">
|
||||
<el-page-header content="分析视频管理" @back="goBack"/>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="关键词">
|
||||
<el-input v-model="KEYWORDS" placeholder="视频名称"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label-width="10px">
|
||||
<el-button v-waves type="primary" icon="el-icon-search" @click="getQuery">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button type="success" icon="el-icon-view" size="mini" @click="getReset">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
ref="multipleTable"
|
||||
:data="varList"
|
||||
: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="VIDEO_NAME" label="视频名称" align="center"/>
|
||||
<el-table-column prop="VIDEO_URL" label="播放地址" align="center"/>
|
||||
<el-table-column prop="LONGITUDE" label="经纬度" align="center">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.LONGITUDE ? row.LONGITUDE + '-' + row.LATITUDE : '未定位' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="ISONLINE" label="状态" align="center">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.ISONLINE === '0' ? '离线' : '在线' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="580">
|
||||
<template slot-scope="{row}">
|
||||
<el-button type="success" icon="el-icon-caret-right" size="mini" @click="showVideo(row)">播放</el-button>
|
||||
<el-button v-if="edit" type="info" icon="el-icon-location-information" size="mini" @click="handleMap(row)">定位</el-button>
|
||||
<el-button v-if="edit" type="primary" icon="el-icon-edit" size="mini" @click="handleEdit(row)">编辑</el-button>
|
||||
<el-button v-if="edit && row.ISONLINE === '1'" style="background-color: grey; color: white" type="Info" icon="el-icon-error" plain @click="handleOnline(row.AIBOX_RELATION_ID,0)">离线</el-button>
|
||||
<el-button v-if="edit && row.ISONLINE === '0'" style="background-color: seagreen; color: white" type="info" icon="el-icon-success" plain @click="handleOnline(row.AIBOX_RELATION_ID,1)">上线</el-button>
|
||||
<el-button v-show="edit && row.VIDEO_TYPE === '1'" type="warning" size="mini" @click="getRTSP(row)">获取rtsp地址</el-button>
|
||||
<el-button v-if="del" type="danger" icon="el-icon-delete" plain @click="handleDelete(row.AIBOX_RELATION_ID)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="page-btn-group">
|
||||
<div>
|
||||
<el-button v-if="add" v-show="$parent.CAPACITY > varList.length" 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="getList" />
|
||||
</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="addForm.info.LONGITUDE" style="width: 200px" placeholder="请输入内容" disabled />
|
||||
<span>纬度：</span>
|
||||
<el-input v-model="addForm.info.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="addForm.dialogVisible" :title="addForm.dialogType==='add'?'新增':'编辑'" width="600px">
|
||||
<el-form ref="addForm" :model="addForm.info" :rules="addForm.rules" label-width="110px" style="width: 500px;">
|
||||
<el-form-item label="视频类型">
|
||||
<el-radio-group v-model="addForm.info.VIDEO_TYPE" @change="changeType($event)">
|
||||
<el-radio :label="0">视频监控</el-radio>
|
||||
<el-radio :label="1">平台视频</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="addForm.info.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="addForm.info.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="VIDEO_NAME">
|
||||
<el-input :disabled="true" v-model="addForm.info.VIDEO_NAME" placeholder="这里输入视频名称..." />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="摄像头编号" prop="CODE">
|
||||
<el-input :disabled="true" v-model="addForm.info.CODE" placeholder="这里输入摄像头编号..." />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="back">取 消</el-button>
|
||||
<el-button type="primary" @click="confirm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-if="dialogVideo" :visible.sync="dialogVideo" :show-close="false" title="视频2" 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" :show-close="false" 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%">
|
||||
<div v-if="video.HLSVIDEOURL" :id="'aLiVideoPlayer'+index" class="prism-player"/>
|
||||
</div>
|
||||
<div v-for="(video2,index2) in video2List" :key="index2" style="margin-bottom: 10px;width: 45%">
|
||||
<iframe :src="video2.VIDEOURL" width="100%" height="380" allowfullscreen allow="autoplay; fullscreen;microphone" style="position: relative;border:none"/>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="back">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<platformvideo ref="platformvideo" @handleSelected="handleSelected"/>
|
||||
<BobileCamer ref="bobileCamer" @bobilehandleSelected="bobilehandleSelected"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
|
||||
import { requestFN } from '@/utils/request'
|
||||
import waves from '@/directive/waves' // waves directive
|
||||
import Platformvideo from './platformvideo.vue'
|
||||
import BobileCamer from './bobileCamer.vue'
|
||||
import TiandiMap from '../../../../components/TianMap/TiandiMap'
|
||||
|
||||
export default {
|
||||
components: { Platformvideo, Pagination, TiandiMap, BobileCamer },
|
||||
directives: { waves },
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
marker: null,
|
||||
BMap: '',
|
||||
clientHeight: 500,
|
||||
inputLocation: '',
|
||||
msg: 'add',
|
||||
video2List: [],
|
||||
config: config,
|
||||
listLoading: true,
|
||||
dialogForm: false,
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
dialogSelect: false,
|
||||
add: '',
|
||||
del: '',
|
||||
edit: '',
|
||||
dialogFormMap: false,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 20
|
||||
},
|
||||
total: 0,
|
||||
KEYWORDS: '',
|
||||
dates: [],
|
||||
videoList: [],
|
||||
varList: [],
|
||||
LATITUDE: '',
|
||||
LONGITUDE: '',
|
||||
form: {
|
||||
GATEVIDEO_ID: '',
|
||||
VIDEONAME: '', //
|
||||
CODE: '', //
|
||||
PLATFORMVIDEOMANAGEMENT_ID: '',
|
||||
LATITUDE: '',
|
||||
LONGITUDE: ''
|
||||
},
|
||||
zoom: 10,
|
||||
rules: {
|
||||
VIDEONAME: [{ required: true, message: '视频名称不能为空', trigger: 'blur' }],
|
||||
CODE: [{ required: true, message: '摄像头编号不能为空', trigger: 'blur' }]
|
||||
},
|
||||
dialogVideo: false,
|
||||
dialogVideoHLS: false,
|
||||
dialogVideoBack: false,
|
||||
dialogVideoAll: false,
|
||||
player: {},
|
||||
playerList: [],
|
||||
VIDEOURL: '',
|
||||
corpinfoAllList: [],
|
||||
capacityList: [{ name: '4', value: 4 }, { name: '8', value: 8 }, { name: '12', value: 12 }],
|
||||
AIBOX_RELATION_ID: '',
|
||||
addForm: {
|
||||
dialogType: 'add', // 增or改
|
||||
dialogVisible: false,
|
||||
rules: {
|
||||
VIDEO_NAME: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
CODE: [{ required: true, message: '不可为空', trigger: 'blur' }]
|
||||
},
|
||||
info: {
|
||||
AIBOX_ID: this.$parent.AIBOX_ID,
|
||||
VIDEO_TYPE: 0,
|
||||
VIDEO_NAME: '', //
|
||||
VIDEO_URL: '',
|
||||
CODE: '',
|
||||
LATITUDE: '',
|
||||
LONGITUDE: '',
|
||||
ALGO_LIMIT: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getCoroInfoAll()
|
||||
this.getList()
|
||||
this.hasButton()
|
||||
},
|
||||
beforeDestroy() {
|
||||
console.log('定时器关闭')
|
||||
clearInterval(this.timer)
|
||||
this.map && this.map.removeEventListener('click', this.MapClick)
|
||||
},
|
||||
methods: {
|
||||
handleOnline(AIBOX_RELATION_ID, ISONLINE) {
|
||||
requestFN(
|
||||
'/aiboxVideo/edit',
|
||||
{
|
||||
AIBOX_RELATION_ID: AIBOX_RELATION_ID,
|
||||
ISONLINE: ISONLINE
|
||||
}
|
||||
).then((data) => {
|
||||
this.$message.success('保存成功')
|
||||
this.getList()
|
||||
this.addForm.dialogVisible = false
|
||||
}).catch((e) => {
|
||||
})
|
||||
},
|
||||
|
||||
handleSelected(row) {
|
||||
this.$set(this.addForm.info, 'VIDEO_NAME', row.NAME)
|
||||
this.$set(this.addForm.info, 'VIDEO_URL', row.REGIONPATH)
|
||||
this.$set(this.addForm.info, 'CODE', row.INDEXCODE)
|
||||
this.$set(this.addForm.info, 'VIDEO_ID', row.PLATFORMVIDEOMANAGEMENT_ID)
|
||||
},
|
||||
|
||||
bobilehandleSelected(row) {
|
||||
this.$set(this.addForm.info, 'VIDEO_URL', row.VIDEOURL)
|
||||
this.$set(this.addForm.info, 'VIDEO_NAME', row.VIDEONAME)
|
||||
this.$set(this.addForm.info, 'CODE', row.CODE)
|
||||
this.$set(this.addForm.info, 'VIDEO_ID', row.VIDEO_RESOURCES_ID)
|
||||
this.$forceUpdate()
|
||||
},
|
||||
getCoroInfoAll() {
|
||||
requestFN(
|
||||
'/corpinfo/listSelect',
|
||||
{ }
|
||||
).then((data) => {
|
||||
this.corpinfoAllList = data.list
|
||||
}).catch((e) => {
|
||||
})
|
||||
},
|
||||
selectBobileVideo() {
|
||||
this.$refs.bobileCamer.init()
|
||||
},
|
||||
// 搜索
|
||||
getReset() {
|
||||
this.KEYWORDS = ''
|
||||
this.listQuery = {
|
||||
page: 1,
|
||||
limit: 20
|
||||
}
|
||||
this.total = 0
|
||||
this.getQuery()
|
||||
},
|
||||
/**
|
||||
* 初始化天地图对象
|
||||
*/
|
||||
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.addForm.info.LONGITUDE && !this.addForm.info.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.addForm.info.LONGITUDE = lng
|
||||
this.addForm.info.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) {
|
||||
console.log(1111)
|
||||
this.marker && this.map.removeOverLay(this.marker)
|
||||
this.addForm.info.LONGITUDE = event.lnglat.getLng()
|
||||
this.addForm.info.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
|
||||
this.AIBOX_RELATION_ID = row.AIBOX_RELATION_ID
|
||||
this.addForm.info = {
|
||||
...this.addForm.info,
|
||||
LATITUDE: row.LATITUDE,
|
||||
LONGITUDE: row.LONGITUDE
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
if (!this.map) this.initMap(this.addForm.info.LONGITUDE, this.addForm.info.LATITUDE, 16)
|
||||
else this.initCenter(this.addForm.info.LONGITUDE, this.addForm.info.LATITUDE, 16)
|
||||
})
|
||||
},
|
||||
getRowKey(row) {
|
||||
return row.GATEVIDEO_ID
|
||||
},
|
||||
// 搜索
|
||||
getQuery() {
|
||||
this.$refs.multipleTable.clearSelection()
|
||||
this.getList()
|
||||
},
|
||||
// 五分钟关闭视频播放页面定时任务
|
||||
start() {
|
||||
console.log('定时器开启')
|
||||
this.timer = setInterval(this.closeVideoStart, (5 * 60 * 1000)) // 5分钟
|
||||
},
|
||||
over() {
|
||||
// 定时器手动关闭
|
||||
console.log('定时器自动关闭')
|
||||
this.$message.warning('单次播放时长已到5分钟自动关闭')
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
closeVideoStart() {
|
||||
this.dialogVideo = false
|
||||
this.dialogVideoHLS = false
|
||||
this.dialogVideoBack = false
|
||||
this.dialogVideoAll = false
|
||||
this.over()
|
||||
},
|
||||
// 播放
|
||||
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
|
||||
}
|
||||
},
|
||||
showVideo(row) {
|
||||
this.$message.warning('单次播放最多五分钟')
|
||||
this.start()
|
||||
if (row.VIDEO_TYPE === '0') {
|
||||
this.VIDEOURL = row.VIDEO_URL
|
||||
this.dialogVideo = true
|
||||
} else {
|
||||
requestFN(
|
||||
'/platformvideomanagement/getHlsPath',
|
||||
{
|
||||
INDEXCODE: row.CODE
|
||||
}
|
||||
).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.over()
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
setPosition() {
|
||||
this.dialogFormMap = false
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/aiboxVideo/edit',
|
||||
{
|
||||
LATITUDE: this.addForm.info.LATITUDE,
|
||||
LONGITUDE: this.addForm.info.LONGITUDE,
|
||||
AIBOX_RELATION_ID: this.AIBOX_RELATION_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.$message.success('定位成功')
|
||||
this.listLoading = false
|
||||
this.dialogForm = false
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
getRTSP(row) {
|
||||
requestFN(
|
||||
'/platformvideomanagement/getRtspPath',
|
||||
{
|
||||
INDEXCODE: row.CODE
|
||||
}
|
||||
).then((res) => {
|
||||
this.notify(res.data.url)
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
showAll() {
|
||||
const _selectData = this.$refs.multipleTable.selection
|
||||
if (_selectData == null || _selectData.length == 0) {
|
||||
this.$message({
|
||||
message: '请选中要播放的视频...',
|
||||
type: 'error'
|
||||
})
|
||||
return false
|
||||
}
|
||||
this.video2List = []
|
||||
const ids = _selectData.map((item, index) => {
|
||||
if (item.VIDEO_TYPE === '1') {
|
||||
return item.VIDEO_ID
|
||||
} else if (item.VIDEO_TYPE === '0') {
|
||||
this.video2List.push({ 'VIDEOURL': item.VIDEO_URL })
|
||||
}
|
||||
}).join(',')
|
||||
this.videoList = []
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/gateVideo/goAllVideoForAlarm',
|
||||
{
|
||||
DATA_IDS: ids
|
||||
}
|
||||
).then((data) => {
|
||||
this.videoList = data.videoList
|
||||
this.listLoading = false
|
||||
this.dialogVideoAll = true
|
||||
this.playerList = []
|
||||
this.$nextTick(() => {
|
||||
for (let i = 0; i < this.videoList.length; i++) {
|
||||
if (!this.videoList[i].HLSVIDEOURL) continue
|
||||
console.log(this.videoList[i].HLSVIDEOURL.data.url)
|
||||
// eslint-disable-next-line no-undef
|
||||
const player = new Aliplayer({
|
||||
'id': 'aLiVideoPlayer' + i,
|
||||
'source': this.videoList[i].HLSVIDEOURL.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')
|
||||
})
|
||||
this.playerList.push(player)
|
||||
console.log(this.playerList)
|
||||
}
|
||||
})
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 获取列表
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/aiboxVideo/list?showCount=' + this.listQuery.limit + '¤tPage=' + this.listQuery.page,
|
||||
{
|
||||
KEYWORDS: this.KEYWORDS,
|
||||
AIBOX_ID: this.$parent.AIBOX_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.varList = data.varList
|
||||
this.total = data.page.totalResult
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 添加
|
||||
handleAdd() {
|
||||
this.resetAddForm()
|
||||
this.addForm.dialogType = 'add'
|
||||
this.addForm.dialogVisible = true
|
||||
},
|
||||
|
||||
handleEdit(row) {
|
||||
this.resetAddForm()
|
||||
this.AIBOX_RELATION_ID = row.AIBOX_RELATION_ID
|
||||
this.addForm.info.VIDEO_ID = row.VIDEO_ID
|
||||
this.addForm.info.VIDEO_NAME = row.VIDEO_NAME
|
||||
this.addForm.info.VIDEO_URL = row.VIDEO_URL
|
||||
this.addForm.info.CODE = row.CODE
|
||||
this.addForm.info.VIDEO_TYPE = parseInt(row.VIDEO_TYPE)
|
||||
this.addForm.dialogType = 'edit'
|
||||
this.addForm.dialogVisible = true
|
||||
},
|
||||
|
||||
selectVideo(row) {
|
||||
this.$refs.platformvideo.init()
|
||||
},
|
||||
|
||||
// 获取详情
|
||||
getData() {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/gateVideo/goEdit',
|
||||
{
|
||||
GATEVIDEO_ID: this.form.GATEVIDEO_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.form = data.pd
|
||||
this.listLoading = false
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 保存
|
||||
save() {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/gateVideo/' + this.msg,
|
||||
{
|
||||
VIDEONAME: this.form.VIDEONAME,
|
||||
CODE: this.form.CODE,
|
||||
GATEVIDEO_ID: this.form.GATEVIDEO_ID,
|
||||
GATE_AREA_ID: this.$parent.GATE_AREA_ID,
|
||||
PLATFORMVIDEOMANAGEMENT_ID: this.form.PLATFORMVIDEOMANAGEMENT_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.dialogForm = false
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
resetAddForm() {
|
||||
this.AIBOX_RELATION_ID = ''
|
||||
this.addForm.info = {
|
||||
VIDEO_TYPE: '',
|
||||
VIDEO_NAME: '',
|
||||
VIDEO_URL: '',
|
||||
CODE: '',
|
||||
LATITUDE: '',
|
||||
LONGITUDE: '',
|
||||
ALGO_LIMIT: ''
|
||||
}
|
||||
this.addForm.dialogType = ''
|
||||
},
|
||||
changeType(e) {
|
||||
if (e === 1) {
|
||||
this.addForm.info.VIDEO_TYPE = 1
|
||||
} else {
|
||||
this.addForm.info.VIDEO_TYPE = 0
|
||||
}
|
||||
this.addForm.info.VIDEO_NAME = ''
|
||||
this.addForm.info.VIDEO_URL = ''
|
||||
this.addForm.info.CODE = ''
|
||||
this.addForm.info.LATITUDE = ''
|
||||
this.addForm.info.LONGITUDE = ''
|
||||
this.addForm.info.ALGO_LIMIT = ''
|
||||
this.$forceUpdate()
|
||||
},
|
||||
confirm() {
|
||||
this.$refs.addForm.validate(valid => {
|
||||
if (valid) {
|
||||
requestFN(
|
||||
'/aiboxVideo/' + this.addForm.dialogType,
|
||||
{
|
||||
...this.addForm.info,
|
||||
AIBOX_ID: this.$parent.AIBOX_ID,
|
||||
AIBOX_RELATION_ID: this.AIBOX_RELATION_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.$message.success('保存成功')
|
||||
this.getList()
|
||||
this.addForm.dialogVisible = false
|
||||
}).catch((e) => {
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
handleDelete(id) {
|
||||
this.$confirm('确定要删除吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/aiboxVideo/delete',
|
||||
{
|
||||
AIBOX_RELATION_ID: id
|
||||
}
|
||||
).then((data) => {
|
||||
if (data.result === 'success') {
|
||||
this.$message({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
this.$message.error(data.msg)
|
||||
}
|
||||
this.listLoading = false
|
||||
this.varList = []
|
||||
this.listQuery.page = 1
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
batchDel() {
|
||||
const _selectData = this.$refs.multipleTable.selection
|
||||
if (_selectData == null || _selectData.length == 0) {
|
||||
this.$message({
|
||||
message: '请选中要删除的项...',
|
||||
type: 'error'
|
||||
})
|
||||
return false
|
||||
}
|
||||
const ids = _selectData.map((item, index) => {
|
||||
return item.GATEVIDEO_ID
|
||||
}).join(',')
|
||||
|
||||
this.$confirm('确定要删除选中的数据吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/gateVideo/deleteAll',
|
||||
{
|
||||
DATA_IDS: ids
|
||||
}
|
||||
).then(() => {
|
||||
this.listLoading = false
|
||||
this.varList = []
|
||||
this.listQuery.page = 1
|
||||
this.$refs.multipleTable.clearSelection()
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
goKeyReset() {
|
||||
this.KEYWORDS = ''
|
||||
this.getList()
|
||||
},
|
||||
|
||||
back() {
|
||||
if (this.addForm.dialogVisible) this.addForm.dialogVisible = false
|
||||
if (this.dialogVideo) this.dialogVideo = false
|
||||
if (this.dialogVideoBack) this.dialogVideoBack = 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()
|
||||
}
|
||||
},
|
||||
|
||||
resetForm() {
|
||||
this.form = {
|
||||
GATEVIDEO_ID: '',
|
||||
VIDEONAME: '', //
|
||||
PLATFORMVIDEOMANAGEMENT_ID: ''
|
||||
}
|
||||
},
|
||||
goBack() {
|
||||
this.$parent.activeName = 'List'
|
||||
this.$parent.GATE_MACHINE_ID = ''
|
||||
},
|
||||
// 判断按钮权限，用于是否显示按钮
|
||||
hasButton: function() {
|
||||
var keys = 'aiboxVideo:add,aiboxVideo:del,aiboxVideo:edit'
|
||||
requestFN(
|
||||
'/head/hasButton',
|
||||
{
|
||||
keys: keys
|
||||
}
|
||||
).then((data) => {
|
||||
this.add = data.aiboxVideofhadminadd // 新增权限
|
||||
this.del = data.aiboxVideofhadmindel // 删除权限
|
||||
this.edit = data.aiboxVideofhadminedit // 修改权限
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.ui-foot-xuan {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
position: inherit;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
background-color: #f1f1f1;
|
||||
text-align: center;
|
||||
}
|
||||
#map{
|
||||
width: 1000px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<transition name="fade" mode="out-in">
|
||||
<component :is="activeName"/>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import List from './components/list'
|
||||
import VideoList from './components/videoList'
|
||||
export default {
|
||||
components: { List, VideoList },
|
||||
data() {
|
||||
return {
|
||||
activeName: 'List',
|
||||
PROMISE_ID: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,805 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="指标源">
|
||||
<el-input v-model="KEYWORDS" placeholder="请输入指标源名称"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label-width="10px">
|
||||
<el-button v-waves type="primary" icon="el-icon-search" @click="getQuery">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button type="success" icon="el-icon-view" size="mini" @click="getReset">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
ref="multipleTable"
|
||||
:row-key="getRowKey"
|
||||
:data="varList"
|
||||
: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="INDICATORSOURCE" label="指标源" align="center"/>
|
||||
<el-table-column prop="ALARMTHRESHOLD" label="报警阈值" align="center"/>
|
||||
<el-table-column prop="RECIPIENT_NAME" label="接受报警人" align="center"/>
|
||||
<el-table-column prop="LONGITUDE" label="经纬度" align="center">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.LONGITUDE ? row.LONGITUDE + '-' + row.LATITUDE : '未定位' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="TYPE" label="类型" align="center">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.TYPE === '0' ? '指标分析' : '报警源接入' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="300">
|
||||
<template slot-scope="{row}">
|
||||
<el-button v-if="edit" type="primary" icon="el-icon-edit" size="mini" @click="handleEdit(row)">编辑</el-button>
|
||||
<el-button v-if="del" type="danger" icon="el-icon-delete" plain @click="handleDelete(row.ALARMDEVICEMAINTENANCE_ID)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="page-btn-group">
|
||||
<div>
|
||||
<el-button v-if="add" 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>
|
||||
|
||||
<el-dialog :visible.sync="addForm.dialogAlarmInfo" :title="'填报报警信息'" width="1000px">
|
||||
<el-form ref="addForm" :model="addForm.alarmInfo" :rules="addForm.rules" label-width="110px" style="width: 80%;">
|
||||
<el-form-item label="报警源名称" prop="SOURCE_NAME">
|
||||
<el-input v-model="addForm.alarmInfo.SOURCE_NAME" disabled placeholder="这里输入指标源..." />
|
||||
</el-form-item>
|
||||
<el-form-item label="报警值" prop="SOURCE_VALUE">
|
||||
<el-input v-model="addForm.alarmInfo.SOURCE_VALUE" placeholder="这里输入报警值..." />
|
||||
</el-form-item>
|
||||
<el-form-item label="报警时间" prop="ALARM_TIME">
|
||||
<el-date-picker
|
||||
v-model="addForm.alarmInfo.ALARM_TIME"
|
||||
type="datetime"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择日期时间"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="经纬度：" prop="ALARM_AREA">
|
||||
<el-input v-model="addForm.alarmInfo.ALARM_AREA" style="width:206px" placeholder="请选择" disabled/>
|
||||
<el-button style="margin-left: 10px" type="primary" @click="handleMap">点击定位</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="back">取 消</el-button>
|
||||
<el-button type="primary" @click="addAlarmInfo">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<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="addForm.info.LONGITUDE" style="width: 200px" placeholder="请输入内容" disabled />
|
||||
<span>纬度：</span>
|
||||
<el-input v-model="addForm.info.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 v-loading="loading" :visible.sync="addForm.dialogVisible" :title="addForm.dialogType==='add'?'新增':'编辑'" width="1000px">
|
||||
<el-form ref="addForm" :model="addForm.info" :rules="addForm.rules" label-width="110px" style="width: 80%;">
|
||||
<el-form-item label="指标源" prop="INDICATORSOURCE">
|
||||
<el-input v-model="addForm.info.INDICATORSOURCE" placeholder="这里输入指标源..." />
|
||||
</el-form-item>
|
||||
<el-form-item label="报警阈值" prop="ALARMTHRESHOLD">
|
||||
<el-input v-model="addForm.info.ALARMTHRESHOLD" placeholder="这里输入报警阈值..." />
|
||||
</el-form-item>
|
||||
<el-form-item label="经纬度：" prop="LONGTITUDEANDLATITUDE">
|
||||
<el-input v-model="addForm.info.LONGTITUDEANDLATITUDE" style="width:206px" placeholder="请选择" disabled/>
|
||||
<el-button style="margin-left: 10px" type="primary" @click="handleMap">点击定位</el-button>
|
||||
</el-form-item>
|
||||
<el-divider content-position="left">接受报警人<el-button type="primary" size="mini" @click="addInspector"> 添加</el-button></el-divider>
|
||||
<el-form-item v-for="(item,index) in addForm.info.inspectorList" :key="index + (Math.random() + '').replace('.', '')" :label="(index+1)+'.'">
|
||||
<div class="uo-flex">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="11">
|
||||
<el-form-item label="接受报警人部门" prop="DEPARTMENT_ID" label-width="120px">
|
||||
<SelectTree
|
||||
ref="'deptTree'+index"
|
||||
:clearable="false"
|
||||
:options="treeDataInspectDept"
|
||||
:props="defaultProps"
|
||||
v-model="item.DEPARTMENT_ID"
|
||||
placeholder="请选择接受报警人部门"
|
||||
style="width: 100%"
|
||||
@change="updateInspecteDept(item.DEPARTMENT_ID,index,item)"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="9">
|
||||
<el-form-item label="接受报警人" prop="USER_ID" label-width="100px">
|
||||
<el-select v-model="item.USER_ID" clearable placeholder="请选择接受报警人">
|
||||
<el-option v-for="data in INSPECTOR_List[index]" :key="data.USER_ID" :label="data.NAME" :value="data.USER_ID" @click.native="changeHiddenUserList(item, data)" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<el-button plain size="mini" type="danger" icon="el-icon-delete" title="移除" @click="delInspectorRow(item,index)"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型：" prop="TYPE">
|
||||
<el-select v-model="addForm.info.TYPE" placeholder="请选择类型">
|
||||
<el-option
|
||||
v-for="item in typeList"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="back">取 消</el-button>
|
||||
<el-button type="primary" @click="confirm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="addForm.dialogAlarm" :title="'填报报警信息'" width="1000px">
|
||||
<el-form ref="addForm" :model="addForm.alarmInfo" :rules="addForm.rules" label-width="110px" style="width: 80%;">
|
||||
<el-form-item label="报警源名称" prop="SOURCE_NAME">
|
||||
<el-input v-model="addForm.alarmInfo.SOURCE_NAME" disabled placeholder="这里输入指标源..." />
|
||||
</el-form-item>
|
||||
<el-form-item label="报警值" prop="SOURCE_VALUE">
|
||||
<el-input v-model="addForm.alarmInfo.SOURCE_VALUE" placeholder="这里输入报警值..." />
|
||||
</el-form-item>
|
||||
<el-form-item label="报警时间" prop="ALARM_TIME">
|
||||
<el-date-picker
|
||||
v-model="addForm.alarmInfo.ALARM_TIME"
|
||||
type="datetime"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择日期时间"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="经纬度：" prop="ALARM_AREA">
|
||||
<el-input v-model="addForm.alarmInfo.ALARM_AREA" style="width:206px" placeholder="请选择" disabled/>
|
||||
<el-button style="margin-left: 10px" type="primary" @click="handleMap">点击定位</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="back">取 消</el-button>
|
||||
<el-button type="primary" @click="addAlarmInfo">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-if="dialogVideo" :visible.sync="dialogVideo" :show-close="false" title="视频2" 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" :show-close="false" 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%">
|
||||
<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>
|
||||
</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 SelectTree from '@/components/SelectTree'
|
||||
|
||||
export default {
|
||||
components: { Pagination, TiandiMap, SelectTree },
|
||||
directives: { waves },
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
marker: null,
|
||||
BMap: '',
|
||||
clientHeight: 500,
|
||||
inputLocation: '',
|
||||
msg: 'add',
|
||||
config: config,
|
||||
loading: false,
|
||||
listLoading: true,
|
||||
dialogForm: false,
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
dialogSelect: false,
|
||||
add: '',
|
||||
del: '',
|
||||
edit: '',
|
||||
dialogFormMap: false,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 20
|
||||
},
|
||||
total: 0,
|
||||
typeList: [{ name: '指标分析', value: '0' }, { name: '报警源接入', value: '1' }],
|
||||
KEYWORDS: '',
|
||||
LOGIN_USER_ID: JSON.parse(sessionStorage.getItem('user')).USER_ID,
|
||||
dates: [],
|
||||
varList: [],
|
||||
LATITUDE: '',
|
||||
LONGITUDE: '',
|
||||
zoom: 10,
|
||||
rules: {
|
||||
VIDEONAME: [{ required: true, message: '视频名称不能为空', trigger: 'blur' }],
|
||||
CODE: [{ required: true, message: '摄像头编号不能为空', trigger: 'blur' }]
|
||||
},
|
||||
dialogVideo: false,
|
||||
dialogVideoHLS: false,
|
||||
dialogVideoBack: false,
|
||||
dialogVideoAll: false,
|
||||
treeDataInspectDept: [],
|
||||
defaultProps: {
|
||||
value: 'id',
|
||||
children: 'nodes',
|
||||
label: 'name'
|
||||
},
|
||||
INSPECTOR_List: [],
|
||||
RESPONSIBLE_USER_List: [{ NAME: JSON.parse(sessionStorage.getItem('user')).NAME, USER_ID: JSON.parse(sessionStorage.getItem('user')).USER_ID }], // 隐患责任人
|
||||
addForm: {
|
||||
dialogType: 'add', // 增or改
|
||||
dialogVisible: false,
|
||||
dialogAlarm: false,
|
||||
rules: {
|
||||
LONGITUDE: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
LATITUDE: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
RECIPIENT: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
INDICATORSOURCE: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
ALARMTHRESHOLD: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
LONGTITUDEANDLATITUDE: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
TYPE: [{ required: true, message: '不可为空', trigger: 'blur' }]
|
||||
},
|
||||
info: {
|
||||
ALARMDEVICEMAINTENANCE_ID: '',
|
||||
INDICATORSOURCE: '',
|
||||
ALARMTHRESHOLD: '',
|
||||
LONGTITUDEANDLATITUDE: '',
|
||||
LONGITUDE: '',
|
||||
LATITUDE: '',
|
||||
RECIPIENT: '',
|
||||
inspectorList: [{ DEPARTMENT_ID: '', USER_ID: '' }], // 接受报警人
|
||||
TYPE: ''
|
||||
},
|
||||
alarmInfo: {
|
||||
ALARMINFORMATION_ID: '',
|
||||
ALARMDEVICEMAINTENANCE_ID: '',
|
||||
SOURCE_NAME: '',
|
||||
SOURCE_VALUE: '',
|
||||
ALARM_TIME: '',
|
||||
ALARM_AREA: '',
|
||||
LONGITUDE: '',
|
||||
LATITUDE: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.getDict()
|
||||
this.hasButton()
|
||||
},
|
||||
methods: {
|
||||
// 获取人员列表
|
||||
getInspectorList(DEPARTMENT_ID, i) {
|
||||
if (DEPARTMENT_ID) {
|
||||
requestFN(
|
||||
'/user/listAllManageAndCorp',
|
||||
{
|
||||
CURRENT_INSPECTED_DEPARTMENT_ID: this.CURRENT_INSPECTED_DEPARTMENT_ID,
|
||||
DEPARTMENT_ID: DEPARTMENT_ID,
|
||||
NOMAIN: '1'
|
||||
}
|
||||
).then((data) => {
|
||||
this.INSPECTOR_List[i] = data.userList
|
||||
this.$forceUpdate()
|
||||
}).catch((e) => {
|
||||
})
|
||||
}
|
||||
},
|
||||
updateInspecteDept(id, i, item) {
|
||||
// 获取人员列表
|
||||
if (id) {
|
||||
requestFN(
|
||||
'/user/listAllManageAndCorp',
|
||||
{
|
||||
DEPARTMENT_ID: id
|
||||
}
|
||||
).then((data) => {
|
||||
this.INSPECTOR_List[i] = data.userList
|
||||
this.$forceUpdate()
|
||||
}).catch((e) => {
|
||||
})
|
||||
}
|
||||
this.addForm.info.inspectorList[i].USER_ID = ''
|
||||
this.addForm.info.inspectorList[i].USER_SIDE = ''
|
||||
this.getInspectorList(id, i)
|
||||
},
|
||||
// 删除接受报警人
|
||||
delInspectorRow(row, index) {
|
||||
if (this.validStr(row.DEPARTMENT_ID) || this.validStr(row.USER_ID)) {
|
||||
this.$confirm('确定要移除第' + (index + 1) + '个接受报警人吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.addForm.info.inspectorList.splice(index, 1)
|
||||
this.INSPECTOR_List.splice(index, 1)
|
||||
}).catch(() => {
|
||||
})
|
||||
} else {
|
||||
this.addForm.info.inspectorList.splice(index, 1)
|
||||
this.INSPECTOR_List.splice(index, 1)
|
||||
}
|
||||
},
|
||||
addInspector() {
|
||||
console.log(this.addForm.info.inspectorList)
|
||||
this.addForm.info.inspectorList.push({ DEPARTMENT_ID: '', USER_ID: '' })
|
||||
this.INSPECTOR_List.push([])
|
||||
},
|
||||
/* 改为从接受报警人中选取 */
|
||||
changeHiddenUserList(item, data) {
|
||||
item.USER_SIDE = data.USER_SIDE
|
||||
for (let i = 0; i < this.addForm.info.inspectorList.length; i++) {
|
||||
this.INSPECTOR_List[i].forEach(item => {
|
||||
if (this.addForm.info.inspectorList[i].USER_ID === item.USER_ID) {
|
||||
const index = this.RESPONSIBLE_USER_List.findIndex(vector => vector.USER_ID === item.USER_ID)
|
||||
if (index < 0) {
|
||||
this.RESPONSIBLE_USER_List.push(item)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 搜索
|
||||
getReset() {
|
||||
this.KEYWORDS = ''
|
||||
this.listQuery = {
|
||||
page: 1,
|
||||
limit: 20
|
||||
}
|
||||
this.total = 0
|
||||
this.getQuery()
|
||||
},
|
||||
/**
|
||||
* 初始化天地图对象
|
||||
*/
|
||||
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.addForm.info.LONGITUDE && !this.addForm.info.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.addForm.info.LONGITUDE = lng
|
||||
this.addForm.info.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.addForm.info.LONGITUDE = event.lnglat.getLng()
|
||||
this.addForm.info.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() {
|
||||
this.dialogFormMap = true
|
||||
this.$nextTick(() => {
|
||||
if (!this.map) this.initMap(this.addForm.info.LONGITUDE, this.addForm.info.LATITUDE, 16)
|
||||
else this.initCenter(this.addForm.info.LONGITUDE, this.addForm.info.LATITUDE, 16)
|
||||
})
|
||||
},
|
||||
getRowKey(row) {
|
||||
return row.ALARMDEVICEMAINTENANCE_ID
|
||||
},
|
||||
// 搜索
|
||||
getQuery() {
|
||||
this.$refs.multipleTable.clearSelection()
|
||||
this.getList()
|
||||
},
|
||||
setPosition() {
|
||||
this.addForm.info.LONGTITUDEANDLATITUDE = this.addForm.info.LONGITUDE + '-' + this.addForm.info.LATITUDE
|
||||
this.addForm.alarmInfo.LONGITUDE = this.addForm.info.LONGITUDE
|
||||
this.addForm.alarmInfo.LATITUDE = this.addForm.info.LATITUDE
|
||||
this.addForm.alarmInfo.ALARM_AREA = this.addForm.info.LONGITUDE + '-' + this.addForm.info.LATITUDE
|
||||
this.dialogFormMap = false
|
||||
},
|
||||
// 获取列表
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/alarmDeviceMaintenance/listForManager?showCount=' + this.listQuery.limit + '¤tPage=' + this.listQuery.page,
|
||||
{
|
||||
KEYWORDS: this.KEYWORDS,
|
||||
LOGIN_USER_ID: this.LOGIN_USER_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.varList = data.varList
|
||||
this.total = data.page.totalResult
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 添加
|
||||
handleAdd() {
|
||||
this.resetAddForm()
|
||||
this.addForm.dialogType = 'add'
|
||||
this.addForm.dialogVisible = true
|
||||
},
|
||||
handleAlarm(row) {
|
||||
this.resetAddForm()
|
||||
this.addForm.alarmInfo = {
|
||||
...this.addForm.alarmInfo,
|
||||
ALARMDEVICEMAINTENANCE_ID: row.ALARMDEVICEMAINTENANCE_ID,
|
||||
SOURCE_NAME: row.INDICATORSOURCE,
|
||||
ALARM_AREA: row.LONGITUDE + '-' + row.LATITUDE,
|
||||
LATITUDE: row.LATITUDE,
|
||||
LONGITUDE: row.LONGITUDE
|
||||
}
|
||||
this.addForm.dialogAlarm = true
|
||||
},
|
||||
handleEdit(row) {
|
||||
this.resetAddForm()
|
||||
this.INSPECTOR_List = []
|
||||
this.addForm.info = {
|
||||
...this.addForm.info,
|
||||
ALARMDEVICEMAINTENANCE_ID: row.ALARMDEVICEMAINTENANCE_ID,
|
||||
INDICATORSOURCE: row.INDICATORSOURCE,
|
||||
ALARMTHRESHOLD: row.ALARMTHRESHOLD,
|
||||
RECIPIENT: row.RECIPIENT,
|
||||
TYPE: row.TYPE,
|
||||
LONGTITUDEANDLATITUDE: row.LONGITUDE + '-' + row.LATITUDE,
|
||||
inspectorList: [], // 接受报警人
|
||||
LATITUDE: row.LATITUDE,
|
||||
LONGITUDE: row.LONGITUDE
|
||||
}
|
||||
if (row.DEPT_IDS !== '' && row.DEPT_IDS !== null) {
|
||||
this.loading = true
|
||||
const deptList = row.DEPT_IDS.split(',')
|
||||
const userList = row.USER_IDS.split(',')
|
||||
console.log(deptList)
|
||||
console.log(userList)
|
||||
let info = {}
|
||||
for (let i = 0; i < deptList.length; i++) {
|
||||
if (deptList[i]) {
|
||||
requestFN(
|
||||
'/user/listAllManageAndCorp',
|
||||
{
|
||||
CURRENT_INSPECTED_DEPARTMENT_ID: this.CURRENT_INSPECTED_DEPARTMENT_ID,
|
||||
DEPARTMENT_ID: deptList[i],
|
||||
NOMAIN: '1'
|
||||
}
|
||||
).then((data) => {
|
||||
this.INSPECTOR_List[i] = data.userList
|
||||
const tempUserList = data.userList
|
||||
for (let k = 0; k < tempUserList.length; k++) {
|
||||
if (tempUserList[k].USER_ID === userList[i]) {
|
||||
info = { DEPARTMENT_ID: deptList[i], USER_ID: userList[i] }
|
||||
this.addForm.info.inspectorList[i] = info
|
||||
this.$forceUpdate()
|
||||
return
|
||||
}
|
||||
}
|
||||
}).catch((e) => {
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
this.loading = false
|
||||
this.addForm.dialogType = 'edit'
|
||||
this.addForm.dialogVisible = true
|
||||
},
|
||||
|
||||
resetAddForm() {
|
||||
this.ALARMDEVICEMAINTENANCE_ID = ''
|
||||
this.addForm.info = {
|
||||
ALARMDEVICEMAINTENANCE_ID: '',
|
||||
inspectorList: [{ DEPARTMENT_ID: '', USER_ID: '' }], // 接受报警人
|
||||
INDICATORSOURCE: '',
|
||||
ALARMTHRESHOLD: '',
|
||||
RECIPIENT: '',
|
||||
TYPE: '',
|
||||
LATITUDE: '',
|
||||
LONGITUDE: ''
|
||||
}
|
||||
this.addForm.dialogType = ''
|
||||
},
|
||||
addAlarmInfo() {
|
||||
this.$refs.addForm.validate(valid => {
|
||||
if (valid) {
|
||||
requestFN(
|
||||
'/alarmInformation/add',
|
||||
{
|
||||
...this.addForm.alarmInfo
|
||||
}
|
||||
).then((data) => {
|
||||
this.$message.success('保存成功')
|
||||
this.getList()
|
||||
this.addForm.dialogAlarm = false
|
||||
}).catch((e) => {
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
confirm() {
|
||||
console.log(this.addForm.info.inspectorList)
|
||||
let flag = false
|
||||
this.addForm.info.inspectorList.forEach(item => {
|
||||
if (!this.validStr(item.USER_ID)) {
|
||||
flag = true
|
||||
return
|
||||
}
|
||||
})
|
||||
if (flag) {
|
||||
this.$message({
|
||||
message: '接受报警人不能为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
this.$refs.addForm.validate(valid => {
|
||||
for (var x in this.addForm.info.inspectorList) {
|
||||
var vector = 0
|
||||
for (var y in this.addForm.info.inspectorList) {
|
||||
if (this.addForm.info.inspectorList[y].USER_ID === this.addForm.info.inspectorList[x].USER_ID) vector++
|
||||
}
|
||||
if (vector > 1) {
|
||||
this.$message.error('检查人重复！请检查相关数据')
|
||||
return
|
||||
}
|
||||
}
|
||||
if (valid) {
|
||||
this.$set(this.addForm.info, 'INSPECTORJSON', JSON.stringify(this.addForm.info.inspectorList))
|
||||
requestFN(
|
||||
'/alarmDeviceMaintenance/' + this.addForm.dialogType,
|
||||
{
|
||||
...this.addForm.info
|
||||
}
|
||||
).then((data) => {
|
||||
this.$message.success('保存成功')
|
||||
this.getList()
|
||||
this.addForm.dialogVisible = false
|
||||
}).catch((e) => {
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
handleDelete(id) {
|
||||
this.$confirm('确定要删除吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/alarmDeviceMaintenance/delete',
|
||||
{
|
||||
ALARMDEVICEMAINTENANCE_ID: id
|
||||
}
|
||||
).then((data) => {
|
||||
if (data.result === 'success') {
|
||||
this.$message({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
this.$message.error(data.msg)
|
||||
}
|
||||
this.listLoading = false
|
||||
this.varList = []
|
||||
this.listQuery.page = 1
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
batchDel() {
|
||||
const _selectData = this.$refs.multipleTable.selection
|
||||
if (_selectData == null || _selectData.length == 0) {
|
||||
this.$message({
|
||||
message: '请选中要删除的项...',
|
||||
type: 'error'
|
||||
})
|
||||
return false
|
||||
}
|
||||
const ids = _selectData.map((item, index) => {
|
||||
return item.GATEVIDEO_ID
|
||||
}).join(',')
|
||||
|
||||
this.$confirm('确定要删除选中的数据吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/gateVideo/deleteAll',
|
||||
{
|
||||
DATA_IDS: ids
|
||||
}
|
||||
).then(() => {
|
||||
this.listLoading = false
|
||||
this.varList = []
|
||||
this.listQuery.page = 1
|
||||
this.$refs.multipleTable.clearSelection()
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
goKeyReset() {
|
||||
this.KEYWORDS = ''
|
||||
this.getList()
|
||||
},
|
||||
|
||||
back() {
|
||||
if (this.addForm.dialogAlarm) this.addForm.dialogAlarm = false
|
||||
if (this.addForm.dialogVisible) this.addForm.dialogVisible = false
|
||||
if (this.dialogVideo) this.dialogVideo = false
|
||||
if (this.dialogVideoBack) this.dialogVideoBack = 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()
|
||||
}
|
||||
},
|
||||
// 获取数据字典数据
|
||||
getDict: function() {
|
||||
requestFN(
|
||||
'/dictionaries/getLevels',
|
||||
{
|
||||
DICTIONARIES_ID: '60e6481d96e44a5390ff5c347c4d1ffe' // 检查类型
|
||||
}
|
||||
).then((data) => {
|
||||
this.INSPECTION_TYPE_List = data.list
|
||||
}).catch((e) => {
|
||||
|
||||
})
|
||||
|
||||
requestFN(
|
||||
'/corpDepartment/listTreeCorpDept',
|
||||
{}
|
||||
).then((data) => {
|
||||
this.treeData = this.listTransTree(JSON.parse(data.zTreeNodes), 'id', 'pId', 'nodes')
|
||||
}).catch((e) => {
|
||||
})
|
||||
|
||||
requestFN(
|
||||
'/corpDepartment/listTreeManageAndCorp',
|
||||
{}
|
||||
).then((data) => {
|
||||
this.treeDataInspectDept = this.listTransTree(JSON.parse(data.zTreeNodes), 'id', 'pId', 'nodes')
|
||||
}).catch((e) => {
|
||||
})
|
||||
},
|
||||
// 判断按钮权限，用于是否显示按钮
|
||||
hasButton: function() {
|
||||
var keys = 'aiboxManager:add,aiboxManager:del,aiboxManager:edit'
|
||||
requestFN(
|
||||
'/head/hasButton',
|
||||
{
|
||||
keys: keys
|
||||
}
|
||||
).then((data) => {
|
||||
this.add = data.aiboxManagerfhadminadd // 新增权限
|
||||
this.del = data.aiboxManagerfhadmindel // 删除权限
|
||||
this.edit = data.aiboxManagerfhadminedit // 修改权限
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.ui-foot-xuan {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
position: inherit;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
background-color: #f1f1f1;
|
||||
text-align: center;
|
||||
}
|
||||
#map{
|
||||
width: 1000px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<transition name="fade" mode="out-in">
|
||||
<component :is="activeName"/>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import List from './components/list'
|
||||
export default {
|
||||
components: { List },
|
||||
data() {
|
||||
return {
|
||||
activeName: 'List',
|
||||
PROMISE_ID: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,822 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div>
|
||||
<el-button icon="el-icon-arrow-left" @click="goBack">返回</el-button>
|
||||
</div>
|
||||
<el-form label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="报警值">
|
||||
<el-input v-model="KEYWORDS" placeholder="请输入报警值"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label-width="10px">
|
||||
<el-button v-waves type="primary" icon="el-icon-search" @click="getQuery">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button type="success" icon="el-icon-view" size="mini" @click="getReset">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
ref="multipleTable"
|
||||
:row-key="getRowKey"
|
||||
:data="varList"
|
||||
: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="SOURCE_NAME" label="报警源名称" align="center"/>
|
||||
<el-table-column prop="SOURCE_VALUE" label="报警值" align="center"/>
|
||||
<el-table-column prop="ALARM_PEOPLE_NAME" label="报警处理人" align="center"/>
|
||||
<el-table-column prop="ALARM_AREA" label="报警区域" align="center"/>
|
||||
<el-table-column prop="ALARM_TIME" label="报警时间" align="center"/>
|
||||
<el-table-column prop="IS_ALARM" label="是否报警信息" align="center">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.IS_ALARM === '0' || row.IS_ALARM == null ? '未核定' : row.IS_ALARM === '1'? '是' : '否' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="300">
|
||||
<template slot-scope="{row}">
|
||||
<el-button v-show="edit && row.IS_ALARM !== '1' && row.IS_ALARM !== '2' && judgeRecipient(row)" type="primary" icon="el-icon-edit" size="mini" @click="handleEdit(row)">处理报警</el-button>
|
||||
<el-button v-if="edit && row.IS_ALARM === '1' && row.ALARMINFORMATIONDETAILS_ID == null && judgeRecipient(row)" type="primary" icon="el-icon-edit" size="mini" @click="handleDetails(row)">填报报警信息</el-button>
|
||||
<el-button v-show="row.IS_ALARM === '1' && row.ALARMINFORMATIONDETAILS_ID != null" type="success" icon="el-icon-check" size="mini" @click="handleDetailsCheck(row)">查看报警填报信息</el-button>
|
||||
<el-button v-show="row.IS_ALARM === '2'" type="warning" icon="el-icon-search" size="mini" @click="handleReason(row)">否定原因</el-button>
|
||||
<el-button v-if="del && judgeRecipient(row)" type="danger" icon="el-icon-delete" plain @click="handleDelete(row.ALARMINFORMATION_ID)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="page-btn-group">
|
||||
<div>
|
||||
<el-button v-if="add" 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>
|
||||
|
||||
<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="addForm.alarmInfo.LONGITUDE" style="width: 200px" placeholder="请输入内容" disabled />
|
||||
<span>纬度：</span>
|
||||
<el-input v-model="addForm.alarmInfo.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="dialogReason" :title="'否定为报警信息原因'" width="500px">
|
||||
<el-form style="text-align: center; top: 10%; position: relative">
|
||||
<el-input v-model="addForm.info.REASON" :disabled="true" type="textarea" style="width:90%" placeholder=""/>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogReason = false">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="alarmInfoDetailsList.detailsDialogVisible" :title="alarmInfoDetailsList.dialogType==='add'?'新增':'填报信息'" width="500px">
|
||||
<el-form ref="alarmInfoDetailsList" :model="alarmInfoDetailsList.alarmInfoDetails" :rules="alarmInfoDetailsList.rules" label-width="25%" style="text-align: center">
|
||||
<el-form-item label="报警人姓名：" prop="INFORMANT_NAME">
|
||||
<el-input v-model="alarmInfoDetailsList.alarmInfoDetails.INFORMANT_NAME" :disabled="disabled" style="width:90%" placeholder="请输入报警人姓名"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="报警人电话：" prop="INFORMANT_PHONE">
|
||||
<el-input v-model="alarmInfoDetailsList.alarmInfoDetails.INFORMANT_PHONE" :disabled="disabled" style="width:90%" placeholder="请输入报警人电话"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="详细地址：" prop="ADDRESS">
|
||||
<el-input v-model="alarmInfoDetailsList.alarmInfoDetails.ADDRESS" :disabled="disabled" style="width:90%" placeholder="请输入详细地址"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="报警内容：" prop="CONTENT">
|
||||
<el-input v-model="alarmInfoDetailsList.alarmInfoDetails.CONTENT" :autosize="{ minRows:3 }" :disabled="disabled" type="textarea" style="width:90%" placeholder="请输入报警内容"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="back">取 消</el-button>
|
||||
<el-button v-show="alarmInfoDetailsList.dialogType === 'edit'" type="primary" @click="confirmDetail">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="addForm.dialogVisible" :title="addForm.dialogType==='add'?'新增':'编辑'" width="600px">
|
||||
<el-form ref="rules" :model="addForm.info" :rules="addForm.rules" label-width="200px">
|
||||
<el-form-item label="是否报警信息：" prop="IS_ALARM">
|
||||
<el-select v-model="addForm.info.IS_ALARM" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in typeList"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div v-if="addForm.info.IS_ALARM === '2'">
|
||||
<el-form-item label="原因：" prop="REASON">
|
||||
<el-input v-model="addForm.info.REASON" style="width:206px" placeholder="请输入原因"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="back">取 消</el-button>
|
||||
<el-button type="primary" @click="confirm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="addForm.dialogAlarmInfo" :title="'填报报警信息'" width="1000px">
|
||||
<el-form ref="alarmRules" :model="addForm.alarmInfo" :rules="addForm.alarmRules" label-width="110px" style="width: 80%;">
|
||||
<el-form-item label="报警源名称" prop="SOURCE_NAME">
|
||||
<el-input v-model="addForm.alarmInfo.SOURCE_NAME" disabled placeholder="这里输入指标源..." />
|
||||
</el-form-item>
|
||||
<el-form-item label="报警值" prop="SOURCE_VALUE">
|
||||
<el-input v-model="addForm.alarmInfo.SOURCE_VALUE" placeholder="这里输入报警值..." />
|
||||
</el-form-item>
|
||||
<el-form-item label="报警时间" prop="ALARM_TIME">
|
||||
<el-date-picker
|
||||
v-model="addForm.alarmInfo.ALARM_TIME"
|
||||
type="datetime"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择日期时间"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="经纬度：" prop="ALARM_AREA">
|
||||
<el-input v-model="addForm.alarmInfo.ALARM_AREA" style="width:206px" placeholder="请选择" disabled/>
|
||||
<el-button style="margin-left: 10px" type="primary" @click="handleMap">点击定位</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="back">取 消</el-button>
|
||||
<el-button type="primary" @click="addAlarmInfo">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-dialog v-if="dialogVideo" :visible.sync="dialogVideo" :show-close="false" title="视频2" 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" :show-close="false" 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%">
|
||||
<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>
|
||||
</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 SelectTree from '@/components/SelectTree'
|
||||
|
||||
export default {
|
||||
components: { Pagination, TiandiMap, SelectTree },
|
||||
directives: { waves },
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
marker: null,
|
||||
BMap: '',
|
||||
LOGIN_USER_ID: JSON.parse(sessionStorage.getItem('user')).USER_ID,
|
||||
clientHeight: 500,
|
||||
inputLocation: '',
|
||||
msg: 'add',
|
||||
config: config,
|
||||
listLoading: true,
|
||||
dialogForm: false,
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
dialogReason: false,
|
||||
dialogSelect: false,
|
||||
disabled: false,
|
||||
add: '',
|
||||
del: '',
|
||||
edit: '',
|
||||
dialogFormMap: false,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 20
|
||||
},
|
||||
total: 0,
|
||||
typeList: [{ name: '是', value: '1' }, { name: '否', value: '2' }],
|
||||
KEYWORDS: '',
|
||||
dates: [],
|
||||
varList: [],
|
||||
LATITUDE: '',
|
||||
LONGITUDE: '',
|
||||
zoom: 10,
|
||||
rules: {
|
||||
VIDEONAME: [{ required: true, message: '视频名称不能为空', trigger: 'blur' }],
|
||||
CODE: [{ required: true, message: '摄像头编号不能为空', trigger: 'blur' }]
|
||||
},
|
||||
dialogVideo: false,
|
||||
dialogVideoHLS: false,
|
||||
dialogVideoBack: false,
|
||||
dialogVideoAll: false,
|
||||
treeDataInspectDept: [],
|
||||
defaultProps: {
|
||||
value: 'id',
|
||||
children: 'nodes',
|
||||
label: 'name'
|
||||
},
|
||||
INSPECTOR_List: [],
|
||||
alarmInfoDetailsList: {
|
||||
dialogType: 'add', // 增or改
|
||||
detailsDialogVisible: false,
|
||||
rules: {
|
||||
INFORMANT_NAME: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
INFORMANT_PHONE: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
ADDRESS: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
CONTENT: [{ required: true, message: '不可为空', trigger: 'blur' }]
|
||||
},
|
||||
alarmInfoDetails: {
|
||||
ALARMINFORMATIONDETAILS_ID: '',
|
||||
ALARMDEVICEMAINTENANCE_ID: '',
|
||||
ALARMINFORMATION_ID: '',
|
||||
INFORMANT_NAME: '',
|
||||
INFORMANT_PHONE: '',
|
||||
ADDRESS: '',
|
||||
CONTENT: ''
|
||||
}
|
||||
},
|
||||
RESPONSIBLE_USER_List: [{ NAME: JSON.parse(sessionStorage.getItem('user')).NAME, USER_ID: JSON.parse(sessionStorage.getItem('user')).USER_ID }], // 隐患责任人
|
||||
addForm: {
|
||||
dialogType: 'add', // 增or改
|
||||
dialogVisible: false,
|
||||
dialogAlarmInfo: false,
|
||||
rules: {
|
||||
IS_ALARM: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
REASON: [{ required: true, message: '不可为空', trigger: 'blur' }]
|
||||
},
|
||||
alarmRules: {
|
||||
SOURCE_NAME: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
SOURCE_VALUE: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
ALARM_TIME: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
ALARM_AREA: [{ required: true, message: '不可为空', trigger: 'blur' }]
|
||||
},
|
||||
alarmInfo: {
|
||||
ALARMINFORMATION_ID: '',
|
||||
ALARMDEVICEMAINTENANCE_ID: '',
|
||||
SOURCE_NAME: this.$parent.INDICATORSOURCE,
|
||||
SOURCE_VALUE: '',
|
||||
ALARM_TIME: '',
|
||||
ALARM_AREA: '',
|
||||
LONGITUDE: this.$parent.LONGITUDE,
|
||||
LATITUDE: this.$parent.LATITUDE
|
||||
},
|
||||
info: {
|
||||
ALARMINFORMATION_ID: '',
|
||||
ALARMDEVICEMAINTENANCE_ID: '',
|
||||
ALARM_TIME: '',
|
||||
ALARM_AREA: '',
|
||||
LONGITUDE: '',
|
||||
LATITUDE: '',
|
||||
IS_ALARM: '',
|
||||
REASON: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.getDict()
|
||||
this.hasButton()
|
||||
},
|
||||
methods: {
|
||||
judgeRecipient(row) {
|
||||
if (row.RECIPIENT) {
|
||||
const recipientList = row.RECIPIENT.split(',')
|
||||
for (let i = 0; i < recipientList.length; i++) {
|
||||
console.log(recipientList[i])
|
||||
console.log(this.LOGIN_USER_ID)
|
||||
if (recipientList[i] === this.LOGIN_USER_ID) {
|
||||
console.log(recipientList[i])
|
||||
console.log(this.LOGIN_USER_ID)
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
clearAddform() {
|
||||
console.log(66666)
|
||||
this.addForm.info.ALARM_TIME = ''
|
||||
},
|
||||
// 获取人员列表
|
||||
getInspectorList(DEPARTMENT_ID, i) {
|
||||
if (DEPARTMENT_ID) {
|
||||
requestFN(
|
||||
'/user/listAllManageAndCorp',
|
||||
{
|
||||
CURRENT_INSPECTED_DEPARTMENT_ID: this.CURRENT_INSPECTED_DEPARTMENT_ID,
|
||||
DEPARTMENT_ID: DEPARTMENT_ID,
|
||||
NOMAIN: '1'
|
||||
}
|
||||
).then((data) => {
|
||||
this.INSPECTOR_List[i] = data.userList
|
||||
this.$forceUpdate()
|
||||
}).catch((e) => {
|
||||
})
|
||||
}
|
||||
},
|
||||
updateInspecteDept(id, i, item) {
|
||||
// 获取人员列表
|
||||
if (id) {
|
||||
requestFN(
|
||||
'/user/listAllManageAndCorp',
|
||||
{
|
||||
DEPARTMENT_ID: id
|
||||
}
|
||||
).then((data) => {
|
||||
this.INSPECTOR_List[i] = data.userList
|
||||
this.$forceUpdate()
|
||||
}).catch((e) => {
|
||||
})
|
||||
}
|
||||
this.addForm.info.inspectorList[i].INSPECTION_USER_ID = ''
|
||||
this.addForm.info.inspectorList[i].USER_SIDE = ''
|
||||
this.getInspectorList(DEPARTMENT_ID, i)
|
||||
},
|
||||
// 删除接受报警人
|
||||
delInspectorRow(row, index) {
|
||||
if (this.validStr(row.INSPECTION_DEPARTMENT_ID) || this.validStr(row.INSPECTION_USER_ID)) {
|
||||
this.$confirm('确定要移除第' + (index + 1) + '个接受报警人吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.addForm.info.inspectorList.splice(index, 1)
|
||||
this.INSPECTOR_List.splice(index, 1)
|
||||
}).catch(() => {
|
||||
})
|
||||
} else {
|
||||
this.addForm.info.inspectorList.splice(index, 1)
|
||||
this.INSPECTOR_List.splice(index, 1)
|
||||
}
|
||||
},
|
||||
addInspector() {
|
||||
console.log(this.addForm.info.inspectorList)
|
||||
this.addForm.info.inspectorList.push({ INSPECTION_INSPECTOR_ID: '', INSPECTION_DEPARTMENT_ID: '', INSPECTION_USER_ID: '', USER_SIDE: '' })
|
||||
this.INSPECTOR_List.push([])
|
||||
},
|
||||
/* 改为从接受报警人中选取 */
|
||||
changeHiddenUserList(item, data) {
|
||||
item.USER_SIDE = data.USER_SIDE
|
||||
for (let i = 0; i < this.addForm.info.inspectorList.length; i++) {
|
||||
this.INSPECTOR_List[i].forEach(item => {
|
||||
if (this.addForm.info.inspectorList[i].INSPECTION_USER_ID === item.USER_ID) {
|
||||
const index = this.RESPONSIBLE_USER_List.findIndex(vector => vector.USER_ID === item.USER_ID)
|
||||
if (index < 0) {
|
||||
this.RESPONSIBLE_USER_List.push(item)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 搜索
|
||||
getReset() {
|
||||
this.KEYWORDS = ''
|
||||
this.listQuery = {
|
||||
page: 1,
|
||||
limit: 20
|
||||
}
|
||||
this.total = 0
|
||||
this.getQuery()
|
||||
},
|
||||
/**
|
||||
* 初始化天地图对象
|
||||
*/
|
||||
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.addForm.alarmInfo.LONGITUDE && !this.addForm.alarmInfo.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.addForm.alarmInfo.LONGITUDE = lng
|
||||
this.addForm.alarmInfo.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.addForm.alarmInfo.LONGITUDE = event.lnglat.getLng()
|
||||
this.addForm.alarmInfo.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
|
||||
this.$nextTick(() => {
|
||||
if (!this.map) this.initMap(this.addForm.alarmInfo.LONGITUDE, this.addForm.alarmInfo.LATITUDE, 16)
|
||||
else this.initCenter(this.addForm.alarmInfo.LONGITUDE, this.addForm.alarmInfo.LATITUDE, 16)
|
||||
})
|
||||
},
|
||||
getRowKey(row) {
|
||||
return row.ALARMINFORMATION_ID
|
||||
},
|
||||
// 搜索
|
||||
getQuery() {
|
||||
this.$refs.multipleTable.clearSelection()
|
||||
this.getList()
|
||||
},
|
||||
setPosition() {
|
||||
this.addForm.alarmInfo.ALARM_AREA = this.addForm.alarmInfo.LONGITUDE + '--' + this.addForm.alarmInfo.LATITUDE
|
||||
this.dialogFormMap = false
|
||||
},
|
||||
// 获取列表
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/alarmInformation/list?showCount=' + this.listQuery.limit + '¤tPage=' + this.listQuery.page,
|
||||
{
|
||||
KEYWORDS: this.KEYWORDS,
|
||||
ALARMDEVICEMAINTENANCE_ID: this.$parent.ALARMDEVICEMAINTENANCE_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.varList = data.varList
|
||||
this.total = data.page.totalResult
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 添加
|
||||
handleAdd() {
|
||||
this.resetAddForm()
|
||||
this.addForm.dialogType = 'add'
|
||||
this.addForm.dialogAlarmInfo = true
|
||||
},
|
||||
|
||||
handleEdit(row) {
|
||||
this.resetAddForm()
|
||||
this.addForm.info = {
|
||||
...this.addForm.info,
|
||||
ALARMINFORMATION_ID: row.ALARMINFORMATION_ID,
|
||||
ALARMDEVICEMAINTENANCE_ID: row.ALARMDEVICEMAINTENANCE_ID
|
||||
}
|
||||
this.addForm.dialogType = 'edit'
|
||||
this.addForm.dialogVisible = true
|
||||
},
|
||||
handleReason(row) {
|
||||
this.resetAddForm()
|
||||
this.addForm.info = {
|
||||
...this.addForm.info,
|
||||
ALARMINFORMATION_ID: row.ALARMINFORMATION_ID,
|
||||
ALARMDEVICEMAINTENANCE_ID: row.ALARMDEVICEMAINTENANCE_ID,
|
||||
REASON: row.REASON
|
||||
}
|
||||
this.disabled = false
|
||||
this.dialogReason = true
|
||||
},
|
||||
handleDetailsCheck(row) {
|
||||
this.resetAlarmDetails()
|
||||
requestFN(
|
||||
'/alarmInformationDetails/getAlarmInfoDetailsById',
|
||||
{
|
||||
ALARMINFORMATIONDETAILS_ID: row.ALARMINFORMATIONDETAILS_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.alarmInfoDetailsList.alarmInfoDetails = {
|
||||
ALARMINFORMATIONDETAILS_ID: data.alarmInfoDetails.ALARMINFORMATIONDETAILS_ID,
|
||||
ALARMDEVICEMAINTENANCE_ID: data.alarmInfoDetails.ALARMDEVICEMAINTENANCE_ID,
|
||||
ALARMINFORMATION_ID: data.alarmInfoDetails.ALARMINFORMATION_ID,
|
||||
INFORMANT_NAME: data.alarmInfoDetails.INFORMANT_NAME,
|
||||
INFORMANT_PHONE: data.alarmInfoDetails.INFORMANT_PHONE,
|
||||
ADDRESS: data.alarmInfoDetails.ADDRESS,
|
||||
CONTENT: data.alarmInfoDetails.CONTENT
|
||||
}
|
||||
this.listLoading = false
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
this.disabled = true
|
||||
this.alarmInfoDetailsList.dialogType = 'check'
|
||||
this.alarmInfoDetailsList.detailsDialogVisible = true
|
||||
},
|
||||
handleDetails(row) {
|
||||
this.resetAlarmDetails()
|
||||
this.alarmInfoDetailsList.alarmInfoDetails = {
|
||||
...this.addForm.info,
|
||||
ALARMINFORMATION_ID: row.ALARMINFORMATION_ID,
|
||||
ALARMDEVICEMAINTENANCE_ID: row.ALARMDEVICEMAINTENANCE_ID
|
||||
}
|
||||
this.disabled = false
|
||||
this.alarmInfoDetailsList.dialogType = 'edit'
|
||||
this.alarmInfoDetailsList.detailsDialogVisible = true
|
||||
},
|
||||
resetAlarmDetails() {
|
||||
this.alarmInfoDetailsList.alarmInfoDetails = {
|
||||
ALARMINFORMATIONDETAILS_ID: '',
|
||||
ALARMDEVICEMAINTENANCE_ID: '',
|
||||
ALARMINFORMATION_ID: '',
|
||||
INFORMANT_NAME: '',
|
||||
INFORMANT_PHONE: '',
|
||||
ADDRESS: '',
|
||||
CONTENT: ''
|
||||
}
|
||||
},
|
||||
resetAddForm() {
|
||||
this.ALARMDEVICEMAINTENANCE_ID = ''
|
||||
this.addForm.alarmInfo = {
|
||||
ALARMINFORMATION_ID: '',
|
||||
ALARMDEVICEMAINTENANCE_ID: this.$parent.ALARMDEVICEMAINTENANCE_ID,
|
||||
SOURCE_NAME: this.$parent.INDICATORSOURCE,
|
||||
SOURCE_VALUE: '',
|
||||
ALARM_TIME: '',
|
||||
ALARM_AREA: this.addForm.alarmInfo.LONGITUDE + '-' + this.addForm.alarmInfo.LATITUDE,
|
||||
LONGITUDE: this.$parent.LONGITUDE,
|
||||
LATITUDE: this.$parent.LATITUDE
|
||||
}
|
||||
this.addForm.info = {
|
||||
ALARMDEVICEMAINTENANCE_ID: '',
|
||||
inspectorList: [{ INSPECTION_INSPECTOR_ID: '', INSPECTION_DEPARTMENT_ID: '', INSPECTION_USER_ID: '', USER_SIDE: '' }], // 接受报警人
|
||||
INDICATORSOURCE: '',
|
||||
ALARMTHRESHOLD: '',
|
||||
RECIPIENT: '',
|
||||
TYPE: '',
|
||||
LATITUDE: '',
|
||||
LONGITUDE: ''
|
||||
}
|
||||
this.addForm.dialogType = ''
|
||||
},
|
||||
confirm() {
|
||||
this.$refs.rules.validate(valid => {
|
||||
if (valid) {
|
||||
requestFN(
|
||||
'/alarmInformation/' + this.addForm.dialogType,
|
||||
{
|
||||
...this.addForm.info
|
||||
}
|
||||
).then((data) => {
|
||||
this.$message.success('保存成功')
|
||||
this.getList()
|
||||
this.addForm.dialogVisible = false
|
||||
}).catch((e) => {
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
confirmDetail() {
|
||||
this.$refs.alarmInfoDetailsList.validate(valid => {
|
||||
if (valid) {
|
||||
requestFN(
|
||||
'/alarmInformationDetails/add',
|
||||
{
|
||||
...this.alarmInfoDetailsList.alarmInfoDetails
|
||||
}
|
||||
).then((data) => {
|
||||
this.$message.success('保存成功')
|
||||
this.getList()
|
||||
this.alarmInfoDetailsList.detailsDialogVisible = false
|
||||
}).catch((e) => {
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
handleDelete(id) {
|
||||
this.$confirm('确定要删除吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/alarmInformation/delete',
|
||||
{
|
||||
ALARMINFORMATION_ID: id
|
||||
}
|
||||
).then((data) => {
|
||||
if (data.result === 'success') {
|
||||
this.$message({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
this.$message.error(data.msg)
|
||||
}
|
||||
this.listLoading = false
|
||||
this.varList = []
|
||||
this.listQuery.page = 1
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
batchDel() {
|
||||
const _selectData = this.$refs.multipleTable.selection
|
||||
if (_selectData == null || _selectData.length == 0) {
|
||||
this.$message({
|
||||
message: '请选中要删除的项...',
|
||||
type: 'error'
|
||||
})
|
||||
return false
|
||||
}
|
||||
const ids = _selectData.map((item, index) => {
|
||||
return item.GATEVIDEO_ID
|
||||
}).join(',')
|
||||
|
||||
this.$confirm('确定要删除选中的数据吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/gateVideo/deleteAll',
|
||||
{
|
||||
DATA_IDS: ids
|
||||
}
|
||||
).then(() => {
|
||||
this.listLoading = false
|
||||
this.varList = []
|
||||
this.listQuery.page = 1
|
||||
this.$refs.multipleTable.clearSelection()
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
goKeyReset() {
|
||||
this.KEYWORDS = ''
|
||||
this.getList()
|
||||
},
|
||||
addAlarmInfo() {
|
||||
this.$refs.alarmRules.validate(valid => {
|
||||
if (valid) {
|
||||
requestFN(
|
||||
'/alarmInformation/add',
|
||||
{
|
||||
...this.addForm.alarmInfo
|
||||
}
|
||||
).then((data) => {
|
||||
this.$message.success('保存成功')
|
||||
this.getList()
|
||||
this.addForm.dialogAlarmInfo = false
|
||||
}).catch((e) => {
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
back() {
|
||||
if (this.alarmInfoDetailsList.detailsDialogVisible) this.alarmInfoDetailsList.detailsDialogVisible = false
|
||||
if (this.addForm.dialogVisible) this.addForm.dialogVisible = false
|
||||
if (this.addForm.dialogAlarmInfo) this.addForm.dialogAlarmInfo = false
|
||||
if (this.dialogVideo) this.dialogVideo = false
|
||||
if (this.dialogVideoBack) this.dialogVideoBack = 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()
|
||||
}
|
||||
},
|
||||
// 获取数据字典数据
|
||||
getDict: function() {
|
||||
requestFN(
|
||||
'/dictionaries/getLevels',
|
||||
{
|
||||
DICTIONARIES_ID: '60e6481d96e44a5390ff5c347c4d1ffe' // 检查类型
|
||||
}
|
||||
).then((data) => {
|
||||
this.INSPECTION_TYPE_List = data.list
|
||||
}).catch((e) => {
|
||||
|
||||
})
|
||||
|
||||
requestFN(
|
||||
'/corpDepartment/listTreeCorpDept',
|
||||
{}
|
||||
).then((data) => {
|
||||
this.treeData = this.listTransTree(JSON.parse(data.zTreeNodes), 'id', 'pId', 'nodes')
|
||||
}).catch((e) => {
|
||||
})
|
||||
|
||||
requestFN(
|
||||
'/corpDepartment/listTreeManageAndCorp',
|
||||
{}
|
||||
).then((data) => {
|
||||
this.treeDataInspectDept = this.listTransTree(JSON.parse(data.zTreeNodes), 'id', 'pId', 'nodes')
|
||||
}).catch((e) => {
|
||||
})
|
||||
},
|
||||
goBack() {
|
||||
this.$parent.activeName = 'list'
|
||||
},
|
||||
// 判断按钮权限，用于是否显示按钮
|
||||
hasButton: function() {
|
||||
var keys = 'aiboxManager:add,aiboxManager:del,aiboxManager:edit'
|
||||
requestFN(
|
||||
'/head/hasButton',
|
||||
{
|
||||
keys: keys
|
||||
}
|
||||
).then((data) => {
|
||||
this.add = data.aiboxManagerfhadminadd // 新增权限
|
||||
this.del = data.aiboxManagerfhadmindel // 删除权限
|
||||
this.edit = data.aiboxManagerfhadminedit // 修改权限
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.ui-foot-xuan {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
position: inherit;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
background-color: #f1f1f1;
|
||||
text-align: center;
|
||||
}
|
||||
#map{
|
||||
width: 1000px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,743 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="指标源">
|
||||
<el-input v-model="KEYWORDS" placeholder="请输入指标源名称"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label-width="10px">
|
||||
<el-button v-waves type="primary" icon="el-icon-search" @click="getQuery">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button type="success" icon="el-icon-view" size="mini" @click="getReset">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
ref="multipleTable"
|
||||
:row-key="getRowKey"
|
||||
:data="varList"
|
||||
: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="INDICATORSOURCE" label="指标源" align="center"/>
|
||||
<el-table-column prop="ALARMTHRESHOLD" label="报警阈值" align="center"/>
|
||||
<el-table-column prop="RECIPIENT_NAME" label="接受报警人" align="center"/>
|
||||
<el-table-column prop="LONGITUDE" label="经纬度" align="center">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.LONGITUDE ? row.LONGITUDE + '-' + row.LATITUDE : '未定位' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="TYPE" label="类型" align="center">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.TYPE === '0' ? '指标分析' : '报警源接入' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="ALARM_COUNT" label="报警数" align="center"/>
|
||||
<el-table-column label="操作" align="center" width="200">
|
||||
<template slot-scope="{row}">
|
||||
<el-button type="warning" icon="el-icon-timer" size="mini" @click="goAlarmInfo(row)">报警信息</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="page-btn-group">
|
||||
<div/>
|
||||
<pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
|
||||
</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="addForm.info.LONGITUDE" style="width: 200px" placeholder="请输入内容" disabled />
|
||||
<span>纬度：</span>
|
||||
<el-input v-model="addForm.info.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="addForm.dialogVisible" :title="addForm.dialogType==='add'?'新增':'编辑'" width="1000px">
|
||||
<el-form ref="addForm" :model="addForm.info" :rules="addForm.rules" label-width="110px" style="width: 80%;">
|
||||
<el-form-item label="指标源" prop="INDICATORSOURCE">
|
||||
<el-input v-model="addForm.info.INDICATORSOURCE" placeholder="这里输入指标源..." />
|
||||
</el-form-item>
|
||||
<el-form-item label="报警阈值" prop="ALARMTHRESHOLD">
|
||||
<el-input v-model="addForm.info.ALARMTHRESHOLD" placeholder="这里输入报警阈值..." />
|
||||
</el-form-item>
|
||||
<el-form-item label="经纬度：" prop="LONGTITUDEANDLATITUDE">
|
||||
<el-input v-model="addForm.info.LONGTITUDEANDLATITUDE" style="width:206px" placeholder="请选择" disabled/>
|
||||
<el-button style="margin-left: 10px" type="primary" @click="handleMap">点击定位</el-button>
|
||||
</el-form-item>
|
||||
<el-divider content-position="left">接受报警人<el-button type="primary" size="mini" @click="addInspector"> 添加</el-button></el-divider>
|
||||
<el-form-item v-for="(item,index) in addForm.info.inspectorList" :key="index + (Math.random() + '').replace('.', '')" :label="(index+1)+'.'">
|
||||
<div class="uo-flex">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="11">
|
||||
<el-form-item label="接受报警人部门" prop="INSPECTION_DEPARTMENT_ID" label-width="120px">
|
||||
<SelectTree
|
||||
ref="'deptTree_INSPECTION'+index"
|
||||
:clearable="false"
|
||||
:options="treeDataInspectDept"
|
||||
:props="defaultProps"
|
||||
v-model="item.INSPECTION_DEPARTMENT_ID"
|
||||
placeholder="请选择接受报警人部门"
|
||||
style="width: 100%"
|
||||
@change="updateInspecteDept(item.INSPECTION_DEPARTMENT_ID,index,item)"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="9">
|
||||
<el-form-item label="接受报警人" prop="INSPECTION_USER_ID" label-width="100px">
|
||||
<el-select v-model="item.INSPECTION_USER_ID" clearable placeholder="请选择接受报警人">
|
||||
<el-option v-for="data in INSPECTOR_List[index]" :key="data.USER_ID" :label="data.NAME" :value="data.USER_ID" @click.native="changeHiddenUserList(item, data)" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<el-button plain size="mini" type="danger" icon="el-icon-delete" title="移除" @click="delInspectorRow(item,index)"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型：" prop="TYPE">
|
||||
<el-select v-model="addForm.info.TYPE" placeholder="请选择类型">
|
||||
<el-option
|
||||
v-for="item in typeList"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="back">取 消</el-button>
|
||||
<el-button type="primary" @click="confirm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="addForm.dialogAlarm" :title="'填报报警信息'" width="1000px">
|
||||
<el-form ref="addForm" :model="addForm.alarmInfo" :rules="addForm.rules" label-width="110px" style="width: 80%;">
|
||||
<el-form-item label="报警源名称" prop="SOURCE_NAME">
|
||||
<el-input v-model="addForm.alarmInfo.SOURCE_NAME" disabled placeholder="这里输入指标源..." />
|
||||
</el-form-item>
|
||||
<el-form-item label="报警值" prop="SOURCE_VALUE">
|
||||
<el-input v-model="addForm.alarmInfo.SOURCE_VALUE" placeholder="这里输入报警值..." />
|
||||
</el-form-item>
|
||||
<el-form-item label="报警时间" prop="ALARM_TIME">
|
||||
<el-date-picker
|
||||
v-model="addForm.alarmInfo.ALARM_TIME"
|
||||
type="datetime"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择日期时间"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="经纬度：" prop="ALARM_AREA">
|
||||
<el-input v-model="addForm.alarmInfo.ALARM_AREA" style="width:206px" placeholder="请选择" disabled/>
|
||||
<el-button style="margin-left: 10px" type="primary" @click="handleMap">点击定位</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="back">取 消</el-button>
|
||||
<el-button type="primary" @click="addAlarmInfo">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-if="dialogVideo" :visible.sync="dialogVideo" :show-close="false" title="视频2" 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" :show-close="false" 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%">
|
||||
<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>
|
||||
</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 SelectTree from '@/components/SelectTree'
|
||||
|
||||
export default {
|
||||
components: { Pagination, TiandiMap, SelectTree },
|
||||
directives: { waves },
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
marker: null,
|
||||
BMap: '',
|
||||
clientHeight: 500,
|
||||
inputLocation: '',
|
||||
msg: 'add',
|
||||
config: config,
|
||||
LOGIN_USER_ID: JSON.parse(sessionStorage.getItem('user')).USER_ID,
|
||||
listLoading: true,
|
||||
dialogForm: false,
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false,
|
||||
dialogSelect: false,
|
||||
add: '',
|
||||
del: '',
|
||||
edit: '',
|
||||
dialogFormMap: false,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 20
|
||||
},
|
||||
total: 0,
|
||||
typeList: [{ name: '指标分析', value: '0' }, { name: '报警源接入', value: '1' }],
|
||||
KEYWORDS: '',
|
||||
dates: [],
|
||||
varList: [],
|
||||
LATITUDE: '',
|
||||
LONGITUDE: '',
|
||||
zoom: 10,
|
||||
rules: {
|
||||
VIDEONAME: [{ required: true, message: '视频名称不能为空', trigger: 'blur' }],
|
||||
CODE: [{ required: true, message: '摄像头编号不能为空', trigger: 'blur' }]
|
||||
},
|
||||
dialogVideo: false,
|
||||
dialogVideoHLS: false,
|
||||
dialogVideoBack: false,
|
||||
dialogVideoAll: false,
|
||||
treeDataInspectDept: [],
|
||||
defaultProps: {
|
||||
value: 'id',
|
||||
children: 'nodes',
|
||||
label: 'name'
|
||||
},
|
||||
INSPECTOR_List: [],
|
||||
RESPONSIBLE_USER_List: [{ NAME: JSON.parse(sessionStorage.getItem('user')).NAME, USER_ID: JSON.parse(sessionStorage.getItem('user')).USER_ID }], // 隐患责任人
|
||||
addForm: {
|
||||
dialogType: 'add', // 增or改
|
||||
dialogVisible: false,
|
||||
dialogAlarm: false,
|
||||
rules: {
|
||||
LONGITUDE: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
LATITUDE: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
RECIPIENT: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
TYPE: [{ required: true, message: '不可为空', trigger: 'blur' }]
|
||||
},
|
||||
info: {
|
||||
ALARMDEVICEMAINTENANCE_ID: '',
|
||||
INDICATORSOURCE: '',
|
||||
ALARMTHRESHOLD: '',
|
||||
LONGTITUDEANDLATITUDE: '',
|
||||
LONGITUDE: '',
|
||||
LATITUDE: '',
|
||||
RECIPIENT: '',
|
||||
inspectorList: [{ INSPECTION_INSPECTOR_ID: '', INSPECTION_DEPARTMENT_ID: '', INSPECTION_USER_ID: '', USER_SIDE: '' }], // 接受报警人
|
||||
TYPE: ''
|
||||
},
|
||||
alarmInfo: {
|
||||
ALARMINFORMATION_ID: '',
|
||||
ALARMDEVICEMAINTENANCE_ID: '',
|
||||
SOURCE_NAME: '',
|
||||
SOURCE_VALUE: '',
|
||||
ALARM_TIME: '',
|
||||
ALARM_AREA: '',
|
||||
LONGITUDE: '',
|
||||
LATITUDE: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.getDict()
|
||||
this.hasButton()
|
||||
},
|
||||
methods: {
|
||||
// 获取人员列表
|
||||
getInspectorList(DEPARTMENT_ID, i) {
|
||||
if (DEPARTMENT_ID) {
|
||||
requestFN(
|
||||
'/user/listAllManageAndCorp',
|
||||
{
|
||||
CURRENT_INSPECTED_DEPARTMENT_ID: this.CURRENT_INSPECTED_DEPARTMENT_ID,
|
||||
DEPARTMENT_ID: DEPARTMENT_ID,
|
||||
NOMAIN: '1'
|
||||
}
|
||||
).then((data) => {
|
||||
this.INSPECTOR_List[i] = data.userList
|
||||
this.$forceUpdate()
|
||||
}).catch((e) => {
|
||||
})
|
||||
}
|
||||
},
|
||||
updateInspecteDept(id, i, item) {
|
||||
// 获取人员列表
|
||||
if (id) {
|
||||
requestFN(
|
||||
'/user/listAllManageAndCorp',
|
||||
{
|
||||
DEPARTMENT_ID: id
|
||||
}
|
||||
).then((data) => {
|
||||
this.INSPECTOR_List[i] = data.userList
|
||||
this.$forceUpdate()
|
||||
}).catch((e) => {
|
||||
})
|
||||
}
|
||||
this.addForm.info.inspectorList[i].INSPECTION_USER_ID = ''
|
||||
this.addForm.info.inspectorList[i].USER_SIDE = ''
|
||||
this.getInspectorList(id, i)
|
||||
},
|
||||
// 删除接受报警人
|
||||
delInspectorRow(row, index) {
|
||||
if (this.validStr(row.INSPECTION_DEPARTMENT_ID) || this.validStr(row.INSPECTION_USER_ID)) {
|
||||
this.$confirm('确定要移除第' + (index + 1) + '个接受报警人吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.addForm.info.inspectorList.splice(index, 1)
|
||||
this.INSPECTOR_List.splice(index, 1)
|
||||
}).catch(() => {
|
||||
})
|
||||
} else {
|
||||
this.addForm.info.inspectorList.splice(index, 1)
|
||||
this.INSPECTOR_List.splice(index, 1)
|
||||
}
|
||||
},
|
||||
addInspector() {
|
||||
console.log(this.addForm.info.inspectorList)
|
||||
this.addForm.info.inspectorList.push({ INSPECTION_INSPECTOR_ID: '', INSPECTION_DEPARTMENT_ID: '', INSPECTION_USER_ID: '', USER_SIDE: '' })
|
||||
this.INSPECTOR_List.push([])
|
||||
},
|
||||
/* 改为从接受报警人中选取 */
|
||||
changeHiddenUserList(item, data) {
|
||||
item.USER_SIDE = data.USER_SIDE
|
||||
for (let i = 0; i < this.addForm.info.inspectorList.length; i++) {
|
||||
this.INSPECTOR_List[i].forEach(item => {
|
||||
if (this.addForm.info.inspectorList[i].INSPECTION_USER_ID === item.USER_ID) {
|
||||
const index = this.RESPONSIBLE_USER_List.findIndex(vector => vector.USER_ID === item.USER_ID)
|
||||
if (index < 0) {
|
||||
this.RESPONSIBLE_USER_List.push(item)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 搜索
|
||||
getReset() {
|
||||
this.KEYWORDS = ''
|
||||
this.listQuery = {
|
||||
page: 1,
|
||||
limit: 20
|
||||
}
|
||||
this.total = 0
|
||||
this.getQuery()
|
||||
},
|
||||
/**
|
||||
* 初始化天地图对象
|
||||
*/
|
||||
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.addForm.info.LONGITUDE && !this.addForm.info.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.addForm.info.LONGITUDE = lng
|
||||
this.addForm.info.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.addForm.info.LONGITUDE = event.lnglat.getLng()
|
||||
this.addForm.info.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() {
|
||||
this.dialogFormMap = true
|
||||
this.$nextTick(() => {
|
||||
if (!this.map) this.initMap(this.addForm.info.LONGITUDE, this.addForm.info.LATITUDE, 16)
|
||||
else this.initCenter(this.addForm.info.LONGITUDE, this.addForm.info.LATITUDE, 16)
|
||||
})
|
||||
},
|
||||
getRowKey(row) {
|
||||
return row.ALARMDEVICEMAINTENANCE_ID
|
||||
},
|
||||
// 搜索
|
||||
getQuery() {
|
||||
this.$refs.multipleTable.clearSelection()
|
||||
this.getList()
|
||||
},
|
||||
setPosition() {
|
||||
this.addForm.info.LONGTITUDEANDLATITUDE = this.addForm.info.LONGITUDE + '-' + this.addForm.info.LATITUDE
|
||||
this.addForm.alarmInfo.LONGITUDE = this.addForm.info.LONGITUDE
|
||||
this.addForm.alarmInfo.LATITUDE = this.addForm.info.LATITUDE
|
||||
this.addForm.alarmInfo.ALARM_AREA = this.addForm.info.LONGITUDE + '-' + this.addForm.info.LATITUDE
|
||||
this.dialogFormMap = false
|
||||
},
|
||||
// 获取列表
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/alarmDeviceMaintenance/list?showCount=' + this.listQuery.limit + '¤tPage=' + this.listQuery.page,
|
||||
{
|
||||
KEYWORDS: this.KEYWORDS,
|
||||
LOGIN_USER_ID: this.LOGIN_USER_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.varList = data.varList
|
||||
this.total = data.page.totalResult
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 添加
|
||||
handleAdd() {
|
||||
this.resetAddForm()
|
||||
this.addForm.dialogType = 'add'
|
||||
this.addForm.dialogVisible = true
|
||||
},
|
||||
goAlarmInfo(row) {
|
||||
this.$parent.activeName = 'infoList'
|
||||
this.$parent.ALARMDEVICEMAINTENANCE_ID = row.ALARMDEVICEMAINTENANCE_ID
|
||||
this.$parent.INDICATORSOURCE = row.INDICATORSOURCE
|
||||
this.$parent.LONGITUDE = row.LONGITUDE
|
||||
this.$parent.LATITUDE = row.LATITUDE
|
||||
},
|
||||
handleAlarm(row) {
|
||||
this.resetAddForm()
|
||||
this.addForm.alarmInfo = {
|
||||
...this.addForm.alarmInfo,
|
||||
ALARMDEVICEMAINTENANCE_ID: row.ALARMDEVICEMAINTENANCE_ID,
|
||||
SOURCE_NAME: row.INDICATORSOURCE,
|
||||
ALARM_AREA: row.LONGITUDE + '-' + row.LATITUDE,
|
||||
LATITUDE: row.LATITUDE,
|
||||
LONGITUDE: row.LONGITUDE
|
||||
}
|
||||
this.addForm.dialogAlarm = true
|
||||
},
|
||||
handleEdit(row) {
|
||||
this.resetAddForm()
|
||||
this.addForm.info = {
|
||||
...this.addForm.info,
|
||||
ALARMDEVICEMAINTENANCE_ID: row.ALARMDEVICEMAINTENANCE_ID,
|
||||
INDICATORSOURCE: row.INDICATORSOURCE,
|
||||
ALARMTHRESHOLD: row.ALARMTHRESHOLD,
|
||||
RECIPIENT: row.RECIPIENT,
|
||||
TYPE: row.TYPE,
|
||||
LONGTITUDEANDLATITUDE: row.LONGITUDE + '-' + row.LATITUDE,
|
||||
inspectorList: [{ INSPECTION_INSPECTOR_ID: '', INSPECTION_DEPARTMENT_ID: '', INSPECTION_USER_ID: '', USER_SIDE: '' }], // 接受报警人
|
||||
LATITUDE: row.LATITUDE,
|
||||
LONGITUDE: row.LONGITUDE
|
||||
}
|
||||
this.addForm.dialogType = 'edit'
|
||||
this.addForm.dialogVisible = true
|
||||
},
|
||||
|
||||
resetAddForm() {
|
||||
this.ALARMDEVICEMAINTENANCE_ID = ''
|
||||
this.addForm.info = {
|
||||
ALARMDEVICEMAINTENANCE_ID: '',
|
||||
inspectorList: [{ INSPECTION_INSPECTOR_ID: '', INSPECTION_DEPARTMENT_ID: '', INSPECTION_USER_ID: '', USER_SIDE: '' }], // 接受报警人
|
||||
INDICATORSOURCE: '',
|
||||
ALARMTHRESHOLD: '',
|
||||
RECIPIENT: '',
|
||||
TYPE: '',
|
||||
LATITUDE: '',
|
||||
LONGITUDE: ''
|
||||
}
|
||||
this.addForm.dialogType = ''
|
||||
},
|
||||
addAlarmInfo() {
|
||||
this.$refs.addForm.validate(valid => {
|
||||
if (valid) {
|
||||
requestFN(
|
||||
'/alarmInformation/add',
|
||||
{
|
||||
...this.addForm.alarmInfo
|
||||
}
|
||||
).then((data) => {
|
||||
this.$message.success('保存成功')
|
||||
this.getList()
|
||||
this.addForm.dialogAlarm = false
|
||||
}).catch((e) => {
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
confirm() {
|
||||
let flag = false
|
||||
this.addForm.info.inspectorList.forEach(item => {
|
||||
if (!this.validStr(item.INSPECTION_USER_ID)) {
|
||||
flag = true
|
||||
return
|
||||
}
|
||||
})
|
||||
if (flag) {
|
||||
this.$message({
|
||||
message: '接受报警人不能为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
this.$refs.addForm.validate(valid => {
|
||||
for (var x in this.addForm.info.inspectorList) {
|
||||
var vector = 0
|
||||
for (var y in this.addForm.info.inspectorList) {
|
||||
if (this.addForm.info.inspectorList[y].INSPECTION_USER_ID === this.addForm.info.inspectorList[x].INSPECTION_USER_ID) vector++
|
||||
}
|
||||
if (vector > 1) {
|
||||
this.$message.error('检查人重复！请检查相关数据')
|
||||
return
|
||||
}
|
||||
}
|
||||
if (valid) {
|
||||
this.$set(this.addForm.info, 'INSPECTORJSON', JSON.stringify(this.addForm.info.inspectorList))
|
||||
requestFN(
|
||||
'/alarmDeviceMaintenance/' + this.addForm.dialogType,
|
||||
{
|
||||
...this.addForm.info
|
||||
}
|
||||
).then((data) => {
|
||||
this.$message.success('保存成功')
|
||||
this.getList()
|
||||
this.addForm.dialogVisible = false
|
||||
}).catch((e) => {
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
handleDelete(id) {
|
||||
this.$confirm('确定要删除吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/alarmDeviceMaintenance/delete',
|
||||
{
|
||||
ALARMDEVICEMAINTENANCE_ID: id
|
||||
}
|
||||
).then((data) => {
|
||||
if (data.result === 'success') {
|
||||
this.$message({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
this.$message.error(data.msg)
|
||||
}
|
||||
this.listLoading = false
|
||||
this.varList = []
|
||||
this.listQuery.page = 1
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
batchDel() {
|
||||
const _selectData = this.$refs.multipleTable.selection
|
||||
if (_selectData == null || _selectData.length == 0) {
|
||||
this.$message({
|
||||
message: '请选中要删除的项...',
|
||||
type: 'error'
|
||||
})
|
||||
return false
|
||||
}
|
||||
const ids = _selectData.map((item, index) => {
|
||||
return item.GATEVIDEO_ID
|
||||
}).join(',')
|
||||
|
||||
this.$confirm('确定要删除选中的数据吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/gateVideo/deleteAll',
|
||||
{
|
||||
DATA_IDS: ids
|
||||
}
|
||||
).then(() => {
|
||||
this.listLoading = false
|
||||
this.varList = []
|
||||
this.listQuery.page = 1
|
||||
this.$refs.multipleTable.clearSelection()
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
goKeyReset() {
|
||||
this.KEYWORDS = ''
|
||||
this.getList()
|
||||
},
|
||||
|
||||
back() {
|
||||
if (this.addForm.dialogAlarm) this.addForm.dialogAlarm = false
|
||||
if (this.addForm.dialogVisible) this.addForm.dialogVisible = false
|
||||
if (this.dialogVideo) this.dialogVideo = false
|
||||
if (this.dialogVideoBack) this.dialogVideoBack = 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()
|
||||
}
|
||||
},
|
||||
// 获取数据字典数据
|
||||
getDict: function() {
|
||||
requestFN(
|
||||
'/dictionaries/getLevels',
|
||||
{
|
||||
DICTIONARIES_ID: '60e6481d96e44a5390ff5c347c4d1ffe' // 检查类型
|
||||
}
|
||||
).then((data) => {
|
||||
this.INSPECTION_TYPE_List = data.list
|
||||
}).catch((e) => {
|
||||
|
||||
})
|
||||
|
||||
requestFN(
|
||||
'/corpDepartment/listTreeCorpDept',
|
||||
{}
|
||||
).then((data) => {
|
||||
this.treeData = this.listTransTree(JSON.parse(data.zTreeNodes), 'id', 'pId', 'nodes')
|
||||
}).catch((e) => {
|
||||
})
|
||||
|
||||
requestFN(
|
||||
'/corpDepartment/listTreeManageAndCorp',
|
||||
{}
|
||||
).then((data) => {
|
||||
this.treeDataInspectDept = this.listTransTree(JSON.parse(data.zTreeNodes), 'id', 'pId', 'nodes')
|
||||
}).catch((e) => {
|
||||
})
|
||||
},
|
||||
// 判断按钮权限，用于是否显示按钮
|
||||
hasButton: function() {
|
||||
var keys = 'aiboxManager:add,aiboxManager:del,aiboxManager:edit'
|
||||
requestFN(
|
||||
'/head/hasButton',
|
||||
{
|
||||
keys: keys
|
||||
}
|
||||
).then((data) => {
|
||||
this.add = data.aiboxManagerfhadminadd // 新增权限
|
||||
this.del = data.aiboxManagerfhadmindel // 删除权限
|
||||
this.edit = data.aiboxManagerfhadminedit // 修改权限
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.ui-foot-xuan {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
position: inherit;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
background-color: #f1f1f1;
|
||||
text-align: center;
|
||||
}
|
||||
#map{
|
||||
width: 1000px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<transition name="fade" mode="out-in">
|
||||
<component :is="activeName"/>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import List from './components/list'
|
||||
import infoList from './components/infoList'
|
||||
export default {
|
||||
components: { List, infoList },
|
||||
data() {
|
||||
return {
|
||||
activeName: 'List',
|
||||
ALARMDEVICEMAINTENANCE_ID: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,597 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div>
|
||||
<el-button icon="el-icon-arrow-left" @click="goBack">返回</el-button>
|
||||
</div>
|
||||
<el-form label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="报警值">
|
||||
<el-input v-model="KEYWORDS" placeholder="请输入报警值"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label-width="10px">
|
||||
<el-button v-waves type="primary" icon="el-icon-search" @click="getQuery">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button type="success" icon="el-icon-view" size="mini" @click="getReset">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
ref="multipleTable"
|
||||
:row-key="getRowKey"
|
||||
:data="varList"
|
||||
: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="SOURCE_NAME" label="报警源名称" align="center"/>
|
||||
<el-table-column prop="SOURCE_VALUE" label="报警值" align="center"/>
|
||||
<el-table-column prop="ALARM_PEOPLE_NAME" label="报警处理人" align="center"/>
|
||||
<el-table-column prop="ALARM_AREA" label="报警区域" align="center"/>
|
||||
<el-table-column prop="ALARM_TIME" label="报警时间" align="center"/>
|
||||
<el-table-column prop="IS_ALARM" label="是否报警信息" align="center">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.IS_ALARM === '0' || row.IS_ALARM == null ? '未核定' : row.IS_ALARM === '1'? '是' : '否' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="VIDEO_COUNT" label="视频数" align="center"/>
|
||||
<el-table-column label="操作" align="center" width="300">
|
||||
<template slot-scope="{row}">
|
||||
<el-button type="success" icon="el-icon-search" size="mini" @click="viewNearbyCameras(row)">查看附近摄像头</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="page-btn-group">
|
||||
<div/>
|
||||
<pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
|
||||
</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="addForm.info.LONGITUDE" style="width: 200px" placeholder="请输入内容" disabled />
|
||||
<span>纬度：</span>
|
||||
<el-input v-model="addForm.info.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="addForm.dialogVisible" :title="addForm.dialogType==='add'?'新增':'编辑'" width="500px">
|
||||
<el-form ref="addForm" :model="addForm.info" :rules="addForm.rules" label-width="110px">
|
||||
<el-form-item label="是否报警信息：" prop="IS_ALARM">
|
||||
<el-select v-model="addForm.info.IS_ALARM" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in typeList"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div v-if="addForm.info.IS_ALARM === '2'">
|
||||
<el-form-item label="原因：" prop="REASON">
|
||||
<el-input v-model="addForm.info.REASON" style="width:206px" placeholder="请输入原因"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="back">取 消</el-button>
|
||||
<el-button type="primary" @click="confirm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-if="dialogVideo" :visible.sync="dialogVideo" :show-close="false" title="视频2" 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" :show-close="false" 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%">
|
||||
<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>
|
||||
</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 SelectTree from '@/components/SelectTree'
|
||||
|
||||
export default {
|
||||
components: { Pagination, TiandiMap, SelectTree },
|
||||
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: '',
|
||||
del: '',
|
||||
edit: '',
|
||||
dialogFormMap: false,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 20
|
||||
},
|
||||
total: 0,
|
||||
typeList: [{ name: '是', value: '1' }, { name: '否', value: '2' }],
|
||||
KEYWORDS: '',
|
||||
dates: [],
|
||||
varList: [],
|
||||
LATITUDE: '',
|
||||
LONGITUDE: '',
|
||||
zoom: 10,
|
||||
rules: {
|
||||
VIDEONAME: [{ required: true, message: '视频名称不能为空', trigger: 'blur' }],
|
||||
CODE: [{ required: true, message: '摄像头编号不能为空', trigger: 'blur' }]
|
||||
},
|
||||
dialogVideo: false,
|
||||
dialogVideoHLS: false,
|
||||
dialogVideoBack: false,
|
||||
dialogVideoAll: false,
|
||||
treeDataInspectDept: [],
|
||||
defaultProps: {
|
||||
value: 'id',
|
||||
children: 'nodes',
|
||||
label: 'name'
|
||||
},
|
||||
INSPECTOR_List: [],
|
||||
RESPONSIBLE_USER_List: [{ NAME: JSON.parse(sessionStorage.getItem('user')).NAME, USER_ID: JSON.parse(sessionStorage.getItem('user')).USER_ID }], // 隐患责任人
|
||||
addForm: {
|
||||
dialogType: 'add', // 增or改
|
||||
dialogVisible: false,
|
||||
rules: {
|
||||
LONGITUDE: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
LATITUDE: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
RECIPIENT: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
TYPE: [{ required: true, message: '不可为空', trigger: 'blur' }]
|
||||
},
|
||||
info: {
|
||||
ALARMINFORMATION_ID: '',
|
||||
ALARMDEVICEMAINTENANCE_ID: '',
|
||||
ALARM_TIME: '',
|
||||
ALARM_AREA: '',
|
||||
LONGITUDE: '',
|
||||
LATITUDE: '',
|
||||
IS_ALARM: '',
|
||||
REASON: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.getDict()
|
||||
this.hasButton()
|
||||
},
|
||||
methods: {
|
||||
clearAddform() {
|
||||
console.log(66666)
|
||||
this.addForm.info.ALARM_TIME = ''
|
||||
},
|
||||
// 获取人员列表
|
||||
getInspectorList(DEPARTMENT_ID, i) {
|
||||
if (DEPARTMENT_ID) {
|
||||
requestFN(
|
||||
'/user/listAllManageAndCorp',
|
||||
{
|
||||
CURRENT_INSPECTED_DEPARTMENT_ID: this.CURRENT_INSPECTED_DEPARTMENT_ID,
|
||||
DEPARTMENT_ID: DEPARTMENT_ID,
|
||||
NOMAIN: '1'
|
||||
}
|
||||
).then((data) => {
|
||||
this.INSPECTOR_List[i] = data.userList
|
||||
this.$forceUpdate()
|
||||
}).catch((e) => {
|
||||
})
|
||||
}
|
||||
},
|
||||
updateInspecteDept(id, i, item) {
|
||||
// 获取人员列表
|
||||
if (id) {
|
||||
requestFN(
|
||||
'/user/listAllManageAndCorp',
|
||||
{
|
||||
DEPARTMENT_ID: id
|
||||
}
|
||||
).then((data) => {
|
||||
this.INSPECTOR_List[i] = data.userList
|
||||
this.$forceUpdate()
|
||||
}).catch((e) => {
|
||||
})
|
||||
}
|
||||
this.addForm.info.inspectorList[i].INSPECTION_USER_ID = ''
|
||||
this.addForm.info.inspectorList[i].USER_SIDE = ''
|
||||
this.getInspectorList(DEPARTMENT_ID, i)
|
||||
},
|
||||
// 删除接受报警人
|
||||
delInspectorRow(row, index) {
|
||||
if (this.validStr(row.INSPECTION_DEPARTMENT_ID) || this.validStr(row.INSPECTION_USER_ID)) {
|
||||
this.$confirm('确定要移除第' + (index + 1) + '个接受报警人吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.addForm.info.inspectorList.splice(index, 1)
|
||||
this.INSPECTOR_List.splice(index, 1)
|
||||
}).catch(() => {
|
||||
})
|
||||
} else {
|
||||
this.addForm.info.inspectorList.splice(index, 1)
|
||||
this.INSPECTOR_List.splice(index, 1)
|
||||
}
|
||||
},
|
||||
addInspector() {
|
||||
console.log(this.addForm.info.inspectorList)
|
||||
this.addForm.info.inspectorList.push({ INSPECTION_INSPECTOR_ID: '', INSPECTION_DEPARTMENT_ID: '', INSPECTION_USER_ID: '', USER_SIDE: '' })
|
||||
this.INSPECTOR_List.push([])
|
||||
},
|
||||
/* 改为从接受报警人中选取 */
|
||||
changeHiddenUserList(item, data) {
|
||||
item.USER_SIDE = data.USER_SIDE
|
||||
for (let i = 0; i < this.addForm.info.inspectorList.length; i++) {
|
||||
this.INSPECTOR_List[i].forEach(item => {
|
||||
if (this.addForm.info.inspectorList[i].INSPECTION_USER_ID === item.USER_ID) {
|
||||
const index = this.RESPONSIBLE_USER_List.findIndex(vector => vector.USER_ID === item.USER_ID)
|
||||
if (index < 0) {
|
||||
this.RESPONSIBLE_USER_List.push(item)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 搜索
|
||||
getReset() {
|
||||
this.KEYWORDS = ''
|
||||
this.listQuery = {
|
||||
page: 1,
|
||||
limit: 20
|
||||
}
|
||||
this.total = 0
|
||||
this.getQuery()
|
||||
},
|
||||
/**
|
||||
* 初始化天地图对象
|
||||
*/
|
||||
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.addForm.info.LONGITUDE && !this.addForm.info.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.addForm.info.LONGITUDE = lng
|
||||
this.addForm.info.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.addForm.info.LONGITUDE = event.lnglat.getLng()
|
||||
this.addForm.info.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
|
||||
this.$nextTick(() => {
|
||||
if (!this.map) this.initMap(this.addForm.info.LONGITUDE, this.addForm.info.LATITUDE, 16)
|
||||
else this.initCenter(this.addForm.info.LONGITUDE, this.addForm.info.LATITUDE, 16)
|
||||
})
|
||||
},
|
||||
getRowKey(row) {
|
||||
return row.ALARMINFORMATION_ID
|
||||
},
|
||||
goBack() {
|
||||
this.$parent.activeName = 'list'
|
||||
},
|
||||
// 搜索
|
||||
getQuery() {
|
||||
this.$refs.multipleTable.clearSelection()
|
||||
this.getList()
|
||||
},
|
||||
setPosition() {
|
||||
this.addForm.info.LONGTITUDEANDLATITUDE = this.addForm.info.LONGITUDE + '--' + this.addForm.info.LATITUDE
|
||||
this.dialogFormMap = false
|
||||
},
|
||||
// 获取列表
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/alarmInformation/list?showCount=' + this.listQuery.limit + '¤tPage=' + this.listQuery.page,
|
||||
{
|
||||
KEYWORDS: this.KEYWORDS,
|
||||
ALARMDEVICEMAINTENANCE_ID: this.$parent.ALARMDEVICEMAINTENANCE_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.varList = data.varList
|
||||
this.total = data.page.totalResult
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 添加
|
||||
handleAdd() {
|
||||
this.resetAddForm()
|
||||
this.addForm.dialogType = 'add'
|
||||
this.addForm.dialogVisible = true
|
||||
},
|
||||
|
||||
viewNearbyCameras(row) {
|
||||
this.$parent.activeName = 'videoList'
|
||||
this.$parent.ALARMINFORMATION_ID = row.ALARMINFORMATION_ID
|
||||
this.$parent.LONGITUDE = row.LONGITUDE
|
||||
this.$parent.LATITUDE = row.LATITUDE
|
||||
},
|
||||
|
||||
resetAddForm() {
|
||||
this.ALARMDEVICEMAINTENANCE_ID = ''
|
||||
this.addForm.info = {
|
||||
ALARMDEVICEMAINTENANCE_ID: '',
|
||||
inspectorList: [{ INSPECTION_INSPECTOR_ID: '', INSPECTION_DEPARTMENT_ID: '', INSPECTION_USER_ID: '', USER_SIDE: '' }], // 接受报警人
|
||||
INDICATORSOURCE: '',
|
||||
ALARMTHRESHOLD: '',
|
||||
RECIPIENT: '',
|
||||
TYPE: '',
|
||||
LATITUDE: '',
|
||||
LONGITUDE: ''
|
||||
}
|
||||
this.addForm.dialogType = ''
|
||||
},
|
||||
confirm() {
|
||||
this.$refs.addForm.validate(valid => {
|
||||
if (valid) {
|
||||
requestFN(
|
||||
'/alarmInformation/' + this.addForm.dialogType,
|
||||
{
|
||||
...this.addForm.info
|
||||
}
|
||||
).then((data) => {
|
||||
this.$message.success('保存成功')
|
||||
this.getList()
|
||||
this.addForm.dialogVisible = false
|
||||
}).catch((e) => {
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
handleDelete(id) {
|
||||
this.$confirm('确定要删除吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/alarmInformation/delete',
|
||||
{
|
||||
ALARMINFORMATION_ID: id
|
||||
}
|
||||
).then((data) => {
|
||||
if (data.result === 'success') {
|
||||
this.$message({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
this.$message.error(data.msg)
|
||||
}
|
||||
this.listLoading = false
|
||||
this.varList = []
|
||||
this.listQuery.page = 1
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
batchDel() {
|
||||
const _selectData = this.$refs.multipleTable.selection
|
||||
if (_selectData == null || _selectData.length == 0) {
|
||||
this.$message({
|
||||
message: '请选中要删除的项...',
|
||||
type: 'error'
|
||||
})
|
||||
return false
|
||||
}
|
||||
const ids = _selectData.map((item, index) => {
|
||||
return item.GATEVIDEO_ID
|
||||
}).join(',')
|
||||
|
||||
this.$confirm('确定要删除选中的数据吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/gateVideo/deleteAll',
|
||||
{
|
||||
DATA_IDS: ids
|
||||
}
|
||||
).then(() => {
|
||||
this.listLoading = false
|
||||
this.varList = []
|
||||
this.listQuery.page = 1
|
||||
this.$refs.multipleTable.clearSelection()
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
goKeyReset() {
|
||||
this.KEYWORDS = ''
|
||||
this.getList()
|
||||
},
|
||||
|
||||
back() {
|
||||
if (this.addForm.dialogVisible) this.addForm.dialogVisible = false
|
||||
if (this.dialogVideo) this.dialogVideo = false
|
||||
if (this.dialogVideoBack) this.dialogVideoBack = 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()
|
||||
}
|
||||
},
|
||||
// 获取数据字典数据
|
||||
getDict: function() {
|
||||
requestFN(
|
||||
'/dictionaries/getLevels',
|
||||
{
|
||||
DICTIONARIES_ID: '60e6481d96e44a5390ff5c347c4d1ffe' // 检查类型
|
||||
}
|
||||
).then((data) => {
|
||||
this.INSPECTION_TYPE_List = data.list
|
||||
}).catch((e) => {
|
||||
|
||||
})
|
||||
|
||||
requestFN(
|
||||
'/corpDepartment/listTreeCorpDept',
|
||||
{}
|
||||
).then((data) => {
|
||||
this.treeData = this.listTransTree(JSON.parse(data.zTreeNodes), 'id', 'pId', 'nodes')
|
||||
}).catch((e) => {
|
||||
})
|
||||
|
||||
requestFN(
|
||||
'/corpDepartment/listTreeManageAndCorp',
|
||||
{}
|
||||
).then((data) => {
|
||||
this.treeDataInspectDept = this.listTransTree(JSON.parse(data.zTreeNodes), 'id', 'pId', 'nodes')
|
||||
}).catch((e) => {
|
||||
})
|
||||
},
|
||||
// 判断按钮权限，用于是否显示按钮
|
||||
hasButton: function() {
|
||||
var keys = 'aiboxManager:add,aiboxManager:del,aiboxManager:edit'
|
||||
requestFN(
|
||||
'/head/hasButton',
|
||||
{
|
||||
keys: keys
|
||||
}
|
||||
).then((data) => {
|
||||
this.add = data.aiboxManagerfhadminadd // 新增权限
|
||||
this.del = data.aiboxManagerfhadmindel // 删除权限
|
||||
this.edit = data.aiboxManagerfhadminedit // 修改权限
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.ui-foot-xuan {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
position: inherit;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
background-color: #f1f1f1;
|
||||
text-align: center;
|
||||
}
|
||||
#map{
|
||||
width: 1000px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,723 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="指标源">
|
||||
<el-input v-model="KEYWORDS" placeholder="请输入指标源名称"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label-width="10px">
|
||||
<el-button v-waves type="primary" icon="el-icon-search" @click="getQuery">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button type="success" icon="el-icon-view" size="mini" @click="getReset">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
ref="multipleTable"
|
||||
:row-key="getRowKey"
|
||||
:data="varList"
|
||||
: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="INDICATORSOURCE" label="指标源" align="center"/>
|
||||
<el-table-column prop="ALARMTHRESHOLD" label="报警阈值" align="center"/>
|
||||
<el-table-column prop="RECIPIENT_NAME" label="接受报警人" align="center"/>
|
||||
<el-table-column prop="LONGITUDE" label="经纬度" align="center">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.LONGITUDE ? row.LONGITUDE + '-' + row.LATITUDE : '未定位' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="TYPE" label="类型" align="center">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.TYPE === '0' ? '指标分析' : '报警源接入' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="ALARM_COUNT" label="报警数" align="center"/>
|
||||
<el-table-column label="操作" align="center" width="200">
|
||||
<template slot-scope="{row}">
|
||||
<el-button type="success" icon="el-icon-search" size="mini" @click="handleList(row)">查看报警信息</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="page-btn-group">
|
||||
<div/>
|
||||
<pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
|
||||
</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="addForm.info.LONGITUDE" style="width: 200px" placeholder="请输入内容" disabled />
|
||||
<span>纬度：</span>
|
||||
<el-input v-model="addForm.info.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="addForm.dialogVisible" :title="addForm.dialogType==='add'?'新增':'编辑'" width="1000px">
|
||||
<el-form ref="addForm" :model="addForm.info" :rules="addForm.rules" label-width="110px" style="width: 80%;">
|
||||
<el-form-item label="指标源" prop="INDICATORSOURCE">
|
||||
<el-input v-model="addForm.info.INDICATORSOURCE" placeholder="这里输入指标源..." />
|
||||
</el-form-item>
|
||||
<el-form-item label="报警阈值" prop="ALARMTHRESHOLD">
|
||||
<el-input v-model="addForm.info.ALARMTHRESHOLD" placeholder="这里输入报警阈值..." />
|
||||
</el-form-item>
|
||||
<el-form-item label="经纬度：" prop="LONGTITUDEANDLATITUDE">
|
||||
<el-input v-model="addForm.info.LONGTITUDEANDLATITUDE" style="width:206px" placeholder="请选择" disabled/>
|
||||
<el-button style="margin-left: 10px" type="primary" @click="handleMap">点击定位</el-button>
|
||||
</el-form-item>
|
||||
<el-divider content-position="left">接受报警人<el-button type="primary" size="mini" @click="addInspector"> 添加</el-button></el-divider>
|
||||
<el-form-item v-for="(item,index) in addForm.info.inspectorList" :key="index + (Math.random() + '').replace('.', '')" :label="(index+1)+'.'">
|
||||
<div class="uo-flex">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="11">
|
||||
<el-form-item label="接受报警人部门" prop="INSPECTION_DEPARTMENT_ID" label-width="120px">
|
||||
<SelectTree
|
||||
ref="'deptTree_INSPECTION'+index"
|
||||
:clearable="false"
|
||||
:options="treeDataInspectDept"
|
||||
:props="defaultProps"
|
||||
v-model="item.INSPECTION_DEPARTMENT_ID"
|
||||
placeholder="请选择接受报警人部门"
|
||||
style="width: 100%"
|
||||
@change="updateInspecteDept(item.INSPECTION_DEPARTMENT_ID,index,item)"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="9">
|
||||
<el-form-item label="接受报警人" prop="INSPECTION_USER_ID" label-width="100px">
|
||||
<el-select v-model="item.INSPECTION_USER_ID" clearable placeholder="请选择接受报警人">
|
||||
<el-option v-for="data in INSPECTOR_List[index]" :key="data.USER_ID" :label="data.NAME" :value="data.USER_ID" @click.native="changeHiddenUserList(item, data)" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<el-button plain size="mini" type="danger" icon="el-icon-delete" title="移除" @click="delInspectorRow(item,index)"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型：" prop="TYPE">
|
||||
<el-select v-model="addForm.info.TYPE" placeholder="请选择类型">
|
||||
<el-option
|
||||
v-for="item in typeList"
|
||||
:key="item.value"
|
||||
:label="item.name"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="back">取 消</el-button>
|
||||
<el-button type="primary" @click="confirm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :visible.sync="addForm.dialogAlarm" :title="'填报报警信息'" width="1000px">
|
||||
<el-form ref="addForm" :model="addForm.alarmInfo" :rules="addForm.rules" label-width="110px" style="width: 80%;">
|
||||
<el-form-item label="报警源名称" prop="SOURCE_NAME">
|
||||
<el-input v-model="addForm.alarmInfo.SOURCE_NAME" disabled placeholder="这里输入指标源..." />
|
||||
</el-form-item>
|
||||
<el-form-item label="报警值" prop="SOURCE_VALUE">
|
||||
<el-input v-model="addForm.alarmInfo.SOURCE_VALUE" placeholder="这里输入报警值..." />
|
||||
</el-form-item>
|
||||
<el-form-item label="报警时间" prop="ALARM_TIME">
|
||||
<el-date-picker
|
||||
v-model="addForm.alarmInfo.ALARM_TIME"
|
||||
type="datetime"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择日期时间"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="经纬度：" prop="ALARM_AREA">
|
||||
<el-input v-model="addForm.alarmInfo.ALARM_AREA" style="width:206px" placeholder="请选择" disabled/>
|
||||
<el-button style="margin-left: 10px" type="primary" @click="handleMap">点击定位</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="back">取 消</el-button>
|
||||
<el-button type="primary" @click="addAlarmInfo">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-if="dialogVideo" :visible.sync="dialogVideo" :show-close="false" title="视频2" 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" :show-close="false" 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%">
|
||||
<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>
|
||||
</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 SelectTree from '@/components/SelectTree'
|
||||
|
||||
export default {
|
||||
components: { Pagination, TiandiMap, SelectTree },
|
||||
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: '',
|
||||
del: '',
|
||||
edit: '',
|
||||
dialogFormMap: false,
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 20
|
||||
},
|
||||
total: 0,
|
||||
typeList: [{ name: '指标分析', value: '0' }, { name: '报警源接入', value: '1' }],
|
||||
KEYWORDS: '',
|
||||
LOGIN_USER_ID: JSON.parse(sessionStorage.getItem('user')).USER_ID,
|
||||
dates: [],
|
||||
varList: [],
|
||||
LATITUDE: '',
|
||||
LONGITUDE: '',
|
||||
zoom: 10,
|
||||
rules: {
|
||||
VIDEONAME: [{ required: true, message: '视频名称不能为空', trigger: 'blur' }],
|
||||
CODE: [{ required: true, message: '摄像头编号不能为空', trigger: 'blur' }]
|
||||
},
|
||||
dialogVideo: false,
|
||||
dialogVideoHLS: false,
|
||||
dialogVideoBack: false,
|
||||
dialogVideoAll: false,
|
||||
treeDataInspectDept: [],
|
||||
defaultProps: {
|
||||
value: 'id',
|
||||
children: 'nodes',
|
||||
label: 'name'
|
||||
},
|
||||
INSPECTOR_List: [],
|
||||
RESPONSIBLE_USER_List: [{ NAME: JSON.parse(sessionStorage.getItem('user')).NAME, USER_ID: JSON.parse(sessionStorage.getItem('user')).USER_ID }], // 隐患责任人
|
||||
addForm: {
|
||||
dialogType: 'add', // 增or改
|
||||
dialogVisible: false,
|
||||
dialogAlarm: false,
|
||||
rules: {
|
||||
LONGITUDE: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
LATITUDE: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
RECIPIENT: [{ required: true, message: '不可为空', trigger: 'blur' }],
|
||||
TYPE: [{ required: true, message: '不可为空', trigger: 'blur' }]
|
||||
},
|
||||
info: {
|
||||
ALARMDEVICEMAINTENANCE_ID: '',
|
||||
INDICATORSOURCE: '',
|
||||
ALARMTHRESHOLD: '',
|
||||
LONGTITUDEANDLATITUDE: '',
|
||||
LONGITUDE: '',
|
||||
LATITUDE: '',
|
||||
RECIPIENT: '',
|
||||
inspectorList: [{ INSPECTION_INSPECTOR_ID: '', INSPECTION_DEPARTMENT_ID: '', INSPECTION_USER_ID: '', USER_SIDE: '' }], // 接受报警人
|
||||
TYPE: ''
|
||||
},
|
||||
alarmInfo: {
|
||||
ALARMINFORMATION_ID: '',
|
||||
ALARMDEVICEMAINTENANCE_ID: '',
|
||||
SOURCE_NAME: '',
|
||||
SOURCE_VALUE: '',
|
||||
ALARM_TIME: '',
|
||||
ALARM_AREA: '',
|
||||
LONGITUDE: '',
|
||||
LATITUDE: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.getDict()
|
||||
this.hasButton()
|
||||
},
|
||||
methods: {
|
||||
// 获取人员列表
|
||||
getInspectorList(DEPARTMENT_ID, i) {
|
||||
if (DEPARTMENT_ID) {
|
||||
requestFN(
|
||||
'/user/listAllManageAndCorp',
|
||||
{
|
||||
CURRENT_INSPECTED_DEPARTMENT_ID: this.CURRENT_INSPECTED_DEPARTMENT_ID,
|
||||
DEPARTMENT_ID: DEPARTMENT_ID,
|
||||
NOMAIN: '1'
|
||||
}
|
||||
).then((data) => {
|
||||
this.INSPECTOR_List[i] = data.userList
|
||||
this.$forceUpdate()
|
||||
}).catch((e) => {
|
||||
})
|
||||
}
|
||||
},
|
||||
updateInspecteDept(id, i, item) {
|
||||
// 获取人员列表
|
||||
if (id) {
|
||||
requestFN(
|
||||
'/user/listAllManageAndCorp',
|
||||
{
|
||||
DEPARTMENT_ID: id
|
||||
}
|
||||
).then((data) => {
|
||||
this.INSPECTOR_List[i] = data.userList
|
||||
this.$forceUpdate()
|
||||
}).catch((e) => {
|
||||
})
|
||||
}
|
||||
this.addForm.info.inspectorList[i].INSPECTION_USER_ID = ''
|
||||
this.addForm.info.inspectorList[i].USER_SIDE = ''
|
||||
this.getInspectorList(id, i)
|
||||
},
|
||||
// 删除接受报警人
|
||||
delInspectorRow(row, index) {
|
||||
if (this.validStr(row.INSPECTION_DEPARTMENT_ID) || this.validStr(row.INSPECTION_USER_ID)) {
|
||||
this.$confirm('确定要移除第' + (index + 1) + '个接受报警人吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.addForm.info.inspectorList.splice(index, 1)
|
||||
this.INSPECTOR_List.splice(index, 1)
|
||||
}).catch(() => {
|
||||
})
|
||||
} else {
|
||||
this.addForm.info.inspectorList.splice(index, 1)
|
||||
this.INSPECTOR_List.splice(index, 1)
|
||||
}
|
||||
},
|
||||
addInspector() {
|
||||
console.log(this.addForm.info.inspectorList)
|
||||
this.addForm.info.inspectorList.push({ INSPECTION_INSPECTOR_ID: '', INSPECTION_DEPARTMENT_ID: '', INSPECTION_USER_ID: '', USER_SIDE: '' })
|
||||
this.INSPECTOR_List.push([])
|
||||
},
|
||||
/* 改为从接受报警人中选取 */
|
||||
changeHiddenUserList(item, data) {
|
||||
item.USER_SIDE = data.USER_SIDE
|
||||
for (let i = 0; i < this.addForm.info.inspectorList.length; i++) {
|
||||
this.INSPECTOR_List[i].forEach(item => {
|
||||
if (this.addForm.info.inspectorList[i].INSPECTION_USER_ID === item.USER_ID) {
|
||||
const index = this.RESPONSIBLE_USER_List.findIndex(vector => vector.USER_ID === item.USER_ID)
|
||||
if (index < 0) {
|
||||
this.RESPONSIBLE_USER_List.push(item)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 搜索
|
||||
getReset() {
|
||||
this.KEYWORDS = ''
|
||||
this.listQuery = {
|
||||
page: 1,
|
||||
limit: 20
|
||||
}
|
||||
this.total = 0
|
||||
this.getQuery()
|
||||
},
|
||||
/**
|
||||
* 初始化天地图对象
|
||||
*/
|
||||
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.addForm.info.LONGITUDE && !this.addForm.info.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.addForm.info.LONGITUDE = lng
|
||||
this.addForm.info.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.addForm.info.LONGITUDE = event.lnglat.getLng()
|
||||
this.addForm.info.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() {
|
||||
this.dialogFormMap = true
|
||||
this.$nextTick(() => {
|
||||
if (!this.map) this.initMap(this.addForm.info.LONGITUDE, this.addForm.info.LATITUDE, 16)
|
||||
else this.initCenter(this.addForm.info.LONGITUDE, this.addForm.info.LATITUDE, 16)
|
||||
})
|
||||
},
|
||||
getRowKey(row) {
|
||||
return row.ALARMINFORMATION_ID
|
||||
},
|
||||
// 搜索
|
||||
getQuery() {
|
||||
this.$refs.multipleTable.clearSelection()
|
||||
this.getList()
|
||||
},
|
||||
setPosition() {
|
||||
this.addForm.info.LONGTITUDEANDLATITUDE = this.addForm.info.LONGITUDE + '-' + this.addForm.info.LATITUDE
|
||||
this.addForm.alarmInfo.LONGITUDE = this.addForm.info.LONGITUDE
|
||||
this.addForm.alarmInfo.LATITUDE = this.addForm.info.LATITUDE
|
||||
this.addForm.alarmInfo.ALARM_AREA = this.addForm.info.LONGITUDE + '-' + this.addForm.info.LATITUDE
|
||||
this.dialogFormMap = false
|
||||
},
|
||||
// 获取列表
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/alarmDeviceMaintenance/list?showCount=' + this.listQuery.limit + '¤tPage=' + this.listQuery.page,
|
||||
{
|
||||
KEYWORDS: this.KEYWORDS,
|
||||
LOGIN_USER_ID: this.LOGIN_USER_ID
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.varList = data.varList
|
||||
this.total = data.page.totalResult
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
// 添加
|
||||
handleAdd() {
|
||||
this.resetAddForm()
|
||||
this.addForm.dialogType = 'add'
|
||||
this.addForm.dialogVisible = true
|
||||
},
|
||||
handleAlarm(row) {
|
||||
this.resetAddForm()
|
||||
this.addForm.alarmInfo = {
|
||||
...this.addForm.alarmInfo,
|
||||
ALARMDEVICEMAINTENANCE_ID: row.ALARMDEVICEMAINTENANCE_ID,
|
||||
SOURCE_NAME: row.INDICATORSOURCE,
|
||||
ALARM_AREA: row.LONGITUDE + '-' + row.LATITUDE,
|
||||
LATITUDE: row.LATITUDE,
|
||||
LONGITUDE: row.LONGITUDE
|
||||
}
|
||||
this.addForm.dialogAlarm = true
|
||||
},
|
||||
handleList(row) {
|
||||
this.$parent.activeName = 'alarmInfoList'
|
||||
this.$parent.ALARMDEVICEMAINTENANCE_ID = row.ALARMDEVICEMAINTENANCE_ID
|
||||
},
|
||||
|
||||
resetAddForm() {
|
||||
this.ALARMDEVICEMAINTENANCE_ID = ''
|
||||
this.addForm.info = {
|
||||
ALARMDEVICEMAINTENANCE_ID: '',
|
||||
inspectorList: [{ INSPECTION_INSPECTOR_ID: '', INSPECTION_DEPARTMENT_ID: '', INSPECTION_USER_ID: '', USER_SIDE: '' }], // 接受报警人
|
||||
INDICATORSOURCE: '',
|
||||
ALARMTHRESHOLD: '',
|
||||
RECIPIENT: '',
|
||||
TYPE: '',
|
||||
LATITUDE: '',
|
||||
LONGITUDE: ''
|
||||
}
|
||||
this.addForm.dialogType = ''
|
||||
},
|
||||
addAlarmInfo() {
|
||||
this.$refs.addForm.validate(valid => {
|
||||
if (valid) {
|
||||
requestFN(
|
||||
'/alarmInformation/add',
|
||||
{
|
||||
...this.addForm.alarmInfo
|
||||
}
|
||||
).then((data) => {
|
||||
this.$message.success('保存成功')
|
||||
this.getList()
|
||||
this.addForm.dialogAlarm = false
|
||||
}).catch((e) => {
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
confirm() {
|
||||
let flag = false
|
||||
this.addForm.info.inspectorList.forEach(item => {
|
||||
if (!this.validStr(item.INSPECTION_USER_ID)) {
|
||||
flag = true
|
||||
return
|
||||
}
|
||||
})
|
||||
if (flag) {
|
||||
this.$message({
|
||||
message: '接受报警人不能为空',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
this.$refs.addForm.validate(valid => {
|
||||
for (var x in this.addForm.info.inspectorList) {
|
||||
var vector = 0
|
||||
for (var y in this.addForm.info.inspectorList) {
|
||||
if (this.addForm.info.inspectorList[y].INSPECTION_USER_ID === this.addForm.info.inspectorList[x].INSPECTION_USER_ID) vector++
|
||||
}
|
||||
if (vector > 1) {
|
||||
this.$message.error('检查人重复！请检查相关数据')
|
||||
return
|
||||
}
|
||||
}
|
||||
if (valid) {
|
||||
this.$set(this.addForm.info, 'INSPECTORJSON', JSON.stringify(this.addForm.info.inspectorList))
|
||||
requestFN(
|
||||
'/alarmDeviceMaintenance/' + this.addForm.dialogType,
|
||||
{
|
||||
...this.addForm.info
|
||||
}
|
||||
).then((data) => {
|
||||
this.$message.success('保存成功')
|
||||
this.getList()
|
||||
this.addForm.dialogVisible = false
|
||||
}).catch((e) => {
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
handleDelete(id) {
|
||||
this.$confirm('确定要删除吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/alarmDeviceMaintenance/delete',
|
||||
{
|
||||
ALARMDEVICEMAINTENANCE_ID: id
|
||||
}
|
||||
).then((data) => {
|
||||
if (data.result === 'success') {
|
||||
this.$message({
|
||||
message: '删除成功',
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
this.$message.error(data.msg)
|
||||
}
|
||||
this.listLoading = false
|
||||
this.varList = []
|
||||
this.listQuery.page = 1
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
batchDel() {
|
||||
const _selectData = this.$refs.multipleTable.selection
|
||||
if (_selectData == null || _selectData.length == 0) {
|
||||
this.$message({
|
||||
message: '请选中要删除的项...',
|
||||
type: 'error'
|
||||
})
|
||||
return false
|
||||
}
|
||||
const ids = _selectData.map((item, index) => {
|
||||
return item.GATEVIDEO_ID
|
||||
}).join(',')
|
||||
|
||||
this.$confirm('确定要删除选中的数据吗?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/gateVideo/deleteAll',
|
||||
{
|
||||
DATA_IDS: ids
|
||||
}
|
||||
).then(() => {
|
||||
this.listLoading = false
|
||||
this.varList = []
|
||||
this.listQuery.page = 1
|
||||
this.$refs.multipleTable.clearSelection()
|
||||
this.getList()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
goKeyReset() {
|
||||
this.KEYWORDS = ''
|
||||
this.getList()
|
||||
},
|
||||
|
||||
back() {
|
||||
if (this.addForm.dialogAlarm) this.addForm.dialogAlarm = false
|
||||
if (this.addForm.dialogVisible) this.addForm.dialogVisible = false
|
||||
if (this.dialogVideo) this.dialogVideo = false
|
||||
if (this.dialogVideoBack) this.dialogVideoBack = 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()
|
||||
}
|
||||
},
|
||||
// 获取数据字典数据
|
||||
getDict: function() {
|
||||
requestFN(
|
||||
'/dictionaries/getLevels',
|
||||
{
|
||||
DICTIONARIES_ID: '60e6481d96e44a5390ff5c347c4d1ffe' // 检查类型
|
||||
}
|
||||
).then((data) => {
|
||||
this.INSPECTION_TYPE_List = data.list
|
||||
}).catch((e) => {
|
||||
|
||||
})
|
||||
|
||||
requestFN(
|
||||
'/corpDepartment/listTreeCorpDept',
|
||||
{}
|
||||
).then((data) => {
|
||||
this.treeData = this.listTransTree(JSON.parse(data.zTreeNodes), 'id', 'pId', 'nodes')
|
||||
}).catch((e) => {
|
||||
})
|
||||
|
||||
requestFN(
|
||||
'/corpDepartment/listTreeManageAndCorp',
|
||||
{}
|
||||
).then((data) => {
|
||||
this.treeDataInspectDept = this.listTransTree(JSON.parse(data.zTreeNodes), 'id', 'pId', 'nodes')
|
||||
}).catch((e) => {
|
||||
})
|
||||
},
|
||||
// 判断按钮权限，用于是否显示按钮
|
||||
hasButton: function() {
|
||||
var keys = 'aiboxManager:add,aiboxManager:del,aiboxManager:edit'
|
||||
requestFN(
|
||||
'/head/hasButton',
|
||||
{
|
||||
keys: keys
|
||||
}
|
||||
).then((data) => {
|
||||
this.add = data.aiboxManagerfhadminadd // 新增权限
|
||||
this.del = data.aiboxManagerfhadmindel // 删除权限
|
||||
this.edit = data.aiboxManagerfhadminedit // 修改权限
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.ui-foot-xuan {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
position: inherit;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
background-color: #f1f1f1;
|
||||
text-align: center;
|
||||
}
|
||||
#map{
|
||||
width: 1000px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,250 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div>
|
||||
<el-button icon="el-icon-arrow-left" @click="goBack">返回</el-button>
|
||||
</div>
|
||||
<el-form label-width="100px">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="关键词">
|
||||
<el-input v-model="KEYWORDS" placeholder="视频名称"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label-width="10px">
|
||||
<el-button v-waves type="primary" icon="el-icon-search" @click="getQuery">
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button type="success" icon="el-icon-view" size="mini" @click="getReset">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
ref="multipleTable"
|
||||
:row-key="getRowKey"
|
||||
:data="varList"
|
||||
: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="视频名称" align="center"/>
|
||||
<el-table-column prop="LONGITUDE" label="经纬度" align="center">
|
||||
<template slot-scope="{row}">
|
||||
{{ row.LONGITUDE ? row.LONGITUDE + '-' + row.LATITUDE : '未定位' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="200">
|
||||
<template slot-scope="{row}">
|
||||
<el-button v-if="row.VIDEO_TYPE === '0'" type="success" icon="el-icon-caret-right" size="mini" @click="showVideo(row.VIDEO_URL)">播放</el-button>
|
||||
<el-button v-if="row.VIDEO_TYPE === '1'" type="primary" icon="el-icon-caret-right" size="mini" @click="showVideo(row.VIDEO_URL)">播放</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="page-btn-group">
|
||||
<div/>
|
||||
<pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
|
||||
</div>
|
||||
|
||||
<!-- <el-dialog v-if="dialogVideo" :visible.sync="dialogVideo" :show-close="false" title="视频2" 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="dialogVideo" :visible.sync="dialogVideo" title="视频" width="600px">
|
||||
<video v-if="VIDEO_URL.endsWith('.m3u8')" ref="video" class="full-height full-width" controls/>
|
||||
<iframe v-else :src="VIDEO_URL" 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="dialogVideoAll" :visible.sync="dialogVideoAll" 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 :src="video.GBSVIDEOURL" width="100%" height="380" allowfullscreen allow="autoplay; fullscreen;microphone" style="position: relative;border:none"/>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="back">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
|
||||
import { requestFN } from '@/utils/request'
|
||||
import waves from '@/directive/waves' // waves directive
|
||||
|
||||
export default {
|
||||
components: { Pagination },
|
||||
directives: { waves },
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
marker: null,
|
||||
BMap: '',
|
||||
clientHeight: 500,
|
||||
inputLocation: '',
|
||||
msg: 'add',
|
||||
config: config,
|
||||
listLoading: true,
|
||||
add: '',
|
||||
del: '',
|
||||
edit: '',
|
||||
listQuery: {
|
||||
page: 1,
|
||||
limit: 20
|
||||
},
|
||||
total: 0,
|
||||
KEYWORDS: '',
|
||||
dates: [],
|
||||
varList: [],
|
||||
LATITUDE: '',
|
||||
LONGITUDE: '',
|
||||
dialogVideo: false,
|
||||
dialogVideoAll: false,
|
||||
VIDEO_URL: '',
|
||||
zoom: 10
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.hasButton()
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
this.dialogVideo = false
|
||||
this.dialogVideoAll = false
|
||||
this.dialogForm = false
|
||||
this.listLoading = false
|
||||
},
|
||||
// 播放
|
||||
showVideo(path) {
|
||||
this.VIDEO_URL = path
|
||||
this.dialogVideo = true
|
||||
},
|
||||
showAll() {
|
||||
const _selectData = this.$refs.multipleTable.selection
|
||||
if (_selectData == null || _selectData.length == 0) {
|
||||
this.$message({
|
||||
message: '请选中要播放的视频...',
|
||||
type: 'error'
|
||||
})
|
||||
return false
|
||||
}
|
||||
const ids = _selectData.map((item, index) => {
|
||||
return item.VIDEOMANAGER_ID
|
||||
}).join(',')
|
||||
this.videoList = []
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/api/videomanager/goAllVideo',
|
||||
{
|
||||
DATA_IDS: ids
|
||||
}
|
||||
).then((data) => {
|
||||
this.videoList = data.videoList
|
||||
this.hideUpload = true
|
||||
this.listLoading = false
|
||||
this.dialogVideoAll = true
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
// 获取列表
|
||||
getList() {
|
||||
this.listLoading = true
|
||||
requestFN(
|
||||
'/aiboxVideo/listForAlarm?showCount=' + this.listQuery.limit + '¤tPage=' + this.listQuery.page,
|
||||
{
|
||||
KEYWORDS: this.KEYWORDS,
|
||||
LONGITUDE: this.$parent.LONGITUDE,
|
||||
LATITUDE: this.$parent.LATITUDE
|
||||
}
|
||||
).then((data) => {
|
||||
this.listLoading = false
|
||||
this.varList = data.varList
|
||||
this.total = data.page.totalResult
|
||||
this.hasButton()
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
goBack() {
|
||||
this.$parent.activeName = 'alarmInfoList'
|
||||
},
|
||||
// 搜索
|
||||
getReset() {
|
||||
this.KEYWORDS = ''
|
||||
this.listQuery = {
|
||||
page: 1,
|
||||
limit: 20
|
||||
}
|
||||
this.total = 0
|
||||
this.getQuery()
|
||||
},
|
||||
getRowKey(row) {
|
||||
return row.ALARMDEVICEMAINTENANCE_ID
|
||||
},
|
||||
// 搜索
|
||||
getQuery() {
|
||||
this.$refs.multipleTable.clearSelection()
|
||||
this.getList()
|
||||
},
|
||||
goKeyReset() {
|
||||
this.KEYWORDS = ''
|
||||
this.getList()
|
||||
},
|
||||
// 判断按钮权限，用于是否显示按钮
|
||||
hasButton: function() {
|
||||
var keys = 'aiboxManager:add,aiboxManager:del,aiboxManager:edit'
|
||||
requestFN(
|
||||
'/head/hasButton',
|
||||
{
|
||||
keys: keys
|
||||
}
|
||||
).then((data) => {
|
||||
this.add = data.aiboxManagerfhadminadd // 新增权限
|
||||
this.del = data.aiboxManagerfhadmindel // 删除权限
|
||||
this.edit = data.aiboxManagerfhadminedit // 修改权限
|
||||
}).catch((e) => {
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.ui-foot-xuan {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
position: inherit;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
background-color: #f1f1f1;
|
||||
text-align: center;
|
||||
}
|
||||
#map{
|
||||
width: 1000px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<transition name="fade" mode="out-in">
|
||||
<component :is="activeName"/>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import List from './components/list'
|
||||
import alarmInfoList from './components/alarmInfoList'
|
||||
import videoList from './components/videoList'
|
||||
export default {
|
||||
components: { List, alarmInfoList, videoList },
|
||||
data() {
|
||||
return {
|
||||
activeName: 'List',
|
||||
ALARMINFORMATION_ID: '',
|
||||
ALARMDEVICEMAINTENANCE_ID: '',
|
||||
LONGITUDE: '',
|
||||
LATITUDE: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,297 @@
|
|||
<template>
|
||||
<div class="app-container print-work">
|
||||
<!--消防控制室-->
|
||||
<div class="level-title">
|
||||
<h1>基础信息</h1>
|
||||
</div>
|
||||
<table class="table-ui">
|
||||
<tr>
|
||||
<td class="bbg-transparent">指标源</td>
|
||||
<td colspan="2">{{ pd.INDICATORSOURCE }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bbg-transparent">报警阈值</td>
|
||||
<td colspan="2">{{ pd.ALARMTHRESHOLD }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bbg-transparent">经纬度</td>
|
||||
<td colspan="2">{{ pd.LONGITUDE + '-' + pd.LATITUDE }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bbg-transparent">接受报警人</td>
|
||||
<td colspan="2">{{ pd.RECIPIENT_NAME }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bbg-transparent">修改时间</td>
|
||||
<td colspan="2">{{ pd.OPERATE_TIME }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bbg-transparent">类型</td>
|
||||
<td colspan="2">{{ pd.TYPE === '0' ? '指标分析' : pd.TYPE === '1' ? '报警源接入' : '未定义' }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div v-show="alarmInfoList != null && alarmInfoList.length > 0" class="table-ui">
|
||||
<div class="level-title" style="position: relative; top: 25px">
|
||||
<h1>报警信息</h1>
|
||||
</div>
|
||||
<div v-for="(item,index) in alarmInfoList" :key="index" style="position: relative; top: 25px">
|
||||
<div class="item">
|
||||
<table class="table-ui">
|
||||
<div>{{ '报警信息' + (index+1) + '：' }}</div>
|
||||
<tr>
|
||||
<td class="bbg-transparent">报警值</td>
|
||||
<td>{{ item.SOURCE_VALUE }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bbg-transparent">报警时间</td>
|
||||
<td>{{ item.CREATE_TIME }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bbg-transparent">是否报警信息</td>
|
||||
<td>{{ item.IS_ALARM === '1' ? '是' : item.IS_ALARM === '2' ? '否' : '未审核' }}</td>
|
||||
</tr>
|
||||
<tr v-show="item.IS_ALARM === '1' && item.INFORMANT_NAME">
|
||||
<td class="bbg-transparent">报警人姓名</td>
|
||||
<td>{{ item.INFORMANT_NAME }}</td>
|
||||
</tr>
|
||||
<tr v-show="item.IS_ALARM === '1' && item.INFORMANT_NAME">
|
||||
<td class="bbg-transparent">报警人电话</td>
|
||||
<td>{{ item.INFORMANT_PHONE }}</td>
|
||||
</tr>
|
||||
<tr v-show="item.IS_ALARM === '1' && item.INFORMANT_NAME">
|
||||
<td class="bbg-transparent">详细地址</td>
|
||||
<td>{{ item.ADDRESS }}</td>
|
||||
</tr>
|
||||
<tr v-show="item.IS_ALARM === '1' && item.INFORMANT_NAME">
|
||||
<td class="bbg-transparent">报警内容</td>
|
||||
<td>{{ item.CONTENT }}</td>
|
||||
</tr>
|
||||
<tr v-show="item.IS_ALARM === '1' && !item.INFORMANT_NAME">
|
||||
<td class="bbg-transparent">报警信息</td>
|
||||
<td> 待填报 </td>
|
||||
</tr>
|
||||
<tr v-show="item.IS_ALARM === '2' && item.REASON">
|
||||
<td class="bbg-transparent">原因</td>
|
||||
<td>{{ item.REASON }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class="table-ui">
|
||||
<div class="level-title" style="position: relative; top: 50px">
|
||||
<h1>附近摄像头</h1>
|
||||
</div>
|
||||
<div v-for="(item,index) in videoList" :key="index" style="position: relative; top: 50px">
|
||||
<div class="item">
|
||||
<table class="table-ui">
|
||||
<div>{{ '摄像头' + (index+1) + '：' }}</div>
|
||||
<tr>
|
||||
<td class="bbg-transparent">摄像头名称</td>
|
||||
<td>{{ item.VIDEO_NAME }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bbg-transparent">摄像头位置</td>
|
||||
<td>{{ item.LONGITUDE + '-' + item.LATITUDE }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="bbg-transparent">播放视频</td>
|
||||
<td><el-button type="success" icon="el-icon-caret-right" size="mini" @click="showVideo(item)">播放</el-button></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</table>
|
||||
<el-dialog v-if="dialogVideo" :visible.sync="dialogVideo" :append-to-body="true" title="视频2" 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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { requestFN } from '@/utils/request'
|
||||
import moment from 'moment'
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default() {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default() {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
gangkou: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
config: config,
|
||||
FIRERESOURCES_NAME: '',
|
||||
pd: {},
|
||||
videoList: [],
|
||||
images: [],
|
||||
pumpRoomList: [],
|
||||
dialogVideo: false,
|
||||
alarmInfoList: [],
|
||||
VIDEOURL: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'id': function(now, old) {
|
||||
if (now) {
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
this.getAlarmInfo()
|
||||
this.getVideoData()
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
if (this.dialogVideo) this.dialogVideo = false
|
||||
},
|
||||
// 五分钟关闭视频播放页面定时任务
|
||||
start() {
|
||||
console.log('定时器开启')
|
||||
this.timer = setInterval(this.closeVideoStart, (5 * 60 * 1000)) // 5分钟
|
||||
},
|
||||
over() {
|
||||
// 定时器手动关闭
|
||||
console.log('定时器自动关闭')
|
||||
this.$message.warning('单次播放时长已到5分钟自动关闭')
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
closeVideoStart() {
|
||||
this.dialogVideo = false
|
||||
this.dialogVideoHLS = false
|
||||
this.dialogVideoBack = false
|
||||
this.dialogVideoAll = false
|
||||
this.over()
|
||||
},
|
||||
// 播放
|
||||
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
|
||||
}
|
||||
},
|
||||
showVideo(row) {
|
||||
this.$message.warning('单次播放最多五分钟')
|
||||
this.start()
|
||||
if (row.VIDEO_TYPE === '0') {
|
||||
this.VIDEOURL = row.VIDEO_URL
|
||||
this.dialogVideo = true
|
||||
} else {
|
||||
requestFN(
|
||||
'/platformvideomanagement/getHlsPath',
|
||||
{
|
||||
INDEXCODE: row.CODE
|
||||
}
|
||||
).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.over()
|
||||
this.listLoading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
formatDate(date, format) {
|
||||
if (date) {
|
||||
return moment(date).format(format)
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
getData() {
|
||||
requestFN(
|
||||
'/alarmDeviceMaintenance/getById',
|
||||
{
|
||||
ALARMDEVICEMAINTENANCE_ID: this.id,
|
||||
GANGKOU: this.gangkou
|
||||
}
|
||||
).then((data) => {
|
||||
this.pd = data.pageData
|
||||
}).catch((e) => {
|
||||
})
|
||||
},
|
||||
getAlarmInfo() {
|
||||
requestFN(
|
||||
'/alarmInformation/getAlarmInfoById',
|
||||
{
|
||||
ALARMDEVICEMAINTENANCE_ID: this.id,
|
||||
GANGKOU: this.gangkou
|
||||
}
|
||||
).then((data) => {
|
||||
this.alarmInfoList = data.alarmInfoList
|
||||
}).catch((e) => {
|
||||
})
|
||||
},
|
||||
getVideoData() {
|
||||
requestFN(
|
||||
'/alarmDeviceMaintenance/getVideoById',
|
||||
{
|
||||
ALARMDEVICEMAINTENANCE_ID: this.id,
|
||||
GANGKOU: this.gangkou
|
||||
}
|
||||
).then((data) => {
|
||||
this.videoList = data.videoList
|
||||
}).catch((e) => {
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.img {
|
||||
display: flex;
|
||||
|
||||
.img_item {
|
||||
margin-left: 10px;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
<windspeedstation-cmt v-if="type === '2da29f00852a4653ba3e760b9de5741200005'" :name="name" :id="id" :type="type" :gangkou="gangkou"/>
|
||||
<xf-point v-if="type === 'point'" :id="id" :type="type" :gangkou="gangkou"/>
|
||||
<xf-control v-if="type === 'xfbf01' || type ==='xfkzs01' || type ==='xfjyd01' || type ==='xfsy01'" :id="id" :type="type" :gangkou="gangkou"/>
|
||||
<alarm-device v-if="type === 'alarm'" :id="id" :type="type" :gangkou="gangkou"/>
|
||||
<mk-gate-machine v-if="type === 'CAR'||type ==='PERSON' || type ==='CAMERA'" :id="id" :type="type" :gangkou="gangkou"/>
|
||||
<mk-gate-machine-cfd v-if="type === 'CAR00004'||type ==='PERSON00004' " :id="id" :type="type" :gangkou="gangkou" :infoname="infoname"/>
|
||||
<mk-gate-machine-cmt v-if="type === 'CAR00005'||type ==='PERSON00005' " :id="id" :type="type" :gangkou="gangkou" :infoname="infoname"/>
|
||||
|
|
@ -104,9 +105,11 @@ import hotworkFirst from './hotworkFirst'
|
|||
import peoplePositionYGS from './peoplePositionYGS.vue'
|
||||
import outSourceInfo from './outSourceInfo.vue'
|
||||
import outSourceVideoInfo from './outSourceVideoInfo.vue'
|
||||
import AlarmDevice from './alarmDevice'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AlarmDevice,
|
||||
Zhong_da_info,
|
||||
MkGateMachine,
|
||||
XfPoint,
|
||||
|
|
|
|||
|
|
@ -531,6 +531,16 @@ export default {
|
|||
checkImg: require('../../assets/map/gangkou_index/buttom/ico8_on.png'),
|
||||
containAuthorization: [],
|
||||
eliminateAuthorization: []
|
||||
},
|
||||
{
|
||||
label: '报警设备',
|
||||
dialog_width: '600px',
|
||||
check: false,
|
||||
type: 'alarm',
|
||||
img: require('../../assets/map/gangkou_index/buttom/ico28.png'),
|
||||
checkImg: require('../../assets/map/gangkou_index/buttom/ico28_on.png'),
|
||||
containAuthorization: [],
|
||||
eliminateAuthorization: []
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -3030,14 +3040,14 @@ export default {
|
|||
// create by liu jun (PS:此处根据[下面这个if]孙海官的需求，对消防管控的权限进行了特殊处理，未进入具体企业时，显示消防救援队，进入具体企业后，显示消防管控其他按钮)
|
||||
if (item && item.list && item.list.length > 0) {
|
||||
if (item.label === '消防管控') {
|
||||
if (e.label === '消防救援队') {
|
||||
if (e.label === '消防救援队' && e.label === '报警设备') {
|
||||
if (this.gangkouActive === '00005') {
|
||||
return true
|
||||
} else {
|
||||
return !(this.CORP_INFO_ID && this.CORP_INFO_ID !== '')
|
||||
}
|
||||
}
|
||||
if (e.label !== '消防救援队') {
|
||||
if (e.label !== '消防救援队' && e.label !== '报警设备') {
|
||||
return (this.CORP_INFO_ID && this.CORP_INFO_ID !== '')
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ const img1_1 = require('../../../assets/map/gangkou_index/point/ico5.png')
|
|||
const img1_2 = require('../../../assets/map/gangkou_index/point/ico6.png')
|
||||
const img1_3 = require('../../../assets/map/gangkou_index/point/ico7.png')
|
||||
const img1_4 = require('../../../assets/map/gangkou_index/point/ico8.png')
|
||||
const img1_5 = require('../../../assets/map/gangkou_index/point/ico32.png')
|
||||
|
||||
const img2_0 = require('../../../assets/map/gangkou_index/point/ico9.png')
|
||||
const img2_1 = require('../../../assets/map/gangkou_index/point/ico10.png')
|
||||
|
|
@ -53,7 +54,7 @@ const img8_3 = require('../../../assets/map/gangkou_index/point/ico26.png')
|
|||
|
||||
const imgMap = {
|
||||
img0_0, img0_1, img0_2,
|
||||
img1_0, img1_1, img1_2, img1_3, img1_4,
|
||||
img1_0, img1_1, img1_2, img1_3, img1_4, img1_5,
|
||||
img2_0, img2_1, img2_2, img2_3, img2_4, img2_5, img2_6, img2_7, cfd_img2_8,
|
||||
cfd_img3_0, img3_0, img3_1,
|
||||
img4_0, img4_0_1, img4_0_2, img4_0_3, img4_1,
|
||||
|
|
|
|||
Loading…
Reference in New Issue