From 5fb65ada8ccc28eabf823b284de70fbd3ca1f41e Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期二, 28 九月 2021 18:29:36 +0800
Subject: [PATCH] 抓拍大图层级修复v1
---
src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue | 157 +++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 118 insertions(+), 39 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue b/src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue
index 5429e2b..67917d6 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,13 @@
: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,22 +50,35 @@
<div>
<el-input v-model="deviceAddr" size="small"></el-input>
</div>
- </div> -->
+ </div>-->
<div>
<label>璁惧鐘舵��:</label>
<div>
<el-select v-model="deviceState" size="small">
- <el-option></el-option>
+ <el-option value="" label="鍏ㄩ儴"></el-option>
+ <el-option value="1" label="璇诲啓涓�"></el-option>
+ <el-option value="0" label="绌洪棽涓�"></el-option>
+ <el-option value="2" label="鎻掓Ы鏁呴殰"></el-option>
</el-select>
</div>
</div>
<div class="btns">
- <el-button type="primary" size="small">鏌ヨ</el-button>
+ <el-button @click="findDeviceIfo" type="primary" size="small">鏌ヨ</el-button>
</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 +88,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,55 +115,86 @@
</div>
</template>
<script>
-import {addDevice,getDeviceList} from '@/api/shuohuang';
+import { addDevice, getDeviceList, getDeviceInfo } from '@/api/shuohuang';
export default {
- data () {
+ 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;
+ getDeviceInfo({
+ DeviceID: this.actTab,
+ Status:this.deviceState
+ }).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) {
-
+ checkTab(tab, event) {
+ this.findDeviceIfo();
},
- checkSlot (row) {
+ checkSlot(row) {
}
}
@@ -150,7 +204,7 @@
<style lang="scss">
.transfer-device-manage {
padding: 20px;
- .el-tabs__item{
+ .el-tabs__item {
height: 45px;
line-height: 45px;
}
@@ -167,17 +221,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;
}
}
@@ -202,7 +256,7 @@
flex: 1;
position: relative;
&:not(.lastOne):after {
- content: '';
+ content: "";
width: 1px;
height: 57px;
background: #e9e9e9;
@@ -223,7 +277,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 +301,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