| @@ -11,13 +11,13 @@ | |||
| </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"> | |||
| <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"> | |||
| <view class="tki-tree-item" :style="[{ | |||
| <view v-if="(item[rangeKey].includes(searchText))" class="tki-tree-item" :style="[{ | |||
| paddingLeft: item.rank*15 + 'px', | |||
| zIndex: item.rank*-1 +50 | |||
| }]" :class="{ | |||
| @@ -87,6 +87,10 @@ | |||
| type: Boolean, | |||
| default: false | |||
| }, | |||
| showChild: {//是否显示子级 | |||
| type: Boolean, | |||
| default: false | |||
| }, | |||
| confirmColor: { // 确定按钮颜色 | |||
| type: String, | |||
| default: '' // #2388FF | |||
| @@ -164,9 +168,9 @@ | |||
| parentId, // 父级id数组 | |||
| parents, // 父级id数组 | |||
| rank, // 层级 | |||
| showChild: false, //子级是否显示 | |||
| showChild: this.showChild, //子级是否显示 | |||
| open: false, //是否打开 | |||
| show: rank === 0, // 自身是否显示 | |||
| show: this.showChild, // 自身是否显示 | |||
| hideArr: [], | |||
| orChecked: item.checked ? item.checked : false, | |||
| checked: item.checked ? item.checked : false, | |||
| @@ -293,29 +297,29 @@ | |||
| // searChange(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: { | |||
| range(list) { | |||
| @@ -1,83 +1,92 @@ | |||
| <template> | |||
| <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 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 class="valueBox"> | |||
| {{ detailData.alarmTypeDesc || "--" }} | |||
| <view class="cli"> | |||
| <view class="labelBox"> | |||
| 班级: | |||
| </view> | |||
| <view class="valueBox"> | |||
| -- | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <view class="cli"> | |||
| <view class="labelBox"> | |||
| 预警时间: | |||
| <view class="cli"> | |||
| <view class="labelBox"> | |||
| 姓名: | |||
| </view> | |||
| <view class="valueBox"> | |||
| {{ detailData.personName || "--" }} | |||
| </view> | |||
| </view> | |||
| <view class="valueBox"> | |||
| {{ detailData.tick || "--" }} | |||
| <view class="cli"> | |||
| <view class="labelBox"> | |||
| 预警摄像头: | |||
| </view> | |||
| <view class="valueBox"> | |||
| {{ detailData.cameraName || "--" }} | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <view class="cli"> | |||
| <view class="labelBox"> | |||
| 复核视频: | |||
| <view class="cli"> | |||
| <view class="labelBox"> | |||
| 预警类型: | |||
| </view> | |||
| <view class="valueBox"> | |||
| {{ detailData.alarmTypeDesc || "--" }} | |||
| </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 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 class="valueBox"> | |||
| {{ detailData.extend || '--' }} | |||
| <view class="cli2"> | |||
| <view class="labelBox"> | |||
| 备注信息: | |||
| </view> | |||
| <view class="valueBox"> | |||
| {{ detailData.extend || '--' }} | |||
| </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> | |||
| <u-popup :show="showVideo" :closeable="true" @close="close" @open="open" mode="center"> | |||
| <!-- <view class=""> | |||
| 视频 | |||
| @@ -126,6 +135,7 @@ | |||
| playbackRate: 1, | |||
| currentTime: 0, | |||
| duration: 0, | |||
| showLoading: false, | |||
| } | |||
| }, | |||
| computed: { | |||
| @@ -143,17 +153,25 @@ | |||
| }, | |||
| onLoad(options) { | |||
| console.log(options) | |||
| if(options.id) { | |||
| if (options.id) { | |||
| this.id = options.id; | |||
| } | |||
| this.getInfo(); | |||
| }, | |||
| methods: { | |||
| 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.showLoading = false; | |||
| }).catch(err => { | |||
| this.showLoading = false; | |||
| }) | |||
| }, | |||
| seeVideo(url) { | |||
| @@ -294,7 +312,7 @@ | |||
| .valueBox { | |||
| color: #333333; | |||
| font-weight: 700; | |||
| } | |||
| } | |||
| @@ -125,7 +125,7 @@ | |||
| </view> | |||
| </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> | |||
| </view> | |||
| </template> | |||
| @@ -166,6 +166,7 @@ | |||
| multiple: false, //是否多选 | |||
| selectParent: true, //父级可选择 | |||
| flod: false, //折叠 | |||
| showChild: true, | |||
| player: null, | |||
| sensorId: '', | |||
| videoUrl: '', | |||
| @@ -194,6 +195,7 @@ | |||
| methods: { | |||
| setVideo() { | |||
| let that = this; | |||
| this.loadWebPlayerSDK().then(() => { | |||
| // 如果需要使用自定义组件,打开以下注释 | |||
| // this.loadComponent().then(() => { | |||
| @@ -211,7 +213,7 @@ | |||
| this.player.one('canplay', function() { | |||
| // console.log('canplay', this.player.tag); | |||
| this.player.tag.play(); | |||
| that.player.tag.play(); | |||
| }); | |||