609 lines
14 KiB
Vue
609 lines
14 KiB
Vue
<template>
|
|
<view class="fullHeight bgLightBlue">
|
|
<scroll-view scroll-y="true" class="pageContent">
|
|
<headers :showBack="parentSn">
|
|
<view class="headerName">
|
|
{{currentCompany.companyName}}
|
|
</view>
|
|
</headers>
|
|
<scroll-view v-if="userInfo.accountType!=5&&userInfo.accountType!=6" class="scroll-view_H" scroll-x="true">
|
|
<view class="scroll-view-item_H" :class="activeTabIndex==-1?'active':''" @click="changeLevel(-1)">
|
|
<text class="name">{{currentCompany.companyName=='集团'?currentCompany.companyName:'全部'}}</text>
|
|
</view>
|
|
<view class="scroll-view-item_H" :class="activeTabIndex==index?'active':''" v-for="(item,index) in mapData" :key="index"
|
|
@click="changeLevel(index)">
|
|
<text class="name">{{item.name}}</text>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="blockBox dev_bg">
|
|
<view class="flex2" style="height: 100%;">
|
|
<view class="text" style="width: 60%; text-align: center; font-size: 40rpx;color: #FFFFFF;">
|
|
{{currentCompany.companyName}}
|
|
</view>
|
|
<view class="dataItem" style="text-align: center; width: 30%; color: #FFFFFF;">
|
|
<view style="font-size: 40rpx;">
|
|
{{totalDevNum}}
|
|
</view>
|
|
<view style="font-size: 24rpx;" class="text">
|
|
设备总数
|
|
</view>
|
|
</view>
|
|
<view style="text-align: center; width: 10%;height:100%;margin-top: 40rpx;" class="flex2">
|
|
<uni-icons2 @click="forwardFn" v-show="activeTabIndex!=-1 &&!mapData[activeTabIndex].projectSn" class="forwardImg" style="color: #FFFFFF" type="arrowright"
|
|
size="30"></uni-icons2>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="blockBox">
|
|
<view class="blockTitle flex">
|
|
<view class="titleName">
|
|
设备接入情况
|
|
</view>
|
|
<view style="font-size: 24rpx; color: #262D47; opacity: 0.8;">左右滑动查看更多</view>
|
|
</view>
|
|
<view class="flex deputyTab">
|
|
<view :class="checkedDeputyTab==1?'checkedDeputyTab':'noDeputyTab'" @click="changeDeputyTab(1,1)">人脸</view>
|
|
<view :class="checkedDeputyTab==2?'checkedDeputyTab':'noDeputyTab'" @click="changeDeputyTab(2,1)">视频</view>
|
|
<view :class="checkedDeputyTab==3?'checkedDeputyTab':'noDeputyTab'" @click="changeDeputyTab(3,1)">环测</view>
|
|
</view>
|
|
|
|
|
|
<view class="blockContent">
|
|
<u-charts class="ucharts" :cWidth="355" :cHeight="160" canvas-id="chartPeopleWork" chartType="column" :opts="workTypeChartData"
|
|
ref="chartPeopleWork" />
|
|
</view>
|
|
</view>
|
|
<view class="blockBox">
|
|
<view class="blockTitle">
|
|
<view class="titleName">
|
|
设备状态概况
|
|
</view>
|
|
</view>
|
|
<view class="flex deputyTab">
|
|
<view :class="checkedDeputyTab2==2?'checkedDeputyTab':'noDeputyTab'" @click="changeDeputyTab(2,2)">人脸</view>
|
|
<view :class="checkedDeputyTab2==1?'checkedDeputyTab':'noDeputyTab'" @click="changeDeputyTab(1,2)">视频</view>
|
|
<view :class="checkedDeputyTab2==3?'checkedDeputyTab':'noDeputyTab'" @click="changeDeputyTab(3,2)">环测</view>
|
|
</view>
|
|
<view class="flex2 date_wrap">
|
|
<view style="width: 16%; font-size:28rpx; color: #666;">日期</view>
|
|
<picker mode="date" :value="date1" class="date_temp" :end="endDate" @change="(val)=>bindDateChange(val,1)">
|
|
<view class="uni-input">{{date1}}</view>
|
|
</picker>
|
|
<text style="margin: 0 20rpx;color: #666;">-</text>
|
|
<picker mode="date" :value="date2" class="date_temp" :end="endDate" @change="(val)=>bindDateChange(val,2)">
|
|
<view class="uni-input">{{date2}}</view>
|
|
</picker>
|
|
</view>
|
|
<view class="blockContent">
|
|
<u-charts class="ucharts" :cWidth="355" :cHeight="220" canvas-id="integritySafety" chartType="ring" :opts="infoSafetyChartData"
|
|
ref="integritySafety" />
|
|
<view style="text-align: center;color: #848484;font-size: 28rpx;">在线率 {{onlineRate}}%</view>
|
|
</view>
|
|
</view>
|
|
<view style="width: 100%; height: 1px;"></view>
|
|
|
|
</scroll-view>
|
|
<footers :activeTab="'deviceManage'"></footers>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import headers from '../../components/headers/headers.vue'
|
|
import footers from '../../components/footers/footers.vue'
|
|
import uCharts from '@/components/u-charts/component.vue';
|
|
import uniIcons from "@/components/uni-icons/uni-icons.vue"
|
|
export default {
|
|
components: {
|
|
headers,
|
|
footers,
|
|
uCharts,
|
|
uniIcons
|
|
},
|
|
data() {
|
|
return {
|
|
userInfo: null,
|
|
backArr: [],
|
|
searchsn: '',
|
|
mapData: [],
|
|
activeTabIndex: -1,
|
|
parentSn: '',
|
|
currentCompany: {
|
|
companyName: '集团',
|
|
},
|
|
|
|
workTypeChartData: {
|
|
categories: [],
|
|
series: []
|
|
},
|
|
infoSafetyChartData: {
|
|
title: {
|
|
name: "",
|
|
color: '#7cb5ec',
|
|
fontSize: 25,
|
|
offsetY: 0,
|
|
},
|
|
series: [{
|
|
"data": 0,
|
|
"color": '#1890FF',
|
|
"name":'不在线'
|
|
},
|
|
{
|
|
"data": 0,
|
|
"color": '#E7EDF3',
|
|
"name":'在线'
|
|
}
|
|
]
|
|
},
|
|
videoList:[],
|
|
ufaceDevList:[],
|
|
environmentList:[],
|
|
totalDevNum:0, //设备总数
|
|
onlineRate:0,
|
|
|
|
checkedDeputyTab: 1, //设备接入情况
|
|
checkedDeputyTab2: 2, //设备状态
|
|
date1: '',
|
|
date2: '',
|
|
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
|
|
this.getAreaList(true);
|
|
},
|
|
onShow() {
|
|
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
|
|
let curRoute = routes[routes.length - 1].route //获取当前页面路由
|
|
let curParam = routes[routes.length - 1].options; //获取路由参数
|
|
if (curParam.sn) {
|
|
this.parentSn = curParam.sn
|
|
this.searchsn = curParam.sn
|
|
}
|
|
this.activeTabIndex = -1;
|
|
if (this.parentSn) {
|
|
this.getAreaList(false);
|
|
this.loadStatictisData();
|
|
this.getDevStateData();
|
|
} else {
|
|
this.initData();
|
|
}
|
|
},
|
|
mounted() {
|
|
// console.log('mounted')
|
|
this.date1 = this.getDate('end');
|
|
this.date2 = this.getDate('end');
|
|
|
|
},
|
|
|
|
computed: {
|
|
endDate() {
|
|
return this.getDate('end');
|
|
}
|
|
},
|
|
|
|
|
|
methods: {
|
|
//获取选择的最大时间
|
|
getDate(type) {
|
|
const date = new Date();
|
|
let year = date.getFullYear();
|
|
let month = date.getMonth() + 1;
|
|
let day = date.getDate();
|
|
|
|
if (type === 'start') {
|
|
year = year - 60;
|
|
} else if (type === 'end') {
|
|
year = year
|
|
}
|
|
month = month > 9 ? month : '0' + month;;
|
|
day = day > 9 ? day : '0' + day;
|
|
return `${year}-${month}-${day}`;
|
|
},
|
|
|
|
|
|
|
|
|
|
//权限判断
|
|
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 6:
|
|
this.searchsn = that.userInfo.sn
|
|
break;
|
|
case 7:
|
|
this.searchsn = that.userInfo.sn
|
|
break;
|
|
}
|
|
|
|
if (that.userInfo.accountType == 5 || that.userInfo.accountType == 6 || that.userInfo.accountType == 10) {
|
|
// this.getProjectDetail()
|
|
} else {
|
|
|
|
this.getAreaList(type);
|
|
}
|
|
this.loadStatictisData();
|
|
this.getDevStateData();
|
|
|
|
},
|
|
|
|
|
|
|
|
//获取区域
|
|
getAreaList() {
|
|
let that = this;
|
|
this.sendRequest({
|
|
url: "xmgl/company/getComapnyStatisticsList",
|
|
method: 'POST',
|
|
data: {
|
|
sn: this.searchsn,
|
|
},
|
|
success(res) {
|
|
that.mapData = res.result.companyList ? res.result.companyList : res.result.projectList
|
|
if (res.result.companyInfo) {
|
|
that.currentCompany = res.result.companyInfo
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
|
|
|
|
|
|
//切换设备类型
|
|
changeDeputyTab(index, type) {
|
|
let that = this;
|
|
if (type == 1) {
|
|
this.checkedDeputyTab = index;
|
|
if(index==1){
|
|
//获取人脸数据
|
|
let obj = {
|
|
data: [],
|
|
name:'',
|
|
color: '#0F7FE7'
|
|
};
|
|
let titleArr = [];
|
|
that.ufaceDevList.forEach(item => {
|
|
titleArr.push(item.name);
|
|
obj.data.push(item.totalDev)
|
|
})
|
|
that.workTypeChartData.categories = titleArr;
|
|
that.workTypeChartData.series = [obj];
|
|
that.$refs.chartPeopleWork.changeData('chartPeopleWork', that.workTypeChartData);
|
|
}else if(index==2){
|
|
//获取视频数据
|
|
let obj = {
|
|
data: [],
|
|
name:'',
|
|
color: '#0F7FE7'
|
|
};
|
|
let titleArr = [];
|
|
that.videoList.forEach(item => {
|
|
titleArr.push(item.name);
|
|
obj.data.push(item.totalDev)
|
|
})
|
|
that.workTypeChartData.categories = titleArr;
|
|
that.workTypeChartData.series = [obj];
|
|
that.$refs.chartPeopleWork.changeData('chartPeopleWork', that.workTypeChartData);
|
|
}else if(index==3){
|
|
//获取环境监测数据
|
|
let obj = {
|
|
data: [],
|
|
name:'',
|
|
color: '#0F7FE7'
|
|
};
|
|
let titleArr = [];
|
|
that.environmentList.forEach(item => {
|
|
titleArr.push(item.name);
|
|
obj.data.push(item.totalDev)
|
|
})
|
|
that.workTypeChartData.categories = titleArr;
|
|
that.workTypeChartData.series = [obj];
|
|
that.$refs.chartPeopleWork.changeData('chartPeopleWork', that.workTypeChartData);
|
|
}
|
|
|
|
|
|
|
|
} else {
|
|
this.checkedDeputyTab2 = index;
|
|
this.getDevStateData();
|
|
}
|
|
},
|
|
|
|
|
|
|
|
//切换企业地区
|
|
changeLevel(index) {
|
|
this.activeTabIndex = index;
|
|
// console.log('changeLevel', index)
|
|
if (this.activeTabIndex != -1) {
|
|
this.searchsn = this.mapData[index].projectSn ? this.mapData[index].projectSn : this.mapData[index].companySn
|
|
// this.loadData(false);
|
|
this.loadStatictisData();
|
|
this.getDevStateData();
|
|
if (this.mapData[index].projectSn) {
|
|
// this.getProjectDetail()
|
|
}
|
|
} else {
|
|
if (this.parentSn) {
|
|
this.searchsn = this.parentSn
|
|
// this.loadData(false);
|
|
this.loadStatictisData();
|
|
this.getDevStateData();
|
|
} else {
|
|
this.initData(true)
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
//获取区域下的数据
|
|
loadStatictisData() {
|
|
let that = this;
|
|
this.sendRequest({
|
|
url: 'xmgl/projectDevStatistics/selectDevStatisticsCount',
|
|
data: {
|
|
sn: that.searchsn,
|
|
},
|
|
method: 'post',
|
|
success(res) {
|
|
let data = res.result;
|
|
that.videoList = data.videoList;
|
|
that.ufaceDevList = data.ufaceDevList;
|
|
that.environmentList = data.environmentList;
|
|
|
|
//获取人脸数据
|
|
let obj = {
|
|
data: [],
|
|
name:'',
|
|
color: '#0F7FE7'
|
|
};
|
|
let titleArr = [];
|
|
data.ufaceDevList.forEach(item => {
|
|
titleArr.push(item.name);
|
|
obj.data.push(item.totalDev)
|
|
})
|
|
that.workTypeChartData.categories = titleArr;
|
|
that.workTypeChartData.series = [obj];
|
|
that.$refs.chartPeopleWork.changeData('chartPeopleWork', that.workTypeChartData);
|
|
that.totalDevNum = res.result.totalDevNum
|
|
}
|
|
})
|
|
},
|
|
|
|
|
|
//获取设备状态数据
|
|
getDevStateData(){
|
|
let that = this;
|
|
this.sendRequest({
|
|
url:'xmgl/projectDevStatistics/selectDateDevStatistics',
|
|
method:'post',
|
|
data:{
|
|
type:that.checkedDeputyTab2,
|
|
sn:that.searchsn,
|
|
startDate:that.date1,
|
|
endDate:that.date2,
|
|
},
|
|
success(res){
|
|
that.infoSafetyChartData={
|
|
title: {
|
|
name:"",
|
|
color: '#7cb5ec',
|
|
fontSize: 25,
|
|
offsetY: 0,
|
|
},
|
|
series: [{
|
|
"data": res.result.devList[0].devNotOnline,
|
|
color: '#1890FF',
|
|
name:'不在线'
|
|
},
|
|
{
|
|
"data": res.result.devList[0].devOnline,
|
|
color: '#E7EDF3',
|
|
name:'在线'
|
|
}
|
|
]
|
|
},
|
|
that.$refs.integritySafety.changeData('integritySafety', that.infoSafetyChartData);
|
|
that.onlineRate = res.result.devList[0].totalDev!=0?(res.result.devList[0].devOnline/res.result.devList[0].totalDev)*100:0; //在线率
|
|
}
|
|
})
|
|
},
|
|
|
|
|
|
|
|
//跳转区域
|
|
forwardFn() {
|
|
var type = 'area';
|
|
|
|
|
|
|
|
if (this.mapData[this.activeTabIndex].projectSn) {
|
|
type = 'project'
|
|
}
|
|
uni.navigateTo({
|
|
url: './deviceManage?sn=' + this.searchsn + '&type=' + type
|
|
})
|
|
},
|
|
|
|
|
|
|
|
//切换时间
|
|
bindDateChange(e,type) {
|
|
if(type==1){
|
|
this.date1 = e.detail.value;
|
|
}else{
|
|
this.date2 = e.detail.value;
|
|
}
|
|
this.getDevStateData();
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.flex {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.flex2 {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.blockBox {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.dev_bg {
|
|
background-image: url(../../static/bg1.png);
|
|
background-size: 100%;
|
|
height: 300rpx;
|
|
width: 100%;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.blockBox .blockTitle .titleName::before {
|
|
height: 75%;
|
|
top: 16%;
|
|
}
|
|
|
|
.labourCanvas {
|
|
width: 100%;
|
|
height: 240rpx;
|
|
}
|
|
|
|
.blockContent {
|
|
position: relative;
|
|
}
|
|
|
|
.ucharts {
|
|
width: 100%;
|
|
height: 175px;
|
|
}
|
|
|
|
.forwardImg {
|
|
// position: absolute;
|
|
// right: 20rpx;
|
|
// top: 50%;
|
|
margin-top: -30rpx;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.statusTips {
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 4rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.kuai {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-left: 16rpx;
|
|
}
|
|
|
|
.text {
|
|
font-size: 24rpx;
|
|
color: $uni-text-color;
|
|
opacity: 0.9;
|
|
margin-left: 6rpx;
|
|
}
|
|
}
|
|
|
|
.kuai1 {
|
|
background-color: $uni-color-primary;
|
|
}
|
|
|
|
.kuai2 {
|
|
background-color: $--color-primary2;
|
|
}
|
|
|
|
.kuai3 {
|
|
background-color: $--color-primary6;
|
|
}
|
|
|
|
.kuai4 {
|
|
background-color: $--color-primary3;
|
|
}
|
|
|
|
.kuaiBox {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
margin-bottom: 6rpx;
|
|
|
|
.kuai {
|
|
min-width: 40rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
color: white;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.avgageBox {
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 20rpx;
|
|
color: $uni-text-color;
|
|
|
|
.primaryText {
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
|
|
.deputyTab {
|
|
box-sizing: border-box;
|
|
padding: 8px 20rpx 0;
|
|
margin-bottom: 24rpx;
|
|
border-bottom: 1px solid #eee;
|
|
font-size: 28rpx;
|
|
color: #848484;
|
|
}
|
|
|
|
.checkedDeputyTab {
|
|
font-weight: bold;
|
|
padding-bottom: 6px;
|
|
border-bottom: 4rpx #5181F6 solid;
|
|
color: #262D47;
|
|
}
|
|
|
|
.noDeputyTab {
|
|
padding-bottom: 16rpx;
|
|
font-weight: initial;
|
|
}
|
|
|
|
.date_temp {
|
|
height: 48rpx;
|
|
line-height: 48rpx;
|
|
width: 35%;
|
|
border-bottom: 1px solid #4181FE;
|
|
text-align: center;
|
|
}
|
|
|
|
.date_wrap {
|
|
padding: 0 20rpx;
|
|
padding-bottom: 20rpx;
|
|
margin-bottom: 30rpx;
|
|
box-sizing: border-box;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
</style>
|