From 05d754bb09ba4aeddd60320d33d583d388434c2f Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期一, 20 十二月 2021 15:38:45 +0800
Subject: [PATCH] 树形组件修改
---
src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue | 467 +++++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 395 insertions(+), 72 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue b/src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue
index 3665b38..217bbd1 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/transferDeviceManage.vue
@@ -1,86 +1,370 @@
<template>
<div class="transfer-device-manage">
- <div class="general-view">
- <div
- class="indicator"
- :class="{'lastOne':index==generalIndicators.length-1}"
- v-for="(indicator,index) in generalIndicators"
- :key="indicator.id"
- >
- <div class="title">
- <span class="dot"></span>
- <span class="word">{{indicator.title}}</span>
- </div>
- <div class="indicator-val">{{indicator.val}}</div>
- </div>
+ <div class="header-with-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
+ 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
+ >
+ </div>
+ </el-tab-pane>
+ </el-tabs>
+ <!-- <div class="btn-add-dev" @click="showAddDevice">
+ <span class="icon iconfont"> </span>
+ <span>娣诲姞璁惧</span>
+ </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 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>
- <label>璁惧鐘舵��:</label>
- <div>
- <el-select v-model="deviceState" size="small">
- <el-option></el-option>
- </el-select>
+ <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>
- <div class="btns">
- <el-button 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 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 class="title">
+ <div class="indicator-val" :style="{ color: indicator.color }">
+ <span
+ style="font-size: 24px"
+ :style="{ color: indicator.color }"
+ >{{ indicator.slots.length }}</span
+ >
+ 涓�
</div>
- </template>
- </el-table-column>
- </el-table>
+ <span class="word">{{ indicator.title }}</span>
+ </div>
+ </div>
+ </div>
+ <div class="table-area">
+ <div class="filter-bar flex-box">
+ <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>
+ </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"
+ title="娣诲姞璁惧"
+ class="dialog-addDev"
+ @close="visibleOfialogAddDev = false"
+ >
+ <div>
+ <div class="flex-box">
+ <label>璁惧鍚嶇О锛�</label>
+ <el-input v-model="Name"></el-input>
+ </div>
+ <div class="flex-box">
+ <label>璁惧IP锛�</label>
+ <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
+ >
+ </div>
+ </div>
+ </el-dialog>
</div>
</template>
<script>
+import { addDevice, getDeviceList, getDeviceInfo } from "@/api/shuohuang";
export default {
-
- data () {
+ data() {
return {
- 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 }],
- deviceAddr: '',
- deviceState: '',
- tableData: []
- }
+ actTab: "dev1",
+ devices: [],
+ 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: "",
+ };
+ },
+ mounted() {
+ this.findDeviceList();
},
methods: {
- checkSlot(row){
-
- }
- }
-}
+ findDeviceList() {
+ let _this = this;
+ getDeviceList().then((res) => {
+ _this.devices = res.data;
+ _this.actTab = _this.devices[0].ID;
+ _this.findDeviceIfo();
+ });
+ },
+ 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) {
+ this.$notify({
+ type: "success",
+ message: res.msg,
+ });
+ _this.visibleOfialogAddDev = true;
+ }
+ });
+ },
+ showAddDevice() {
+ this.visibleOfialogAddDev = true;
+ },
+ checkTab(tab, event) {
+ this.findDeviceIfo();
+ },
+ 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;
+ }
+ .el-tabs__nav-wrap::after {
+ height: 1px;
+ }
+ .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: 36px;
+ height: 18px;
+ margin-left: 10px;
+ 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: #2ace7c;
+ }
+ &.offline {
+ background: #8a98b8;
+ }
+ }
+ }
+ // .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: '';
+ content: "";
width: 1px;
height: 57px;
background: #e9e9e9;
@@ -91,22 +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: rgb(94, 14, 243);
+ 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 {
@@ -119,6 +424,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