@@ -11,13 +11,13 @@ | |||||
</view> | </view> | ||||
<view class="tki-tree-view"> | <view class="tki-tree-view"> | ||||
<!-- <view style=""> | |||||
<u-search height="90rpx" @change="searChange(searchText,treeList)" :inputStyle="{fontSize:'30rpx'}" | |||||
v-model="searchText" placeholder="请输入" shape="square" :showAction="false"></u-search> | |||||
</view> --> | |||||
<scroll-view class="tki-tree-view-sc" :scroll-y="true"> | <scroll-view class="tki-tree-view-sc" :scroll-y="true"> | ||||
<view style=""> | |||||
<u-search height="90rpx" :inputStyle="{fontSize:'30rpx'}" | |||||
v-model="searchText" placeholder="请输入" shape="square" :showAction="false"></u-search> | |||||
</view> | |||||
<block v-for="(item, index) in treeList" :key="index"> | <block v-for="(item, index) in treeList" :key="index"> | ||||
<view class="tki-tree-item" :style="[{ | |||||
<view v-if="(item[rangeKey].includes(searchText))" class="tki-tree-item" :style="[{ | |||||
paddingLeft: item.rank*15 + 'px', | paddingLeft: item.rank*15 + 'px', | ||||
zIndex: item.rank*-1 +50 | zIndex: item.rank*-1 +50 | ||||
}]" :class="{ | }]" :class="{ | ||||
@@ -87,6 +87,10 @@ | |||||
type: Boolean, | type: Boolean, | ||||
default: false | default: false | ||||
}, | }, | ||||
showChild: {//是否显示子级 | |||||
type: Boolean, | |||||
default: false | |||||
}, | |||||
confirmColor: { // 确定按钮颜色 | confirmColor: { // 确定按钮颜色 | ||||
type: String, | type: String, | ||||
default: '' // #2388FF | default: '' // #2388FF | ||||
@@ -164,9 +168,9 @@ | |||||
parentId, // 父级id数组 | parentId, // 父级id数组 | ||||
parents, // 父级id数组 | parents, // 父级id数组 | ||||
rank, // 层级 | rank, // 层级 | ||||
showChild: false, //子级是否显示 | |||||
showChild: this.showChild, //子级是否显示 | |||||
open: false, //是否打开 | open: false, //是否打开 | ||||
show: rank === 0, // 自身是否显示 | |||||
show: this.showChild, // 自身是否显示 | |||||
hideArr: [], | hideArr: [], | ||||
orChecked: item.checked ? item.checked : false, | orChecked: item.checked ? item.checked : false, | ||||
checked: item.checked ? item.checked : false, | checked: item.checked ? item.checked : false, | ||||
@@ -293,29 +297,29 @@ | |||||
// searChange(value, data) { | // searChange(value, data) { | ||||
// // this.treeList = this.filterTree(value, data) | // // this.treeList = this.filterTree(value, data) | ||||
// }, | // }, | ||||
filterTree(val, tree, newArr = []) { | |||||
if (!(tree.length && val)) { // 如果搜索关键字为空直接返回源数据 | |||||
return tree | |||||
} | |||||
for (let item of tree) { | |||||
if (item.name.indexOf(val) > -1) { // 匹配到关键字的逻辑 | |||||
newArr.push(item) // 如果匹配到就在数值中添加记录 | |||||
continue // 匹配到了就退出循环了此时如果有子集也会一并带着 | |||||
} | |||||
// filterTree(val, tree, newArr = []) { | |||||
// if (!(tree.length && val)) { // 如果搜索关键字为空直接返回源数据 | |||||
// return tree | |||||
// } | |||||
// for (let item of tree) { | |||||
// if (item.name.indexOf(val) > -1) { // 匹配到关键字的逻辑 | |||||
// newArr.push(item) // 如果匹配到就在数值中添加记录 | |||||
// continue // 匹配到了就退出循环了此时如果有子集也会一并带着 | |||||
// } | |||||
if (item.children && item.children.length) { // 如果父级节点没有匹配到就看看是否有子集,然后做递归 | |||||
let subArr = this.filterTree(val, item.children) // 缓存递归后的子集数组 | |||||
if (subArr && subArr.length) { // 如果子集数据有匹配到的节点 | |||||
let node = { | |||||
...item, | |||||
children: subArr | |||||
} // 关键逻辑,缓存父节点同时将递归后的子节点作为新值 | |||||
newArr.push(node) // 添加进数组 | |||||
} | |||||
} | |||||
} | |||||
return newArr | |||||
}, | |||||
// if (item.children && item.children.length) { // 如果父级节点没有匹配到就看看是否有子集,然后做递归 | |||||
// let subArr = this.filterTree(val, item.children) // 缓存递归后的子集数组 | |||||
// if (subArr && subArr.length) { // 如果子集数据有匹配到的节点 | |||||
// let node = { | |||||
// ...item, | |||||
// children: subArr | |||||
// } // 关键逻辑,缓存父节点同时将递归后的子节点作为新值 | |||||
// newArr.push(node) // 添加进数组 | |||||
// } | |||||
// } | |||||
// } | |||||
// return newArr | |||||
// }, | |||||
}, | }, | ||||
watch: { | watch: { | ||||
range(list) { | range(list) { | ||||
@@ -1,83 +1,92 @@ | |||||
<template> | <template> | ||||
<view class="warningDetail"> | <view class="warningDetail"> | ||||
<view class="title cli"> | |||||
{{detailData.alarmTypeDesc ? detailData.alarmTypeDesc + '-' + detailData.tick : ''}} | |||||
</view> | |||||
<image style="width: 100%;height:422rpx;" :src="detailData.snapshotUrl" mode="aspectFit"></image> | |||||
<view class="cli"> | |||||
<view class="labelBox"> | |||||
所属学校: | |||||
</view> | |||||
<view class="valueBox"> | |||||
演示学校 | |||||
</view> | |||||
</view> | |||||
<view class="cli"> | |||||
<view class="labelBox"> | |||||
班级: | |||||
</view> | |||||
<view class="valueBox"> | |||||
-- | |||||
</view> | |||||
</view> | |||||
<view class="cli"> | |||||
<view class="labelBox"> | |||||
姓名: | |||||
</view> | |||||
<view class="valueBox"> | |||||
{{ detailData.personName || "--" }} | |||||
</view> | |||||
</view> | |||||
<view class="cli"> | |||||
<view class="labelBox"> | |||||
预警摄像头: | |||||
<!-- <view style="height: 100vh;background: #fff;" v-if="showLoading"> | |||||
<u-loading-page :loading="true" bg-color="#e8e8e8" color="#ffffff"></u-loading-page> | |||||
</view> --> | |||||
<u-loading-page :loading="showLoading" bg-color="#e8e8e8" color="#ffffff"></u-loading-page> | |||||
<!-- <u-loading-icon v-if="showLoading" text="加载中" textSize="18"></u-loading-icon> --> | |||||
<view class=""> | |||||
<view class="title cli"> | |||||
{{detailData.alarmTypeDesc ? detailData.alarmTypeDesc + '-' + detailData.tick : ''}} | |||||
</view> | </view> | ||||
<view class="valueBox"> | |||||
{{ detailData.cameraName || "--" }} | |||||
</view> | |||||
</view> | |||||
<view class="cli"> | |||||
<view class="labelBox"> | |||||
预警类型: | |||||
<image style="width: 100%;height:422rpx;" :src="detailData.snapshotUrl" mode="aspectFit"></image> | |||||
<view class="cli"> | |||||
<view class="labelBox"> | |||||
所属学校: | |||||
</view> | |||||
<view class="valueBox"> | |||||
演示学校 | |||||
</view> | |||||
</view> | </view> | ||||
<view class="valueBox"> | |||||
{{ detailData.alarmTypeDesc || "--" }} | |||||
<view class="cli"> | |||||
<view class="labelBox"> | |||||
班级: | |||||
</view> | |||||
<view class="valueBox"> | |||||
-- | |||||
</view> | |||||
</view> | </view> | ||||
</view> | |||||
<view class="cli"> | |||||
<view class="labelBox"> | |||||
预警时间: | |||||
<view class="cli"> | |||||
<view class="labelBox"> | |||||
姓名: | |||||
</view> | |||||
<view class="valueBox"> | |||||
{{ detailData.personName || "--" }} | |||||
</view> | |||||
</view> | </view> | ||||
<view class="valueBox"> | |||||
{{ detailData.tick || "--" }} | |||||
<view class="cli"> | |||||
<view class="labelBox"> | |||||
预警摄像头: | |||||
</view> | |||||
<view class="valueBox"> | |||||
{{ detailData.cameraName || "--" }} | |||||
</view> | |||||
</view> | </view> | ||||
</view> | |||||
<view class="cli"> | |||||
<view class="labelBox"> | |||||
复核视频: | |||||
<view class="cli"> | |||||
<view class="labelBox"> | |||||
预警类型: | |||||
</view> | |||||
<view class="valueBox"> | |||||
{{ detailData.alarmTypeDesc || "--" }} | |||||
</view> | |||||
</view> | </view> | ||||
<view class="valueBox"> | |||||
<text v-if="detailData.videoUrl" style="color: #2388FF;" @click="seeVideo(detailData.videoUrl)">查看视频</text> | |||||
<text v-else>--</text> | |||||
<view class="cli"> | |||||
<view class="labelBox"> | |||||
预警时间: | |||||
</view> | |||||
<view class="valueBox"> | |||||
{{ detailData.tick || "--" }} | |||||
</view> | |||||
</view> | </view> | ||||
</view> | |||||
<view class="cli2"> | |||||
<view class="labelBox"> | |||||
备注信息: | |||||
<view class="cli"> | |||||
<view class="labelBox"> | |||||
复核视频: | |||||
</view> | |||||
<view class="valueBox"> | |||||
<text v-if="detailData.videoUrl" style="color: #2388FF;" | |||||
@click="seeVideo(detailData.videoUrl)">查看视频</text> | |||||
<text v-else>--</text> | |||||
</view> | |||||
</view> | </view> | ||||
<view class="valueBox"> | |||||
{{ detailData.extend || '--' }} | |||||
<view class="cli2"> | |||||
<view class="labelBox"> | |||||
备注信息: | |||||
</view> | |||||
<view class="valueBox"> | |||||
{{ detailData.extend || '--' }} | |||||
</view> | |||||
</view> | </view> | ||||
</view> | |||||
<view class="cli2"> | |||||
<view class="labelBox"> | |||||
处理意见: | |||||
</view> | |||||
<view class="valueBox"> | |||||
{{ detailData.remark || '--' }} | |||||
<view class="cli2"> | |||||
<view class="labelBox"> | |||||
处理意见: | |||||
</view> | |||||
<view class="valueBox"> | |||||
{{ detailData.remark || '--' }} | |||||
</view> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
<u-popup :show="showVideo" :closeable="true" @close="close" @open="open" mode="center"> | <u-popup :show="showVideo" :closeable="true" @close="close" @open="open" mode="center"> | ||||
<!-- <view class=""> | <!-- <view class=""> | ||||
视频 | 视频 | ||||
@@ -126,6 +135,7 @@ | |||||
playbackRate: 1, | playbackRate: 1, | ||||
currentTime: 0, | currentTime: 0, | ||||
duration: 0, | duration: 0, | ||||
showLoading: false, | |||||
} | } | ||||
}, | }, | ||||
computed: { | computed: { | ||||
@@ -143,17 +153,25 @@ | |||||
}, | }, | ||||
onLoad(options) { | onLoad(options) { | ||||
console.log(options) | console.log(options) | ||||
if(options.id) { | |||||
if (options.id) { | |||||
this.id = options.id; | this.id = options.id; | ||||
} | } | ||||
this.getInfo(); | this.getInfo(); | ||||
}, | }, | ||||
methods: { | methods: { | ||||
getInfo() { | getInfo() { | ||||
detail({ id: this.id }).then(res=>{ | |||||
if(res.code == 200) { | |||||
this.showLoading = true; | |||||
detail({ | |||||
id: this.id | |||||
}).then(res => { | |||||
if (res.code == 200) { | |||||
this.detailData = res.data; | this.detailData = res.data; | ||||
} | } | ||||
this.showLoading = false; | |||||
}).catch(err => { | |||||
this.showLoading = false; | |||||
}) | }) | ||||
}, | }, | ||||
seeVideo(url) { | seeVideo(url) { | ||||
@@ -294,7 +312,7 @@ | |||||
.valueBox { | .valueBox { | ||||
color: #333333; | color: #333333; | ||||
font-weight: 700; | font-weight: 700; | ||||
} | } | ||||
} | } | ||||
@@ -125,7 +125,7 @@ | |||||
</view> | </view> | ||||
</u-modal> --> | </u-modal> --> | ||||
<tki-tree ref="tkitree" title="摄像头分组" :selectParent="selectParent" :multiple="multiple" :range="treelist" :foldAll="flod" | |||||
<tki-tree ref="tkitree" title="摄像头分组" :showChild="showChild" :selectParent="selectParent" :multiple="multiple" :range="treelist" :foldAll="flod" | |||||
rangeKey="name" @confirm="treeConfirm" @cancel="treeCancel"></tki-tree> | rangeKey="name" @confirm="treeConfirm" @cancel="treeCancel"></tki-tree> | ||||
</view> | </view> | ||||
</template> | </template> | ||||
@@ -166,6 +166,7 @@ | |||||
multiple: false, //是否多选 | multiple: false, //是否多选 | ||||
selectParent: true, //父级可选择 | selectParent: true, //父级可选择 | ||||
flod: false, //折叠 | flod: false, //折叠 | ||||
showChild: true, | |||||
player: null, | player: null, | ||||
sensorId: '', | sensorId: '', | ||||
videoUrl: '', | videoUrl: '', | ||||
@@ -194,6 +195,7 @@ | |||||
methods: { | methods: { | ||||
setVideo() { | setVideo() { | ||||
let that = this; | |||||
this.loadWebPlayerSDK().then(() => { | this.loadWebPlayerSDK().then(() => { | ||||
// 如果需要使用自定义组件,打开以下注释 | // 如果需要使用自定义组件,打开以下注释 | ||||
// this.loadComponent().then(() => { | // this.loadComponent().then(() => { | ||||
@@ -211,7 +213,7 @@ | |||||
this.player.one('canplay', function() { | this.player.one('canplay', function() { | ||||
// console.log('canplay', this.player.tag); | // console.log('canplay', this.player.tag); | ||||
this.player.tag.play(); | |||||
that.player.tag.play(); | |||||
}); | }); | ||||