From ea4f93ac21611943cd2111b7f1680540f66df7cf Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期一, 08 十一月 2021 18:15:25 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.5.5:10010/r/web/vue-smart-ai
---
src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue | 419 ++++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 271 insertions(+), 148 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue b/src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue
index 67917d6..217bbd1 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue
@@ -4,92 +4,108 @@
<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="title"
+ :style="tab.Status == 1 ? { color: '#8A98B8' } : {}"
+ >{{ tab.Name }}</span
+ >
<span
class="capsule"
- :class="{'online':tab.Status==0,'offline':tab.Status==1}"
- >{{tab.Status==0?"鍦ㄧ嚎":"绂荤嚎"}}</span>
+ :class="{ online: tab.Status == 0, offline: tab.Status == 1 }"
+ >{{ tab.Status == 0 ? "鍦ㄧ嚎" : "绂荤嚎" }}</span
+ >
</div>
</el-tab-pane>
- <!-- <el-tab-pane name="dev2">
- <div slot="label" class="label-slot">
- <span>杞偍璁惧2</span>
- <span class="capsule offline">绂荤嚎</span>
- </div>
- </el-tab-pane>-->
</el-tabs>
- <div class="btn-add-dev" @click="showAddDevice">
- <i class="el-icon-circle-plus"></i>
+ <!-- <div class="btn-add-dev" @click="showAddDevice">
+ <span class="icon iconfont"> </span>
<span>娣诲姞璁惧</span>
- </div>
+ </div> -->
</div>
- <div class="general-view">
- <div class="indicator">
- <el-button>璁惧閲嶅惎</el-button>
- </div>
- <div
- class="indicator"
- :class="{'lastOne':index==generalIndicators.length-1}"
- v-for="(indicator,index) in generalIndicators"
- :key="indicator.id"
- >
- <div class="title">
- <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.slots.length}}</div>
- </div>
- </div>
- <div class="table-area">
- <div class="filter-bar flex-box">
- <!-- <div>
- <label>璁惧鍦板潃:</label>
- <div>
- <el-input v-model="deviceAddr" size="small"></el-input>
- </div>
- </div>-->
- <div>
- <label>璁惧鐘舵��:</label>
- <div>
- <el-select v-model="deviceState" size="small">
- <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 class="t-d-content">
+ <div class="general-view">
+ <div class="indicator">
+ <div class="icon-wrap">
+ <div class="icon-div"><span class="iconfont"></span></div>
+
+ <span class="text">璁惧閲嶅惎</span>
</div>
</div>
- <div class="btns">
- <el-button @click="findDeviceIfo" type="primary" size="small">鏌ヨ</el-button>
+ <div
+ class="indicator"
+ :class="{ lastOne: index == generalIndicators.length - 1 }"
+ v-for="(indicator, index) in generalIndicators"
+ :key="indicator.id"
+ >
+ <div class="img-desc">
+ <img class="icon" :src="indicator.path" />
+ </div>
+ <div class="title">
+ <div class="indicator-val" :style="{ color: indicator.color }">
+ <span
+ style="font-size: 24px"
+ :style="{ color: indicator.color }"
+ >{{ indicator.slots.length }}</span
+ >
+ 涓�
+ </div>
+ <span class="word">{{ indicator.title }}</span>
+ </div>
</div>
</div>
- <el-table class="thbg" :data="tableData" fit>
- <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 class="table-area">
+ <div class="filter-bar flex-box">
+ <div>
+ <label>璁惧鐘舵��:</label>
<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>
+ <el-select v-model="deviceState" size="small">
+ <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>
- </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>
- <el-table-column label="鎿嶄綔">
- <template slot-scope="scope">
- <div class="operation">
- <span @click="checkSlot(scope.row)">鏌ョ湅鎻掓Ы</span>
- </div>
- </template>
- </el-table-column>-->
- </el-table>
+ </div>
+ <div class="btns">
+ <el-button @click="findDeviceIfo" type="primary" size="small"
+ >鏌ヨ</el-button
+ >
+ </div>
+ </div>
+ <el-table
+ class="thbg"
+ :data="tableData"
+ fit
+ stripe
+ :header-cell-style="{
+ background: '#2D52D7',
+ color: '#fff',
+ height: '50px',
+ }"
+ >
+ <el-table-column
+ type="index"
+ width="240"
+ 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 style="color: #6297f2" v-if="scope.row.Status == 0"
+ >绌洪棽涓�</span
+ >
+ <span style="color: #fea425" v-if="scope.row.Status == 1"
+ >璇诲啓涓�</span
+ >
+ <span style="color: #ed663e" v-if="scope.row.Status == 2"
+ >鎻掓Ы鏁呴殰</span
+ >
+ </div>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
</div>
<el-dialog
:visible="visibleOfialogAddDev"
@@ -107,28 +123,54 @@
<el-input v-model="IP"></el-input>
</div>
<div slot="footer" class="btns">
- <el-button type="primary" size="small" @click="toAddDevice">纭畾</el-button>
- <el-button size="small" @click="visibleOfialogAddDev=false">鍙栨秷</el-button>
+ <el-button type="primary" size="small" @click="toAddDevice"
+ >纭畾</el-button
+ >
+ <el-button size="small" @click="visibleOfialogAddDev = false"
+ >鍙栨秷</el-button
+ >
</div>
</div>
</el-dialog>
</div>
</template>
<script>
-import { addDevice, getDeviceList, getDeviceInfo } from '@/api/shuohuang';
+import { addDevice, getDeviceList, getDeviceInfo } from "@/api/shuohuang";
export default {
data() {
return {
- actTab: 'dev1',
+ actTab: "dev1",
devices: [],
- generalIndicators: [{ id: 'dx', title: '璇诲啓涓�', slots: [] }, { id: 'kx', title: '绌洪棽涓�', slots: [] }, { id: 'ccgz', title: '鎻掓Ы鏁呴殰', slots: [] }],
- deviceAddr: '',
- deviceState: '',
+ generalIndicators: [
+ {
+ id: "dx",
+ title: "璇诲啓涓�",
+ slots: [],
+ color: "#FEA425",
+ path: "/images/shuohuang/缁� 780.png",
+ },
+ {
+ id: "kx",
+ title: "绌洪棽涓�",
+ slots: [],
+ color: "#6297F2",
+ path: "/images/shuohuang/缁� 781.png",
+ },
+ {
+ id: "ccgz",
+ title: "鎻掓Ы鏁呴殰",
+ slots: [],
+ color: "#ED663E",
+ path: "/images/shuohuang/缁� 782.png",
+ },
+ ],
+ deviceAddr: "",
+ deviceState: "",
tableData: [],
visibleOfialogAddDev: false,
- Name: '',
- IP: '',
- }
+ Name: "",
+ IP: "",
+ };
},
mounted() {
this.findDeviceList();
@@ -136,74 +178,84 @@
methods: {
findDeviceList() {
let _this = this;
- getDeviceList().then(res => {
+ getDeviceList().then((res) => {
_this.devices = res.data;
_this.actTab = _this.devices[0].ID;
- _this.findDeviceIfo()
- })
+ _this.findDeviceIfo();
+ });
},
findDeviceIfo() {
let _this = this;
- getDeviceInfo({
+ getDeviceInfo({
DeviceID: this.actTab,
- Status:this.deviceState
- }).then(res => {
+ 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');
+ 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 => {
+ res.data.forEach((slot) => {
if (slot.Status == 0) {
- kx.slots.push(slot)
+ kx.slots.push(slot);
}
if (slot.Status == 1) {
- dx.slots.push(slot)
+ dx.slots.push(slot);
}
if (slot.Status == 2) {
- ccgz.slots.push(slot)
+ ccgz.slots.push(slot);
}
- })
+ });
//_this.generalIndicators
- })
+ });
},
toAddDevice() {
let _this = this;
let params = {
Name: this.Name,
- IP: this.IP
- }
- addDevice(params).then(res => {
+ IP: this.IP,
+ };
+ addDevice(params).then((res) => {
if (res.success) {
this.$notify({
- type: 'success',
- message: res.msg
- })
+ type: "success",
+ message: res.msg,
+ });
_this.visibleOfialogAddDev = true;
}
- })
+ });
},
showAddDevice() {
this.visibleOfialogAddDev = true;
-
},
checkTab(tab, event) {
this.findDeviceIfo();
},
- checkSlot(row) {
-
- }
- }
-}
+ checkSlot(row) {},
+ },
+};
</script>
<style lang="scss">
.transfer-device-manage {
- padding: 20px;
+ // padding: 20px;
+ // .el-tabs__nav-scroll {
+ // overflow-x: scroll;
+ // }
+ .el-tabs__nav-wrap.is-scrollable {
+ padding-right: 90px;
+ }
+
.el-tabs__item {
height: 45px;
line-height: 45px;
@@ -213,48 +265,104 @@
}
.header-with-tab {
position: relative;
+ background: #ffffff;
+ box-shadow: 0px 3px 6px rgba(160, 174, 230, 0.56);
+ border-radius: 10px;
+ padding: 0 35px;
+ padding-top: 15px;
+ .el-tabs__header {
+ margin: 0;
+ }
+ .el-tabs__item.is-active .label-slot .title {
+ color: #2d52d7;
+ }
.label-slot {
display: flex;
align-items: center;
padding: 0 20px;
font-weight: bold;
+ position: relative;
+ .title {
+ font-size: 14px;
+ }
.capsule {
- width: 42px;
- height: 20px;
+ width: 36px;
+ height: 18px;
margin-left: 10px;
- line-height: 20px;
+ line-height: 18px;
+ position: absolute;
+ text-align: center;
+ top: 0px;
text-align: center;
border-radius: 20px;
font-size: 12px;
font-weight: normal;
color: #fff;
+ right: -20px;
&.online {
- background: #00a854;
+ background: #2ace7c;
}
&.offline {
- background: #f04134;
+ background: #8a98b8;
}
}
}
- .btn-add-dev {
- cursor: pointer;
- position: absolute;
- right: 0;
- top: 10px;
- color: #1890ff;
- font-size: 14px;
- i {
- padding-right: 4px;
- font-size: 16px;
- }
+ // .btn-add-dev {
+ // cursor: pointer;
+ // position: absolute;
+ // right: 25px;
+ // top: 20px;
+ // /* color: #1890ff; */
+ // font-size: 16px;
+ // }
+ }
+ .t-d-content {
+ background: #fff;
+ margin-top: 20px;
+ border-radius: 10px;
+ box-shadow: 0px 3px 6px rgb(160 174 230 / 56%);
+ padding: 30px 45px;
+ button span {
+ color: #fff;
}
}
.general-view {
display: flex;
- padding: 30px;
.indicator {
- flex: 1;
position: relative;
+ background: #f4f6f9;
+ width: 263px;
+ height: 101px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-right: 50px;
+
+ .img-desc {
+ margin-right: 8px;
+
+ img {
+ width: 53px;
+ }
+ }
+ .icon-wrap {
+ display: flex;
+ flex-direction: column;
+ .icon-div {
+ background: #26d4b4;
+ width: 42px;
+ height: 42px;
+ line-height: 42px;
+
+ border-radius: 21px;
+ box-shadow: 0 0 0 8px #caf0eb;
+ margin-bottom: 10px;
+ span {
+ font-size: 32px;
+ color: #fff;
+ }
+ }
+ }
&:not(.lastOne):after {
content: "";
width: 1px;
@@ -267,28 +375,43 @@
}
.title {
display: flex;
- align-items: center;
- justify-content: center;
font-size: 14px;
color: #999;
- margin-bottom: 10px;
- .dot {
- width: 10px;
- height: 10px;
- margin-right: 5px;
- border-radius: 50%;
- background: #01a854;
- &.kx {
- background: #0f77d1;
- }
- &.ccgz {
- background: #f04235;
- }
+ flex-direction: column;
+ .indicator-val {
+ font-size: 16px;
+ font-weight: bold;
}
}
- .indicator-val {
- font-size: 24px;
- }
+ }
+ }
+ .table-area {
+ margin-top: 25px;
+ button {
+ background: #2d52d7 !important;
+ border-color: #2d52d7 !important;
+ }
+ .el-table--striped
+ .el-table__body
+ tr.el-table__row--striped
+ td.el-table__cell {
+ background: #f4f6f9;
+ }
+ th.el-table__cell > .cell {
+ color: #fff;
+ }
+ .thbg {
+ margin-top: 15px;
+ border: none;
+ }
+ .el-table__row > td {
+ border: none;
+ }
+ .el-table th.is-leaf {
+ border: none;
+ }
+ .el-table::before {
+ height: 0px;
}
}
.filter-bar.flex-box {
--
Gitblit v1.8.0