254 lines
9.5 KiB
Vue
254 lines
9.5 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="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: 10px;"></image>
|
||
<image v-show="item.standardDevNotOnline!=0" class="icon-status" src="/static/offline_alarm.png" style="width: 10px;height: 10px;"></image>
|
||
<image v-show="item.standardTemperatureAlarmNum!=0" class="icon-status" src="/static/temp_alarm.png" style="width: 8px;height: 13px;"></image>
|
||
<image v-show="item.standardHumidityAlarmNum!=0" class="icon-status" src="/static/humi_alarm.png" style="width: 8px;height: 11px;"></image>
|
||
</view>
|
||
<uni-icons v-show="item.showSon&&item.list" class="arrow" type="arrowup" size="20"></uni-icons>
|
||
<uni-icons v-show="!item.showSon&&item.list" class="arrow" type="arrowdown" size="20"></uni-icons>
|
||
</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: 10px;"></image>
|
||
<image v-show="item2.standardDevNotOnline!=0" class="icon-status" src="/static/offline_alarm.png" style="width: 10px;height: 10px;"></image>
|
||
<image v-show="item2.standardTemperatureAlarmNum!=0" class="icon-status" src="/static/temp_alarm.png" style="width: 8px;height: 13px;"></image>
|
||
<image v-show="item2.standardHumidityAlarmNum!=0" class="icon-status" src="/static/humi_alarm.png" style="width: 8px;height: 11px;"></image>
|
||
</view>
|
||
<uni-icons v-show="item2.showSon&&item2.list" class="arrow" type="arrowup" size="20"></uni-icons>
|
||
<uni-icons v-show="!item2.showSon&&item2.list" class="arrow" type="arrowdown" size="20"></uni-icons>
|
||
</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: 10px;"></image>
|
||
<image v-show="item3.standardDevNotOnline!=0" class="icon-status" src="/static/offline_alarm.png" style="width: 10px;height: 10px;"></image>
|
||
<image v-show="item3.standardTemperatureAlarmNum!=0" class="icon-status" src="/static/temp_alarm.png" style="width: 8px;height: 13px;"></image>
|
||
<image v-show="item3.standardHumidityAlarmNum!=0" class="icon-status" src="/static/humi_alarm.png" style="width: 8px;height: 11px;"></image>
|
||
</view>
|
||
<!-- <uni-icons v-show="item3.showSon&&item3.list" class="arrow" type="arrowup" size="20"></uni-icons>
|
||
<uni-icons v-show="!item3.showSon&&item3.list" class="arrow" type="arrowdown" size="20"></uni-icons> -->
|
||
</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: 10px;"></image>
|
||
<image v-show="item4.standardDevNotOnline!=0" class="icon-status" src="/static/offline_alarm.png" style="width: 10px;height: 10px;"></image>
|
||
<image v-show="item4.standardTemperatureAlarmNum!=0" class="icon-status" src="/static/temp_alarm.png" style="width: 8px;height: 13px;"></image>
|
||
<image v-show="item4.standardHumidityAlarmNum!=0" class="icon-status" src="/static/humi_alarm.png" style="width: 8px;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 {
|
||
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:{
|
||
//展开二级
|
||
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: this.searchsn,standardType:this.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: 8px;
|
||
}
|
||
}
|
||
.areaTreePage{
|
||
background-color: white;
|
||
height: 100%;
|
||
color: $uni-text-color;
|
||
}
|
||
// .areaTreeBox{
|
||
// padding: 0 10px;
|
||
// }
|
||
.areaInner{
|
||
border-bottom: 1px solid rgba(221,221,221,0.67);
|
||
}
|
||
.areaTitle{
|
||
font-size: 15px;
|
||
border-bottom: 1px solid rgba(221,221,221,0.67);
|
||
padding: 10px 15px;
|
||
}
|
||
.arrow{
|
||
float: right;
|
||
opacity: 0.7;
|
||
}
|
||
.areaTitle2{
|
||
font-size: 14px;
|
||
padding: 10px 15px 10px 30px;
|
||
}
|
||
.projectTitle{
|
||
font-size: 14px;
|
||
padding: 10px 15px 10px 30px;
|
||
}
|
||
.projectTitle2{
|
||
padding-left: 50px;
|
||
}
|
||
.projectBox{
|
||
background-color: rgba(221,221,221,0.26);
|
||
}
|
||
</style>
|