28 changed files with 12807 additions and 383 deletions
@ -0,0 +1,50 @@ |
|||||
|
import request from '@/utils/request' |
||||
|
// 模板信息
|
||||
|
export default { |
||||
|
// 新增模板消息
|
||||
|
addSave: function(params) { |
||||
|
return request({ |
||||
|
// baseURL: '/api',
|
||||
|
url: '/v1/wechattemplate/save', |
||||
|
method: 'post', |
||||
|
data: params, |
||||
|
headers: { |
||||
|
'Content-Type': 'application/json' |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 查询分页列表
|
||||
|
listPage: function(params) { |
||||
|
return request({ |
||||
|
// baseURL: '/api',
|
||||
|
url: '/v1/wechattemplate/listPage', |
||||
|
method: 'post', |
||||
|
data: params, |
||||
|
headers: { |
||||
|
'Content-Type': 'application/json' |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 初始化
|
||||
|
fetchBySid: function(sid) { |
||||
|
return request({ |
||||
|
url: '/v1/wechattemplate/getTemplateBySid/' + sid, |
||||
|
method: 'get', |
||||
|
}) |
||||
|
}, |
||||
|
// 修改
|
||||
|
updateData: function(data) { |
||||
|
return request({ |
||||
|
url: '/v1/wechattemplate/update', |
||||
|
method: 'post', |
||||
|
data: data |
||||
|
}); |
||||
|
}, |
||||
|
// 删除
|
||||
|
delBySids: function(sid) { |
||||
|
return request({ |
||||
|
url: '/v1/wechattemplate/delete/' + sid, |
||||
|
method: 'delete', |
||||
|
}) |
||||
|
}, |
||||
|
} |
||||
@ -0,0 +1,29 @@ |
|||||
|
import request from '@/utils/request' |
||||
|
import qs from 'qs' |
||||
|
// 统一请求路径前缀
|
||||
|
const base = process.env.VUE_APP_URL |
||||
|
|
||||
|
// 文件上传接口
|
||||
|
export const uploadFile = process.env.VUE_APP_BASE_API + '/customer/file/upload' |
||||
|
|
||||
|
|
||||
|
|
||||
|
// 上传图片
|
||||
|
// export function imageUpload(data) {
|
||||
|
// return request({
|
||||
|
// url: '/portal/file/upload',
|
||||
|
// method: 'post',
|
||||
|
// data,
|
||||
|
// headers: { 'Content-Type': 'multipart/form-data' }
|
||||
|
// })
|
||||
|
// }
|
||||
|
|
||||
|
// 移除图片
|
||||
|
export function deleteFilesOss(data) { |
||||
|
return request({ |
||||
|
url: '/base/v1/baseVehicleAppendixs/deleteFilesOss', |
||||
|
method: 'post', |
||||
|
data: qs.stringify(data), |
||||
|
// headers: { 'Content-Type': 'multipart/form-data' }
|
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,34 @@ |
|||||
|
import request from '@/utils/request' |
||||
|
|
||||
|
// 获取省/portal/v1/regions/getProvince
|
||||
|
export function getProvince(data) { |
||||
|
return request({ |
||||
|
url: '/portal/v1/regions/getProvince',data, |
||||
|
method: 'get', |
||||
|
params:data, |
||||
|
}) |
||||
|
} |
||||
|
// 根据省sid获取该省的所有市
|
||||
|
export function getCity(data) { |
||||
|
return request({ |
||||
|
url: '/portal/v1/regions/getCity', |
||||
|
params:data, |
||||
|
method: 'get', |
||||
|
}) |
||||
|
} |
||||
|
// 根据市sid获取该市的所有县区
|
||||
|
export function getCounty(data) { |
||||
|
return request({ |
||||
|
url: '/portal/v1/regions/getCounty', |
||||
|
method: 'get', |
||||
|
params:data, |
||||
|
}) |
||||
|
} |
||||
|
// // 区域列表（省市县均可用）
|
||||
|
// export function selectsList(data) {
|
||||
|
// return request({
|
||||
|
// url: '/portal/v1/regions/selectsList', data,
|
||||
|
// method: 'post',
|
||||
|
// headers: { 'Content-Type': 'application/json' }
|
||||
|
// })
|
||||
|
// }
|
||||
@ -0,0 +1,261 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<div v-show="viewState == 1"> |
||||
|
<button-bar ref="btnbar" view-title="模板消息" :btndisabled="btndisabled" @btnhandle="btnHandle" /> |
||||
|
<div class="main-content"> |
||||
|
<div class="searchcon"> |
||||
|
<el-button size="small" class="searchbtn" @click="clicksearchShow"> |
||||
|
{{ searchxianshitit }} |
||||
|
</el-button> |
||||
|
<div v-show="isSearchShow" class="search"> |
||||
|
<el-form ref="queryParams" :inline="true" :model="queryParams" class="tab-header"> |
||||
|
<el-form-item label="模板名称"> |
||||
|
<el-input v-model="queryParams.params.name" placeholder="" clearable /> |
||||
|
</el-form-item> |
||||
|
<!-- <el-form-item label="订单编号"> |
||||
|
<el-input v-model="queryParams.params.modifySid" placeholder="" clearable /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="填单人"> |
||||
|
<el-input v-model="queryParams.params.buyerName" placeholder="" clearable /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="填单日期"> |
||||
|
<el-date-picker v-model="queryParams.params.applyStartDate" type="date" clearable value-format="yyyy-MM-dd" placeholder="选择日期" /> |
||||
|
<span style="padding: 0 8px">至</span> |
||||
|
<el-date-picker v-model="queryParams.params.applyStartDate" type="date" clearable value-format="yyyy-MM-dd" placeholder="选择日期" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="供应商名称"> |
||||
|
<el-input v-model="queryParams.params.contacts" placeholder="" clearable /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="要货单位"> |
||||
|
<el-input v-model="queryParams.params.telephone" placeholder="" clearable /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="完成状态"> |
||||
|
<el-select v-model="queryParams.params.completionStatusKey" filterable placeholder="请选择" clearable> |
||||
|
<el-option v-for="item in state_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="到货日期"> |
||||
|
<el-date-picker v-model="queryParams.params.applyStartDate" type="date" clearable value-format="yyyy-MM-dd" placeholder="选择日期" /> |
||||
|
<span style="padding: 0 8px">至</span> |
||||
|
<el-date-picker v-model="queryParams.params.applyStartDate" type="date" clearable value-format="yyyy-MM-dd" placeholder="选择日期" /> |
||||
|
</el-form-item> --> |
||||
|
</el-form> |
||||
|
<div class="btn" style="text-align: center;"> |
||||
|
<el-button type="primary" size="small" icon="el-icon-search" @click="dosearch">查询</el-button> |
||||
|
<el-button type="primary" size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- Start 项目列表头部 --> |
||||
|
<div class="listtop"> |
||||
|
<div class="tit">模板列表</div> |
||||
|
<!-- <pageye v-show="dataList.length > 0" :total="queryParams.total" :page.sync="queryParams.current" :limit.sync="queryParams.size" class="pagination" @pagination="loadList" /> --> |
||||
|
</div> |
||||
|
<!-- End 项目列表头部 --> |
||||
|
<!-- Start 项目列表 --> |
||||
|
<div class=""> |
||||
|
<el-table v-loading="tableLoading" :data="dataList" border style="width: 100%" |
||||
|
@selection-change="handleSelectionChange"> |
||||
|
<el-table-column fixed width="50" type="selection" align="center" /> |
||||
|
<el-table-column fixed width="60" label="序号" type="index" :index="indexMethod" align="center" /> |
||||
|
<el-table-column fixed width="180" label="操作" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button type="primary" size="mini" @click="toEdit(scope.row)">修改</el-button> |
||||
|
<el-button type="primary" size="mini" @click="doDel(scope.row)">删除</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="templateId" label="模板ID" align="center" /> |
||||
|
<el-table-column prop="title" label="模板名称" align="center" width="250" /> |
||||
|
<el-table-column prop="trade" label="行业" align="center" width="250" /> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
<!-- End 项目列表 --> |
||||
|
<div class="pages"> |
||||
|
<div class="tit" /> |
||||
|
<!-- 翻页 --> |
||||
|
<pagination v-show="dataList.length > 0" :total="queryParams.total" :page.sync="queryParams.current" |
||||
|
:limit.sync="queryParams.size" @pagination="loadList" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- End 查询和其列表部分 --> |
||||
|
<!-- 新增修改部分组件 --> |
||||
|
<divAdd v-show="viewState == 2 || viewState == 3" ref="divadd" @doback="resetState" @reloadlist="loadList" /> |
||||
|
<!-- <divInfo v-show="viewState == 4" ref="divInfo" @doback="resetState" /> --> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import req from '@/api/message/mbxx' |
||||
|
import ButtonBar from '@/components/ButtonBar' |
||||
|
import Pagination from '@/components/pagination' |
||||
|
import pageye from '@/components/pagination/pageye' |
||||
|
import divAdd from './mbxxAdd.vue' |
||||
|
// import divInfo from './mbxxInfo.vue' |
||||
|
export default { |
||||
|
name: 'XxzxYdxx', |
||||
|
components: { |
||||
|
ButtonBar, |
||||
|
Pagination, |
||||
|
pageye, |
||||
|
divAdd, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
btndisabled: false, |
||||
|
viewState: 1, // 1、列表 2、添加 3、修改 4、查看 |
||||
|
isSearchShow: false, |
||||
|
searchxianshitit: '显示查询条件', |
||||
|
tableLoading: false, |
||||
|
dataList: [], |
||||
|
state_list: [{ |
||||
|
dictKey: 0, |
||||
|
dictValue: '未完成' |
||||
|
}], |
||||
|
btnList: [{ |
||||
|
type: 'primary', |
||||
|
size: 'small', |
||||
|
icon: 'plus', |
||||
|
btnKey: 'toAdd', |
||||
|
btnLabel: '新增' |
||||
|
}, { |
||||
|
type: 'info', |
||||
|
size: 'small', |
||||
|
icon: 'cross', |
||||
|
btnKey: 'doClose', |
||||
|
btnLabel: '关闭' |
||||
|
}], |
||||
|
queryParams: { |
||||
|
current: 1, |
||||
|
size: 10, |
||||
|
total: 0, |
||||
|
params: { |
||||
|
name: '', |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
sids: [] |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$refs['btnbar'].setButtonList(this.btnList) |
||||
|
}, |
||||
|
created() { |
||||
|
this.loadList() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 搜索条件效果 |
||||
|
clicksearchShow() { |
||||
|
this.isSearchShow = !this.isSearchShow |
||||
|
if (this.isSearchShow) { |
||||
|
this.searchxianshitit = '隐藏查询条件' |
||||
|
} else { |
||||
|
this.searchxianshitit = '显示查询条件' |
||||
|
} |
||||
|
}, |
||||
|
btnHandle(btnKey) { |
||||
|
switch (btnKey) { |
||||
|
case 'toAdd': |
||||
|
this.toAdd() |
||||
|
break |
||||
|
case 'doClose': |
||||
|
this.doClose() |
||||
|
break |
||||
|
default: |
||||
|
break |
||||
|
} |
||||
|
}, |
||||
|
loadList() { |
||||
|
req.listPage(this.queryParams).then((resp) => { |
||||
|
this.tableLoading = false |
||||
|
if (resp.success) { |
||||
|
const data = resp.data |
||||
|
this.queryParams.total = data.total |
||||
|
this.dataList = data.records |
||||
|
} else { |
||||
|
// 根据resp.code进行异常情况处理 |
||||
|
this.dataList = [] |
||||
|
this.queryParams.total = 0 |
||||
|
} |
||||
|
}).catch(() => { |
||||
|
this.tableLoading = false |
||||
|
}) |
||||
|
}, |
||||
|
// 序号 |
||||
|
indexMethod(index) { |
||||
|
var pagestart = (this.queryParams.current - 1) * this.queryParams.size |
||||
|
var pageindex = index + 1 + pagestart |
||||
|
return pageindex |
||||
|
}, |
||||
|
handleSelectionChange(row) { |
||||
|
const aa = [] |
||||
|
row.forEach((element) => { |
||||
|
aa.push(element.sid) |
||||
|
}) |
||||
|
this.sids = aa |
||||
|
}, |
||||
|
dosearch() { |
||||
|
this.queryParams.current = 1 |
||||
|
this.loadList() |
||||
|
}, |
||||
|
resetQuery() { |
||||
|
this.queryParams = { |
||||
|
current: 1, |
||||
|
size: 10, |
||||
|
total: 0, |
||||
|
params: { |
||||
|
name: '', |
||||
|
} |
||||
|
} |
||||
|
this.loadList() |
||||
|
}, |
||||
|
toAdd() { |
||||
|
this.viewState = 2 |
||||
|
this.$refs['divadd'].showAdd() |
||||
|
}, |
||||
|
toEdit(row) { |
||||
|
this.viewState = 3 |
||||
|
this.$refs['divadd'].showEdit(row) |
||||
|
}, |
||||
|
doDel(row) { |
||||
|
const tip = '请确认是否删除所选记录?' |
||||
|
this.$confirm(tip, '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
const loading = this.$loading({ |
||||
|
lock: true, |
||||
|
text: 'Loading', |
||||
|
spinner: 'el-icon-loading', |
||||
|
background: 'rgba(0, 0, 0, 0.7)' |
||||
|
}) |
||||
|
req.delBySids(row.sid).then(resp => { |
||||
|
loading.close() |
||||
|
if (resp.success) { |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: resp.msg, |
||||
|
showClose: true |
||||
|
}) |
||||
|
this.loadList() |
||||
|
} else { |
||||
|
// 根据resp.code进行异常情况处理 |
||||
|
} |
||||
|
}).catch(e => { |
||||
|
loading.close() |
||||
|
}) |
||||
|
}).catch(() => {}) |
||||
|
}, |
||||
|
resetState() { |
||||
|
this.viewState = 1 |
||||
|
}, |
||||
|
doClose() { |
||||
|
this.$store.dispatch('tagsView/delView', this.$route) |
||||
|
this.$router.go(-1) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
</style> |
||||
@ -0,0 +1,310 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<div v-show="viewState == 1"> |
||||
|
<button-bar ref="btnbar" view-title="模板消息" :btndisabled="btndisabled" @btnhandle="btnHandle" /> |
||||
|
<div class="main-content"> |
||||
|
<div class="box-card"> |
||||
|
|
||||
|
<!-- <div |
||||
|
style="display: flex;flex-direction: column; justify-items: center; align-items: center; margin: 20px;flex: 1;"> |
||||
|
|
||||
|
<upload ref="uploadImg2" v-model="imgList" :limit="1" @change="backData" |
||||
|
bucket="map" :upload-data="{ type: '0001' }"></upload> |
||||
|
|
||||
|
<span style="font-size:18px; margin-top: 30px; ">上传示例图册</span> |
||||
|
|
||||
|
</div> --> |
||||
|
|
||||
|
<div |
||||
|
style="display: flex; flex-direction: column; margin-left: -80px; margin-top: 20px;margin-bottom: 20px;flex: 4;"> |
||||
|
|
||||
|
<div class="item"> |
||||
|
<span class="item_text">模板ID：</span> |
||||
|
<el-input v-model="form.templateId" class="item_input" clearable /> |
||||
|
</div> |
||||
|
|
||||
|
<div class="item"> |
||||
|
<span class="item_text">标题：</span> |
||||
|
<el-input v-model="form.title" placeholder="" class="item_input" clearable /> |
||||
|
</div> |
||||
|
|
||||
|
<div class="item"> |
||||
|
<span class="item_text">行业：</span> |
||||
|
<el-input v-model="form.trade" placeholder="" class="item_input" clearable /> |
||||
|
</div> |
||||
|
|
||||
|
<div class="item" style="height: auto; align-items: start;"> |
||||
|
<span class="item_text">详细内容：</span> |
||||
|
<div style=" flex: 4.2; display: flex;flex-direction: column; margin-left: 10px;"> |
||||
|
<div v-for="(item,index) in form.text" :key="index" class="item_right"> |
||||
|
<span class="item_right_list_text">{{item.key}}</span> |
||||
|
<span style="margin-left: 10px;margin-right: 10px;"> ：</span> |
||||
|
<span class="item_right_list_text">{{item.value}}</span> |
||||
|
<span class="item_right_list_delect" @click="showDelectDialog(index)">删除</span> |
||||
|
</div> |
||||
|
<div style="display: flex; flex-direction: row;align-items: center;"> |
||||
|
<el-input v-model="inputText1" placeholder="" class="item_left_input" clearable /> |
||||
|
<span style="margin-left: 10px;margin-right: 10px;"> ：</span> |
||||
|
<el-input v-model="inputText2" placeholder="" class="item_left_input" clearable /> |
||||
|
<span class="item_left_text" @click="add">添加</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
<!-- 删除提示框 --> |
||||
|
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> |
||||
|
<span>是否确认要删除？</span> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="dialogVisible = false">取 消</el-button> |
||||
|
<el-button type="primary" @click="delect()">确 定</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import req from '@/api/message/mbxx' |
||||
|
import ButtonBar from '@/components/ButtonBar' |
||||
|
import Pagination from '@/components/pagination' |
||||
|
import pageye from '@/components/pagination/pageye' |
||||
|
import upload from '@/components/uploadFile/upload_yanchejianchaTuBiao' |
||||
|
export default { |
||||
|
components: { |
||||
|
ButtonBar, |
||||
|
Pagination, |
||||
|
pageye, |
||||
|
upload |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
btndisabled: false, |
||||
|
viewState: 1, // 1、列表 2、添加 3、修改 4、查看 |
||||
|
isSearchShow: false, |
||||
|
searchxianshitit: '显示查询条件', |
||||
|
tableLoading: false, |
||||
|
dialogVisible: false, |
||||
|
itemIndex: 0, |
||||
|
dataList: [], |
||||
|
imgList: [], |
||||
|
btnList: [{ |
||||
|
type: 'primary', |
||||
|
size: 'small', |
||||
|
icon: 'submit', |
||||
|
btnKey: 'doSubmit', |
||||
|
btnLabel: '保存' |
||||
|
}, { |
||||
|
type: 'info', |
||||
|
size: 'small', |
||||
|
icon: 'cross', |
||||
|
btnKey: 'doClose', |
||||
|
btnLabel: '关闭' |
||||
|
}], |
||||
|
inputText1: "", |
||||
|
inputText2: "", |
||||
|
form: { |
||||
|
sid: '', |
||||
|
templateId: '', |
||||
|
title: '', |
||||
|
trade: "", |
||||
|
text: [] |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$refs['btnbar'].setButtonList(this.btnList) |
||||
|
}, |
||||
|
methods: { |
||||
|
btnHandle(btnKey) { |
||||
|
switch (btnKey) { |
||||
|
case 'doSubmit': |
||||
|
this.toSave() |
||||
|
break |
||||
|
case 'doClose': |
||||
|
this.doClose() |
||||
|
break |
||||
|
default: |
||||
|
break |
||||
|
} |
||||
|
}, |
||||
|
showAdd(row) { |
||||
|
|
||||
|
}, |
||||
|
showEdit(row) { |
||||
|
req.fetchBySid(row.sid) |
||||
|
.then(resp => { |
||||
|
if (resp.success) { |
||||
|
console.log("data211111111111112222222222>>>", resp.data) |
||||
|
this.form = resp.data |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
.catch(e => { |
||||
|
this.form = row |
||||
|
}) |
||||
|
}, |
||||
|
add() { |
||||
|
|
||||
|
this.form.text.push({ |
||||
|
key: this.inputText1, |
||||
|
value: this.inputText2, |
||||
|
|
||||
|
}) |
||||
|
this.inputText1 = "" |
||||
|
this.inputText2 = "" |
||||
|
console.log("codeIndex>>>", this.form.text) |
||||
|
}, |
||||
|
showDelectDialog(index) { |
||||
|
this.dialogVisible = true |
||||
|
this.itemIndex = index |
||||
|
}, |
||||
|
delect() { |
||||
|
this.dialogVisible = false |
||||
|
// //表示先获取这个元素的下标，然后从这个下标开始计算，删除长度为1的元素 |
||||
|
this.form.text.splice(this.itemIndex, 1); |
||||
|
}, |
||||
|
handleClose(done) { |
||||
|
|
||||
|
this.$confirm('确认关闭？') |
||||
|
.then(_ => { |
||||
|
this.dialogVisible = false |
||||
|
}) |
||||
|
.catch(_ => {}); |
||||
|
}, |
||||
|
backData(value) { |
||||
|
console.log(value, 999) |
||||
|
this.form.imageUrl = value[0].url |
||||
|
|
||||
|
}, |
||||
|
toSave() { |
||||
|
console.log("data>>>", this.form) |
||||
|
|
||||
|
if (this.form.sid) { |
||||
|
req.updateData(this.form).then(res => { |
||||
|
this.submitdisabled = false |
||||
|
if (res.success) { |
||||
|
this.$message({ |
||||
|
message: res.msg, |
||||
|
type: 'success' |
||||
|
}) |
||||
|
this.handleReturn("true") |
||||
|
} |
||||
|
}) |
||||
|
} else { |
||||
|
req.addSave(this.form) |
||||
|
.then(resp => { |
||||
|
this.submitdisabled = false |
||||
|
if (resp.success) { |
||||
|
this.$message({ |
||||
|
showClose: true, |
||||
|
type: 'success', |
||||
|
message: resp.msg |
||||
|
}) |
||||
|
this.handleReturn("true") |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
handleReturn(isreload) { |
||||
|
|
||||
|
if (isreload === 'true') this.$emit('reloadlist') |
||||
|
this.formobj = { |
||||
|
sid: '', |
||||
|
templateId: '', |
||||
|
title: '', |
||||
|
trade: "", |
||||
|
text: [] |
||||
|
} |
||||
|
this.$emit('doback') |
||||
|
}, |
||||
|
reset() { |
||||
|
this.form = { |
||||
|
sid: '', |
||||
|
templateId: '', |
||||
|
title: '', |
||||
|
trade: "", |
||||
|
text: [] |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
doClose() { |
||||
|
this.$emit('doback') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.box-card { |
||||
|
background: #fff; |
||||
|
min-width: 75%; |
||||
|
margin-top: 20px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
|
||||
|
.item { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
margin-top: 25px; |
||||
|
height: 40px; |
||||
|
line-height: 40px; |
||||
|
|
||||
|
.item_text { |
||||
|
flex: 0.8; |
||||
|
font-size: 18px; |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
.item_input { |
||||
|
flex: 4; |
||||
|
font-size: 16px; |
||||
|
margin-left: 10px; |
||||
|
margin-right: 80px; |
||||
|
} |
||||
|
|
||||
|
.item_left_input { |
||||
|
width: 20%; |
||||
|
} |
||||
|
|
||||
|
.item_left_text { |
||||
|
height: 30px; |
||||
|
margin-left: 20px; |
||||
|
line-height: 30px; |
||||
|
color: #018AD2; |
||||
|
padding: 0px 15px; |
||||
|
border: 1.5px solid #018AD2; |
||||
|
border-radius: 5px; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.item_right { |
||||
|
flex: 1; |
||||
|
justify-items: center; |
||||
|
|
||||
|
.item_right_list_text { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
|
||||
|
.item_right_list_delect { |
||||
|
color: #5E94FF; |
||||
|
margin-left: 20px; |
||||
|
font-size: 16px; |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,288 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-card class="box-card"> |
||||
|
<table class="e-table" cellspacing="0"> |
||||
|
<tr> |
||||
|
<td>姓名</td> |
||||
|
<td> |
||||
|
<el-input v-model="form.name" style="width:300px"></el-input> |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>员工类型</td> |
||||
|
<td> |
||||
|
<el-select v-model="form.userType" @change="$forceUpdate()" style="width:300px"> |
||||
|
<el-option v-for="(item, i) in userTypeData" :key="i" :label="item.name" :value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>部门</td> |
||||
|
<td> |
||||
|
<el-select v-model="form.deptSid" placeholder="请选择" style="width:300px"> |
||||
|
<el-option hidden :key="form.deptSid" :label="orgName" :value="form.deptSid"></el-option> |
||||
|
<el-tree :data="treedata" ref="Tree" show-checkbox accordion node-key="sid" |
||||
|
:default-checked-keys="checkedId" :default-expand-all='true' :check-strictly='true' |
||||
|
:props="defaultProps" @check-change="checkchange"> |
||||
|
</el-tree> |
||||
|
</el-select> |
||||
|
<!--<el-select v-model="form.deptSid" @change="$forceUpdate()"> |
||||
|
<el-option |
||||
|
v-for="(item, i) in treedata" |
||||
|
:key="i" |
||||
|
:label="item.name" |
||||
|
:value="item.sid"> |
||||
|
</el-option> |
||||
|
</el-select>--> |
||||
|
</td> |
||||
|
</tr> |
||||
|
<!-- <tr> |
||||
|
<td>岗位</td> |
||||
|
<td> |
||||
|
<el-select v-model="form.postSid" @change="$forceUpdate()" style="width:300px"> |
||||
|
<el-option |
||||
|
v-for="(item, i) in postSidData" |
||||
|
:key="i" |
||||
|
:label="item.name" |
||||
|
:value="item.sid"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
<el-input v-model="form.postSid"></el-input> |
||||
|
</td> |
||||
|
</tr> --> |
||||
|
<tr> |
||||
|
<td>手机号码</td> |
||||
|
<td> |
||||
|
<el-input v-model="form.mobile" maxlength="11" style="width:300px"></el-input> |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>微信号</td> |
||||
|
<td> |
||||
|
<el-input v-model="form.openId" style="width:300px"></el-input> |
||||
|
</td> |
||||
|
</tr> |
||||
|
<!-- <tr> |
||||
|
<td>手机验证码</td> |
||||
|
<td> |
||||
|
<el-input v-model="form.verificationCode" placeholder="请输入验证码" style="width:300px"> |
||||
|
<el-button v-show="showCode" slot="append" @click.native="getIdentifying">获取验证码</el-button> |
||||
|
<el-button v-show="!showCode" slot="append">{{phoneCodeCount}} s</el-button> |
||||
|
</el-input> |
||||
|
<el-input v-model="form.verificationCode"></el-input> |
||||
|
</td> |
||||
|
</tr> --> |
||||
|
</table> |
||||
|
<div style="margin-top: 20px; text-align: center;"> |
||||
|
<el-button type="primary" @click="save()">保 存</el-button> |
||||
|
<!--<el-button type="warning" @click="cancel()">取 消</el-button>--> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { |
||||
|
userAdd, |
||||
|
userUpdata, |
||||
|
userSingle, |
||||
|
orgList, |
||||
|
postList, |
||||
|
getCode |
||||
|
} from '@/api/system/userManage/index.js' |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
form: { |
||||
|
sid: '', |
||||
|
name: '', |
||||
|
userType: '', |
||||
|
deptSid: '', |
||||
|
postSid: '', |
||||
|
mobile: '', |
||||
|
openId: '', |
||||
|
verificationCode: '' |
||||
|
}, |
||||
|
form1: { |
||||
|
sid: '', |
||||
|
}, |
||||
|
userTypeData: [{ |
||||
|
value: '1', |
||||
|
name: '监管' |
||||
|
}, { |
||||
|
value: '2', |
||||
|
name: '客户' |
||||
|
}, |
||||
|
{ |
||||
|
value: '3', |
||||
|
name: '银行' |
||||
|
}, |
||||
|
], |
||||
|
treedata: [], |
||||
|
checkedId: [], |
||||
|
orgName: '', |
||||
|
defaultProps: { |
||||
|
children: 'children', |
||||
|
label: 'name' |
||||
|
}, |
||||
|
postSidData: [], |
||||
|
showCode: true, |
||||
|
phoneCodeCount: '', |
||||
|
timer: null, |
||||
|
}; |
||||
|
}, |
||||
|
props: ['dataObj'], |
||||
|
watch: { |
||||
|
dataObj: { |
||||
|
handler(val) { |
||||
|
this.form1.sid = val.sid |
||||
|
this.getUserSingle() |
||||
|
this.getOrgList() |
||||
|
}, |
||||
|
deep: true, |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getOrgList() |
||||
|
}, |
||||
|
methods: { |
||||
|
getUserSingle() { |
||||
|
userSingle(this.form1).then(res => { |
||||
|
if (res.code == '200') { |
||||
|
this.form.sid = res.data.sid |
||||
|
this.form.name = res.data.name |
||||
|
this.form.userType = res.data.userType |
||||
|
this.form.deptSid = res.data.deptSid |
||||
|
this.orgName = res.data.departmentName |
||||
|
this.form.postSid = res.data.postSid |
||||
|
this.form.mobile = res.data.mobile |
||||
|
this.form.openId = res.data.openId |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 获取部门树形 |
||||
|
getOrgList(row) { |
||||
|
// this.roleDialog = true |
||||
|
this.checkedId = [] |
||||
|
this.Thisrow = row |
||||
|
this.loading = true |
||||
|
let params = {} |
||||
|
orgList(params).then(res => { |
||||
|
this.treedata = res.data |
||||
|
}) |
||||
|
|
||||
|
}, |
||||
|
checkchange(data, checked, indeterminate) { |
||||
|
if (checked) { |
||||
|
|
||||
|
this.form.deptSid = data.sid |
||||
|
this.orgName = data.name |
||||
|
let arr = [] |
||||
|
arr = [data.sid]; |
||||
|
this.$refs.Tree.setCheckedKeys(arr); |
||||
|
this.form.postSid = '' |
||||
|
// this.getPost(data.sid) |
||||
|
|
||||
|
this.form.sysStaffOrg = { |
||||
|
orgSid: data.sid, |
||||
|
orgName: data.name, |
||||
|
orgSidPath: data.orgSidPath, |
||||
|
orgNamePath: "", |
||||
|
orgCode: data.orgCode, |
||||
|
manageType: "", |
||||
|
} |
||||
|
|
||||
|
return; |
||||
|
} |
||||
|
}, |
||||
|
getPost(orgSid) { |
||||
|
let params = { |
||||
|
sid: orgSid |
||||
|
} |
||||
|
postList(params).then(res => { |
||||
|
this.postSidData = res.data |
||||
|
}) |
||||
|
}, |
||||
|
save() { |
||||
|
if (this.form.sid) { |
||||
|
userUpdata(this.form).then(res => { |
||||
|
if (res.code == '200') { |
||||
|
this.$message({ |
||||
|
message: res.msg, |
||||
|
type: 'success' |
||||
|
}) |
||||
|
this.$emit('status', false) |
||||
|
} |
||||
|
}) |
||||
|
} else { |
||||
|
let orgSid = this.$refs.Tree.getCheckedKeys() |
||||
|
this.form.deptSid = orgSid.toString() |
||||
|
userAdd(this.form).then(res => { |
||||
|
if (res.code == '200') { |
||||
|
this.$message({ |
||||
|
message: res.msg, |
||||
|
type: 'success' |
||||
|
}) |
||||
|
this.$emit('status', false) |
||||
|
} |
||||
|
}) |
||||
|
let arr = [] |
||||
|
this.$refs.Tree.setCheckedKeys(arr); |
||||
|
} |
||||
|
this.reset() |
||||
|
}, |
||||
|
reset() { |
||||
|
this.form = { |
||||
|
sid: '', |
||||
|
name: '', |
||||
|
userType: '', |
||||
|
deptSid: '', |
||||
|
postSid: '', |
||||
|
mobile: '', |
||||
|
verificationCode: '' |
||||
|
} |
||||
|
}, |
||||
|
//获取验证码 |
||||
|
getIdentifying() { |
||||
|
if (this.form.mobile == "") { |
||||
|
this.$alert('请填写手机号码', '', { |
||||
|
confirmButtonText: '确定' |
||||
|
}) |
||||
|
return; |
||||
|
} |
||||
|
//验证码倒计时 |
||||
|
const TIME_COUNT = 60; |
||||
|
if (!this.timer) { |
||||
|
this.phoneCodeCount = TIME_COUNT; |
||||
|
this.showCode = false; |
||||
|
this.timer = setInterval(() => { |
||||
|
if (this.phoneCodeCount > 0 && this.phoneCodeCount <= TIME_COUNT) { |
||||
|
this.phoneCodeCount--; |
||||
|
} else { |
||||
|
this.showCode = true; |
||||
|
clearInterval(this.timer); |
||||
|
this.timer = null; |
||||
|
} |
||||
|
}, 1000) |
||||
|
} |
||||
|
|
||||
|
let obj = { |
||||
|
phone: this.form.mobile, |
||||
|
} |
||||
|
getCode(obj).then(res => { |
||||
|
if (res.code == '200') { |
||||
|
this.orginTranceNo = res.data.tranceNo; |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
cancel() { |
||||
|
this.$emit('status', false) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
</style> |
||||
Binary file not shown.
File diff suppressed because it is too large
@ -0,0 +1,430 @@ |
|||||
|
import { Message } from "element-ui"; |
||||
|
|
||||
|
var webVideoCtrl = window.WebVideoCtrl; |
||||
|
var $ = window.$; |
||||
|
/** |
||||
|
* 初始化 |
||||
|
* @param {number} iWndowType 分屏类型：1 - 1*1，2 - 2*2，3 - 3*3，4 - 4*4，默认值1，单画面 |
||||
|
* @param {number} width 插件的宽度（单位为”px”， 100%表示撑满插件容器） |
||||
|
* @param {number} height 插件的高度（单位为”px”， 100%表示撑满插件容器） |
||||
|
* @returns null |
||||
|
*/ |
||||
|
let init = (iWndowType, width, height) => { |
||||
|
// 检查浏览器是否支持无插件
|
||||
|
if (!webVideoCtrl.I_SupportNoPlugin()) { |
||||
|
Message.warning( |
||||
|
"当前浏览器不支持无插件预览监控视频，已自动切换成插件模式，如果还未安装插件请安装" |
||||
|
); |
||||
|
// 检查插件是否已经安装
|
||||
|
const isInstall = webVideoCtrl.I_CheckPluginInstall(); |
||||
|
if (isInstall == -1) { |
||||
|
Message.warning( |
||||
|
"您还未安装过插件，请先下载WebComponentsKit.exe双击安装！" |
||||
|
); |
||||
|
return; |
||||
|
} |
||||
|
} |
||||
|
// 初始化插件
|
||||
|
webVideoCtrl.I_InitPlugin(width, height, { |
||||
|
szColorProperty: |
||||
|
"plugin-background:ffffff; sub-background:00000; sub-border:D0DAE4; sub-border-select:409EFF", // 表示插件的背景颜色，插件子窗口的背景颜色，窗口边框的颜色，窗口边框选中后的颜色
|
||||
|
iWndowType, |
||||
|
bNoPlugin: true, // 支持无插件
|
||||
|
cbSelWnd: (xmlDoc) => { |
||||
|
let iWndIndex = parseInt($(xmlDoc)?.find("SelectWnd").eq(0).text(), 10); |
||||
|
console.log("当前选择的窗口编号：" + iWndIndex); |
||||
|
}, |
||||
|
cbDoubleClickWnd: (iWndIndex, bFullScreen) => { |
||||
|
let szInfo = "当前放大的窗口编号：" + iWndIndex; |
||||
|
if (!bFullScreen) { |
||||
|
szInfo = "当前还原的窗口编号：" + iWndIndex; |
||||
|
} |
||||
|
console.log(szInfo); |
||||
|
}, // 无插件模式不起效
|
||||
|
cbInitPluginComplete: () => { |
||||
|
// 嵌入播放插件
|
||||
|
webVideoCtrl.I_InsertOBJECTPlugin("divPlugin"); |
||||
|
console.log("初始化成功--------"); |
||||
|
resize(); |
||||
|
// 检查插件是否最新
|
||||
|
if (webVideoCtrl.I_CheckPluginVersion() == -1) { |
||||
|
Message.warning("检测到新的插件版本，双击WebComponentsKit.exe升级！"); |
||||
|
return; |
||||
|
} |
||||
|
// login(
|
||||
|
// global.hk_ip, // 设备的 IP 地址或者普通域名
|
||||
|
// global.hk_prototocol,// http 协议，1 表示 http 协议 2 表示 https 协议
|
||||
|
// global.hk_port,//登录设备的 http/https 端口号，根据 iPrototocol 选择传入不同的端口
|
||||
|
// global.hk_username,//登录用户名称
|
||||
|
// global.hk_password//用户密码
|
||||
|
// );
|
||||
|
|
||||
|
login( |
||||
|
"192.168.3.175", // 设备的 IP 地址或者普通域名
|
||||
|
"1",// http 协议，1 表示 http 协议 2 表示 https 协议
|
||||
|
"80",//登录设备的 http/https 端口号，根据 iPrototocol 选择传入不同的端口
|
||||
|
"admin",//登录用户名称
|
||||
|
"Yxt123456"//用户密码
|
||||
|
); |
||||
|
}, // 插件初始化完成回调，必须要定义
|
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
let destroy = () => {}; |
||||
|
|
||||
|
/** |
||||
|
* 调整大小 |
||||
|
*/ |
||||
|
let resize = () => { |
||||
|
webVideoCtrl.I_Resize($("#divPlugin").width(), $("#divPlugin").height()); |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* 登录 |
||||
|
* @param {string} ip 设备的 IP 地址或者普通域名 |
||||
|
* @param {number} prototocol http 协议，1 表示 http 协议 2 表示 https 协议 |
||||
|
* @param {number} port 登录设备的 http/https 端口号，根据 iPrototocol 选择传入不同的端口 |
||||
|
* @param {string} userName 登录用户名称 |
||||
|
* @param {string} password 用户密码 |
||||
|
*/ |
||||
|
let login = (ip, prototocol, port, userName, password) => { |
||||
|
webVideoCtrl.I_Login(ip, prototocol, port, userName, password, { |
||||
|
async: true, // http 交互方式，true 表示异步，false 表示同步
|
||||
|
cgi: 1, // CGI 协议选择，1 表示 ISAPI，2 表示 PSIA，如果不传这个参数，会自动选择一种设备支持的协议.
|
||||
|
// 登录成功回调
|
||||
|
success: (xmlDoc) => { |
||||
|
console.log("login success-----------", xmlDoc); |
||||
|
// getAnalogChannelInfo(`${ip}_${port}`, {
|
||||
|
// async: true,
|
||||
|
// success: (analogChannelInfo) => {
|
||||
|
// let analogCameras = analysisAnalogChannelInfo(analogChannelInfo);
|
||||
|
// console.log(
|
||||
|
// "获取模拟通道----------",
|
||||
|
// analogChannelInfo,
|
||||
|
// analogCameras
|
||||
|
// );
|
||||
|
// },
|
||||
|
// error: (statusA, xmlDocA) => {
|
||||
|
// console.log("获取模拟通道 error-----------", statusA, xmlDocA);
|
||||
|
// },
|
||||
|
// });
|
||||
|
getDigitalChannelInfo(`${ip}_${port}`, { |
||||
|
async: true, |
||||
|
success: (digitalChannelInfo) => { |
||||
|
let digitalCameras = analysisDigitalChannelInfo(digitalChannelInfo); |
||||
|
console.log( |
||||
|
"获取数字通道----------", |
||||
|
digitalChannelInfo, |
||||
|
digitalCameras |
||||
|
); |
||||
|
}, |
||||
|
error: (statusD, xmlDocD) => { |
||||
|
console.log("获取数字通道 error-----------", statusD, xmlDocD); |
||||
|
}, |
||||
|
}); |
||||
|
// getZeroChannelInfo(`${ip}_${port}`, {
|
||||
|
// async: true,
|
||||
|
// success: (zeroChannelInfo) => {
|
||||
|
// let zeroCameras = analysisZeroChannelInfo(zeroChannelInfo);
|
||||
|
// console.log("获取零通道----------", zeroChannelInfo, zeroCameras);
|
||||
|
// },
|
||||
|
// error: (statusZ, xmlDocZ) => {
|
||||
|
// console.log("获取零通道 error-----------", statusZ, xmlDocZ);
|
||||
|
// },
|
||||
|
// });
|
||||
|
}, |
||||
|
// 失败函数回调
|
||||
|
error: () => { |
||||
|
console.log("login error-----------"); |
||||
|
}, |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* 登出 |
||||
|
* @param {string} deviceIdentify 设备标识（IP_Port） |
||||
|
* @returns 成功返回 0，失败返回-1 |
||||
|
*/ |
||||
|
let logout = (deviceIdentify) => { |
||||
|
return webVideoCtrl.I_Logout(deviceIdentify); |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* 获取设备基本信息 |
||||
|
* @param {string} deviceIdentify 设备标识（IP_Port） |
||||
|
* @param {*} options 可选参数对象: |
||||
|
* * async http 交互方式，true 表示异步，false 表示同步; |
||||
|
* * success 成功回调函数，有一个参数，表示返回的 XML 内容。; |
||||
|
* * error 失败回调函数，有两个参数，第一个是 http 状态码，第二个是设备返回的 XML(可能为空) |
||||
|
*/ |
||||
|
let getDeviceInfo = (deviceIdentify, options) => { |
||||
|
webVideoCtrl.I_GetDeviceInfo(deviceIdentify, options); |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* 获取模拟通道 |
||||
|
* @param {string} deviceIdentify 设备标识（IP_Port） |
||||
|
* @param {*} options 可选参数对象: |
||||
|
* * async http 交互方式，true 表示异步，false 表示同步; |
||||
|
* * success 成功回调函数，有一个参数，表示返回的 XML 内容。; |
||||
|
* * error 失败回调函数，有两个参数，第一个是 http 状态码，第二个是设备返回的 XML(可能为空) |
||||
|
*/ |
||||
|
let getAnalogChannelInfo = (deviceIdentify, options) => { |
||||
|
webVideoCtrl.I_GetAnalogChannelInfo(deviceIdentify, options); |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* 解析模拟通道XML内容 |
||||
|
* @param {XMLDocument} xmlDoc XML内容 |
||||
|
* @returns cameraList: 监控列表 |
||||
|
*/ |
||||
|
let analysisAnalogChannelInfo = (xmlDoc) => { |
||||
|
let cameraList = []; |
||||
|
let channels = $(xmlDoc)?.find("VideoInputChannel"); |
||||
|
$.each(channels, (i, channel) => { |
||||
|
let id = $(channel).find("id").eq(0).text(); |
||||
|
let name = $(channel).find("name").eq(0).text(); |
||||
|
if (name == "") { |
||||
|
name = "Camera " + (i < 9 ? "0" + (i + 1) : i + 1); |
||||
|
} |
||||
|
cameraList.push({ |
||||
|
id, |
||||
|
name, |
||||
|
}); |
||||
|
}); |
||||
|
return cameraList; |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* 获取数字通道 |
||||
|
* @param {string} deviceIdentify 设备标识（IP_Port） |
||||
|
* @param {*} options 可选参数对象: |
||||
|
* * async http 交互方式，true 表示异步，false 表示同步; |
||||
|
* * success 成功回调函数，有一个参数，表示返回的 XML 内容。; |
||||
|
* * error 失败回调函数，有两个参数，第一个是 http 状态码，第二个是设备返回的 XML(可能为空) |
||||
|
*/ |
||||
|
let getDigitalChannelInfo = (deviceIdentify, options) => { |
||||
|
webVideoCtrl.I_GetDigitalChannelInfo(deviceIdentify, options); |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* 解析数字通道XML内容 |
||||
|
* @param {XMLDocument} xmlDoc XML内容 |
||||
|
* @param {boolean} filterOnline 是否过滤禁用的数字通道 |
||||
|
* @returns cameraList: 监控列表 |
||||
|
*/ |
||||
|
let analysisDigitalChannelInfo = (xmlDoc, filterOnline) => { |
||||
|
let cameraList = []; |
||||
|
let channels = $(xmlDoc)?.find("InputProxyChannelStatus"); |
||||
|
|
||||
|
$.each(channels, (i, channel) => { |
||||
|
let id = $(channel).find("id").eq(0).text(); |
||||
|
let name = $(channel).find("name").eq(0).text(); |
||||
|
let online = $(channel).find("online").eq(0).text(); |
||||
|
if (filterOnline && online == "false") { |
||||
|
// 过滤禁用的数字通道
|
||||
|
return true; |
||||
|
} |
||||
|
if (name == "") { |
||||
|
name = "IPCamera " + (i < 9 ? "0" + (i + 1) : i + 1); |
||||
|
} |
||||
|
cameraList.push({ |
||||
|
id, |
||||
|
name, |
||||
|
online, |
||||
|
}); |
||||
|
}); |
||||
|
return cameraList; |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* 获取零通道 |
||||
|
* @param {string} deviceIdentify 设备标识（IP_Port） |
||||
|
* @param {*} options 可选参数对象: |
||||
|
* * async http 交互方式，true 表示异步，false 表示同步; |
||||
|
* * success 成功回调函数，有一个参数，表示返回的 XML 内容。; |
||||
|
* * error 失败回调函数，有两个参数，第一个是 http 状态码，第二个是设备返回的 XML(可能为空) |
||||
|
*/ |
||||
|
let getZeroChannelInfo = (deviceIdentify, options) => { |
||||
|
webVideoCtrl.I_GetZeroChannelInfo(deviceIdentify, options); |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* 解析零通道XML内容 |
||||
|
* @param {XMLDocument} xmlDoc XML内容 |
||||
|
* @param {boolean} filterEnabled 是否过滤禁用的零通道 |
||||
|
* @returns cameraList: 监控列表 |
||||
|
*/ |
||||
|
let analysisZeroChannelInfo = (xmlDoc, filterEnabled) => { |
||||
|
let cameraList = []; |
||||
|
let channels = $(xmlDoc)?.find("ZeroVideoChannel"); |
||||
|
|
||||
|
$.each(channels, (i, channel) => { |
||||
|
let id = $(channel).find("id").eq(0).text(); |
||||
|
let name = $(channel).find("name").eq(0).text(); |
||||
|
if (name == "") { |
||||
|
name = "Zero Channel " + (i < 9 ? "0" + (i + 1) : i + 1); |
||||
|
} |
||||
|
let enabled = $(channel).find("enabled").eq(0).text(); |
||||
|
if (filterEnabled && enabled == "false") { |
||||
|
// 过滤禁用的零通道
|
||||
|
return true; |
||||
|
} |
||||
|
cameraList.push({ |
||||
|
id, |
||||
|
name, |
||||
|
enabled, |
||||
|
}); |
||||
|
}); |
||||
|
return cameraList; |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* 录像搜索 |
||||
|
* @param {string} deviceIdentify 设备标识（IP_Port） |
||||
|
* @param {string} channelId 通道 ID |
||||
|
* @param {string} startTime 开始时间：如：2013-12-23 00:00:00 |
||||
|
* @param {string} endTime 结束时间：如：2013-12-23 23:59:59 |
||||
|
* @param {*} options 可选参数对象: |
||||
|
* * async http 交互方式，true 表示异步，false 表示同步 |
||||
|
* * iSearchPos 搜索录像的位置（默认为 0），0 表示返回结果的第 0-40 条，40 表示 40-80 条，依次类推 |
||||
|
* * success 成功回调函数，有一个参数，表示返回的 XML 内容。 |
||||
|
* * error 失败回调函数，有两个参数，第一个是 http 状态码，第二个是设备返回的 XML(可能为空) |
||||
|
* * iStreamType 码流类型 1-主码流，2-子码流，默认主码流 |
||||
|
*/ |
||||
|
let recordSearch = (deviceIdentify, channelId, startTime, endTime, options) => { |
||||
|
webVideoCtrl.I_RecordSearch( |
||||
|
deviceIdentify, |
||||
|
channelId, |
||||
|
startTime, |
||||
|
endTime, |
||||
|
options |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* 开始预览 |
||||
|
* @param {string} deviceIdentify 设备标识（IP_Port） |
||||
|
* @param {*} options 可选参数对象: |
||||
|
* * iWndIndex 播放窗口，如果不传，则默认使用当前选择窗口播放（默认选中窗口 0） |
||||
|
* * iStreamType 码流类型 1-主码流，2-子码流，默认使用主码流预览 |
||||
|
* * iChannelID 播放通道号，默认通道 1 |
||||
|
* * bZeroChannel 是否播放零通道，默认为 false |
||||
|
* * iPort RTSP 端口号，可以选择传入，如果不传，开发包会自动判断设备的 RTSP 端口 |
||||
|
* * success 成功回调函数 |
||||
|
* * error 失败回调函数 |
||||
|
*/ |
||||
|
let startRealPlay = (deviceIdentify, options) => { |
||||
|
webVideoCtrl.I_StartRealPlay(deviceIdentify, options); |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* 开始回放 |
||||
|
* @param {string} deviceIdentify 设备标识（IP_Port） |
||||
|
* @param {*} options 可选参数对象: |
||||
|
* * iWndIndex 播放窗口，如果不传，则默认使用当前选择窗口播放（默认选中窗口 0） |
||||
|
* * iStreamType 码流类型 1-主码流，2-子码流，默认使用主码流预览 |
||||
|
* * szStartTime 开始时间，默认为当天 00:00:00，格式如：2013-12-23 00:00:00 |
||||
|
* * szEndTime 结束时间，默认为当天 23:59:59，格式如：2013-12-23 23:59:59 |
||||
|
* * iChannelID 播放通道号，默认通道 1 |
||||
|
* * iPort RTSP 端口号，可以选择传入，如果不传，开发包会自动判断设备的 RTSP 端口 |
||||
|
* * oTransCodeParam 转码回放参数对象，传入此参数，将按照此对象中的编码参数进行转码回放（转码回放需要设备支持，如果不支持，则不要传入这个参数）。 |
||||
|
* * iStreamType 码流类型 1-主码流，2-子码流，默认主码流 |
||||
|
* * success 成功回调函数 |
||||
|
* * error 失败回调函数 |
||||
|
*/ |
||||
|
let startPlayBack = (deviceIdentify, options) => { |
||||
|
webVideoCtrl.I_StartPlayback(deviceIdentify, options); |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* 停止播放 |
||||
|
* @param {*} options 可选参数对象: |
||||
|
* * iWndIndex 播放窗口号，可不传，表示操作当前选中窗口 |
||||
|
* * success 成功回调函数 |
||||
|
* * error 失败回调函数 |
||||
|
*/ |
||||
|
let stopPlay = (options) => { |
||||
|
webVideoCtrl.I_Stop(options); |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* 暂停 |
||||
|
* @param {*} options 可选参数对象: |
||||
|
* * iWndIndex 播放窗口号，可不传，表示操作当前选中窗口 |
||||
|
* * success 成功回调函数 |
||||
|
* * error 失败回调函数 |
||||
|
*/ |
||||
|
let pause = (options) => { |
||||
|
webVideoCtrl.I_Pause(options); |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* 打开声音 |
||||
|
* @param {number} iWndIndex 播放窗口号，可不传，表示操作当前选中窗口 |
||||
|
* @returns 成功返回 0，失败返回-1 |
||||
|
*/ |
||||
|
let openSound = (iWndIndex) => { |
||||
|
return webVideoCtrl.I_OpenSound(iWndIndex); |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* 关闭声音 |
||||
|
* @param {number} iWndIndex 播放窗口号，可不传，表示操作当前选中窗口 |
||||
|
* @returns 成功返回 0，失败返回-1 |
||||
|
*/ |
||||
|
let closeSound = (iWndIndex) => { |
||||
|
return webVideoCtrl.I_CloseSound(iWndIndex); |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* 设置音量 |
||||
|
* @param {number} iVolume 音量大小 |
||||
|
* @param {number} iWndIndex 播放窗口号，可不传，表示操作当前选中窗口 |
||||
|
* @returns 成功返回 0，失败返回-1 |
||||
|
*/ |
||||
|
let setVolume = (iVolume, iWndIndex) => { |
||||
|
return webVideoCtrl.I_SetVolume(iVolume, iWndIndex); |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* 修改画面分割类型 |
||||
|
* @param {number} iWndType 画面分割类型：1- 1*1，2- 2*2，3- 3*3，4- 4*4，5- 5*5，6- 6*6，7- 7*7，8- 8*8 |
||||
|
* @returns 成功返回 0，失败返回-1 |
||||
|
*/ |
||||
|
let changeWndNum = (iWndType) => { |
||||
|
return webVideoCtrl.I_ChangeWndNum(iWndType); |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* 全屏播放 |
||||
|
* @param {boolean} full 是否全屏：true-全屏 false-退出全屏 |
||||
|
*/ |
||||
|
let fullScreen = (full) => { |
||||
|
webVideoCtrl.I_FullScreen(full); |
||||
|
}; |
||||
|
|
||||
|
export default { |
||||
|
init, |
||||
|
destroy, |
||||
|
resize, |
||||
|
login, |
||||
|
logout, |
||||
|
getDeviceInfo, |
||||
|
getAnalogChannelInfo, |
||||
|
analysisAnalogChannelInfo, |
||||
|
getDigitalChannelInfo, |
||||
|
analysisDigitalChannelInfo, |
||||
|
getZeroChannelInfo, |
||||
|
analysisZeroChannelInfo, |
||||
|
recordSearch, |
||||
|
startRealPlay, |
||||
|
startPlayBack, |
||||
|
stopPlay, |
||||
|
pause, |
||||
|
openSound, |
||||
|
closeSound, |
||||
|
setVolume, |
||||
|
changeWndNum, |
||||
|
fullScreen, |
||||
|
}; |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -1,201 +1,323 @@ |
|||||
<template> |
<template> |
||||
<div class="app-container"> |
<div class="video_box"> |
||||
<div> |
<!-- 摄像头 --> |
||||
<div v-show="viewState == 1"> |
<div id="divPlugin" class="plugin"></div> |
||||
<button-bar ref="btnbar" view-title="环境监控-视频中心" :btndisabled="btndisabled" @btnhandle="btnHandle" /> |
|
||||
<el-row style="margin-top: 20px;padding-left: 10px;padding-right: 10px;padding-bottom: 10px;"> |
|
||||
<el-col style="margin-left: 20px;margin-right: 20px;" :span="5"> |
|
||||
<div > |
|
||||
<el-card class="box-card"> |
|
||||
<div slot="header" class="clearfix"> |
|
||||
<span>Camera 01</span> |
|
||||
<el-button style="float: right; padding: 3px 0" type="text">播放</el-button> |
|
||||
</div> |
</div> |
||||
<img src="../../../assets/videoImg/1.png"/> |
</template> |
||||
</el-card> |
|
||||
</div> |
|
||||
|
|
||||
</el-col> |
|
||||
|
|
||||
<el-col style="margin-left: 20px;margin-right: 20px;" :span="5"> |
|
||||
<div > |
|
||||
<el-card class="box-card"> |
|
||||
<div slot="header" class="clearfix"> |
|
||||
<span>Camera 02</span> |
|
||||
<el-button style="float: right; padding: 3px 0" type="text">播放</el-button> |
|
||||
</div> |
|
||||
<img src="../../../assets/videoImg/2.png"/> |
|
||||
</el-card> |
|
||||
</div> |
|
||||
|
|
||||
</el-col> |
|
||||
|
|
||||
<el-col style="margin-left: 20px;margin-right: 20px;" :span="5"> |
|
||||
<div > |
|
||||
<el-card class="box-card"> |
|
||||
<div slot="header" class="clearfix"> |
|
||||
<span>Camera 03</span> |
|
||||
<el-button style="float: right; padding: 3px 0" type="text">播放</el-button> |
|
||||
</div> |
|
||||
<img src="../../../assets/videoImg/3.png"/> |
|
||||
</el-card> |
|
||||
</div> |
|
||||
|
|
||||
</el-col> |
|
||||
|
|
||||
<el-col style="margin-left: 20px;margin-right: 20px;" :span="5"> |
|
||||
<div > |
|
||||
<el-card class="box-card"> |
|
||||
<div slot="header" class="clearfix"> |
|
||||
<span>Camera 04</span> |
|
||||
<el-button style="float: right; padding: 3px 0" type="text">播放</el-button> |
|
||||
</div> |
|
||||
<img src="../../../assets/videoImg/4.png"/> |
|
||||
</el-card> |
|
||||
</div> |
|
||||
|
|
||||
</el-col> |
|
||||
|
|
||||
</el-row> |
|
||||
|
|
||||
<el-row style="margin-top: 20px;padding-left: 10px;padding-right: 10px;padding-bottom: 10px;"> |
|
||||
|
|
||||
<el-col style="margin-left: 20px;margin-right: 20px;" :span="5"> |
|
||||
<div > |
|
||||
<el-card class="box-card"> |
|
||||
<div slot="header" class="clearfix"> |
|
||||
<span>西通道南</span> |
|
||||
<el-button style="float: right; padding: 3px 0" type="text">播放</el-button> |
|
||||
</div> |
|
||||
<img src="../../../assets/videoImg/5.png"/> |
|
||||
</el-card> |
|
||||
</div> |
|
||||
|
|
||||
</el-col> |
|
||||
|
|
||||
<el-col style="margin-left: 20px;margin-right: 20px;" :span="5"> |
<script> |
||||
<div > |
import * as WebVideoCtrl from "@/api/hikvision/hkVideo.js"; |
||||
<el-card class="box-card"> |
export default { |
||||
<div slot="header" class="clearfix"> |
name: "carNvrVideo", |
||||
<span>西通道北</span> |
components: { |
||||
<el-button style="float: right; padding: 3px 0" type="text">播放</el-button> |
WebVideoCtrl |
||||
</div> |
}, |
||||
<img src="../../../assets/videoImg/6.png"/> |
data() { |
||||
</el-card> |
return { |
||||
</div> |
szInfo: "", |
||||
|
rowList: {}, |
||||
|
hkvInfo: { |
||||
|
ip: "192.168.3.2", |
||||
|
port: "8000", |
||||
|
username: "admin", |
||||
|
password: "Yxt123456" |
||||
|
|
||||
</el-col> |
}, |
||||
|
mySelectWnd: 0, //当前选中的窗口 |
||||
|
g_bPTZAuto: false, |
||||
|
iProtocol: 1, |
||||
|
loginLoading: false, |
||||
|
startPlayLoading: false, |
||||
|
bZeroChannel: false, |
||||
|
iRtspPort: 0, |
||||
|
index: 0, |
||||
|
iWndowType: null, |
||||
|
videoData: [{ |
||||
|
ip: "192.168.3.2", |
||||
|
port: "8000", |
||||
|
username: "admin", |
||||
|
password: "Yxt123456" |
||||
|
|
||||
<el-col style="margin-left: 20px;margin-right: 20px;" :span="5"> |
}], |
||||
<div > |
ua: navigator.userAgent.toLocaleLowerCase(), |
||||
<el-card class="box-card"> |
}; |
||||
<div slot="header" class="clearfix"> |
}, |
||||
<span>IPdome</span> |
created() { |
||||
<el-button style="float: right; padding: 3px 0" type="text">播放</el-button> |
|
||||
</div> |
|
||||
<img src="../../../assets/videoImg/7.png"/> |
|
||||
</el-card> |
|
||||
</div> |
|
||||
|
|
||||
</el-col> |
// this.videoData = JSON.parse(this.$route.query.videoData); |
||||
|
// if (this.videoData.length <= 1) { |
||||
|
// this.iWndowType = 1; |
||||
|
// } else if (this.videoData.length > 1 && this.videoData.length <= 4) { |
||||
|
// this.iWndowType = 2; |
||||
|
// } |
||||
|
|
||||
<el-col style="margin-left: 20px;margin-right: 20px;" :span="5"> |
console.log("ua>>>>", this.ua) |
||||
<div > |
|
||||
<el-card class="box-card"> |
|
||||
<div slot="header" class="clearfix"> |
|
||||
<span>1234</span> |
|
||||
<el-button style="float: right; padding: 3px 0" type="text">播放</el-button> |
|
||||
</div> |
|
||||
<img src="../../../assets/videoImg/8.png"/> |
|
||||
</el-card> |
|
||||
</div> |
|
||||
|
|
||||
</el-col> |
// if (this.ua.match(/msie/) != null || this.ua.match(/trident/) != null) { |
||||
|
// this.browserType = "IE"; |
||||
|
// this.videoData = JSON.parse(this.$route.query.videoData); |
||||
|
// if (this.videoData.length <= 1) { |
||||
|
// this.iWndowType = 1; |
||||
|
// } else if (this.videoData.length > 1 && this.videoData.length <= 4) { |
||||
|
// this.iWndowType = 2; |
||||
|
// } |
||||
|
// } else { |
||||
|
// this.$notify({ |
||||
|
// title: "失败", |
||||
|
// message: "请在ie模式下查看摄像头", |
||||
|
// type: "error", |
||||
|
// }); |
||||
|
// } |
||||
|
|
||||
</el-row> |
}, |
||||
|
mounted() { |
||||
|
this.videoChange(); |
||||
|
}, |
||||
|
destroyed() { |
||||
|
this.clickStopRealPlay(); |
||||
|
this.onLogout(); |
||||
|
}, |
||||
|
methods: { |
||||
|
videoChange() { |
||||
|
// setTimeout(() => { |
||||
|
// this.videoInitPlugin(); // 初始化video界面 |
||||
|
// }, 300); |
||||
|
|
||||
</div> |
WebVideoCtrl.init('1',"100%",'100%') |
||||
</div> |
}, |
||||
</div> |
handleSelectionChange() {}, |
||||
</template> |
submitForm() {}, |
||||
|
cancel() {}, |
||||
|
// 登录 |
||||
|
async onLogin() { |
||||
|
console.log("onLogin>>>>") |
||||
|
var that = this; |
||||
|
that.loginLoading = true; |
||||
|
// 登录设备 |
||||
|
WebVideoCtrl.I_Login( |
||||
|
that.hkvInfo.ip, |
||||
|
that.iProtocol, |
||||
|
that.hkvInfo.port, |
||||
|
that.hkvInfo.username, |
||||
|
that.hkvInfo.password, { |
||||
|
|
||||
<script> |
async: false, |
||||
import ButtonBar from '@/components/ButtonBar' |
success: (xmlDoc) => { |
||||
export default { |
console.log("success>>>>") |
||||
components: { |
//TODO 获取通道信息 |
||||
ButtonBar, |
that.getChannelInfo(); |
||||
|
that.getDevicePort(that.hkvInfo.ip + "_" + that.hkvInfo.port); |
||||
|
that.loginLoading = false; |
||||
|
this.clickStartRealPlay(); |
||||
|
}, |
||||
|
error: function(e) { |
||||
|
console.log("error>>>>",e) |
||||
|
that.loginLoading = false; |
||||
|
alert("当前摄像头配置不对或不在线，登录失败"); |
||||
|
// window.opener = null; |
||||
|
// window.open('', '_self'); |
||||
|
// window.close(); |
||||
}, |
}, |
||||
data() { |
|
||||
return { |
|
||||
btndisabled: false, |
|
||||
viewState: 1, // 1、列表 2、添加 3、修改 4、查看 |
|
||||
submitdisabled: false, |
|
||||
btnList: [ |
|
||||
// { |
|
||||
// type: 'primary', |
|
||||
// size: 'small', |
|
||||
// icon: 'plus', |
|
||||
// btnKey: 'toAdd', |
|
||||
// btnLabel: '新增' |
|
||||
// }, |
|
||||
// { |
|
||||
// type: 'danger', |
|
||||
// size: 'small', |
|
||||
// icon: 'del', |
|
||||
// btnKey: 'doDel', |
|
||||
// btnLabel: '删除' |
|
||||
// }, |
|
||||
{ |
|
||||
type: 'info', |
|
||||
size: 'small', |
|
||||
icon: 'cross', |
|
||||
btnKey: 'doClose', |
|
||||
btnLabel: '关闭' |
|
||||
} |
} |
||||
], |
); |
||||
|
}, |
||||
|
// 退出 |
||||
|
onLogout() { |
||||
|
this.videoData.forEach((element) => { |
||||
|
var szDeviceIdentify = element.ip + "_" + element.port; |
||||
|
var iRet = WebVideoCtrl.I_Logout(szDeviceIdentify); |
||||
|
if (0 == iRet) { |
||||
|
// this.$message({ |
||||
|
// showClose: true, |
||||
|
// message: "退出成功", |
||||
|
// type: "success", |
||||
|
// }); |
||||
|
} else { |
||||
|
// this.$message({ |
||||
|
// showClose: true, |
||||
|
// message: "退出失败", |
||||
|
// type: "error", |
||||
|
// }); |
||||
} |
} |
||||
|
}); |
||||
}, |
}, |
||||
mounted() { |
clickStartRealPlay() { |
||||
this.$refs['btnbar'].setButtonList(this.btnList) |
console.log("开始预览", this.index); |
||||
|
// 开始预览 |
||||
|
var that = this; |
||||
|
that.startPlayLoading = true; |
||||
|
var szDeviceIdentify = that.hkvInfo.ip + "_" + that.hkvInfo.port; |
||||
|
debugger |
||||
|
that.startRealPlay(szDeviceIdentify, this.index, that.hkvInfo.nvrPrechannel); |
||||
|
that.startPlayLoading = false; |
||||
}, |
}, |
||||
created() {}, |
startRealPlay(szDeviceIdentify, iWndIndex, iChannelID) { |
||||
methods: { |
var that = this; |
||||
btnHandle(btnKey) { |
WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, { |
||||
switch (btnKey) { |
iRtspPort: that.iRtspPort, |
||||
case 'doClose': |
iWndIndex: iWndIndex, |
||||
this.doClose() |
iChannelID: iChannelID, |
||||
break |
bZeroChannel: that.bZeroChannel, |
||||
default: |
iStreamType: 2, //码流类型，2为子码流 |
||||
break |
success: function() { |
||||
|
// that.$notify({ |
||||
|
// title: "成功", |
||||
|
// message: "开始预览通道" + iChannelID + "成功", |
||||
|
// type: "success", |
||||
|
// }); |
||||
|
}, |
||||
|
error(status, xmlDoc2) { |
||||
|
console.log(xmlDoc2); //不能删除 |
||||
|
// that.$notify({ |
||||
|
// title: "失败", |
||||
|
// message: "开始预览通道" + iChannelID + "失败", |
||||
|
// type: "error", |
||||
|
// }); |
||||
|
if (status === 403) { |
||||
|
console.log("szInfo 设备不支持Websocket取流！"); |
||||
|
} else { |
||||
|
console.log("开始预览失败 ", status, xmlDoc2); |
||||
} |
} |
||||
}, |
}, |
||||
doClose() { |
}); |
||||
this.$store.dispatch('tagsView/delView', this.$route) |
|
||||
this.$router.go(-1) |
|
||||
}, |
}, |
||||
|
videoInitPlugin() { |
||||
|
this.$nextTick(() => { |
||||
|
var iRet = WebVideoCtrl.I_CheckPluginInstall(); |
||||
|
if (iRet === -1) { |
||||
|
// alert("您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装"); |
||||
|
this.myFunction(); |
||||
|
return; |
||||
|
} else { |
||||
|
// if (this.ua.match(/msie/) != null || this.ua.match(/trident/) != null) { |
||||
|
this.browserType = "IE"; |
||||
|
this.initPlugin(); |
||||
|
// } else { |
||||
|
// this.$notify({ |
||||
|
// title: "失败", |
||||
|
// message: "请在ie模式下查看摄像头", |
||||
|
// type: "error", |
||||
|
// }); |
||||
|
// } |
||||
} |
} |
||||
|
|
||||
|
}); |
||||
|
}, |
||||
|
myFunction() { |
||||
|
var r = confirm("您还未安装过插件，请下载后查看摄像!"); |
||||
|
if (r == true) { |
||||
|
window.location.href = "/WebComponentsKit.exe"; |
||||
|
} else {} |
||||
|
}, |
||||
|
initPlugin() { |
||||
|
console.log("initPlugin>>>>") |
||||
|
WebVideoCtrl.I_InitPlugin("100%", "100%", { |
||||
|
bWndFull: true, //是否支持单窗口双击全屏，默I_CheckPluginInstall |
||||
|
iWndowType: this.iWndowType, //默认展示几个摄像头1x1 2x2 |
||||
|
cbInitPluginComplete: function() { |
||||
|
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin"); |
||||
|
// 检查插件是否最新 |
||||
|
if (WebVideoCtrl.I_CheckPluginVersion() === -1) { |
||||
|
return; |
||||
} |
} |
||||
</script> |
}, |
||||
|
}); |
||||
|
console.log("for>>>>") |
||||
|
for (var i = 0; i < this.videoData.length; i++) { |
||||
|
|
||||
<style lang="scss"> |
this.hkvInfo = this.videoData[i]; |
||||
.wrap { |
this.index = i; |
||||
padding: 12px; |
this.onLogin(); |
||||
} |
} |
||||
|
}, |
||||
|
getDevicePort(szDeviceIdentify) { |
||||
|
var oPort = WebVideoCtrl.I_GetDevicePort(szDeviceIdentify); |
||||
|
this.iRtspPort = oPort.iRtspPort; |
||||
|
}, |
||||
|
|
||||
.demo-layout { |
clickStopRealPlay: function() { |
||||
height: 25px; |
for (var i = 0; i <= this.index; i++) { |
||||
border-radius: 4px; |
setTimeout(this.stopRealPlay(i), 1000); |
||||
|
} |
||||
|
}, |
||||
|
stopRealPlay: function(iWndIndex) { |
||||
|
var that = this; |
||||
|
WebVideoCtrl.I_Stop({ |
||||
|
iWndIndex: iWndIndex, |
||||
|
success: function() { |
||||
|
// that.$notify({ |
||||
|
// title: "成功", |
||||
|
// message: "停止预览窗口" + iWndIndex + "成功", |
||||
|
// type: "success", |
||||
|
// }); |
||||
|
}, |
||||
|
error: function() { |
||||
|
// that.$notify({ |
||||
|
// title: "失败", |
||||
|
// message: "停止预览窗口" + iWndIndex + "失败", |
||||
|
// type: "error", |
||||
|
// }); |
||||
|
}, |
||||
|
}); |
||||
|
}, |
||||
|
// 获取通道，实际上可以根据自己的项目，获取数字通道，模拟通道，零通道中的一个或多个，不用全部获取（提高效率） |
||||
|
getChannelInfo: function() { |
||||
|
var that = this; |
||||
|
var szDeviceIdentify = this.hkvInfo.ip + ":" + this.hkvInfo.port; |
||||
|
// 数字通道 |
||||
|
that.hkvInfo.channels = []; |
||||
|
WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, { |
||||
|
async: false, |
||||
|
mysuccess: function(xmlStr) { |
||||
|
console.log("mysuccess I_GetDigitalChannelInfo: ", xmlStr); |
||||
|
var jsonObj = that.$x2js.xml2js(xmlStr); |
||||
|
var list = jsonObj.InputProxyChannelStatusList.InputProxyChannelStatus; |
||||
|
for (var x = 0; x < list.length; x++) { |
||||
|
that.hkvInfo.channels.push(list[x].id); |
||||
|
} |
||||
|
}, |
||||
|
success: function(xmlDoc) {}, |
||||
|
error: function(status, xmlDoc) { |
||||
|
console.log("获取数字通道失败"); |
||||
|
}, |
||||
|
}); |
||||
|
// 模拟通道 |
||||
|
WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, { |
||||
|
async: false, |
||||
|
mysuccess: function(xmlStr) { |
||||
|
var jsonObj = that.$x2js.xml2js(xmlStr); |
||||
|
console.log("模拟通道mysuccess", xmlStr); |
||||
|
var id = jsonObj.VideoInputChannelList.VideoInputChannel.id; |
||||
|
that.hkvInfo.channels.push(id); |
||||
|
}, |
||||
|
success: function(xmlStr) { |
||||
|
console.log("模拟通道success", xmlStr); |
||||
|
}, |
||||
|
error: function(status, xmlDoc) { |
||||
|
console.log("模拟通道error", xmlDoc); |
||||
|
}, |
||||
|
}); |
||||
|
// TODO 零通道 |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.video_box { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
} |
} |
||||
|
|
||||
.bg-purple { |
.plugin { |
||||
background: #CED7E1; |
width: 100%; |
||||
|
height: 100%; |
||||
} |
} |
||||
|
|
||||
.bg-purple-light { |
.my-tag { |
||||
background: #e5e9f2; |
margin-left: 3px; |
||||
} |
} |
||||
|
|
||||
.bg-purple-dark { |
.my-group-btn { |
||||
background: #99a9bf; |
margin-top: 5px; |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
@ -0,0 +1,303 @@ |
|||||
|
<template> |
||||
|
<div class="video_box"> |
||||
|
<!-- 摄像头 --> |
||||
|
<div id="divPlugin" class="plugin"></div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { |
||||
|
WebVideoCtrl |
||||
|
} from "@/api/webVideoCtrl.js"; |
||||
|
export default { |
||||
|
name: "carNvrVideo", |
||||
|
components: {}, |
||||
|
data() { |
||||
|
return { |
||||
|
szInfo: "", |
||||
|
rowList: {}, |
||||
|
hkvInfo: {}, |
||||
|
mySelectWnd: 0, //当前选中的窗口 |
||||
|
g_bPTZAuto: false, |
||||
|
iProtocol: 1, |
||||
|
loginLoading: false, |
||||
|
startPlayLoading: false, |
||||
|
bZeroChannel: false, |
||||
|
iRtspPort: 0, |
||||
|
index: 0, |
||||
|
iWndowType: null, |
||||
|
videoData: [], |
||||
|
ua: navigator.userAgent.toLocaleLowerCase(), |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
|
||||
|
// this.videoData = JSON.parse(this.$route.query.videoData); |
||||
|
// if (this.videoData.length <= 1) { |
||||
|
// this.iWndowType = 1; |
||||
|
// } else if (this.videoData.length > 1 && this.videoData.length <= 4) { |
||||
|
// this.iWndowType = 2; |
||||
|
// } |
||||
|
|
||||
|
if (this.ua.match(/msie/) != null || this.ua.match(/trident/) != null) { |
||||
|
this.browserType = "IE"; |
||||
|
this.videoData = JSON.parse(this.$route.query.videoData); |
||||
|
if (this.videoData.length <= 1) { |
||||
|
this.iWndowType = 1; |
||||
|
} else if (this.videoData.length > 1 && this.videoData.length <= 4) { |
||||
|
this.iWndowType = 2; |
||||
|
} |
||||
|
} else { |
||||
|
this.$notify({ |
||||
|
title: "失败", |
||||
|
message: "请在ie模式下查看摄像头", |
||||
|
type: "error", |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
mounted() { |
||||
|
this.videoChange(); |
||||
|
}, |
||||
|
destroyed() { |
||||
|
this.clickStopRealPlay(); |
||||
|
this.onLogout(); |
||||
|
}, |
||||
|
methods: { |
||||
|
videoChange() { |
||||
|
setTimeout(() => { |
||||
|
this.videoInitPlugin(); // 初始化video界面 |
||||
|
}, 300); |
||||
|
}, |
||||
|
handleSelectionChange() {}, |
||||
|
submitForm() {}, |
||||
|
cancel() {}, |
||||
|
// 登录 |
||||
|
async onLogin() { |
||||
|
var that = this; |
||||
|
that.loginLoading = true; |
||||
|
// 登录设备 |
||||
|
WebVideoCtrl.I_Login( |
||||
|
that.hkvInfo.ip, |
||||
|
that.iProtocol, |
||||
|
that.hkvInfo.port, |
||||
|
that.hkvInfo.username, |
||||
|
that.hkvInfo.password, { |
||||
|
|
||||
|
async: false, |
||||
|
success: (xmlDoc) => { |
||||
|
//TODO 获取通道信息 |
||||
|
that.getChannelInfo(); |
||||
|
that.getDevicePort(that.hkvInfo.ip + "_" + that.hkvInfo.port); |
||||
|
that.loginLoading = false; |
||||
|
this.clickStartRealPlay(); |
||||
|
}, |
||||
|
error: function() { |
||||
|
that.loginLoading = false; |
||||
|
alert("当前摄像头配置不对或不在线，登录失败"); |
||||
|
window.opener = null; |
||||
|
window.open('', '_self'); |
||||
|
window.close(); |
||||
|
}, |
||||
|
} |
||||
|
); |
||||
|
}, |
||||
|
// 退出 |
||||
|
onLogout() { |
||||
|
this.videoData.forEach((element) => { |
||||
|
var szDeviceIdentify = element.ip + "_" + element.port; |
||||
|
var iRet = WebVideoCtrl.I_Logout(szDeviceIdentify); |
||||
|
if (0 == iRet) { |
||||
|
// this.$message({ |
||||
|
// showClose: true, |
||||
|
// message: "退出成功", |
||||
|
// type: "success", |
||||
|
// }); |
||||
|
} else { |
||||
|
// this.$message({ |
||||
|
// showClose: true, |
||||
|
// message: "退出失败", |
||||
|
// type: "error", |
||||
|
// }); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
clickStartRealPlay() { |
||||
|
console.log("开始预览", this.index); |
||||
|
// 开始预览 |
||||
|
var that = this; |
||||
|
that.startPlayLoading = true; |
||||
|
var szDeviceIdentify = that.hkvInfo.ip + "_" + that.hkvInfo.port; |
||||
|
debugger |
||||
|
that.startRealPlay(szDeviceIdentify, this.index, that.hkvInfo.nvrPrechannel); |
||||
|
that.startPlayLoading = false; |
||||
|
}, |
||||
|
startRealPlay(szDeviceIdentify, iWndIndex, iChannelID) { |
||||
|
var that = this; |
||||
|
WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, { |
||||
|
iRtspPort: that.iRtspPort, |
||||
|
iWndIndex: iWndIndex, |
||||
|
iChannelID: iChannelID, |
||||
|
bZeroChannel: that.bZeroChannel, |
||||
|
iStreamType: 2, //码流类型，2为子码流 |
||||
|
success: function() { |
||||
|
// that.$notify({ |
||||
|
// title: "成功", |
||||
|
// message: "开始预览通道" + iChannelID + "成功", |
||||
|
// type: "success", |
||||
|
// }); |
||||
|
}, |
||||
|
error(status, xmlDoc2) { |
||||
|
console.log(xmlDoc2); //不能删除 |
||||
|
// that.$notify({ |
||||
|
// title: "失败", |
||||
|
// message: "开始预览通道" + iChannelID + "失败", |
||||
|
// type: "error", |
||||
|
// }); |
||||
|
if (status === 403) { |
||||
|
console.log("szInfo 设备不支持Websocket取流！"); |
||||
|
} else { |
||||
|
console.log("开始预览失败 ", status, xmlDoc2); |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
}, |
||||
|
videoInitPlugin() { |
||||
|
this.$nextTick(() => { |
||||
|
var iRet = WebVideoCtrl.I_CheckPluginInstall(); |
||||
|
if (iRet === -1) { |
||||
|
// alert("您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装"); |
||||
|
this.myFunction(); |
||||
|
return; |
||||
|
} else { |
||||
|
if (this.ua.match(/msie/) != null || this.ua.match(/trident/) != null) { |
||||
|
this.browserType = "IE"; |
||||
|
this.initPlugin(); |
||||
|
} else { |
||||
|
this.$notify({ |
||||
|
title: "失败", |
||||
|
message: "请在ie模式下查看摄像头", |
||||
|
type: "error", |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}); |
||||
|
}, |
||||
|
myFunction() { |
||||
|
var r = confirm("您还未安装过插件，请下载后查看摄像!"); |
||||
|
if (r == true) { |
||||
|
window.location.href = "/WebComponentsKit.exe"; |
||||
|
} else {} |
||||
|
}, |
||||
|
initPlugin() { |
||||
|
WebVideoCtrl.I_InitPlugin("100%", "100%", { |
||||
|
bWndFull: true, //是否支持单窗口双击全屏，默I_CheckPluginInstall |
||||
|
iWndowType: this.iWndowType, //默认展示几个摄像头1x1 2x2 |
||||
|
cbInitPluginComplete: function() { |
||||
|
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin"); |
||||
|
// 检查插件是否最新 |
||||
|
if (WebVideoCtrl.I_CheckPluginVersion() === -1) { |
||||
|
return; |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
for (var i = 0; i < this.videoData.length; i++) { |
||||
|
|
||||
|
this.hkvInfo = this.videoData[i]; |
||||
|
debugger |
||||
|
this.index = i; |
||||
|
this.onLogin(); |
||||
|
} |
||||
|
}, |
||||
|
getDevicePort(szDeviceIdentify) { |
||||
|
var oPort = WebVideoCtrl.I_GetDevicePort(szDeviceIdentify); |
||||
|
this.iRtspPort = oPort.iRtspPort; |
||||
|
}, |
||||
|
|
||||
|
clickStopRealPlay: function() { |
||||
|
for (var i = 0; i <= this.index; i++) { |
||||
|
setTimeout(this.stopRealPlay(i), 1000); |
||||
|
} |
||||
|
}, |
||||
|
stopRealPlay: function(iWndIndex) { |
||||
|
var that = this; |
||||
|
WebVideoCtrl.I_Stop({ |
||||
|
iWndIndex: iWndIndex, |
||||
|
success: function() { |
||||
|
// that.$notify({ |
||||
|
// title: "成功", |
||||
|
// message: "停止预览窗口" + iWndIndex + "成功", |
||||
|
// type: "success", |
||||
|
// }); |
||||
|
}, |
||||
|
error: function() { |
||||
|
// that.$notify({ |
||||
|
// title: "失败", |
||||
|
// message: "停止预览窗口" + iWndIndex + "失败", |
||||
|
// type: "error", |
||||
|
// }); |
||||
|
}, |
||||
|
}); |
||||
|
}, |
||||
|
// 获取通道，实际上可以根据自己的项目，获取数字通道，模拟通道，零通道中的一个或多个，不用全部获取（提高效率） |
||||
|
getChannelInfo: function() { |
||||
|
var that = this; |
||||
|
var szDeviceIdentify = this.hkvInfo.ip + ":" + this.hkvInfo.port; |
||||
|
// 数字通道 |
||||
|
that.hkvInfo.channels = []; |
||||
|
WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, { |
||||
|
async: false, |
||||
|
mysuccess: function(xmlStr) { |
||||
|
console.log("mysuccess I_GetDigitalChannelInfo: ", xmlStr); |
||||
|
var jsonObj = that.$x2js.xml2js(xmlStr); |
||||
|
var list = jsonObj.InputProxyChannelStatusList.InputProxyChannelStatus; |
||||
|
for (var x = 0; x < list.length; x++) { |
||||
|
that.hkvInfo.channels.push(list[x].id); |
||||
|
} |
||||
|
}, |
||||
|
success: function(xmlDoc) {}, |
||||
|
error: function(status, xmlDoc) { |
||||
|
console.log("获取数字通道失败"); |
||||
|
}, |
||||
|
}); |
||||
|
// 模拟通道 |
||||
|
WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, { |
||||
|
async: false, |
||||
|
mysuccess: function(xmlStr) { |
||||
|
var jsonObj = that.$x2js.xml2js(xmlStr); |
||||
|
console.log("模拟通道mysuccess", xmlStr); |
||||
|
var id = jsonObj.VideoInputChannelList.VideoInputChannel.id; |
||||
|
that.hkvInfo.channels.push(id); |
||||
|
}, |
||||
|
success: function(xmlStr) { |
||||
|
console.log("模拟通道success", xmlStr); |
||||
|
}, |
||||
|
error: function(status, xmlDoc) { |
||||
|
console.log("模拟通道error", xmlDoc); |
||||
|
}, |
||||
|
}); |
||||
|
// TODO 零通道 |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.video_box { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.plugin { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.my-tag { |
||||
|
margin-left: 3px; |
||||
|
} |
||||
|
|
||||
|
.my-group-btn { |
||||
|
margin-top: 5px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue