|
|
@@ -0,0 +1,2179 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar v-show="false" title="首页" title-color="#101010"></u-navbar>
|
|
|
+
|
|
|
+ <u-picker v-model="body2data.vue.show" :params="body2data.vue.params" :default-time="body2data.query.startTime"
|
|
|
+ @confirm="body2dataconfirm" mode="time"></u-picker>
|
|
|
+
|
|
|
+ <!-- <u-picker v-model="body5data.vue.show" :default-time="body5data.query.queryDate" :params="body5data.vue.params"
|
|
|
+ @confirm="body5dataconfirm" mode="time"></u-picker> -->
|
|
|
+
|
|
|
+ <u-calendar v-model="body5data.vue.show" mode="date" @change="body5dataconfirm"></u-calendar>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="navbar">
|
|
|
+ 智泊e家 运管端
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="tabs-box">
|
|
|
+
|
|
|
+ <u-picker-jp v-model="showselect1" range-key="name" :num="3" @confirm="showselect1confirm"
|
|
|
+ :range="companyList"></u-picker-jp>
|
|
|
+
|
|
|
+ <template v-if="companyListTabs.length>2">
|
|
|
+ <u-tabs ref="tabs" :list="companyListTabs" bg-color="#1677ff" :current="current1" inactive-color="#fff"
|
|
|
+ @change="utabsChange1" item-width="180" height="70" gutter="10" active-color="#fff"></u-tabs>
|
|
|
+ <view class="tabs-box-other" v-if="companyList.length>3" @click="utabsChange1other">
|
|
|
+ 更多
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="main">
|
|
|
+
|
|
|
+ <u-picker-jp v-model="showselect2" range-key="name" :num='3' @confirm="showselect2confirm"
|
|
|
+ :range="parkingList"></u-picker-jp>
|
|
|
+
|
|
|
+ <view class="tabs-box2" v-show="parkingListTabs.length>2">
|
|
|
+ <u-tabs ref="tabs2" gutter="10" :list="parkingListTabs" :current="current2" @change="utabsChange2"
|
|
|
+ item-width="180" bg-color="#f2f4f6" height="70"></u-tabs>
|
|
|
+ <view v-if="parkingList.length>3" class="tabs-box-other" @click="utabsChange2other">
|
|
|
+ 更多
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="statistics ">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 综合统计
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="contentBody">
|
|
|
+ <jpContent :status="jpContentMap.body1">
|
|
|
+ <view class="body1pie-table">
|
|
|
+ <view class="tr">
|
|
|
+ <view class="td td1">
|
|
|
+ <view id="body1pie1" class="body1pie">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="td td2">
|
|
|
+ <view class="td td3">
|
|
|
+ <view class="td td4">空闲<span
|
|
|
+ class="body1pie-num color53B56B">{{body1data.data.idleNum}}</span>台
|
|
|
+ </view>
|
|
|
+ <view class="td td4">占用<span
|
|
|
+ class="body1pie-num colorAAAAAA">{{body1data.data.useNum}}</span>台
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="td td3">
|
|
|
+
|
|
|
+ <view class="td td4">公共车位<span
|
|
|
+ class="body1pie-num colorEF8132">{{body1data.data.publicNum}}</span>台
|
|
|
+ </view>
|
|
|
+ <view class="td td4">私家车位<span
|
|
|
+ class="body1pie-num colorDC4441">{{body1data.data.privateNum}}</span>台
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="tr">
|
|
|
+ <view class="td td1">
|
|
|
+ <view id="body1pie2" class="body1pie">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="td td2">
|
|
|
+ <view class="td td3">
|
|
|
+
|
|
|
+ <view class="td td4">正常<span
|
|
|
+ class="body1pie-num color53B56B">{{body1data.data.normalNum}}</span>台
|
|
|
+ </view>
|
|
|
+ <view class="td td4">离线<span
|
|
|
+ class="body1pie-num colorAAAAAA">{{body1data.data.loseNum}}</span>台
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="td td3">
|
|
|
+
|
|
|
+ <view class="td td4">故障<span
|
|
|
+ class="body1pie-num colorEF8132">{{body1data.data.errorNum}}</span>台
|
|
|
+ </view>
|
|
|
+ <view class="td td4" v-if="0">低电量<span
|
|
|
+ class="body1pie-num colorDC4441">5</span>台</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="tr" v-if="0">
|
|
|
+ <view class="td td1">
|
|
|
+ <view id="body1pie3" class="body1pie">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="td td2">
|
|
|
+ <view class="td td3">
|
|
|
+
|
|
|
+ <view class="td td4">管理员<span class="body1pie-num color307AF6">5</span>人</view>
|
|
|
+ <view class="td td4">白名单<span class="body1pie-num color53B56B">5</span>人</view>
|
|
|
+ </view>
|
|
|
+ <view class="td td3">
|
|
|
+
|
|
|
+ <view class="td td4">游客<span class="body1pie-num colorEF8375">5</span>人次</view>
|
|
|
+ <view class="td td4"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </jpContent>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="statistics " v-show="1||companyId">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <view>地锁列表</view>
|
|
|
+
|
|
|
+ <view class="check-all" @click="gotoDeviceList()">查看全部<u-icon name="arrow-right"></u-icon>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="contentBody">
|
|
|
+ <jpContent :status="jpContentMap.body7">
|
|
|
+ <view class="body7main">
|
|
|
+ <view class="line" v-for="(item,index) in equipmentList"
|
|
|
+ @click="gotoUrl('/pages/deviceTab/dataLock?id='+item.id)" :key="index">
|
|
|
+ <view class="item">
|
|
|
+ <!--
|
|
|
+ -->
|
|
|
+ <view class="item-title">
|
|
|
+
|
|
|
+ <view class="item-name">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ <view class="item-tags">
|
|
|
+ <view class="tag " :class="'tag'+item.type">
|
|
|
+ {{item.typeN}}
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="tag" :class="'lockStatus lockStatus'+item.lockStatus">
|
|
|
+ {{item.lockStatusN}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item-body">
|
|
|
+ <span>编号：{{item.lockNo}}</span> <span v-if="item.batteryLevel" style=" margin-left: 16rpx;">电压：{{item.batteryLevel}}V</span>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="goto">
|
|
|
+ <view :class="'statusN statusN'+item.status">
|
|
|
+ {{item.status==1?'在线':'离线'}}
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <u-divider border-color="#CFD2D5" @click="gotoDeviceList()"
|
|
|
+ v-if="equipmentList.length==10">最多显示10条,点击查看更多</u-divider>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </jpContent>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="statistics " v-show="1||companyId">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <view>停车记录</view>
|
|
|
+
|
|
|
+ <view class="check-all" @click="gotoUrl('/pages/record/parkingRecord?compamyId='+companyId+'&parkingId='+parkingId)">查看全部<u-icon name="arrow-right"></u-icon>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="contentBody">
|
|
|
+ <jpContent :status="jpContentMap.body8">
|
|
|
+ <view class="body8main">
|
|
|
+ <view class="line" v-for="(item,index) in parkingRecord"
|
|
|
+ @click="gotoUrl('/pages/record/parkingInfo?id='+item.id)" :key="index">
|
|
|
+
|
|
|
+ <view class="data">
|
|
|
+
|
|
|
+ <view class="view3">
|
|
|
+ <u-icon name="clock"></u-icon>
|
|
|
+ {{showTime(item.startTime)}}
|
|
|
+ <template v-if="item.status!=0">
|
|
|
+ {{item.endTime?'-'+showTime(item.endTime):'-当前'}}
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="view1">
|
|
|
+ {{item.parkingName}} {{item.lockName}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="goto " :class="'status'+item.status">
|
|
|
+ {{item.status==2?getTime(item):''}}
|
|
|
+ {{item.status==1?'使用中':''}}
|
|
|
+ {{item.status==0?'启动中':''}}
|
|
|
+
|
|
|
+ <u-icon name="arrow-right" size="24" style="margin-left: 8rpx;" color="#BBBBBB"></u-icon>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <u-divider border-color="#CFD2D5" @click="gotoUrl('/pages/record/parkingRecord?compamyId='+companyId+'&parkingId='+parkingId)"
|
|
|
+ v-if="parkingRecord.length==5">最多显示5条,点击查看更多</u-divider>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </jpContent>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="statistics ">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <view>时空矩阵图</view>
|
|
|
+
|
|
|
+ <view class="tag" @click="body5data.vue.show=true">{{body5data.vue.queryN}}<u-icon
|
|
|
+ name="arrow-down"></u-icon></view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="contentBody">
|
|
|
+ <jpContent :status="jpContentMap.body5">
|
|
|
+ <view class="body5main">
|
|
|
+
|
|
|
+ <view id="body5echart" class="body5class">
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </jpContent>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="statistics " v-show="companyId">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <view>车位异常记录</view>
|
|
|
+
|
|
|
+ <view class="check-all" @click="gotoUrl('/pages/myTab/abnormalList?companyId='+companyId)">
|
|
|
+ 查看全部<u-icon name="arrow-right"></u-icon></view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="contentBody">
|
|
|
+ <jpContent :status="jpContentMap.body6">
|
|
|
+ <view class="body6main">
|
|
|
+ <view class="line" v-for="(item,index) in abnormalRecordsList" :key="index">
|
|
|
+ <view class="abnormal-item">
|
|
|
+ <!-- @click="gotoUrl('/pages/abnormal/abnormalAlarmDetails?id='+item.id)"
|
|
|
+ -->
|
|
|
+ <view class="item-title">
|
|
|
+
|
|
|
+ <view class="name">
|
|
|
+ <span v-if="item.level==1" class="level level1 ">一级</span>
|
|
|
+ <span v-if="item.level==2" class="level level2">二级</span>
|
|
|
+
|
|
|
+ {{item.content}}
|
|
|
+ </view>
|
|
|
+ <view class="date"
|
|
|
+ style="display: flex; justify-content: space-between;margin-top: 4rpx;">
|
|
|
+ <view>{{item.title}}</view>
|
|
|
+ <view>{{item.createTime}}</view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </jpContent>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="statistics ">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <view>车位平均占用率(%)</view>
|
|
|
+ <view class="tag" @click="body2data.vue.show=true">{{body2data.vue.queryN}}<u-icon
|
|
|
+ name="arrow-down"></u-icon></view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="contentBody">
|
|
|
+ <jpContent :status="jpContentMap.body2">
|
|
|
+ <view class="body2lineChart">
|
|
|
+
|
|
|
+ <view id="body2line1" class="body2line">
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </jpContent>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="statistics ">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <view>高频使用时段分布</view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="contentBody">
|
|
|
+ <jpContent :status="jpContentMap.body3">
|
|
|
+ <view class="body3barChart">
|
|
|
+
|
|
|
+ <view id="body3bar1" class="body3bar">
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </jpContent>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="statistics ">
|
|
|
+ <view class="title">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <view>用户停留时长分群特征</view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="contentBody">
|
|
|
+ <jpContent :status="jpContentMap.body4">
|
|
|
+ <view class="body4pieChart">
|
|
|
+
|
|
|
+ <view id="body4pie1" class="body4pie">
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </jpContent>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <u-divider border-color="#CFD2D5">已经到底了</u-divider>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <tabbar :current="0"></tabbar>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import Tabbar from '@/components/Tabbar.vue'
|
|
|
+ import jpContent from '@/components/JPcontent.vue'
|
|
|
+ import * as echarts from 'echarts';
|
|
|
+
|
|
|
+ import * as API from '@/apis/pagejs/index.js'
|
|
|
+
|
|
|
+ import {
|
|
|
+ parseUnixTime,
|
|
|
+ beforeTimeStamp,
|
|
|
+ newDate
|
|
|
+ } from '@/apis/utils'
|
|
|
+
|
|
|
+
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ Tabbar,
|
|
|
+ jpContent
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ current1: 0,
|
|
|
+ showselect1: false,
|
|
|
+ current2: 0,
|
|
|
+ showselect2: false,
|
|
|
+ isReady: false,
|
|
|
+ companyList: [],
|
|
|
+ parkingList: [],
|
|
|
+ //companyListIndex:0,
|
|
|
+ companyId: "",
|
|
|
+ parkingId: "",
|
|
|
+ echartsList: {},
|
|
|
+ parkingRecord:[],
|
|
|
+ equipmentList: [],
|
|
|
+ abnormalRecordsList: [{
|
|
|
+ level: 1,
|
|
|
+ content: "1111111",
|
|
|
+ title: "11",
|
|
|
+ createTime: "123:123"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ level: 2,
|
|
|
+ content: "1111111",
|
|
|
+ title: "11",
|
|
|
+ createTime: "123:123"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ body2data: {
|
|
|
+ query: {},
|
|
|
+ vue: {
|
|
|
+ queryN: "",
|
|
|
+ show: false,
|
|
|
+ params: {
|
|
|
+ year: true,
|
|
|
+ month: true,
|
|
|
+ day: false,
|
|
|
+ hour: false,
|
|
|
+ minute: false,
|
|
|
+ second: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: {}
|
|
|
+ },
|
|
|
+ body1data: {
|
|
|
+ query: {},
|
|
|
+ data: {},
|
|
|
+ data1: {}
|
|
|
+ },
|
|
|
+ body4data: {
|
|
|
+ query: {},
|
|
|
+ data: {}
|
|
|
+ },
|
|
|
+ body3data: {
|
|
|
+ query: {},
|
|
|
+ data: {}
|
|
|
+ },
|
|
|
+
|
|
|
+ body5data: {
|
|
|
+ query: {},
|
|
|
+ data: {},
|
|
|
+ vue: {
|
|
|
+ queryN: "",
|
|
|
+ show: false,
|
|
|
+ params: {
|
|
|
+ year: true,
|
|
|
+ month: true,
|
|
|
+ day: true,
|
|
|
+ hour: false,
|
|
|
+ minute: false,
|
|
|
+ second: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ jpContentMap: {
|
|
|
+ body1: 0,
|
|
|
+ body2: 0,
|
|
|
+ body3: 0,
|
|
|
+ body4: 0,
|
|
|
+ body5: 0,
|
|
|
+ body6: 1,
|
|
|
+ body7: 0,
|
|
|
+ body8: 0,
|
|
|
+ body9: 0,
|
|
|
+ body10: 0,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ this.getfindByOpenId();
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ companyListTabs() {
|
|
|
+ var sz = []
|
|
|
+
|
|
|
+ if (this.companyList.length > 3) {
|
|
|
+ sz = [{
|
|
|
+ id: "",
|
|
|
+ name: '全部'
|
|
|
+ }]
|
|
|
+ sz.push(this.companyList[0])
|
|
|
+ sz.push(this.companyList[1])
|
|
|
+ } else {
|
|
|
+ sz = [{
|
|
|
+ id: "",
|
|
|
+ name: '全部'
|
|
|
+ },
|
|
|
+ ...this.companyList
|
|
|
+ ]
|
|
|
+ }
|
|
|
+
|
|
|
+ return sz
|
|
|
+ },
|
|
|
+ parkingListTabs() {
|
|
|
+ var sz = []
|
|
|
+ if (this.parkingList.length > 3) {
|
|
|
+ sz = [{
|
|
|
+ id: "",
|
|
|
+ name: '综合查询'
|
|
|
+ }]
|
|
|
+ sz.push(this.parkingList[0])
|
|
|
+ sz.push(this.parkingList[1])
|
|
|
+ } else {
|
|
|
+ sz = [{
|
|
|
+ id: "",
|
|
|
+ name: '综合查询'
|
|
|
+ },
|
|
|
+ ...this.parkingList
|
|
|
+ ]
|
|
|
+ }
|
|
|
+
|
|
|
+ return sz
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ showTime(time){
|
|
|
+ if(time){
|
|
|
+ return time.substr(5).replace('-','.')
|
|
|
+ }else{
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getTime(item){
|
|
|
+ if(item.startTime&&item.endTime){
|
|
|
+ var stime=newDate(item.startTime)
|
|
|
+ var etime=newDate(item.endTime)
|
|
|
+ //etime=new Date()
|
|
|
+ var k=(etime.getTime()-stime.getTime())/1000/60
|
|
|
+
|
|
|
+ var H=k/60
|
|
|
+ var fen=k%(60)
|
|
|
+ var str="";
|
|
|
+ if(k>60){
|
|
|
+ str+=parseInt(H)+'小时'
|
|
|
+ }
|
|
|
+ if(fen==0&&str!=''){
|
|
|
+
|
|
|
+ }else{
|
|
|
+ str+=parseInt(fen)+'分钟'
|
|
|
+ }
|
|
|
+ return str
|
|
|
+ }else{
|
|
|
+ return '已完成'
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ gotoDeviceList() {
|
|
|
+ if (this.parkingId) {
|
|
|
+ this.gotoUrl('/pages/deviceTab/deviceList?parkingId=' + this.parkingId)
|
|
|
+ } else {
|
|
|
+
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/deviceTab/index'
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getfloorStatus() {
|
|
|
+ this.jpContentMap.body1 = 0
|
|
|
+
|
|
|
+ API.floorStatus({
|
|
|
+ companyId: this.companyId,
|
|
|
+ parkingId: this.parkingId
|
|
|
+ }).then((response) => {
|
|
|
+ this.body1data.data = response.data
|
|
|
+ uni.hideLoading();
|
|
|
+ this.jpContentMap.body1 = 2
|
|
|
+
|
|
|
+ this.getbody1pie1()
|
|
|
+ this.getbody1pie2()
|
|
|
+ this.getbody1pie3()
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ getParkingRecordList() {
|
|
|
+ this.jpContentMap.body8 = 0
|
|
|
+
|
|
|
+ API.parkingRecordList({
|
|
|
+ companyId: this.companyId,
|
|
|
+ parkingId: this.parkingId,
|
|
|
+ pageSize: 5
|
|
|
+ }).then((response) => {
|
|
|
+
|
|
|
+ uni.hideLoading();
|
|
|
+ if (response.data.totalPage) {
|
|
|
+ this.jpContentMap.body8 = 2
|
|
|
+ this.parkingRecord = response.data.data
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.jpContentMap.body8 = 1
|
|
|
+ }
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ getfloorlockList() {
|
|
|
+ this.jpContentMap.body7 = 0
|
|
|
+
|
|
|
+ API.floorlockList({
|
|
|
+ companyId: this.companyId,
|
|
|
+ parkingId: this.parkingId,
|
|
|
+ pageSize: 10
|
|
|
+ }).then((response) => {
|
|
|
+
|
|
|
+ uni.hideLoading();
|
|
|
+ if (response.data.totalPage) {
|
|
|
+ this.jpContentMap.body7 = 2
|
|
|
+ this.equipmentList = response.data.data
|
|
|
+
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.jpContentMap.body7 = 1
|
|
|
+ }
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getApi1() {
|
|
|
+
|
|
|
+ if (this.companyId == "") {
|
|
|
+
|
|
|
+ this.getApi2()
|
|
|
+ } else {
|
|
|
+ this.parkingInfoList()
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ getApi2() {
|
|
|
+ this.getfloorStatus()
|
|
|
+ this.getfloorlockList()
|
|
|
+ this.occupancyByTime(1);
|
|
|
+ this.occupancyByTimeBar(1);
|
|
|
+ this.occupancyByDay(1);
|
|
|
+ this.durationDistribution();
|
|
|
+ this.getParkingRecordList()
|
|
|
+ if (this.parkingId == "") {
|
|
|
+
|
|
|
+ } else {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ change1companyList(i) {
|
|
|
+ //this.companyListIndex=i
|
|
|
+ var companyId = ""
|
|
|
+
|
|
|
+ if (i == -1) {
|
|
|
+ if (this.companyId == companyId) {
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.companyId = ""
|
|
|
+ this.parkingList = [];
|
|
|
+ this.getApi1()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ var item = this.companyList[i]
|
|
|
+ companyId = item.id
|
|
|
+ if (this.companyId == companyId) {
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.companyId = companyId
|
|
|
+
|
|
|
+ this.parkingId = "";
|
|
|
+ this.current2 = 0;
|
|
|
+ this.$refs.tabs2.showBar = true
|
|
|
+
|
|
|
+ this.getApi1()
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ change2parkingList(i) {
|
|
|
+
|
|
|
+ var parkingId = ""
|
|
|
+
|
|
|
+ if (i == -1) {
|
|
|
+
|
|
|
+ if (this.parkingId == parkingId) {
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.parkingId = "";
|
|
|
+ this.getApi2()
|
|
|
+
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ var item = this.parkingList[i]
|
|
|
+ parkingId = item.id
|
|
|
+ if (this.parkingId == parkingId) {
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.parkingId = parkingId;
|
|
|
+ this.getApi2()
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ showselect2confirm(e) {
|
|
|
+
|
|
|
+ this.change2parkingList(e[0])
|
|
|
+ },
|
|
|
+ utabsChange2other() {
|
|
|
+ this.$refs.tabs2.showBar = false
|
|
|
+ this.current2 = -1;
|
|
|
+ this.showselect2 = true;
|
|
|
+ },
|
|
|
+ utabsChange2(index) {
|
|
|
+ this.current2 = index;
|
|
|
+ this.change2parkingList(index - 1)
|
|
|
+ this.$refs.tabs2.showBar = true
|
|
|
+ },
|
|
|
+
|
|
|
+ showselect1confirm(e) {
|
|
|
+
|
|
|
+ this.change1companyList(e[0])
|
|
|
+ },
|
|
|
+
|
|
|
+ utabsChange1other() {
|
|
|
+ this.$refs.tabs.showBar = false
|
|
|
+ this.current1 = -1;
|
|
|
+ this.showselect1 = true;
|
|
|
+ },
|
|
|
+ utabsChange1(index) {
|
|
|
+ this.current1 = index;
|
|
|
+ this.change1companyList(index - 1)
|
|
|
+ this.$refs.tabs.showBar = true
|
|
|
+ },
|
|
|
+ parkingInfoList() {
|
|
|
+
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ this.parkingList = [];
|
|
|
+
|
|
|
+ API.parkingList({
|
|
|
+ companyId: this.companyId,
|
|
|
+ pageSize: 999
|
|
|
+ }).then((response) => {
|
|
|
+
|
|
|
+ uni.hideLoading();
|
|
|
+ var parkingInfoList = response.data.parkingInfoList
|
|
|
+ this.parkingList = [
|
|
|
+ ...parkingInfoList,
|
|
|
+ ];
|
|
|
+
|
|
|
+ if (this.parkingList.length == 1) {
|
|
|
+
|
|
|
+ this.change2parkingList(0)
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.change2parkingList(-1)
|
|
|
+ this.getApi2()
|
|
|
+ }
|
|
|
+
|
|
|
+ this.getfloorlockList()
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ companyInfoList() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ this.companyList = [];
|
|
|
+
|
|
|
+ API.companyInfoList({
|
|
|
+
|
|
|
+ }).then((response) => {
|
|
|
+
|
|
|
+ uni.hideLoading();
|
|
|
+ var companyInfoList = response.data.companyInfoList
|
|
|
+ this.companyList = [
|
|
|
+ ...companyInfoList,
|
|
|
+
|
|
|
+ ];
|
|
|
+
|
|
|
+ if (this.companyList.length == 1) {
|
|
|
+ this.change1companyList(0)
|
|
|
+ } else {
|
|
|
+ this.change1companyList(-1)
|
|
|
+ this.getApi1()
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ this.companyInfoList()
|
|
|
+
|
|
|
+ //this.occupancyByTime();
|
|
|
+
|
|
|
+ //this.getbody3()
|
|
|
+ //this.getbody4()
|
|
|
+
|
|
|
+ //this.getbody5()
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ body2dataconfirm(e) {
|
|
|
+
|
|
|
+ var date = new Date(e.year + "-" + e.month + "-1");
|
|
|
+ this.body2data.vue.queryN = date.getFullYear() + "年" + (date.getMonth() + 1) + '月';
|
|
|
+ this.body2data.query.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-1"
|
|
|
+
|
|
|
+ var endOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0)
|
|
|
+ this.body2data.query.endTime = parseUnixTime(endOfMonth, '{y}-{m}-{d}')
|
|
|
+
|
|
|
+ this.occupancyByTime()
|
|
|
+ },
|
|
|
+ body5dataconfirm(e) {
|
|
|
+ console.log(e)
|
|
|
+ var date = new Date(e.year + "-" + e.month + "-" + e.day);
|
|
|
+ this.body5data.query.queryDate = parseUnixTime(date, '{y}-{m}-{d}')
|
|
|
+ this.body5data.vue.queryN = parseUnixTime(date, '{y}年{m}月{d}日');
|
|
|
+
|
|
|
+ this.occupancyByDay()
|
|
|
+ },
|
|
|
+ occupancyByTimeBar(init) {
|
|
|
+ if (init) {
|
|
|
+ var date = new Date();
|
|
|
+ //test
|
|
|
+ //this.body3data.query.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-1"
|
|
|
+
|
|
|
+ var endOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0)
|
|
|
+ //this.body3data.query.endTime = parseUnixTime(endOfMonth, '{y}-{m}-{d}')
|
|
|
+
|
|
|
+ }
|
|
|
+ this.jpContentMap.body3 = 0
|
|
|
+ this.body3data.query.companyId = this.companyId
|
|
|
+ this.body3data.query.parkingId = this.parkingId
|
|
|
+ API.occupancyByTimeBar(
|
|
|
+ this.body3data.query
|
|
|
+ ).then((response) => {
|
|
|
+ this.body3data.data = [
|
|
|
+ ...response.data.locksTimeList,
|
|
|
+ // ...response.data.locksTimeList,
|
|
|
+ ];
|
|
|
+
|
|
|
+ if (this.body3data.data.length == 0) {
|
|
|
+ this.jpContentMap.body3 = 1
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.jpContentMap.body3 = 2
|
|
|
+ this.getbody3()
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ durationDistribution() {
|
|
|
+ this.jpContentMap.body4 = 0
|
|
|
+
|
|
|
+ var date = new Date();
|
|
|
+ //test
|
|
|
+ //this.body4data.query.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-1"
|
|
|
+
|
|
|
+ var endOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0)
|
|
|
+ // this.body4data.query.endTime = parseUnixTime(endOfMonth, '{y}-{m}-{d}')
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ this.body4data.query.companyId = this.companyId
|
|
|
+ this.body4data.query.parkingId = this.parkingId
|
|
|
+ API.durationDistribution(
|
|
|
+ this.body4data.query
|
|
|
+ ).then((response) => {
|
|
|
+ this.body4data.data = response.data.distribution;
|
|
|
+
|
|
|
+ if (this.body4data.data.length == 0) {
|
|
|
+ this.jpContentMap.body4 = 1
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.jpContentMap.body4 = 2
|
|
|
+ //this.getbody3()
|
|
|
+ this.getbody4()
|
|
|
+ }
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ occupancyByDay(init) {
|
|
|
+ if (init) {
|
|
|
+ var date = new Date();
|
|
|
+
|
|
|
+ this.body5data.query.queryDate = parseUnixTime(date, '{y}-{m}-{d}')
|
|
|
+ this.body5data.vue.queryN = parseUnixTime(date, '{y}年{m}月{d}日');
|
|
|
+
|
|
|
+ }
|
|
|
+ this.jpContentMap.body5 = 0
|
|
|
+ this.body5data.query.companyId = this.companyId
|
|
|
+ this.body5data.query.parkingId = this.parkingId
|
|
|
+ API.occupancyByDay(
|
|
|
+ this.body5data.query
|
|
|
+ ).then((response) => {
|
|
|
+ this.body5data.data = [
|
|
|
+ ...response.data.locksTimeList,
|
|
|
+
|
|
|
+ ];
|
|
|
+
|
|
|
+ if (this.body5data.data.length == 0) {
|
|
|
+ this.jpContentMap.body5 = 1
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.jpContentMap.body5 = 2
|
|
|
+ //this.getbody3()
|
|
|
+ this.getbody5()
|
|
|
+ }
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ occupancyByTime(init) {
|
|
|
+ if (init) {
|
|
|
+ var date = new Date();
|
|
|
+
|
|
|
+ this.body2data.vue.queryN = date.getFullYear() + "年" + (date.getMonth() + 1) + '月';
|
|
|
+ this.body2data.query.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-1"
|
|
|
+
|
|
|
+ var endOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0)
|
|
|
+ this.body2data.query.endTime = parseUnixTime(endOfMonth, '{y}-{m}-{d}')
|
|
|
+
|
|
|
+ }
|
|
|
+ this.jpContentMap.body2 = 0
|
|
|
+ this.body2data.query.companyId = this.companyId
|
|
|
+ this.body2data.query.parkingId = this.parkingId
|
|
|
+ API.occupancyByTime(
|
|
|
+ this.body2data.query
|
|
|
+ ).then((response) => {
|
|
|
+ this.body2data.data = [
|
|
|
+ ...response.data.locksTimeList,
|
|
|
+ // ...response.data.locksTimeList,
|
|
|
+ ];
|
|
|
+
|
|
|
+ if (this.body2data.data.length == 0) {
|
|
|
+ this.jpContentMap.body2 = 1
|
|
|
+
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.jpContentMap.body2 = 2
|
|
|
+
|
|
|
+ this.getbody2()
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getbody5() {
|
|
|
+ // 颜色映射
|
|
|
+ var colorMap = [
|
|
|
+
|
|
|
+ '#FFA500',
|
|
|
+ '#00FF00',
|
|
|
+ '#F44336',
|
|
|
+ '#E91E63',
|
|
|
+ '#9C27B0',
|
|
|
+ '#673AB7',
|
|
|
+ '#3F51B5',
|
|
|
+ '#2196F3',
|
|
|
+ '#03A9F4',
|
|
|
+ '#00BCD4',
|
|
|
+ '#009688',
|
|
|
+ '#CDDC39',
|
|
|
+ '#FFEB3B',
|
|
|
+ '#FFC107',
|
|
|
+ '#FF9800',
|
|
|
+ '#FF5722',
|
|
|
+ '#795548',
|
|
|
+ '#607D8B'
|
|
|
+ ];
|
|
|
+
|
|
|
+ var key = "body5echart"
|
|
|
+ var dataApi = this.body5data.data;
|
|
|
+
|
|
|
+ var head = 40 * (parseInt(dataApi.length / 4)) + 20
|
|
|
+ var body = 20 * (parseInt(dataApi.length))
|
|
|
+
|
|
|
+ var myChart = this.echartsList[key];
|
|
|
+ if (!myChart) {
|
|
|
+ myChart = echarts.init(document.getElementById(key), null, {
|
|
|
+ width: uni.upx2px(300 * 2),
|
|
|
+ height: uni.upx2px((170 + head) * 2 + body)
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ myChart.clear()
|
|
|
+ var dataName = []
|
|
|
+ var dataTime = []
|
|
|
+ var series = []
|
|
|
+ var i = 0;
|
|
|
+ var isPush=false
|
|
|
+ dataApi.forEach(item => {
|
|
|
+
|
|
|
+ dataName.push(item.lockName)
|
|
|
+ var itemList = []
|
|
|
+ var j = 0
|
|
|
+ item.timeUseList.forEach(item2 => {
|
|
|
+
|
|
|
+ Object.keys(item2).forEach(key1 => {
|
|
|
+ console.log(item2[key1])
|
|
|
+ if (item2[key1]) {
|
|
|
+ var ob = [j, i, i]
|
|
|
+ itemList.push(ob)
|
|
|
+ isPush=true
|
|
|
+ } else {
|
|
|
+ // var ob=[j,i,i]
|
|
|
+ // itemList.push(ob)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ j += 1;
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ var obj = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ },
|
|
|
+ formatter: function(params) {
|
|
|
+ console.log(params)
|
|
|
+ var result = params.marker+params.name +'点<br/>' + params.seriesName + ' 占用 ';
|
|
|
+
|
|
|
+ return result;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //silent: true,
|
|
|
+ type: 'custom',
|
|
|
+ "name": item.lockName,
|
|
|
+ // tooltip: {
|
|
|
+ // //trigger: 'none',
|
|
|
+ // show: false
|
|
|
+ // },
|
|
|
+ itemStyle: {
|
|
|
+ color: colorMap[i % colorMap.length]
|
|
|
+ },
|
|
|
+ renderItem: function(params, api) {
|
|
|
+ var xIndex = api.value(0); // x轴索引
|
|
|
+ var yIndex = api.value(1); // y轴索引
|
|
|
+ var value = api.value(2); // 值
|
|
|
+
|
|
|
+ // 获取颜色
|
|
|
+ var color = colorMap[value % colorMap.length] || '#ffffff';
|
|
|
+
|
|
|
+ // 计算矩形的位置和大小
|
|
|
+ var x = api.coord([xIndex, yIndex])[0];
|
|
|
+ var y = api.coord([xIndex, yIndex])[1];
|
|
|
+ var width = api.size([1, 0])[0];
|
|
|
+ var height = api.size([0, 1])[1];
|
|
|
+
|
|
|
+ return {
|
|
|
+ type: 'rect',
|
|
|
+
|
|
|
+ shape: {
|
|
|
+ x: x - uni.upx2px(25),
|
|
|
+ y: y - uni.upx2px(20),
|
|
|
+ width: width,
|
|
|
+ height: 20,
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ fill: color
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+ obj.data = itemList
|
|
|
+ series.push(obj)
|
|
|
+ i += 1;
|
|
|
+
|
|
|
+ })
|
|
|
+ dataApi[0].timeUseList.forEach(item => {
|
|
|
+
|
|
|
+ Object.keys(item).forEach(key1 => {
|
|
|
+ dataTime.push(key1)
|
|
|
+ });
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ var option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 30 + head,
|
|
|
+ left: -10+(isPush?0:20),
|
|
|
+ right: 0,
|
|
|
+ bottom: 0,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: dataName
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: dataTime
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'category',
|
|
|
+
|
|
|
+ },
|
|
|
+ series: series
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ myChart.setOption(option);
|
|
|
+ this.echartsList[key] = myChart;
|
|
|
+ },
|
|
|
+ getbody4() {
|
|
|
+ var key = "body4pie1"
|
|
|
+ var myChart = this.echartsList[key];
|
|
|
+ if (!myChart) {
|
|
|
+ myChart = echarts.init(document.getElementById(key), null, {
|
|
|
+ width: uni.upx2px(300 * 2),
|
|
|
+ height: uni.upx2px(170 * 2)
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ myChart.clear()
|
|
|
+ var dataApi = this.body4data.data;
|
|
|
+
|
|
|
+ var data = []
|
|
|
+ var num = 0
|
|
|
+ var sum = 0
|
|
|
+ Object.keys(dataApi).forEach(key1 => {
|
|
|
+ num += dataApi[key1]
|
|
|
+ });
|
|
|
+ var i = 0
|
|
|
+ Object.keys(dataApi).forEach(key1 => {
|
|
|
+ var value = dataApi[key1]
|
|
|
+ if(value!=0){
|
|
|
+
|
|
|
+
|
|
|
+ var obj = {
|
|
|
+ value: value,
|
|
|
+ name: key1
|
|
|
+ }
|
|
|
+
|
|
|
+ if (num != 0) {
|
|
|
+ var valueInt = parseInt(value / num * 100)
|
|
|
+ if (valueInt == 0 && value != 0) {
|
|
|
+ valueInt = 1
|
|
|
+ }
|
|
|
+ sum += valueInt;
|
|
|
+
|
|
|
+ if (i == Object.keys(dataApi).length - 1) {
|
|
|
+ if (sum != 100) {
|
|
|
+ valueInt += (100 - sum)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ obj.name += '\n' + (valueInt) + '%'
|
|
|
+ }
|
|
|
+ data.push(obj)
|
|
|
+ }
|
|
|
+ i++;
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ var option = {
|
|
|
+
|
|
|
+ grid: {
|
|
|
+ top: 20,
|
|
|
+ left: 0,
|
|
|
+ right: 0,
|
|
|
+ bottom: 0,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['80%', '50%'],
|
|
|
+ radius: [45, 60],
|
|
|
+ data: data
|
|
|
+
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ console.log(option)
|
|
|
+ myChart.setOption(option);
|
|
|
+ this.echartsList[key] = myChart;
|
|
|
+ },
|
|
|
+ getbody3() {
|
|
|
+ var key = "body3bar1"
|
|
|
+ var myChart = this.echartsList[key];
|
|
|
+ if (!myChart) {
|
|
|
+ myChart = echarts.init(document.getElementById(key), null, {
|
|
|
+ width: uni.upx2px(300 * 2),
|
|
|
+ height: uni.upx2px(170 * 2)
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ var dataApi = this.body3data.data;
|
|
|
+
|
|
|
+ myChart.clear()
|
|
|
+
|
|
|
+ var data1 = []
|
|
|
+ var data2 = [] //useDays
|
|
|
+ var i = 0
|
|
|
+ dataApi[0].timeUseList.forEach(item => {
|
|
|
+
|
|
|
+ Object.keys(item).forEach(key1 => {
|
|
|
+
|
|
|
+ data1.push(key1 + '点')
|
|
|
+ var num = 0
|
|
|
+
|
|
|
+ dataApi.forEach(item2 => {
|
|
|
+ num += item2.timeUseList[i][key1].useDays
|
|
|
+
|
|
|
+ })
|
|
|
+ data2.push(num)
|
|
|
+ });
|
|
|
+ i += 1
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ var axisLabel = {
|
|
|
+ rotate: 40,
|
|
|
+ interval: 0,
|
|
|
+ textStyle: {
|
|
|
+ color: "#333"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (data1.length < 7) {
|
|
|
+ axisLabel = {
|
|
|
+ interval: 0,
|
|
|
+ textStyle: {
|
|
|
+ color: "#333"
|
|
|
+ },
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ axisLabel.interval = 0;
|
|
|
+ }
|
|
|
+ var option = {
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: data1,
|
|
|
+ axisLabel: axisLabel,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ },
|
|
|
+ formatter: function(params) {
|
|
|
+ var result = params[0].name + '<br/>';
|
|
|
+ for (var i = 0; i < params.length; i++) {
|
|
|
+ result += params[i].marker+ ' ' + params[i].value + '次<br/>';
|
|
|
+ }
|
|
|
+ return result;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: 20,
|
|
|
+ left: 0,
|
|
|
+ right: 0,
|
|
|
+ bottom: 0,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ itemStyle: {
|
|
|
+ color: "#5A88E5"
|
|
|
+ },
|
|
|
+ data: data2,
|
|
|
+ type: 'bar'
|
|
|
+ }]
|
|
|
+ };
|
|
|
+
|
|
|
+ myChart.setOption(option);
|
|
|
+ this.echartsList[key] = myChart;
|
|
|
+ },
|
|
|
+ getbody2() {
|
|
|
+ var key = "body2line1"
|
|
|
+ var myChart = this.echartsList[key];
|
|
|
+ var dataApi = this.body2data.data;
|
|
|
+
|
|
|
+ var head = 20 * (parseInt(dataApi.length / 4)) + 20
|
|
|
+
|
|
|
+
|
|
|
+ if (!myChart) {
|
|
|
+ myChart = echarts.init(document.getElementById(key), null, {
|
|
|
+ width: uni.upx2px(300 * 2),
|
|
|
+ height: uni.upx2px((170 + head) * 2)
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ myChart.clear()
|
|
|
+
|
|
|
+ var data1 = []
|
|
|
+ var series = [];
|
|
|
+
|
|
|
+ dataApi.forEach(item => {
|
|
|
+
|
|
|
+ var obj = {
|
|
|
+ name: item.lockName,
|
|
|
+ //areaStyle: {},
|
|
|
+ // itemStyle: {
|
|
|
+ // color: "#BBD4FB"
|
|
|
+ // },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'top',
|
|
|
+ // color: "#307AF6"
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
+ type: 'line'
|
|
|
+ }
|
|
|
+ if (dataApi.length == 1) {
|
|
|
+ obj.label.color = "#307AF6"
|
|
|
+ obj.areaStyle = {}
|
|
|
+ obj.itemStyle = {
|
|
|
+ color: "#BBD4FB"
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ item.timeUseList.forEach(item2 => {
|
|
|
+ Object.keys(item2).forEach(key1 => {
|
|
|
+
|
|
|
+ obj.data.push(item2[key1].useRate)
|
|
|
+ });
|
|
|
+ })
|
|
|
+ series.push(obj)
|
|
|
+ })
|
|
|
+ dataApi[0].timeUseList.forEach(item => {
|
|
|
+
|
|
|
+ Object.keys(item).forEach(key1 => {
|
|
|
+ data1.push(key1)
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ var axisLabel = {
|
|
|
+ rotate: 40,
|
|
|
+ interval: 0,
|
|
|
+ textStyle: {
|
|
|
+ color: "#333"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (data1.length < 7) {
|
|
|
+ axisLabel = {
|
|
|
+ interval: 0,
|
|
|
+ textStyle: {
|
|
|
+ color: "#333"
|
|
|
+ },
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ axisLabel.interval = 0;
|
|
|
+ }
|
|
|
+ var option = {
|
|
|
+ legend: {},
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: data1,
|
|
|
+ axisLabel: axisLabel,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ },
|
|
|
+
|
|
|
+ formatter: function(params) {
|
|
|
+ var result = params[0].name + '点<br/>';
|
|
|
+ for (var i = 0; i < params.length; i++) {
|
|
|
+ result += params[i].marker+params[i].seriesName + ': ' + params[i].value + '%<br/>';
|
|
|
+ }
|
|
|
+ return result;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: (20 + head),
|
|
|
+ left: 0,
|
|
|
+ right: 0,
|
|
|
+ bottom: 0,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ series: series
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ myChart.setOption(option);
|
|
|
+ this.echartsList[key] = myChart;
|
|
|
+ },
|
|
|
+ getbody1pie1() {
|
|
|
+ var img = require("@/assets/img/index/pie1-1.svg")
|
|
|
+ var key = "body1pie1"
|
|
|
+ var myChart = this.echartsList[key];
|
|
|
+ if (!myChart) {
|
|
|
+ myChart = echarts.init(document.getElementById(key), null, {
|
|
|
+ width: uni.upx2px(88),
|
|
|
+ height: uni.upx2px(88)
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ myChart.clear()
|
|
|
+ var option = {
|
|
|
+
|
|
|
+ series: [{
|
|
|
+ silent: true,
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['70%', '100%'],
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+
|
|
|
+ data: [{
|
|
|
+ value: this.body1data.data.useNum,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#AAAAAA'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: this.body1data.data.idleNum,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#53B56B'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }],
|
|
|
+ grid: {
|
|
|
+ top: 0,
|
|
|
+ left: 0,
|
|
|
+ right: 0,
|
|
|
+ bottom: 0,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ graphic: [{
|
|
|
+ type: 'image',
|
|
|
+ id: 'logo',
|
|
|
+ left: 'center',
|
|
|
+ top: 'center',
|
|
|
+ style: {
|
|
|
+ image: img, // 图片路径
|
|
|
+ width: uni.upx2px(40),
|
|
|
+ height: uni.upx2px(40)
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ myChart.setOption(option);
|
|
|
+ this.echartsList[key] = myChart;
|
|
|
+ },
|
|
|
+ getbody1pie2() {
|
|
|
+ var img = require("@/assets/img/index/pie1-2.svg")
|
|
|
+
|
|
|
+ var key = "body1pie2"
|
|
|
+ var myChart = this.echartsList[key];
|
|
|
+ if (!myChart) {
|
|
|
+ myChart = echarts.init(document.getElementById(key), null, {
|
|
|
+ width: uni.upx2px(88),
|
|
|
+ height: uni.upx2px(88)
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ myChart.clear()
|
|
|
+ var option = {
|
|
|
+
|
|
|
+ series: [{
|
|
|
+ silent: true,
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['70%', '100%'],
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+
|
|
|
+ data: [{
|
|
|
+ value: this.body1data.data.loseNum,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#AAAAAA'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: this.body1data.data.normalNum,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#53B56B'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: this.body1data.data.errorNum,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#EF8132'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //, {
|
|
|
+ // value: 735,
|
|
|
+ // itemStyle: {
|
|
|
+ // color: '#DC4441'
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ ]
|
|
|
+ }],
|
|
|
+ grid: {
|
|
|
+ top: 0,
|
|
|
+ left: 0,
|
|
|
+ right: 0,
|
|
|
+ bottom: 0,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ graphic: [{
|
|
|
+ type: 'image',
|
|
|
+ id: 'logo',
|
|
|
+ left: 'center',
|
|
|
+ top: 'center',
|
|
|
+ style: {
|
|
|
+ image: img, // 图片路径
|
|
|
+ width: uni.upx2px(40),
|
|
|
+ height: uni.upx2px(40)
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }
|
|
|
+
|
|
|
+ myChart.setOption(option);
|
|
|
+ this.echartsList[key] = myChart;
|
|
|
+ },
|
|
|
+ getbody1pie3() {
|
|
|
+ var img = require("@/assets/img/index/pie1-3.svg")
|
|
|
+
|
|
|
+ var key = "body1pie3"
|
|
|
+ var myChart = this.echartsList[key];
|
|
|
+ if (!myChart) {
|
|
|
+ myChart = echarts.init(document.getElementById(key), null, {
|
|
|
+ width: uni.upx2px(88),
|
|
|
+ height: uni.upx2px(88)
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ myChart.clear()
|
|
|
+ var option = {
|
|
|
+
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ silent: true, // 禁用交互效果
|
|
|
+
|
|
|
+ radius: ['70%', '100%'],
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+
|
|
|
+ data: [{
|
|
|
+ value: 735,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#53B56B'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 735,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#EF8375'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 735,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#307AF6'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }],
|
|
|
+ grid: {
|
|
|
+ top: 0,
|
|
|
+ left: 0,
|
|
|
+ right: 0,
|
|
|
+ bottom: 0,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ graphic: [{
|
|
|
+ type: 'image',
|
|
|
+ id: 'logo',
|
|
|
+ left: 'center',
|
|
|
+ top: 'center',
|
|
|
+ style: {
|
|
|
+ image: img, // 图片路径
|
|
|
+ width: uni.upx2px(40),
|
|
|
+ height: uni.upx2px(40)
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ myChart.setOption(option);
|
|
|
+ this.echartsList[key] = myChart;
|
|
|
+ },
|
|
|
+
|
|
|
+ getfindByOpenId() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API.findByOpenId({
|
|
|
+ openId: this.jphelp.getOpenId(),
|
|
|
+ }).then((response) => {
|
|
|
+
|
|
|
+ uni.hideLoading();
|
|
|
+ this.isReady = true;
|
|
|
+ this.loginset(response)
|
|
|
+ try {
|
|
|
+ this.init()
|
|
|
+ } catch (e) {
|
|
|
+
|
|
|
+ uni.showToast({
|
|
|
+ title: e,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+ title: error,
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ uni.redirectTo({
|
|
|
+ url: '/pages/login/login'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .color307AF6 {
|
|
|
+ color: #307AF6
|
|
|
+ }
|
|
|
+
|
|
|
+ .color53B56B {
|
|
|
+ color: #53B56B
|
|
|
+ }
|
|
|
+
|
|
|
+ .colorAAAAAA {
|
|
|
+ color: #AAAAAA
|
|
|
+ }
|
|
|
+
|
|
|
+ .colorEF8132 {
|
|
|
+ color: #EF8132
|
|
|
+ }
|
|
|
+
|
|
|
+ .colorDC4441 {
|
|
|
+ color: #DC4441
|
|
|
+ }
|
|
|
+
|
|
|
+ .colorEF8375 {
|
|
|
+ color: #EF8375
|
|
|
+ }
|
|
|
+
|
|
|
+ .body1pie-table {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ .tr {
|
|
|
+ .td1 {
|
|
|
+ padding-right: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+
|
|
|
+ .td2 {
|
|
|
+
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .td3 {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .td4 {
|
|
|
+ width: 120px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // td{
|
|
|
+ // padding-right: 24rpx;
|
|
|
+
|
|
|
+ // }
|
|
|
+ .body1pie {}
|
|
|
+
|
|
|
+ .body1pie-num {
|
|
|
+ margin: 0 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 导航栏
|
|
|
+ .navbar {
|
|
|
+
|
|
|
+ box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
|
|
|
+ background-color: rgba(22, 119, 255, 1);
|
|
|
+ color: #fff;
|
|
|
+ line-height: 88rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 32rpx;
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 999999;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .main {
|
|
|
+ border-radius: 16px 16px 0px 0px;
|
|
|
+ background: linear-gradient(180deg, rgba(242, 244, 246, 1) 61%, rgba(255, 255, 255, 0) 100%);
|
|
|
+ margin-top: -24rpx;
|
|
|
+ padding: 32rpx;
|
|
|
+
|
|
|
+ .statistics {
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ box-shadow: 0px 1px 6px 0px rgba(0, 59, 142, 0.05);
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ padding: 40rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ border-radius: 999px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .change {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .change-img {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ text {
|
|
|
+
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid rgba(187, 187, 187, 1);
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+
|
|
|
+ font-size: 24rpx;
|
|
|
+ padding: 1px 8rpx;
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .change {
|
|
|
+ margin-left: 16rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #838383;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .check-all {
|
|
|
+ margin-left: auto;
|
|
|
+ color: rgba(131, 131, 131, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .statistics-end {
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabs-box2 {
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ padding-right: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .tabs-box-other {
|
|
|
+ padding-bottom: 12rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabs-box {
|
|
|
+ padding: 42rpx 0;
|
|
|
+ margin-top: 66rpx;
|
|
|
+ padding-right: 32rpx;
|
|
|
+ background-color: rgba(22, 119, 255, 1);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .tabs {
|
|
|
+ width: 97%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .more {
|
|
|
+ padding-right: 12rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabs-box-other {
|
|
|
+ padding-bottom: 12rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 70rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: rgb(255, 255, 255);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .body6main {
|
|
|
+ .line {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .abnormal-item:last-of-type {
|
|
|
+ border-bottom: none !important;
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .abnormal-item {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 16rpx;
|
|
|
+ border-bottom: 1px solid rgba(245, 245, 245, 1);
|
|
|
+
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+ .level {
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ padding: 4rpx 8rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ margin-right: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .level1 {
|
|
|
+ background: red;
|
|
|
+ }
|
|
|
+
|
|
|
+ .level2 {
|
|
|
+ background-color: rgba(255, 123, 0, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-weight: bold;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .date {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-value {
|
|
|
+ text-align: right;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .more {
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value1 {
|
|
|
+ font-weight: bold;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .value2 {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .body7main {
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(245, 245, 245, 1);
|
|
|
+ padding: 32rpx;
|
|
|
+
|
|
|
+ .line {
|
|
|
+ display: flex;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ .goto{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .item-body{
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 28rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .item-name{
|
|
|
+ margin-right: 8rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .statusN{
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 24rpx;
|
|
|
+ padding: 2rpx 8rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+ .statusN1 {
|
|
|
+
|
|
|
+ color: rgba(0,185,98,1);
|
|
|
+ border: 1px solid rgba(0,185,98,1);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .statusN0 {
|
|
|
+ color: rgba(51,51,51,1);
|
|
|
+ border: 1px solid rgba(119,119,119,1);
|
|
|
+
|
|
|
+ }
|
|
|
+ .item-tags {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ border-radius: 4px;
|
|
|
+ white-space: pre;
|
|
|
+ background-color: rgba(39, 177, 72, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 20rpx;
|
|
|
+ padding: 2rpx 8rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag1 {
|
|
|
+ background-color: rgba(22, 119, 255, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag2 {
|
|
|
+ background-color: rgba(129, 97, 255, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .lockStatus {
|
|
|
+
|
|
|
+ background-color: rgba(153, 153, 153, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .lockStatus2 {
|
|
|
+ background-color: #03A9F4
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .body8main{
|
|
|
+
|
|
|
+ .line{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ background: #fff;
|
|
|
+ padding:16rpx 0rpx;
|
|
|
+ border-top: 1px solid rgba(232,232,232,1);
|
|
|
+ .data{
|
|
|
+ .view1{
|
|
|
+ color: rgba(16,16,16,1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .view3{
|
|
|
+ color: rgba(119,119,119,1);
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .goto{
|
|
|
+ display: flex;
|
|
|
+ font-size: 32rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ .status1{
|
|
|
+ color:#FF5100
|
|
|
+ }
|
|
|
+ .status2{
|
|
|
+ color: rgba(22,119,255,1);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .line:first-child{
|
|
|
+ border-top: 0px ;
|
|
|
+ padding-top: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
zkx