From 93a26507f76156fa65aead1515c430688c089e1d Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期一, 22 二月 2021 15:49:01 +0800
Subject: [PATCH] 新版目录树样式调试及状态更新调试；朔黄批量导入列表调试；视频检索页面添加处理参数，添加标注接口添加参数；分页器展示优化，默认检索时间调整；转储设备接口调试
---
src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue | 136 ++++++++++++++++++++++++++++++++++-----------
1 files changed, 103 insertions(+), 33 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue b/src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue
index 5429e2b..8921ac0 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue
@@ -1,19 +1,22 @@
<template>
<div class="transfer-device-manage">
<div class="header-with-tab">
- <el-tabs v-model="actTab" @tab-click="checkTab" >
- <el-tab-pane name="dev1" v-for="tab in devices" :key="tab">
+ <el-tabs v-model="actTab" @tab-click="checkTab">
+ <el-tab-pane :name="tab.ID" v-for="tab in devices" :key="tab.ID">
<div slot="label" class="label-slot">
<span>{{tab.Name}}</span>
- <span class="capsule" :class="{'online':tab.Status==0,'offline':tab.Status==1}">{{tab.Status==0?"鍦ㄧ嚎":"绂荤嚎"}}</span>
+ <span
+ class="capsule"
+ :class="{'online':tab.Status==0,'offline':tab.Status==1}"
+ >{{tab.Status==0?"鍦ㄧ嚎":"绂荤嚎"}}</span>
</div>
</el-tab-pane>
- <el-tab-pane name="dev2">
+ <!-- <el-tab-pane name="dev2">
<div slot="label" class="label-slot">
<span>杞偍璁惧2</span>
<span class="capsule offline">绂荤嚎</span>
</div>
- </el-tab-pane>
+ </el-tab-pane>-->
</el-tabs>
<div class="btn-add-dev" @click="showAddDevice">
<i class="el-icon-circle-plus"></i>
@@ -31,10 +34,10 @@
:key="indicator.id"
>
<div class="title">
- <span class="dot"></span>
+ <span class="dot" :class="{'kx':indicator.id=='kx','dx':indicator.id=='dx','ccgz':indicator.id=='ccgz'}"></span>
<span class="word">{{indicator.title}}</span>
</div>
- <div class="indicator-val">{{indicator.val}}</div>
+ <div class="indicator-val">{{indicator.slots.length}}</div>
</div>
</div>
<div class="table-area">
@@ -44,7 +47,7 @@
<div>
<el-input v-model="deviceAddr" size="small"></el-input>
</div>
- </div> -->
+ </div>-->
<div>
<label>璁惧鐘舵��:</label>
<div>
@@ -58,8 +61,18 @@
</div>
</div>
<el-table class="thbg" :data="tableData" fit>
- <el-table-column prop="name" label="杞偍璁惧鍚嶇О"></el-table-column>
- <el-table-column prop="state" label="璁惧鐘舵��"></el-table-column>
+ <el-table-column type="index" width="100" label="搴忓彿"></el-table-column>
+ <el-table-column prop="Name" label="鎻掓Ы鍚嶇О"></el-table-column>
+ <el-table-column prop="Status" label="鐘舵��">
+ <template slot-scope="scope">
+ <div>
+ <span v-if="scope.row.Status==0">绌洪棽涓�</span>
+ <span v-if="scope.row.Status==1">璇诲啓涓�</span>
+ <span v-if="scope.row.Status==2">鎻掓Ы鏁呴殰</span>
+ </div>
+ </template>
+ </el-table-column>
+ <!-- <el-table-column prop="state" label="璁惧鐘舵��"></el-table-column>
<el-table-column prop="pic" label="鐜板満鍥剧墖"></el-table-column>
<el-table-column prop="addr" label="璁惧鍦板潃"></el-table-column>
<el-table-column prop="tel" label="鎶ヤ慨鐢佃瘽"></el-table-column>
@@ -69,12 +82,16 @@
<span @click="checkSlot(scope.row)">鏌ョ湅鎻掓Ы</span>
</div>
</template>
- </el-table-column>
+ </el-table-column>-->
</el-table>
</div>
- <el-dialog :visible="visibleOfialogAddDev">
+ <el-dialog
+ :visible="visibleOfialogAddDev"
+ title="娣诲姞璁惧"
+ class="dialog-addDev"
+ @close="visibleOfialogAddDev = false"
+ >
<div>
- <p slot="title">娣诲姞璁惧</p>
<div class="flex-box">
<label>璁惧鍚嶇О锛�</label>
<el-input v-model="Name"></el-input>
@@ -92,53 +109,81 @@
</div>
</template>
<script>
-import {addDevice,getDeviceList} from '@/api/shuohuang';
+import { addDevice, getDeviceList, getDeviceInfoById } from '@/api/shuohuang';
export default {
data () {
return {
actTab: 'dev1',
devices: [],
- generalIndicators: [{ id: 'gz', title: '鏈夋晠闅滆澶�', val: 156 }, { id: 'zc', title: '姝ｅ父璁惧', val: 5000 }, { id: 'dx', title: '璇诲啓涓�', val: 56 }, { id: 'kx', title: '绌洪棽涓�', val: 2000 }, { id: 'ccgz', title: '鎻掓Ы鏁呴殰', val: 1000 }],
+ generalIndicators: [{ id: 'dx', title: '璇诲啓涓�', slots: [] }, { id: 'kx', title: '绌洪棽涓�', slots: [] }, { id: 'ccgz', title: '鎻掓Ы鏁呴殰', slots: [] }],
deviceAddr: '',
deviceState: '',
tableData: [],
visibleOfialogAddDev: false,
- Name:'',
- IP:'',
+ Name: '',
+ IP: '',
}
},
- mounted(){
+ mounted () {
this.findDeviceList();
},
methods: {
- findDeviceList (){
- getDeviceList().then(res=>{
- debugger
- //_this.devices =
+ findDeviceList () {
+ let _this = this;
+ getDeviceList().then(res => {
+ _this.devices = res.data;
+ _this.actTab = _this.devices[0].ID;
+ _this.findDeviceIfo()
})
},
- toAddDevice(){
+ findDeviceIfo () {
+ let _this = this;
+ getDeviceInfoById({ DeviceID: this.actTab }).then(res => {
+ debugger
+ _this.tableData = res.data;
+ //缁熻褰撳墠鎻掓Ы鐘舵��
+ let dx = _this.generalIndicators.find(indicator => indicator.id == 'dx');
+ let kx = _this.generalIndicators.find(indicator => indicator.id == 'kx');
+ let ccgz = _this.generalIndicators.find(indicator => indicator.id == 'ccgz');
+ dx.slots = [];
+ kx.slots = [];
+ ccgz.slots = [];
+ res.data.forEach(slot => {
+ if (slot.Status == 0) {
+ kx.slots.push(slot)
+ }
+ if (slot.Status == 1) {
+ dx.slots.push(slot)
+ }
+ if (slot.Status == 2) {
+ ccgz.slots.push(slot)
+ }
+ })
+ //_this.generalIndicators
+ })
+ },
+ toAddDevice () {
let _this = this;
let params = {
Name: this.Name,
IP: this.IP
}
- addDevice(params).then(res=>{
- if(res.success){
+ addDevice(params).then(res => {
+ if (res.success) {
this.$notify({
- type:'success',
+ type: 'success',
message: res.msg
})
_this.visibleOfialogAddDev = true;
}
})
},
- showAddDevice(){
+ showAddDevice () {
this.visibleOfialogAddDev = true;
},
checkTab (tab, event) {
-
+ this.findDeviceIfo();
},
checkSlot (row) {
@@ -150,7 +195,7 @@
<style lang="scss">
.transfer-device-manage {
padding: 20px;
- .el-tabs__item{
+ .el-tabs__item {
height: 45px;
line-height: 45px;
}
@@ -167,17 +212,17 @@
.capsule {
width: 42px;
height: 20px;
- margin-left: 10px;
+ margin-left: 10px;
line-height: 20px;
text-align: center;
border-radius: 20px;
font-size: 12px;
font-weight: normal;
color: #fff;
- &.online{
+ &.online {
background: #00a854;
}
- &.offline{
+ &.offline {
background: #f04134;
}
}
@@ -223,7 +268,13 @@
height: 10px;
margin-right: 5px;
border-radius: 50%;
- background: rgb(94, 14, 243);
+ background: #01a854;
+ &.kx {
+ background: #0f77d1;
+ }
+ &.ccgz {
+ background: #f04235;
+ }
}
}
.indicator-val {
@@ -241,5 +292,24 @@
}
}
}
+ .dialog-addDev {
+ .el-dialog {
+ width: 600px;
+ }
+ .flex-box {
+ align-items: center;
+ margin-bottom: 10px;
+ label {
+ width: 90px;
+ text-align: left;
+ }
+ .el-input {
+ width: 500px;
+ }
+ }
+ .btns {
+ padding: 10px 0;
+ }
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.8.0