Browse Source

树修改

master
wwp 2 months ago
parent
commit
2a2c29f71c
3 changed files with 125 additions and 101 deletions
  1. +33
    -29
      monitorMobile/components/tki-tree/tki-tree.vue
  2. +88
    -70
      monitorMobile/pages/earlyWarning/detail.vue
  3. +4
    -2
      monitorMobile/pages/monitor/index.vue

+ 33
- 29
monitorMobile/components/tki-tree/tki-tree.vue View File

@@ -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) {


+ 88
- 70
monitorMobile/pages/earlyWarning/detail.vue View File

@@ -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;
} }
} }




+ 4
- 2
monitorMobile/pages/monitor/index.vue View File

@@ -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();
}); });






Loading…
Cancel
Save