329 lines
11 KiB
Vue
329 lines
11 KiB
Vue
<template>
|
||
<view class="areaTreePage">
|
||
<scroll-view scroll-y="true" class="pageContent">
|
||
<headers :showBack="pageType=='video'?false:true">
|
||
<view class="headerName">
|
||
{{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>
|
||
<view class="areaItem" v-for="(item,index) in mapData" :key="index">
|
||
<view class="areaTitle" @click="expandSon(index)">
|
||
{{item.name}} <text v-if="!item.projectName">({{item.projectNum}})</text>
|
||
<text v-if="pageType=='video'&&item.projectName">({{item.videoNum}})</text>
|
||
<view class="statusBox" v-if="pageType=='markRoom'&&item.projectName">
|
||
<image v-show="item.standardDevStopUsingNum!=0" class="icon-status"
|
||
src="/static/no_alarm.png" style="width: 9px;height: 20rpx;"></image>
|
||
<image v-show="item.standardDevNotOnline!=0" class="icon-status"
|
||
src="/static/offline_alarm.png" style="width: 20rpx;height: 20rpx;"></image>
|
||
<image v-show="item.standardTemperatureAlarmNum!=0" class="icon-status"
|
||
src="/static/temp_alarm.png" style="width: 16rpx;height: 26rpx;"></image>
|
||
<image v-show="item.standardHumidityAlarmNum!=0" class="icon-status"
|
||
src="/static/humi_alarm.png" style="width: 16rpx;height: 11px;"></image>
|
||
</view>
|
||
<uni-icons2 v-show="item.showSon&&item.list" class="arrow" type="arrowup" size="20"></uni-icons2>
|
||
<uni-icons2 v-show="!item.showSon&&item.list" class="arrow" type="arrowdown" size="20">
|
||
</uni-icons2>
|
||
</view>
|
||
<view class="areaInner" v-if="item.list&&item.showSon">
|
||
<view class="areaInnerItem" v-for="(item2,index2) in item.list" :key="index2">
|
||
<view class="areaTitle2" @click="expandSon2(index,index2)">
|
||
{{item2.name}}
|
||
<text v-if="!item2.projectName">({{item2.projectNum}})</text>
|
||
<text v-if="pageType=='video'&&item2.projectName">({{item2.videoNum}})</text>
|
||
<view class="statusBox" v-if="pageType=='markRoom'&&item2.projectName">
|
||
<image v-show="item2.standardDevStopUsingNum!=0" class="icon-status"
|
||
src="/static/no_alarm.png" style="width: 9px;height: 20rpx;"></image>
|
||
<image v-show="item2.standardDevNotOnline!=0" class="icon-status"
|
||
src="/static/offline_alarm.png" style="width: 20rpx;height: 20rpx;"></image>
|
||
<image v-show="item2.standardTemperatureAlarmNum!=0" class="icon-status"
|
||
src="/static/temp_alarm.png" style="width: 16rpx;height: 26rpx;"></image>
|
||
<image v-show="item2.standardHumidityAlarmNum!=0" class="icon-status"
|
||
src="/static/humi_alarm.png" style="width: 16rpx;height: 11px;"></image>
|
||
</view>
|
||
<uni-icons2 v-show="item2.showSon&&item2.list" class="arrow" type="arrowup" size="20">
|
||
</uni-icons2>
|
||
<uni-icons2 v-show="!item2.showSon&&item2.list" class="arrow" type="arrowdown" size="20">
|
||
</uni-icons2>
|
||
</view>
|
||
<view class="projectBox" v-if="item2.list&&item2.showSon">
|
||
<view class="projectItem" v-for="(item3,index3) in item2.list" :key="index3">
|
||
|
||
<view class="projectTitle" @click="viewVideoListFn(item3)">
|
||
{{item3.name}} <text
|
||
v-if="pageType=='video'&&item3.projectName">({{item3.videoNum}})</text>
|
||
<view class="statusBox" v-if="pageType=='markRoom'&&item3.projectName">
|
||
<image v-show="item3.standardDevStopUsingNum!=0" class="icon-status"
|
||
src="/static/no_alarm.png" style="width: 9px;height: 20rpx;"></image>
|
||
<image v-show="item3.standardDevNotOnline!=0" class="icon-status"
|
||
src="/static/offline_alarm.png" style="width: 20rpx;height: 20rpx;">
|
||
</image>
|
||
<image v-show="item3.standardTemperatureAlarmNum!=0" class="icon-status"
|
||
src="/static/temp_alarm.png" style="width: 16rpx;height: 26rpx;"></image>
|
||
<image v-show="item3.standardHumidityAlarmNum!=0" class="icon-status"
|
||
src="/static/humi_alarm.png" style="width: 16rpx;height: 11px;"></image>
|
||
</view>
|
||
<!-- <uni-icons2 v-show="item3.showSon&&item3.list" class="arrow" type="arrowup" size="20"></uni-icons2>
|
||
<uni-icons2 v-show="!item3.showSon&&item3.list" class="arrow" type="arrowdown" size="20"></uni-icons2> -->
|
||
</view>
|
||
<view class="" v-if="item3.list">
|
||
<view class="" v-for="(item4,index4) in item3.list" :key="index4">
|
||
<view class="projectTitle projectTitle2" @click="viewVideoListFn(item4)">
|
||
{{item4.name}} <text
|
||
v-if="pageType=='video'&&item4.projectName">({{item4.videoNum}})</text>
|
||
<view class="statusBox" v-if="pageType=='markRoom'">
|
||
<image v-show="item4.standardDevStopUsingNum!=0" class="icon-status"
|
||
src="/static/no_alarm.png" style="width: 9px;height: 20rpx;">
|
||
</image>
|
||
<image v-show="item4.standardDevNotOnline!=0" class="icon-status"
|
||
src="/static/offline_alarm.png"
|
||
style="width: 20rpx;height: 20rpx;"></image>
|
||
<image v-show="item4.standardTemperatureAlarmNum!=0"
|
||
class="icon-status" src="/static/temp_alarm.png"
|
||
style="width: 16rpx;height: 26rpx;"></image>
|
||
<image v-show="item4.standardHumidityAlarmNum!=0"
|
||
class="icon-status" src="/static/humi_alarm.png"
|
||
style="width: 16rpx;height: 11px;"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<footers v-if="pageType=='video'" :activeTab="'videoManage'"></footers>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import footers from "../../components/footers/footers.vue"
|
||
import uniIcons from "@/components/uni-icons/uni-icons.vue"
|
||
import headers from "../../components/headers/headers.vue"
|
||
export default {
|
||
components: {
|
||
footers
|
||
},
|
||
data() {
|
||
return {
|
||
projectName: '',
|
||
searchsn: '',
|
||
userInfo: null,
|
||
mapData: [],
|
||
headerName: '集团',
|
||
pageType: 'video'
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
console.log(options.type)
|
||
if (options.type && options.type != undefined && options.type != 'undefined') {
|
||
this.pageType = options.type
|
||
}
|
||
// uni.setStorageSync('pageType',this.pageType)
|
||
},
|
||
mounted() {
|
||
this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
|
||
this.initData(true);
|
||
},
|
||
methods: {
|
||
searchFile(e) {
|
||
this.projectName = e.detail.value
|
||
},
|
||
//展开二级
|
||
expandSon(index) {
|
||
if (!this.mapData[index].list) {
|
||
uni.setStorageSync('projectDetail', JSON.stringify(this.mapData[index]))
|
||
this.viewVideoListFn(this.mapData[index])
|
||
} else {
|
||
if (this.mapData[index].showSon) {
|
||
// this.mapData[index].showSon=false
|
||
this.$set(this.mapData[index], `showSon`, false)
|
||
} else {
|
||
// this.mapData[index].showSon=true
|
||
this.$set(this.mapData[index], `showSon`, true)
|
||
}
|
||
}
|
||
|
||
// console.log(this.mapData)
|
||
},
|
||
//展开三级
|
||
expandSon2(index, index2) {
|
||
if (!this.mapData[index].list[index2].list) {
|
||
uni.setStorageSync('projectDetail', JSON.stringify(this.mapData[index].list[index2]))
|
||
this.viewVideoListFn(this.mapData[index].list[index2])
|
||
} else {
|
||
if (this.mapData[index].list[index2].showSon) {
|
||
// this.mapData[index].showSon=false
|
||
this.$set(this.mapData[index].list[index2], `showSon`, false)
|
||
} else {
|
||
// this.mapData[index].showSon=true
|
||
this.$set(this.mapData[index].list[index2], `showSon`, true)
|
||
}
|
||
}
|
||
|
||
// console.log(this.mapData)
|
||
},
|
||
|
||
viewVideoListFn(item) {
|
||
if (this.pageType == 'video') {
|
||
uni.navigateTo({
|
||
url: '../videoManage/videoList?sn=' + item.projectSn
|
||
})
|
||
} else if (this.pageType == 'markRoom') {
|
||
uni.setStorageSync('projectDetail', JSON.stringify({
|
||
projectSn: item.projectSn,
|
||
projectName: item.projectName
|
||
}))
|
||
uni.navigateTo({
|
||
url: '../projectEnd/markRoom/markRoom?sn=' + item.projectSn + '&projectName=' + item
|
||
.projectName
|
||
})
|
||
} else if (this.pageType == 'backend' && item.projectSn) {
|
||
uni.setStorageSync('projectDetail', JSON.stringify(item))
|
||
// if(this.userInfo.styleType==1){
|
||
uni.navigateTo({
|
||
url: '../projectEnd/projectIndex/projectIndex?sn=' + item.projectSn + '&projectName=' +
|
||
item.projectName
|
||
})
|
||
// }else{
|
||
// uni.redirectTo({
|
||
// url: '/pages/workstation/workstationIndex/workstationIndex?sn='+item.projectSn+'&projectName='+item.projectName
|
||
// })
|
||
// }
|
||
|
||
}
|
||
|
||
},
|
||
initData(type) {
|
||
var that = this
|
||
switch (that.userInfo.accountType) {
|
||
case 2:
|
||
this.searchsn = that.userInfo.headquartersSn
|
||
break;
|
||
case 3:
|
||
this.searchsn = that.userInfo.sn
|
||
break;
|
||
case 4:
|
||
this.searchsn = that.userInfo.sn
|
||
break;
|
||
case 5:
|
||
this.searchsn = that.userInfo.sn
|
||
break;
|
||
case 7:
|
||
this.searchsn = that.userInfo.sn
|
||
break;
|
||
}
|
||
|
||
if (that.userInfo.accountType == 5) {
|
||
|
||
} else {
|
||
this.loadData(type);
|
||
}
|
||
|
||
},
|
||
//获取所有企业下区域数据
|
||
loadData(type) {
|
||
//type：true代表第一调用
|
||
var that = this
|
||
this.sendRequest({
|
||
url: "xmgl/company/getComapnyStatisticsList",
|
||
data: {
|
||
sn: that.searchsn,
|
||
projectName:that.projectName,
|
||
standardType: that.pageType == 'markRoom' ? 1 : 0
|
||
},
|
||
method: "POST",
|
||
success(res) {
|
||
that.mapData = res.result.companyList ? res.result.companyList : res.result.projectList
|
||
if (res.result.companyInfo) {
|
||
that.headerName = res.result.companyInfo.companyName
|
||
}
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</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: 28rpx;
|
||
padding: 20rpx 30rpx 20rpx 60rpx;
|
||
}
|
||
|
||
.projectTitle {
|
||
font-size: 28rpx;
|
||
padding: 20rpx 30rpx 20rpx 60rpx;
|
||
}
|
||
|
||
.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%;
|
||
}
|
||
|
||
.mini-btn {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 110rpx;
|
||
border-radius: 30rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
}
|
||
</style>
|