949 lines
24 KiB
Vue
949 lines
24 KiB
Vue
<template>
|
|
<view>
|
|
<view class="topTab">
|
|
<tabHeader title="吊车监控"></tabHeader>
|
|
</view>
|
|
<view class="select-box">
|
|
<searchSelect :disabled="false" @change="chosenPro"
|
|
v-model="proId" :localdata="proList"
|
|
dataKey="name" dataValue="id" placeholder="请选择工程"
|
|
clearable="false" :filterable="false" ></searchSelect>
|
|
</view>
|
|
<view class="map-box">
|
|
<image src="@/static/img/monitor.png" mode="" style="width: 100%;height: 100%;"></image>
|
|
</view>
|
|
<view class="page-content">
|
|
|
|
<view class="search-box">
|
|
<view class="search">
|
|
<eselect class="search-gt"
|
|
:disabled="false"
|
|
v-model="powerId"
|
|
:options="powerList"
|
|
value_key="id" label_key="name"
|
|
@change="chosenPower"
|
|
></eselect>
|
|
<eselect class="search-team"
|
|
:disabled="false"
|
|
v-model="teamId"
|
|
:options="teamList"
|
|
value_key="id" label_key="name"
|
|
@change="changeTeam"
|
|
></eselect>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 设备列表 -->
|
|
<view class="devices-box">
|
|
<!-- <u-list @scrolltolower="scrolltolower" enableFlex="true" height="30vh" class="list-box">
|
|
<u-list-item class="list-item" v-for="(item, index) in listData" :key="index"> -->
|
|
<view class="list-box">
|
|
<view class="list-item" v-for="(item, index) in listData" :key="index">
|
|
<view class="item-content" @click="handleMonitor(item)">
|
|
<view class="image-box">
|
|
<image src="@/static/img/carIcon.jpg" mode="" style="width: 100%;height: 100%;"></image>
|
|
</view>
|
|
<view class="content-box">
|
|
<view class="item-text">
|
|
<text class="label">{{item.teamLeader}} {{item.leaderPhone}} </text>
|
|
</view>
|
|
<view class="item-text">
|
|
<text class="label">{{item.devName}}</text>
|
|
</view>
|
|
<view class="item-text">
|
|
<text class="label">{{item.devCode}}</text>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="bottom-box">
|
|
<view class="tab-box">
|
|
<view class="tab-item" :class="currentTabIndex == 0 ? 'active' : ''" @click="currentTabIndex = 0">
|
|
视频监控
|
|
<view class="activeLine" v-if="currentTabIndex == 0"></view>
|
|
</view>
|
|
<view class="tab-item" :class="currentTabIndex == 1 ? 'active' : ''" @click="currentTabIndex = 1">
|
|
近电预警
|
|
<view class="activeLine" v-if="currentTabIndex == 1"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="video-box" v-if="currentTabIndex == 0">
|
|
<view class="video-item">
|
|
<web-view :src="webUrl1" v-if="currentTabIndex == 0" :fullscreen="false" :webview-styles="webviewStyles1"></web-view>
|
|
</view>
|
|
<!-- <view class="video-item">
|
|
<web-view :src="webUrl2" v-if="currentTabIndex == 0" :fullscreen="false" :webview-styles="webviewStyles2"></web-view>
|
|
</view>
|
|
<view class="video-item">
|
|
<web-view :src="webUrl3" v-if="currentTabIndex == 0" :fullscreen="false" :webview-styles="webviewStyles3"></web-view>
|
|
</view>
|
|
<view class="video-item">
|
|
<web-view :src="webUrl4" v-if="currentTabIndex == 0" :fullscreen="false" :webview-styles="webviewStyles4"></web-view>
|
|
</view> -->
|
|
<!-- <view class="video-item">
|
|
<image src="@/static/img/monitor2.jpg" mode="" style="width: 100%;height: 100%;"></image>
|
|
</view> -->
|
|
</view>
|
|
<view v-if="currentTabIndex == 1">
|
|
<view class="alarm-box" v-if="!showSetting">
|
|
<view class="alarm-devices">
|
|
<view class="devices-item" v-for="(item, index) in devicesData" :key="index">
|
|
<view style="display: flex;align-items: center;">
|
|
<image src="@/static/img/devicesIcon.png" mode="" style="width: 40rpx;height: 30rpx;margin:0rpx 10rpx;"></image>
|
|
<text>{{item.devName}}</text>
|
|
</view>
|
|
<view style="display: flex;align-items: center;">
|
|
<image src="@/static/img/electrical1.png" mode="" style="width: 40rpx;height: 20rpx;margin-left: 30rpx;"></image>
|
|
<text style="margin-left: 20rpx;">{{item.electricQuantity}}</text>
|
|
</view>
|
|
<view class="">
|
|
<image src="@/static/img/setting.png" mode="" style="width: 30rpx;height: 30rpx;margin-left: 30rpx;" @click="setting(item)"></image>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<u-list @scrolltolower="scrolltolower" height="18vh" class="alarm-list">
|
|
<u-list-item v-for="(item, index) in warnData" :key="index">
|
|
<view class="alarm-item">
|
|
<view style="width: 33%;text-align: center;">{{item.devName}}</view>
|
|
<view style="width: 33%;text-align: center;">{{item.warnTime}}</view>
|
|
<view style="width: 33%;text-align: center;">{{item.warnContent}}</view>
|
|
</view>
|
|
</u-list-item>
|
|
</u-list>
|
|
</view>
|
|
<!-- 近电设备配置 -->
|
|
<view class="setting-box" v-if="showSetting">
|
|
<view class="setting-content">
|
|
<view class="setting-item" v-for="(item, index) in configItems" :key="index">
|
|
<!-- <view class="setting-item-sub">配置{{index+1}}</view> -->
|
|
<!-- <view class="setting-item-sub">
|
|
<view class="sub-label">线路属性：</view>
|
|
<view class="sub-box">
|
|
<radio-group @change="radioChange($event,index)" style="display: flex;">
|
|
<view style="margin-right: 50rpx;display: flex;align-items: center;" v-for="(item1, index1) in radioList" :key="index1">
|
|
<radio :value="item1.id" :checked="item1.id==item.configType"/>{{item1.name}}
|
|
</view>
|
|
</radio-group>
|
|
</view>
|
|
</view>
|
|
<view class="setting-item-sub">
|
|
<view class="sub-label">电压等级：</view>
|
|
<view class="sub-box">
|
|
<view class="sub-box-item" v-for="(sItem, sIndex) in item.levelList" :key="sIndex"
|
|
@click="chosenLevel(sItem.id,index)" :class="item.voltageLevel == sItem.id ? 'active' : ''"
|
|
>{{sItem.name}}</view>
|
|
</view>
|
|
</view> -->
|
|
<view class="setting-item-sub">
|
|
<view class="sub-label">报警距离：</view>
|
|
<view class="sub-box" style="width: 40%;display: flex;align-items: center;">
|
|
<!-- <input class="uni-input" style="border: 2rpx solid #F5F5F5;" type="number" :value="item.distance" maxlength="10" placeholder="请输入报警距离" />米 -->
|
|
<u--input v-model="item.distance" type="number" placeholder="请输入报警距离" border="surround" maxlength="3" fontSize="14px" clearable></u--input>米
|
|
</view>
|
|
<!-- <view v-if="index==configItems.length-1" @click="addItem" style="background: #409EFF;color: #FFF;padding:4rpx 8rpx;border-radius: 10rpx;margin-left: 40rpx;">
|
|
添加配置
|
|
</view> -->
|
|
<view v-if="index<configItems.length-1" @click="delItem(index)" style="background: red;color: #FFF;padding:4rpx 8rpx;border-radius: 10rpx;margin-left: 40rpx;">
|
|
删除配置
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="btn-box">
|
|
<view class="btn1" @click="showSetting=false">取消</view>
|
|
<view class="btn2" @click="saveSetting">保存</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<!-- 确认 -->
|
|
<u-modal :show="showModal" :title="modalTitle" width="450rpx"
|
|
@cancel="cancel" @confirm="confirm" :content='content'
|
|
:showCancelButton="true" :buttonReverse="true"></u-modal>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { getProList,getPowerLists,getTeamListsByDzDevice,getDzWarnList,getJdList,getJdWarnList,getLineStats,getVoltageLevelByLineStats,configJdDevice,getConfigJdDevice } from '@/service/url.js';
|
|
import tabHeader from '@/components/tab-Header.vue';
|
|
import eselect from '@/components/eselect.vue';
|
|
import searchSelect from '@/components/search-select.vue';
|
|
import AES from "@/utils/cryptoJs/aes.js";
|
|
import { nextTick } from "vue";
|
|
export default {
|
|
components: {
|
|
tabHeader,
|
|
eselect,searchSelect
|
|
},
|
|
data() {
|
|
return {
|
|
proList:[],
|
|
proId:'',
|
|
powerList:[],
|
|
powerId:'',
|
|
teamList:[],
|
|
teamId:'',
|
|
currentTabIndex:0,
|
|
showModal:false,
|
|
modalTitle:'发起验证',
|
|
content:'确定发起验证?',
|
|
listData:[],
|
|
devicesData:[],
|
|
webUrl:'',
|
|
webUrl1:'',
|
|
webUrl2:'',
|
|
webUrl3:'',
|
|
webUrl4:'',
|
|
webviewStyles1: {
|
|
progress: false,
|
|
width:'95%',
|
|
height:'230',
|
|
bottom:'20',
|
|
left:'10'
|
|
},
|
|
webviewStyles2: {
|
|
progress: false,
|
|
width:'180',
|
|
height:'110',
|
|
bottom:'150',
|
|
right:'10'
|
|
},
|
|
webviewStyles3: {
|
|
progress: false,
|
|
width:'180',
|
|
height:'110',
|
|
bottom:'20',
|
|
left:'10'
|
|
},
|
|
webviewStyles4: {
|
|
progress: false,
|
|
width:'180',
|
|
height:'110',
|
|
bottom:'20',
|
|
right:'10'
|
|
},
|
|
warnData:[],
|
|
page:1,
|
|
showSetting:false,
|
|
configDevId:'',
|
|
configDevCode:'',
|
|
configItems:[],
|
|
radioList:[],
|
|
filterForm: {
|
|
temporaryName:'',
|
|
userPhone: '',
|
|
userUnit: '',
|
|
userName: '',
|
|
IntervieweeDepartment: '',
|
|
temporaryTime: '',
|
|
reason: '',
|
|
remarks:'',
|
|
imageUrl:'',
|
|
|
|
},
|
|
};
|
|
},
|
|
watch: {
|
|
currentTabIndex: function(newVal, oldVal) {
|
|
this.currentTabIndex = newVal;
|
|
if (this.currentTabIndex==0) {
|
|
// this.getDzWarnList()
|
|
}else if (this.currentTabIndex==1) {
|
|
this.getJdList();
|
|
this.page = 1
|
|
this.getJdWarnList()
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
onLoad(options) {
|
|
this.currentTabIndex = options.currentTabIndex || 0;
|
|
this.getProList()
|
|
// this.getDzWarnList()
|
|
},
|
|
onShow(){
|
|
// #ifdef APP-PLUS
|
|
this.webUrl='/hybrid/html/VideoRealPlay.html';
|
|
// #endif
|
|
// #ifdef H5
|
|
this.webUrl='/static/html/VideoRealPlay.html';
|
|
// #endif
|
|
},
|
|
methods: {
|
|
getProList(){
|
|
let obj = {}
|
|
let param = {
|
|
// encryptedData: AES.encrypt(JSON.stringify(obj))
|
|
encryptedData: JSON.stringify(obj)
|
|
}
|
|
this.$http.get(getProList,obj).then(res => {
|
|
if (res) {
|
|
if(res.code == 200){
|
|
this.proList=res.data;
|
|
this.proId=this.proList[0].id;
|
|
this.getPowerLists(this.proId)
|
|
}
|
|
}
|
|
}).catch(error => {})
|
|
},
|
|
chosenPro(e){
|
|
this.getPowerLists(e.id)
|
|
},
|
|
getPowerLists(id){
|
|
let obj = {
|
|
"proId":id
|
|
}
|
|
let param = {
|
|
// encryptedData: AES.encrypt(JSON.stringify(obj))
|
|
encryptedData: JSON.stringify(obj)
|
|
}
|
|
this.$http.get(getPowerLists,obj).then(res => {
|
|
if (res) {
|
|
// console.log(res)
|
|
if(res.code == 200){
|
|
this.powerList=res.data;
|
|
if(this.powerList.length>0){
|
|
this.powerId=this.powerList[0].id;
|
|
this.getTeamListsByDzDevice(this.powerId)
|
|
}else{
|
|
this.powerId="";
|
|
this.getTeamListsByDzDevice(this.powerId)
|
|
}
|
|
|
|
}
|
|
}
|
|
}).catch(error => {
|
|
console.log(error)
|
|
// this.$utils.showHttpError(error)
|
|
})
|
|
|
|
},
|
|
chosenPower(id){
|
|
console.log(id)
|
|
this.getTeamListsByDzDevice(id)
|
|
},
|
|
getTeamListsByDzDevice(id){
|
|
let obj = {
|
|
"towerId":id
|
|
}
|
|
let param = {
|
|
// encryptedData: AES.encrypt(JSON.stringify(obj))
|
|
encryptedData: JSON.stringify(obj)
|
|
}
|
|
this.$http.get(getTeamListsByDzDevice,obj).then(res => {
|
|
if (res) {
|
|
console.log(res,1111)
|
|
if(res.code == 200){
|
|
if(res.data?.length>0){
|
|
this.teamList=res.data;
|
|
this.teamId=this.teamList[0].id;
|
|
this.getDzWarnList()
|
|
this.getJdList()
|
|
this.page = 1
|
|
this.warnData=[]
|
|
this.getJdWarnList()
|
|
// this.getTeamListsByDzDevice(this.teamId)
|
|
}else{
|
|
this.teamList=[];
|
|
this.teamId="";
|
|
this.getDzWarnList()
|
|
this.getJdList()
|
|
this.page = 1
|
|
this.warnData=[]
|
|
}
|
|
}else{
|
|
this.teamList=[];
|
|
this.teamId="";
|
|
this.getDzWarnList()
|
|
this.getJdList()
|
|
this.page = 1
|
|
this.warnData=[]
|
|
}
|
|
}
|
|
}).catch(error => {
|
|
console.log(error)
|
|
// this.$utils.showHttpError(error)
|
|
})
|
|
},
|
|
changeTeam(){
|
|
this.getDzWarnList()
|
|
|
|
this.getJdList()
|
|
this.page = 1
|
|
this.warnData=[]
|
|
this.getJdWarnList()
|
|
},
|
|
//获取吊装设备
|
|
getDzWarnList() {
|
|
let obj = {
|
|
"id":this.teamId,
|
|
}
|
|
let param = {
|
|
// encryptedData: AES.encrypt(JSON.stringify(obj))
|
|
}
|
|
// console.log(obj)
|
|
this.$http.get(getDzWarnList,obj).then(res => {
|
|
if (res) {
|
|
console.log(res,'获取吊装设备')
|
|
if(res.code == 200){
|
|
if(res.data?.length>0){
|
|
this.listData = res.data;
|
|
this.handleMonitor(this.listData[0])
|
|
}else{
|
|
this.listData = []
|
|
}
|
|
}else{
|
|
this.webUrl1=""
|
|
this.$forceUpdate()
|
|
this.listData = []
|
|
uni.$u.toast('暂无数据')
|
|
}
|
|
}
|
|
}).catch(error => {})
|
|
|
|
// console.log(this.listData)
|
|
},
|
|
//获取吊装设备监控
|
|
handleMonitor(item){
|
|
// console.log(item)
|
|
// console.log(item.devCode)
|
|
this.webUrl1=this.webUrl+`?devCode=${item.devCode}`
|
|
// this.webUrl2=this.webUrl+`?devCode=${item.devCode}&playChn=2`
|
|
// this.webUrl3=this.webUrl+`?devCode=${item.devCode}&playChn=3`
|
|
// this.webUrl4=this.webUrl+`?devCode=${item.devCode}&playChn=4`
|
|
this.$forceUpdate()
|
|
// var w = plus.webview.create(this.url, 'video-item',
|
|
// { top: 500,
|
|
// height: uni.getSystemInfoSync().windowHeight - 95 - uni.getSystemInfoSync().statusBarHeight
|
|
// },
|
|
// {
|
|
// preload: 'preload webview'
|
|
// });
|
|
// var currentWebview = this.$mp.page.$getAppWebview()
|
|
// currentWebview.append(w);
|
|
},
|
|
//获取近电设备
|
|
getJdList(){
|
|
let obj = {
|
|
"id":this.teamId,
|
|
}
|
|
let param = {
|
|
// encryptedData: AES.encrypt(JSON.stringify(obj))
|
|
}
|
|
console.log(obj)
|
|
this.$http.get(getJdList,obj).then(res => {
|
|
if (res) {
|
|
console.log(res,'获取近电设备')
|
|
if(res.code == 200){
|
|
if(res.data?.length>0){
|
|
this.devicesData = res.data;
|
|
}else{
|
|
this.devicesData = []
|
|
}
|
|
}else{
|
|
this.devicesData = []
|
|
uni.$u.toast('暂无数据')
|
|
}
|
|
|
|
}
|
|
}).catch(error => {})
|
|
// for (let i = 0; i < 5; i++) {
|
|
// this.devicesData.push(
|
|
// this.item
|
|
// )
|
|
// }
|
|
},
|
|
//获取近电设备预警
|
|
scrolltolower(){
|
|
this.page += 1;
|
|
this.getJdWarnList()
|
|
},
|
|
//获取近电设备预警
|
|
getJdWarnList(){
|
|
let obj = {
|
|
"id":this.teamId,
|
|
"pageNum":this.page,
|
|
"pageSize":"10"
|
|
}
|
|
let param = {
|
|
// encryptedData: AES.encrypt(JSON.stringify(obj))
|
|
}
|
|
console.log(obj)
|
|
this.$http.get(getJdWarnList,obj).then(res => {
|
|
if (res) {
|
|
console.log(res,'获取近电设备预警')
|
|
if(res.code == 200){
|
|
if(res.data?.length>0){
|
|
if(this.page == 1){
|
|
this.warnData = res.data;
|
|
}else{
|
|
this.warnData = [...this.warnData, ...res.data];
|
|
}
|
|
// this.warnData = res.data;
|
|
}else{
|
|
uni.$u.toast('暂无近电设备预警')
|
|
}
|
|
}else{
|
|
this.warnData = []
|
|
uni.$u.toast('暂无近电设备预警')
|
|
}
|
|
}
|
|
}).catch(error => {})
|
|
// for (let i = 0; i < 5; i++) {
|
|
// this.devicesData.push(
|
|
// this.item
|
|
// )
|
|
// }
|
|
},
|
|
//按钮触发-打开配置
|
|
setting(item){
|
|
this.configDevId=item.devId;
|
|
this.configDevCode=item.devCode;
|
|
this.getLineStats()
|
|
this.getConfigJdDevice()
|
|
// this.showSetting=true
|
|
setTimeout(()=>{//异步渲染页面
|
|
this.showSetting=true
|
|
},100)
|
|
},
|
|
getConfigJdDevice(){
|
|
let obj = {
|
|
"devId":this.configDevId
|
|
}
|
|
let param = {
|
|
// encryptedData: AES.encrypt(JSON.stringify(obj))
|
|
}
|
|
this.$http.get(getConfigJdDevice,obj).then(res => {
|
|
if (res) {
|
|
if(res.code == 200){
|
|
if(res.data.length>0){
|
|
res.data.forEach((item,index)=>{
|
|
this.configItems[index]=Object.assign({},item);
|
|
// this.getVoltageLevelByLineStats(item.configType,index)
|
|
})
|
|
}else{
|
|
this.configItems=[{
|
|
// configType: "",
|
|
// voltageLevel: "",
|
|
// levelList:[],
|
|
distance: ""
|
|
}]
|
|
// this.configItems[0].configType=this.radioList[0].id;
|
|
// this.getVoltageLevelByLineStats(this.radioList[0].id,0);
|
|
}
|
|
}
|
|
}
|
|
}).catch(error => {})
|
|
},
|
|
addItem(){
|
|
this.configItems.push({
|
|
configType: "",
|
|
voltageLevel: "",
|
|
levelList:[],
|
|
distance: ""
|
|
})
|
|
this.configItems[this.configItems.length-1].configType=this.radioList[0].id
|
|
this.getVoltageLevelByLineStats(this.radioList[0].id,this.configItems.length-1)
|
|
},
|
|
delItem(index){
|
|
this.configItems.splice(index,1)
|
|
},
|
|
////获取线路属性
|
|
getLineStats(){
|
|
let obj = {}
|
|
let param = {
|
|
// encryptedData: AES.encrypt(JSON.stringify(obj))
|
|
}
|
|
this.$http.get(getLineStats,obj).then(res => {
|
|
if (res) {
|
|
if(res.code == 200){
|
|
this.radioList=res.data;
|
|
}
|
|
}
|
|
}).catch(error => {})
|
|
},
|
|
////线路选择
|
|
radioChange(e,index){
|
|
this.configItems[index].configType=e.detail.value;
|
|
this.getVoltageLevelByLineStats(e.detail.value,index)
|
|
this.configItems[index].voltageLevel='1'
|
|
},
|
|
// 获取电压等级列表
|
|
getVoltageLevelByLineStats(id,index){
|
|
let obj = {
|
|
"id":id
|
|
}
|
|
let param = {
|
|
// encryptedData: AES.encrypt(JSON.stringify(obj))
|
|
}
|
|
this.$http.get(getVoltageLevelByLineStats,obj).then(res => {
|
|
if (res) {
|
|
if(res.code == 200){
|
|
this.configItems[index].levelList=res.data;
|
|
// this.configItems[index].voltageLevel=res.data.id
|
|
// console.log(this.configItems)
|
|
// this.configItems[index].voltageLevel=res.data[0].id
|
|
}
|
|
}
|
|
}).catch(error => {})
|
|
},
|
|
//选择电压等级
|
|
chosenLevel(id,index){
|
|
this.configItems[index].voltageLevel=id;
|
|
this.$forceUpdate()
|
|
},
|
|
//保存配置
|
|
saveSetting(){
|
|
let obj = {
|
|
"devId": this.configDevId,
|
|
"devCode": this.configDevCode,
|
|
"configItems":this.configItems
|
|
}
|
|
let param = {
|
|
// encryptedData: AES.encrypt(JSON.stringify(obj))
|
|
}
|
|
let option = {
|
|
contentType:'form'
|
|
}
|
|
console.log(obj)
|
|
this.$http.post(configJdDevice,obj,false,option).then(res => {
|
|
if (res) {
|
|
if(res.code == 200){
|
|
uni.$u.toast('保存成功')
|
|
this.showSetting=false;
|
|
}
|
|
}
|
|
}).catch(error => {})
|
|
},
|
|
//按钮触发
|
|
backBracelet(){
|
|
console.log("页面")
|
|
uni.navigateTo({
|
|
url: "/pages/bracelet/braceletBack"
|
|
})
|
|
},
|
|
//确认modal
|
|
backDevice(item){
|
|
console.log("open")
|
|
this.showModal = true;
|
|
},
|
|
cancel() {
|
|
this.showModal = false
|
|
console.log('close');
|
|
},
|
|
confirm() {
|
|
this.showModal = false
|
|
console.log('确认');
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.select-box{
|
|
width: 66%;
|
|
height: auto;
|
|
position: absolute;
|
|
background: #fff;
|
|
top:10vh;
|
|
left: 20rpx;
|
|
z-index: 999;
|
|
display: flex;
|
|
}
|
|
.map-box{
|
|
width: 100%;
|
|
height: 20vh;
|
|
z-index: 9;
|
|
position: absolute;
|
|
top:15vh;
|
|
background: #fff;
|
|
}
|
|
.page-content{
|
|
width: 100%;
|
|
height: 65vh;
|
|
position: absolute;
|
|
overflow:hidden;
|
|
top:35vh;
|
|
z-index: 99;
|
|
border-radius:40rpx;
|
|
|
|
.search-box{
|
|
width: 100%;
|
|
height: auto;
|
|
background:#fff;
|
|
padding: 4rpx 0;
|
|
// margin: 0 auto;
|
|
.search{
|
|
width: 94%;
|
|
height: 60rpx;
|
|
margin: 0rpx auto;
|
|
border:2rpx solid #D9D9D9;
|
|
border-radius: 40rpx;
|
|
display: flex;
|
|
.search-gt{
|
|
width: 18%;
|
|
height: 100%;
|
|
margin:0rpx 20rpx;
|
|
border-right:2rpx solid #D9D9D9;
|
|
margin-right: 10rpx;
|
|
}
|
|
.search-team{
|
|
width: 80%;
|
|
height: 100%;
|
|
margin:0rpx 20rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.devices-box{
|
|
width: 100%;
|
|
height: 24vh;
|
|
background:#fff;
|
|
margin-bottom: 20rpx;
|
|
.list-box{
|
|
width: 96%;
|
|
height: 23vh;
|
|
overflow-y: auto;
|
|
// border: 1px solid #000;
|
|
margin: 0rpx auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
// margin-top: 40rp x;
|
|
|
|
.list-item{
|
|
width: 45%;
|
|
height: 180rpx ;
|
|
overflow: hidden;
|
|
background-color: #fff;
|
|
border-radius: 10rpx;
|
|
border: 1px solid #D9D9D9;
|
|
margin: 10rpx;
|
|
|
|
|
|
.item-content{
|
|
width: 100%;
|
|
height: 160rpx;
|
|
font-size: 24rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 14rpx 10rpx;
|
|
.image-box{
|
|
width: 30%;
|
|
height: 60%;
|
|
}
|
|
.content-box{
|
|
width: 70%;
|
|
height: 100%;
|
|
font-size: 20rpx;
|
|
|
|
.item-text{
|
|
margin-left: 0rpx;
|
|
margin-top: 15rpx;
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.bottom-box{
|
|
width: 95%;
|
|
height: 40vh;
|
|
background:#fff;
|
|
padding: 20rpx 20rpx;
|
|
position: relative;
|
|
.tab-box {
|
|
overflow: hidden;
|
|
height: 50rpx;
|
|
.tab-item {
|
|
float: left;
|
|
height: 50rpx;
|
|
width: 20%;
|
|
font-size: 24rpx;
|
|
line-height: 20rpx;
|
|
margin-top: 6rpx;
|
|
}
|
|
.active {
|
|
// background: #fff;
|
|
color: #333;
|
|
border-radius: 10rpx 10rpx 0 0;
|
|
font-weight: bold;
|
|
}
|
|
.activeLine{
|
|
background: linear-gradient( 90deg, #3888FF 0%, rgba(255,255,255,0) 100%);
|
|
border-radius: 10rpx;
|
|
width: 50rpx;
|
|
height: 10rpx;
|
|
}
|
|
}
|
|
.video-box{
|
|
width: 100%;
|
|
height: 80%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
position: relative;
|
|
|
|
.video-item{
|
|
width: 48%;
|
|
height: 220rpx;
|
|
border-radius: 10rpx;
|
|
position: relative;
|
|
display: flex;
|
|
// padding: 10rpx;
|
|
// background-color: #148DC2;
|
|
}
|
|
|
|
}
|
|
|
|
.alarm-box{
|
|
width: 100%;
|
|
height: auto;
|
|
// background-color: #3888FF;
|
|
font-size: 24rpx;
|
|
.alarm-devices{
|
|
width: 94%;
|
|
height: 9vh;
|
|
background-color: #fff;
|
|
border-radius: 8rpx;
|
|
border: 1px solid #D9D9D9;
|
|
overflow-y: auto;
|
|
padding: 10rpx 20rpx;
|
|
padding-bottom: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
.devices-item{
|
|
width: 98%;
|
|
display: flex;
|
|
padding: 10rpx 0;
|
|
justify-content: space-between;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
}
|
|
|
|
.alarm-list{
|
|
width: 94%;
|
|
height: 18vh;
|
|
background-color: #FFF;
|
|
overflow-y: auto;
|
|
padding: 10rpx 20rpx;
|
|
margin-bottom: 20rpx;
|
|
.alarm-item{
|
|
width: 98%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 18rpx;
|
|
padding-bottom: 12rpx;
|
|
padding-top: 8rpx;
|
|
border-bottom: 1px solid #D9D9D9;;
|
|
}
|
|
}
|
|
}
|
|
|
|
.setting-box{
|
|
width: 100%;
|
|
height: 30vh;
|
|
background-color: #FFF;
|
|
font-size: 24rpx;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
.setting-content{
|
|
width: 94%;
|
|
height: auto;
|
|
margin: 20rpx auto;
|
|
margin-bottom: 5vh;
|
|
.setting-item{
|
|
width: 100%;
|
|
height: auto;
|
|
.setting-item-sub{
|
|
width: 100%;
|
|
height: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 15rpx 0;
|
|
.sub-label{
|
|
margin-right: 20rpx;
|
|
}
|
|
.sub-box{
|
|
width: 80%;
|
|
height: auto;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.sub-box-item{
|
|
// width: 100rpx;
|
|
// height: 32rpx;
|
|
padding: 4rpx 8rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #F0F7FF;
|
|
margin-top: 10rpx;
|
|
margin-right: 20rpx;
|
|
color: #409EFF;
|
|
border: 1rpx solid #409EFF;
|
|
border-radius: 20rpx;
|
|
}
|
|
.active{
|
|
background-color: #148DC2;
|
|
color: #FFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-box{
|
|
width: 95%;
|
|
height: 60rpx;
|
|
margin: 0 auto;
|
|
// background-color: #3888FF;
|
|
position: fixed;
|
|
bottom: 1vh;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.btn1{
|
|
width: 40%;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
color: #2F2F2F;
|
|
border: 2rpx solid #2F2F2F;
|
|
background-color: #FFF;
|
|
border-radius: 10rpx;
|
|
}
|
|
.btn2{
|
|
width: 40%;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
background-color: #148DC2;
|
|
color: #FFF;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|