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' }
|
|||
// })
|
|||
// }
|
|||
@ -1,222 +1,247 @@ |
|||
<template> |
|||
<div> |
|||
<el-upload ref="imgUpload" v-loading="loadding" class="avatar-uploader" :headers="accessToken" :action="uploadFile" :accept="accept" list-type="picture-card" :limit="limit" :file-list="files" :on-remove="removeImage" :on-preview="handlePictureCardPreview" :on-progress="uploadProgrees" :on-error="uploadError" :on-success="uploadImgSuccess_FuJian"> |
|||
<i class="el-icon-plus avatar-uploader-icon"/> |
|||
<el-upload ref="imgUpload" v-loading="loadding" class="avatar-uploader" :class="{ disabled: uploadDisabled }" |
|||
:headers="accessToken" :action="uploadFile" :accept="accept" list-type="picture-card" :limit="limit" |
|||
:file-list="files" :on-remove="removeImage" :on-preview="handlePictureCardPreview" :on-progress="uploadProgrees" |
|||
:on-error="uploadError" :on-success="uploadImgSuccess_FuJian"> |
|||
<i class="el-icon-plus avatar-uploader-icon" /> |
|||
</el-upload> |
|||
<el-dialog :visible.sync="dialogVisible" title="查看图片"> |
|||
<el-dialog :visible.sync="dialogVisible" title="查看图片"> |
|||
<img width="100%" :src="dialogImageUrl" alt=""> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { uploadFile_yanchejiancha } from '@/api/portal/Upload' |
|||
import { getStorage } from '@/utils/auth.js' |
|||
import { |
|||
uploadFile |
|||
} from '@/api/portal/Upload' |
|||
import { |
|||
getStorage |
|||
} from '@/utils/auth.js' |
|||
|
|||
export default { |
|||
model: { |
|||
prop: 'name', |
|||
event: 'change' |
|||
}, |
|||
props: { |
|||
placeholder: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
bucket: { |
|||
type: String, |
|||
default: 'abc' |
|||
}, |
|||
// 长度 |
|||
width: { |
|||
type: String, |
|||
default: '270px' |
|||
}, |
|||
limit: { |
|||
type: Number, |
|||
default: '' |
|||
}, |
|||
accept: { |
|||
type: String, |
|||
default: '.jpg,.jpeg,.png,.JPG,.JPEG,' |
|||
}, |
|||
// 文件名称 |
|||
name: { |
|||
type: Array, |
|||
required: true |
|||
}, |
|||
uploadData: { |
|||
type: Object, |
|||
default: {} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
dialogImageUrl: '', |
|||
dialogVisible: false, |
|||
accessToken: null, |
|||
uploadFile: uploadFile_yanchejiancha, |
|||
fileList_FuJian: [], |
|||
enclosure: '', |
|||
file_add: '', |
|||
file_catch: '', |
|||
files: [], |
|||
files_list: [], |
|||
filedUrl: '', |
|||
// fileUrl: fileUrl, |
|||
// showpicture:false, |
|||
isview: false, |
|||
nameArr: '', |
|||
loadding: false |
|||
} |
|||
}, |
|||
watch: { |
|||
name: { |
|||
deep: true, |
|||
immediate: true, |
|||
handler(newVal, oldVal) { |
|||
console.log('aaaa1', newVal) |
|||
this.files = newVal |
|||
console.log('aaaa2', this.files) |
|||
export default { |
|||
model: { |
|||
prop: 'name', |
|||
event: 'change' |
|||
}, |
|||
props: { |
|||
placeholder: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
bucket: { |
|||
type: String, |
|||
default: 'abc' |
|||
}, |
|||
// 长度 |
|||
width: { |
|||
type: String, |
|||
default: '270px' |
|||
}, |
|||
limit: { |
|||
type: Number, |
|||
default: '' |
|||
}, |
|||
accept: { |
|||
type: String, |
|||
default: '.jpg,.jpeg,.png,.JPG,.JPEG,' |
|||
}, |
|||
// 文件名称 |
|||
name: { |
|||
type: Array, |
|||
required: true |
|||
}, |
|||
uploadData: { |
|||
type: Object, |
|||
default: {} |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.Init() |
|||
}) |
|||
}, |
|||
created() { |
|||
this.uploadFile = uploadFile_yanchejiancha // 接口 |
|||
this.accessToken = { |
|||
token: getStorage() |
|||
} |
|||
}, |
|||
methods: { |
|||
showImg(imgList) { |
|||
this.files = imgList |
|||
console.log('123123123', this.files) |
|||
}, |
|||
view() { |
|||
// window.open(this.filedUrl) |
|||
}, |
|||
// 页面第一次加载 |
|||
Init() { |
|||
if (this.name !== undefined) { |
|||
this.files = [] |
|||
for (var i = 0; i < this.name.length; i++) { |
|||
this.files.push({ |
|||
name: this.name[i], |
|||
url: this.name[i] |
|||
}) |
|||
} |
|||
data() { |
|||
return { |
|||
uploadDisabled: false, |
|||
dialogImageUrl: '', |
|||
dialogVisible: false, |
|||
accessToken: null, |
|||
uploadFile: uploadFile, |
|||
fileList_FuJian: [], |
|||
enclosure: '', |
|||
file_add: '', |
|||
file_catch: '', |
|||
files: [], |
|||
files_list: [], |
|||
filedUrl: '', |
|||
// fileUrl: fileUrl, |
|||
// showpicture:false, |
|||
isview: false, |
|||
nameArr: '', |
|||
loadding: false |
|||
} |
|||
}, |
|||
handlePictureCardPreview(file) { |
|||
this.dialogVisible = true |
|||
this.dialogImageUrl = file.url |
|||
}, |
|||
// 上传方案--成功后执行 |
|||
uploadImgSuccess_FuJian(response, file, fileList) { |
|||
console.log('您选择的file:', file) |
|||
if (file.response.code === '200') { |
|||
this.loadding = false |
|||
// 返显图片 |
|||
this.filedUrl = this.fileUrl + file.response.data |
|||
// var uid = file.response.data |
|||
this.files.push({ |
|||
name: file.response.data.sourceFileName, |
|||
url: file.response.data.fullUrl, |
|||
size: file.response.data.size |
|||
}) |
|||
this.$emit('change', this.files) |
|||
this.$emit('eett', this.files) |
|||
watch: { |
|||
name: { |
|||
deep: true, |
|||
immediate: true, |
|||
handler(newVal, oldVal) { |
|||
this.files = newVal |
|||
|
|||
console.log("this.files>>>", this.files.length) |
|||
if (this.files.length > 0) { |
|||
this.uploadDisabled = true |
|||
} else { |
|||
this.uploadDisabled = false |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(() => { |
|||
this.Init() |
|||
|
|||
removeImage(file, ImageFileList) { |
|||
this.files.splice(this.files.indexOf(file), 1) |
|||
const imgFiles = [] |
|||
this.files.forEach((o) => { |
|||
imgFiles.push(o.url) |
|||
}) |
|||
this.$emit('fileChange', this.files) |
|||
}, |
|||
handleRemove(file, fileList) { |
|||
console.log('file:' + JSON.stringify(file)) |
|||
console.log('fileList:' + JSON.stringify(fileList)) |
|||
this.enclosure = '' |
|||
// 1. 保存新增文件id(this.file_add) |
|||
this.getNewFileId(fileList) |
|||
// 2. 保存数据库读取的已有文件id(this.file_catch) |
|||
this.getCatchFileId(file) |
|||
// 3. 保存并拼接id |
|||
this.getFileId() |
|||
// 4. 返回拼接id |
|||
this.$emit('change', this.enclosure) |
|||
}, |
|||
// 返回this.file_add(新上传文件的id拼接集合) |
|||
getNewFileId(fileList) { |
|||
// debugger |
|||
this.file_add = '' |
|||
for (var i = 0; i < fileList.length; i++) { |
|||
if (fileList[i].response && fileList[i].response.code === '200') { |
|||
this.file_add = this.file_add + fileList[i].response.data + ',' |
|||
} |
|||
} |
|||
if (this.file_add !== '') { |
|||
this.file_add = this.file_add.substring(0, this.file_add.length - 1) |
|||
created() { |
|||
|
|||
this.uploadFile = uploadFile // 接口 |
|||
this.accessToken = { |
|||
token: getStorage() |
|||
} |
|||
// console.log('1. this.file_add: ' + this.file_add) |
|||
}, |
|||
// 返回this.file_catch（数库一寸照的文件的id的拼接集合） |
|||
getCatchFileId(file) { |
|||
for (var i = 0; i < this.files_list.length; i++) { |
|||
if (this.file_catch !== '') { |
|||
// 1. 检查当前删除的文件是否是修改文件列表里面的，如果是，将修改列表里去除此id |
|||
if (this.files_list[i].name === file.name) { |
|||
// 2. 拆开file_catch到fils_arry |
|||
var fils_arry = this.file_catch.split(',') |
|||
// 3. 从fils_arry去除 this.files_list[i].id |
|||
var arry = [] |
|||
fils_arry.forEach((element) => { |
|||
// 不加载文件里面的 |
|||
if (element !== this.files_list[i].id) { |
|||
arry.push(element) |
|||
} |
|||
methods: { |
|||
showImg(imgList) { |
|||
this.files = imgList |
|||
}, |
|||
view() { |
|||
// window.open(this.filedUrl) |
|||
}, |
|||
// 页面第一次加载 |
|||
Init() { |
|||
if (this.name !== undefined) { |
|||
this.files = [] |
|||
for (var i = 0; i < this.name.length; i++) { |
|||
this.files.push({ |
|||
name: this.name[i], |
|||
url: this.name[i] |
|||
}) |
|||
// 4. 重新拼接成file_catch |
|||
this.file_catch = arry.join(',') |
|||
} |
|||
} |
|||
} |
|||
// console.log('2. this.file_catch:' + this.file_catch) |
|||
}, |
|||
// 保存并拼接id |
|||
getFileId() { |
|||
// console.log('3. this.file_catch:' + this.file_catch + ',this.file_add:' + this.file_add) |
|||
if (this.file_catch !== '') { |
|||
}, |
|||
handlePictureCardPreview(file) { |
|||
this.dialogVisible = true |
|||
this.dialogImageUrl = file.url |
|||
}, |
|||
// 上传方案--成功后执行 |
|||
uploadImgSuccess_FuJian(response, file, fileList) { |
|||
console.log('您选择的file:', file) |
|||
if (file.response.code === '200') { |
|||
this.loadding = false |
|||
// 返显图片 |
|||
this.filedUrl = this.fileUrl + file.response.data |
|||
// var uid = file.response.data |
|||
this.files.push({ |
|||
name: file.response.data.sourceFileName, |
|||
url: file.response.data.fullUrl, |
|||
size: file.response.data.size |
|||
}) |
|||
this.$emit('change', this.files) |
|||
this.$emit('eett', this.files) |
|||
} |
|||
}, |
|||
|
|||
removeImage(file, ImageFileList) { |
|||
this.files.splice(this.files.indexOf(file), 1) |
|||
|
|||
console.log("this.files222222>>>", this.files.length) |
|||
if (this.files.length > 0) { |
|||
this.uploadDisabled = true |
|||
} else { |
|||
this.uploadDisabled = false |
|||
} |
|||
const imgFiles = [] |
|||
this.files.forEach((o) => { |
|||
imgFiles.push(o.url) |
|||
}) |
|||
this.$emit('fileChange', this.files) |
|||
}, |
|||
handleRemove(file, fileList) { |
|||
console.log('file:' + JSON.stringify(file)) |
|||
console.log('fileList:' + JSON.stringify(fileList)) |
|||
this.enclosure = '' |
|||
// 1. 保存新增文件id(this.file_add) |
|||
this.getNewFileId(fileList) |
|||
// 2. 保存数据库读取的已有文件id(this.file_catch) |
|||
this.getCatchFileId(file) |
|||
// 3. 保存并拼接id |
|||
this.getFileId() |
|||
// 4. 返回拼接id |
|||
this.$emit('change', this.enclosure) |
|||
}, |
|||
// 返回this.file_add(新上传文件的id拼接集合) |
|||
getNewFileId(fileList) { |
|||
// debugger |
|||
this.file_add = '' |
|||
for (var i = 0; i < fileList.length; i++) { |
|||
if (fileList[i].response && fileList[i].response.code === '200') { |
|||
this.file_add = this.file_add + fileList[i].response.data + ',' |
|||
} |
|||
} |
|||
if (this.file_add !== '') { |
|||
this.enclosure = this.file_catch + ',' + this.file_add |
|||
this.file_add = this.file_add.substring(0, this.file_add.length - 1) |
|||
} |
|||
// console.log('1. this.file_add: ' + this.file_add) |
|||
}, |
|||
// 返回this.file_catch（数库一寸照的文件的id的拼接集合） |
|||
getCatchFileId(file) { |
|||
for (var i = 0; i < this.files_list.length; i++) { |
|||
if (this.file_catch !== '') { |
|||
// 1. 检查当前删除的文件是否是修改文件列表里面的，如果是，将修改列表里去除此id |
|||
if (this.files_list[i].name === file.name) { |
|||
// 2. 拆开file_catch到fils_arry |
|||
var fils_arry = this.file_catch.split(',') |
|||
// 3. 从fils_arry去除 this.files_list[i].id |
|||
var arry = [] |
|||
fils_arry.forEach((element) => { |
|||
// 不加载文件里面的 |
|||
if (element !== this.files_list[i].id) { |
|||
arry.push(element) |
|||
} |
|||
}) |
|||
// 4. 重新拼接成file_catch |
|||
this.file_catch = arry.join(',') |
|||
} |
|||
} |
|||
} |
|||
// console.log('2. this.file_catch:' + this.file_catch) |
|||
}, |
|||
// 保存并拼接id |
|||
getFileId() { |
|||
// console.log('3. this.file_catch:' + this.file_catch + ',this.file_add:' + this.file_add) |
|||
if (this.file_catch !== '') { |
|||
if (this.file_add !== '') { |
|||
this.enclosure = this.file_catch + ',' + this.file_add |
|||
} else { |
|||
this.enclosure = this.file_catch |
|||
} |
|||
} else { |
|||
this.enclosure = this.file_catch |
|||
this.enclosure = this.file_add |
|||
} |
|||
} else { |
|||
this.enclosure = this.file_add |
|||
} |
|||
}, |
|||
// 上传失败 |
|||
uploadError() { |
|||
this.loadding = false |
|||
}, |
|||
uploadProgrees(event, file, fileList) { |
|||
if (Number(event.percent) > 0) { |
|||
this.loadding = true |
|||
}, |
|||
// 上传失败 |
|||
uploadError() { |
|||
this.loadding = false |
|||
}, |
|||
uploadProgrees(event, file, fileList) { |
|||
if (Number(event.percent) > 0) { |
|||
this.loadding = true |
|||
} |
|||
// console.log('event:', event) |
|||
} |
|||
// console.log('event:', event) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
<style> |
|||
.disabled .el-upload--picture-card { |
|||
display: none; |
|||
} |
|||
</style> |
|||
@ -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> |
|||
<div class="app-container"> |
|||
<div> |
|||
<div v-show="viewState == 1"> |
|||
<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> |
|||
<img src="../../../assets/videoImg/1.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 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"> |
|||
<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/6.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>IPdome</span> |
|||
<el-button style="float: right; padding: 3px 0" type="text">播放</el-button> |
|||
</div> |
|||
<img src="../../../assets/videoImg/7.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>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> |
|||
|
|||
</el-row> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="video_box"> |
|||
<!-- 摄像头 --> |
|||
<div id="divPlugin" class="plugin"></div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import ButtonBar from '@/components/ButtonBar' |
|||
import * as WebVideoCtrl from "@/api/hikvision/hkVideo.js"; |
|||
export default { |
|||
name: "carNvrVideo", |
|||
components: { |
|||
ButtonBar, |
|||
WebVideoCtrl |
|||
}, |
|||
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: '关闭' |
|||
} |
|||
], |
|||
} |
|||
szInfo: "", |
|||
rowList: {}, |
|||
hkvInfo: { |
|||
ip: "192.168.3.2", |
|||
port: "8000", |
|||
username: "admin", |
|||
password: "Yxt123456" |
|||
|
|||
}, |
|||
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" |
|||
|
|||
}], |
|||
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; |
|||
// } |
|||
|
|||
console.log("ua>>>>", this.ua) |
|||
|
|||
// 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.$refs['btnbar'].setButtonList(this.btnList) |
|||
this.videoChange(); |
|||
}, |
|||
destroyed() { |
|||
this.clickStopRealPlay(); |
|||
this.onLogout(); |
|||
}, |
|||
created() {}, |
|||
methods: { |
|||
btnHandle(btnKey) { |
|||
switch (btnKey) { |
|||
case 'doClose': |
|||
this.doClose() |
|||
break |
|||
default: |
|||
break |
|||
} |
|||
videoChange() { |
|||
// setTimeout(() => { |
|||
// this.videoInitPlugin(); // 初始化video界面 |
|||
// }, 300); |
|||
|
|||
WebVideoCtrl.init('1',"100%",'100%') |
|||
}, |
|||
doClose() { |
|||
this.$store.dispatch('tagsView/delView', this.$route) |
|||
this.$router.go(-1) |
|||
handleSelectionChange() {}, |
|||
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, { |
|||
|
|||
async: false, |
|||
success: (xmlDoc) => { |
|||
console.log("success>>>>") |
|||
//TODO 获取通道信息 |
|||
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(); |
|||
}, |
|||
} |
|||
); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
// 退出 |
|||
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", |
|||
// }); |
|||
// } |
|||
} |
|||
|
|||
<style lang="scss"> |
|||
.wrap { |
|||
padding: 12px; |
|||
} |
|||
}); |
|||
}, |
|||
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; |
|||
} |
|||
}, |
|||
}); |
|||
console.log("for>>>>") |
|||
for (var i = 0; i < this.videoData.length; i++) { |
|||
|
|||
this.hkvInfo = this.videoData[i]; |
|||
this.index = i; |
|||
this.onLogin(); |
|||
} |
|||
}, |
|||
getDevicePort(szDeviceIdentify) { |
|||
var oPort = WebVideoCtrl.I_GetDevicePort(szDeviceIdentify); |
|||
this.iRtspPort = oPort.iRtspPort; |
|||
}, |
|||
|
|||
.demo-layout { |
|||
height: 25px; |
|||
border-radius: 4px; |
|||
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%; |
|||
} |
|||
|
|||
.bg-purple { |
|||
background: #CED7E1; |
|||
.plugin { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.bg-purple-light { |
|||
background: #e5e9f2; |
|||
.my-tag { |
|||
margin-left: 3px; |
|||
} |
|||
|
|||
.bg-purple-dark { |
|||
background: #99a9bf; |
|||
.my-group-btn { |
|||
margin-top: 5px; |
|||
} |
|||
</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