158 lines
3.1 KiB
Vue
158 lines
3.1 KiB
Vue
<template>
|
||
<view class="areaTreePage">
|
||
<scroll-view scroll-y="true" class="pageContent">
|
||
<headers :showBack="true">
|
||
<view class="headerName">
|
||
执法记录仪
|
||
</view>
|
||
</headers>
|
||
<view class="areaTreeBox">
|
||
<view class="uni-form-item">
|
||
<input class="uni-input" name="projectName" v-model="projectName" @input="searchFile"
|
||
placeholder="请输入设备名称" />
|
||
<button class="mini-btn" type="primary" size="mini" @click="loadData">搜索</button>
|
||
</view>
|
||
<template v-if="mapData.length > 0">
|
||
<tree-menu :pageType="pageType" :iconShow="true" v-for="(item,index) in mapData"
|
||
:key="item.companyId" :item="item" :expandedIndex="index" :treeIndex="treeIndex"
|
||
@clickItem="clickTreeItem"></tree-menu>
|
||
</template>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import TreeMenu from '@/components/tree-node/cameraIndex.vue'
|
||
export default {
|
||
components: {
|
||
TreeMenu
|
||
},
|
||
data() {
|
||
return {
|
||
projectName: '',
|
||
searchsn: '',
|
||
userInfo: null,
|
||
mapData: [],
|
||
headerName: '华润电力',
|
||
treeIndex: 1, // 树形层级index
|
||
projectDetail: {},
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
console.log(options.type)
|
||
// uni.setStorageSync('pageType',this.pageType)
|
||
},
|
||
mounted() {
|
||
this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
|
||
this.loadData();
|
||
},
|
||
methods: {
|
||
clickTreeItem(item) {
|
||
uni.navigateTo({
|
||
url: './bodyWornCameraDetail?id=' + item.id
|
||
})
|
||
},
|
||
searchFile(e) {
|
||
this.projectName = e.detail.value
|
||
},
|
||
//获取所有企业下区域数据
|
||
loadData(type) {
|
||
//type：true代表第一调用
|
||
var that = this
|
||
this.sendRequest({
|
||
url: "xmgl/policeCameraItem/getGroupTreeWithDev",
|
||
data: {
|
||
projectSn: this.projectDetail.projectSn,
|
||
devName: that.projectName,
|
||
},
|
||
method: "POST",
|
||
success(res) {
|
||
if (res.code == 200) {
|
||
that.mapData = res.result;
|
||
console.log(88488, that.mapData)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.statusBox {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
|
||
.icon-status {
|
||
margin-left: 16rpx;
|
||
}
|
||
}
|
||
|
||
.areaTreePage {
|
||
background-color: white;
|
||
height: 100%;
|
||
color: $uni-text-color;
|
||
}
|
||
|
||
// .areaTreeBox{
|
||
// padding: 0 20rpx;
|
||
// }
|
||
.areaInner {
|
||
border-bottom: 1px solid rgba(221, 221, 221, 0.67);
|
||
}
|
||
|
||
.areaTitle {
|
||
font-size: 30rpx;
|
||
border-bottom: 1px solid rgba(221, 221, 221, 0.67);
|
||
padding: 20rpx 30rpx;
|
||
}
|
||
|
||
.arrow {
|
||
float: right;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.areaTitle2 {
|
||
font-size: 14px;
|
||
padding: 20rpx 30rpx 20rpx 30px;
|
||
}
|
||
|
||
.projectTitle {
|
||
font-size: 14px;
|
||
padding: 20rpx 30rpx 20rpx 30px;
|
||
}
|
||
|
||
.projectTitle2 {
|
||
padding-left: 100rpx;
|
||
}
|
||
|
||
.projectBox {
|
||
background-color: rgba(221, 221, 221, 0.26);
|
||
}
|
||
|
||
.uni-input {
|
||
border-radius: 30rpx;
|
||
margin: 20rpx 20rpx;
|
||
background-color: #f2f2f2;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
padding: 0 40rpx;
|
||
font-size: 28rpx;
|
||
width: 65%;
|
||
}
|
||
|
||
.uni-form-item {
|
||
position: relative;
|
||
}
|
||
|
||
.mini-btn {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
border-radius: 30rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
}
|
||
</style> |