From 261e25074b7f35010efccb86bf82f6fe36e4b10d Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期三, 14 十月 2020 10:27:19 +0800
Subject: [PATCH] 添加硬件信息显示
---
src/pages/vindicate/index/App.vue | 410 ++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 257 insertions(+), 153 deletions(-)
diff --git a/src/pages/vindicate/index/App.vue b/src/pages/vindicate/index/App.vue
index 8ff9750..e41e502 100644
--- a/src/pages/vindicate/index/App.vue
+++ b/src/pages/vindicate/index/App.vue
@@ -1,139 +1,137 @@
<template>
+ <div class="s-system-manage">
<el-tabs
+
id="systemMaintenance"
v-model="activeName"
v-loading="loading"
:element-loading-text="loadingText"
>
- <el-tab-pane label="璁惧缁存姢" name="first" >
+ <el-tab-pane label="璁惧缁存姢" name="first">
<div class="s-system-maintenance">
- <div class="box-card">
- <div class="ui-top-view">
- <div class="ui-top-title">閲嶅惎</div>
+ <div class="box-card">
+ <div class="ui-top-view">
+ <div class="ui-top-title">閲嶅惎</div>
+ </div>
+ <el-divider></el-divider>
+
+ <div class="box-card-content">
+ <el-button type="primary" size="small" style="width:80px" @click="reboot">閲嶅惎</el-button>
+
+ <b class="card-text">閲嶅惎鑺傜偣</b>
+
+ <el-row style="margin-top:20px">
+ <el-col>
+ <vue-cron :expression="rebootCron" @update="setRebootCron" />
+ </el-col>
+ </el-row>
+ </div>
+ </div>
+ <!--
+ <div class="box-card">
+ <div class="ui-top-view">
+ <div class="ui-top-title">鎭㈠榛樿鍊�</div>
+ </div>
+ <el-divider></el-divider>
+
+ <div class="box-card-content">
+ <el-row>
+ <el-col :span="1">
+ <el-button type="primary" size="small">绠�鍗曟仮澶�</el-button>
+ </el-col>
+ <el-col :span="23">
+ <b class="card-text">绠�鍗曟仮澶嶈澶囧弬鏁�</b>
+ </el-col>
+ </el-row>
+ <el-row style="margin-top:20px">
+ <el-col :span="1">
+ <el-button type="primary" size="small">瀹屽叏鎭㈠</el-button>
+ </el-col>
+ <el-col :span="23">
+ <b class="card-text">瀹屽叏鎭㈠璁惧鍙傛暟鍒板嚭鍘傝缃�</b>
+ </el-col>
+ </el-row>
+ </div>
+ </div>
+
+ <div class="box-card">
+ <div class="ui-top-view">
+ <div class="ui-top-title">鍙傛暟瀵煎叆瀵煎嚭</div>
+ </div>
+ <el-divider></el-divider>
+
+ <div class="box-card-content">
+ <el-row :gutter="4">
+ <el-col :span="1">
+ <el-button type="info" size="small" style="width:80px">瀵煎叆</el-button>
+ </el-col>
+ <el-col :span="3" style="padding-left:30px">
+ <el-input placeholder="涓婁紶鍙傛暟鏂囦欢" size="small" :readonly="true">
+ <el-upload slot="suffix" action="https://jsonplaceholder.typicode.com/posts/">
+ <el-button
+ type="text"
+ icon="el-icon-upload2"
+ size="small"
+ style="font-size:18px; color:#0088ff"
+ ></el-button>
+ </el-upload>
+ </el-input>
+ </el-col>
+ </el-row>
+ <el-row style="margin-top:20px">
+ <el-col :span="1">
+ <el-button type="primary" size="small">璁惧鍙傛暟</el-button>
+ </el-col>
+ <el-col :span="23">
+ <b class="card-text">鍙傛暟瀵煎嚭</b>
+ </el-col>
+ </el-row>
+ </div>
+ </div>
+ -->
+ <div class="box-card">
+ <div class="ui-top-view">
+ <div class="ui-top-title">鍗囩骇</div>
+ </div>
</div>
<el-divider></el-divider>
-
- <div class="box-card-content">
-
-
- <el-button type="primary" size="small" style="width:80px" @click="reboot">閲嶅惎</el-button>
-
-
- <b class="card-text">閲嶅惎鑺傜偣</b>
-
-
- <el-row style="margin-top:20px">
- <el-col>
- <vue-cron :expression="rebootCron" @update="setRebootCron" />
- </el-col>
- </el-row>
- </div>
- </div>
- <!--
- <div class="box-card">
- <div class="ui-top-view">
- <div class="ui-top-title">鎭㈠榛樿鍊�</div>
- </div>
- <el-divider></el-divider>
-
- <div class="box-card-content">
- <el-row>
- <el-col :span="1">
- <el-button type="primary" size="small">绠�鍗曟仮澶�</el-button>
- </el-col>
- <el-col :span="23">
- <b class="card-text">绠�鍗曟仮澶嶈澶囧弬鏁�</b>
- </el-col>
- </el-row>
- <el-row style="margin-top:20px">
- <el-col :span="1">
- <el-button type="primary" size="small">瀹屽叏鎭㈠</el-button>
- </el-col>
- <el-col :span="23">
- <b class="card-text">瀹屽叏鎭㈠璁惧鍙傛暟鍒板嚭鍘傝缃�</b>
- </el-col>
- </el-row>
- </div>
- </div>
-
- <div class="box-card">
- <div class="ui-top-view">
- <div class="ui-top-title">鍙傛暟瀵煎叆瀵煎嚭</div>
- </div>
- <el-divider></el-divider>
-
<div class="box-card-content">
<el-row :gutter="4">
- <el-col :span="1">
- <el-button type="info" size="small" style="width:80px">瀵煎叆</el-button>
+ <el-col :span="12">
+ <file-uploader
+ single
+ uploadPlaceholder="涓婁紶鍗囩骇鏂囦欢"
+ url="/data/api-v/sysset/patchUpdate"
+ @complete="onFileUpload"
+ @file-added="onFileAdded"
+ />
</el-col>
- <el-col :span="3" style="padding-left:30px">
- <el-input placeholder="涓婁紶鍙傛暟鏂囦欢" size="small" :readonly="true">
- <el-upload slot="suffix" action="https://jsonplaceholder.typicode.com/posts/">
- <el-button
- type="text"
- icon="el-icon-upload2"
- size="small"
- style="font-size:18px; color:#0088ff"
- ></el-button>
- </el-upload>
- </el-input>
+ <el-col :span="2">
+ <el-button
+ type="primary"
+ size="small"
+ style="width:80px"
+ @click="upgrade"
+ :disabled="!fileAdded"
+ :loading="upgrading"
+ >鍗囩骇</el-button>
</el-col>
- </el-row>
- <el-row style="margin-top:20px">
- <el-col :span="1">
- <el-button type="primary" size="small">璁惧鍙傛暟</el-button>
- </el-col>
- <el-col :span="23">
- <b class="card-text">鍙傛暟瀵煎嚭</b>
+ <el-col :span="16" class="upload-msg">
+ <span v-html="patchUpdateStatus"></span>
</el-col>
</el-row>
</div>
</div>
- -->
- <div class="box-card">
- <div class="ui-top-view">
- <div class="ui-top-title">鍗囩骇</div>
- </div>
- </div>
- <el-divider></el-divider>
- <div class="box-card-content">
- <el-row :gutter="4">
- <el-col :span="6">
- <file-uploader
- single
- uploadPlaceholder="涓婁紶鍗囩骇鏂囦欢"
- url="/data/api-v/sysset/patchUpdate"
- @complete="onFileUpload"
- @file-added="onFileAdded"
- />
- </el-col>
- <el-col :span="2">
- <el-button
- type="primary"
- size="small"
- style="width:80px"
- @click="upgrade"
- :disabled="!fileAdded"
- :loading="upgrading"
- >鍗囩骇</el-button>
- </el-col>
- <el-col :span="16" class="upload-msg">
- <span v-html="patchUpdateStatus"></span>
- </el-col>
- </el-row>
- </div>
- </div>
</el-tab-pane>
- <el-tab-pane label="鏁版嵁搴撶淮鎶�" name="second" >
- <div class="box">
+ <el-tab-pane label="鏁版嵁搴撶淮鎶�" name="second">
+ <div class="box">
<p class="title">
<label>鏁版嵁娓呯悊</label>
- </p>
+ </p>
<div class="range">
<div class="left">
<p>閫夋嫨鏁版嵁鑼冨洿锛�</p>
- </div>
+ </div>
<div class="middle">
<el-date-picker
v-model="dataRange"
@@ -147,20 +145,20 @@
</div>
<div class="right">
<el-button @click="deleteData" style="height:38px;background:#ff0000;color:white">鍒犻櫎鏁版嵁</el-button>
- </div>
- </div>
+ </div>
+ </div>
<div class="tip">
<i class="iconfont icontishi-zhuyi"></i>
<p class="zhuyi">璇锋敞鎰忥紝鎸変互涓婃棩鏈熻寖鍥村垹闄ょ殑鏁版嵁涓嶅彲鎭㈠锛岀珛鍗崇敓鏁堬紝璇疯皑鎱庢搷浣�</p>
- </div>
- </div>
- </el-tab-pane>
- </el-tabs>
-
+ </div>
+ </div>
+ </el-tab-pane>
+ </el-tabs>
+ </div>
</template>
<script>
-import { rebootServer, getDevInfo, getRebootTask, setRebootTask, fileUpload, doUpgrade,deleteDate } from "@/api/system"
+import { rebootServer, getDevInfo, getRebootTask, setRebootTask, fileUpload, doUpgrade, deleteDate } from "@/api/system"
import VueCron from "@/components/subComponents/VueCron"
import FileUploader from "@/components/subComponents/FileUpload/index"
@@ -220,7 +218,7 @@
}
},
methods: {
- isShow (authority) {
+ isShow(authority) {
if (this.isAdmin) {
return true
} else if (
@@ -285,8 +283,8 @@
var timeRange = this.format(this.dataRange);
var showStartTime = timeRange[0]
var showEndTime = timeRange[1]
- console.log("鏃堕棿锛�",showStartTime,showEndTime)
- this.$confirm("鎻愮ず锛�"+showStartTime+" 鑷� "+showEndTime+" 浜х敓鐨勫叏閮ㄦ暟鎹皢琚垹闄わ紝姝ゆ搷浣滅珛鍗崇敓鏁堬紝涓嶅彲鎭㈠锛屾槸鍚﹀垹闄わ紵", {
+ console.log("鏃堕棿锛�", showStartTime, showEndTime)
+ this.$confirm("鎻愮ず锛�" + showStartTime + " 鑷� " + showEndTime + " 浜х敓鐨勫叏閮ㄦ暟鎹皢琚垹闄わ紝姝ゆ搷浣滅珛鍗崇敓鏁堬紝涓嶅彲鎭㈠锛屾槸鍚﹀垹闄わ紵", {
center: true,
cancelButtonClass: "comfirm-class-cancle",
confirmButtonClass: "comfirm-class-sure"
@@ -388,9 +386,117 @@
};
</script>
<style lang="scss">
+.s-system-manage {
+ width: 100% !important;
+ min-width: 759px;
+ box-sizing: border-box;
+ padding: 10px;
+ // background-color: #e9ebf2;
+ background-color: #fff;
+ .s-system-manage-breadcrumb {
+ height: 5%;
+ box-sizing: border-box;
+ border: 1px solid #e4e7ed;
+ box-shadow: #e4e7ed 0px 0px 9px inset;
+ box-shadow: #e4e7ed 0px 0px 9px inset;
+ border-radius: 5px;
+ }
+
+ .el-tabs--border-card {
+ border: 0px solid #dcdfe6;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ .el-tabs__header {
+ border: 0px solid #dcdfe6;
+ .el-tabs__item {
+ padding: 5px 50px;
+ height: 50px;
+ font-family: PingFangSC-Regular;
+ font-size: 15px;
+ color: #222222;
+ text-align: center;
+ border: 0px solid transparent;
+ }
+ .el-tabs__item:nth-child(2) {
+ padding-left: 50px !important;
+ }
+ .el-tabs__item:last-child {
+ padding-right: 50px !important;
+ }
+ .el-tabs__item.is-active {
+ color: #3d68e1;
+ font-weight: bold;
+ // border-right-color: #fff;
+ // border-left-color: #fff;
+ }
+ .el-tabs__item:not(.is-disabled):hover {
+ color: #3d68e1;
+ }
+ }
+ }
+ .el-tabs__content {
+ height: calc(100% - 64px);
+ width: calc(100% - 20px);
+ box-sizing: border-box;
+ overflow-y: auto;
+ padding: 10px 40px !important;
+ .el-tab-pane {
+ width: 100%;
+ .s-title {
+ text-align: left;
+ padding: 15px 0px;
+ font-size: 16px;
+ }
+ }
+ }
+
+ .s-table {
+ border: 1px solid #e8e8e9;
+ margin-top: 40px;
+ }
+
+ .ui-top-title {
+ padding-bottom: 10px;
+ /* border-bottom: 1px solid #ebebeb; */
+ position: relative;
+ text-align: left;
+ padding-left: 15px;
+ font-size: 16px;
+ font-weight: bold;
+ }
+
+ .ui-top-title:before {
+ content: " ";
+ border-left: 4px solid #f53d3d;
+ display: inline-block;
+ height: 16px;
+ position: absolute;
+ top: 50%;
+ left: 0;
+ margin-top: -13px;
+ }
+
+ .el-button--text {
+ color: #3d68e1;
+ text-decoration: underline;
+ }
+}
.s-system-maintenance {
width: 100%;
height: 100%;
+ .el-button--primary {
+ color: #FFFFFF;
+ background-color: #3D68E1;
+ border-color: #3D68E1;
+ }
+ .el-button--primary.is-disabled,
+ .el-button--primary.is-disabled:hover,
+ .el-button--primary.is-disabled:focus,
+ .el-button--primary.is-disabled:active{
+ color: #FFFFFF;
+ background-color: #9eb4f0;
+ border-color: #9eb4f0;
+ }
.box-card {
text-align: left;
height: auto;
@@ -417,13 +523,13 @@
}
}
}
-.box{
+.box {
width: 50%;
min-width: 700px;
height: 270px;
border: 1px solid #eee;
.title {
- font-size:20px;
+ font-size: 20px;
font-weight: bold;
text-align: left;
padding: 20px;
@@ -475,35 +581,33 @@
}
}
}
-#systemMaintenance{
-
+#systemMaintenance {
.el-tabs__header {
- border: 0px solid #dcdfe6;
- .el-tabs__item {
- padding: 5px 50px;
- height: 50px;
- font-family: PingFangSC-Regular;
- font-size: 14px;
- color: #222222;
- text-align: center;
- border: 0px solid transparent;
- }
- .el-tabs__item:nth-child(2) {
- padding-left: 50px;
- }
- .el-tabs__item:last-child {
- padding-right: 50px;
- }
- .el-tabs__item.is-active {
- color: #ff7733;
- font-weight: bold;
- // border-right-color: #fff;
- // border-left-color: #fff;
- }
- .el-tabs__item:not(.is-disabled):hover {
- color: #ff7733;
- }
-
+ border: 0px solid #dcdfe6;
+ .el-tabs__item {
+ padding: 5px 50px;
+ height: 50px;
+ font-family: PingFangSC-Regular;
+ font-size: 14px;
+ color: #222222;
+ text-align: center;
+ border: 0px solid transparent;
+ }
+ .el-tabs__item:nth-child(2) {
+ padding-left: 50px;
+ }
+ .el-tabs__item:last-child {
+ padding-right: 50px;
+ }
+ .el-tabs__item.is-active {
+ color: #ff7733;
+ font-weight: bold;
+ // border-right-color: #fff;
+ // border-left-color: #fff;
+ }
+ .el-tabs__item:not(.is-disabled):hover {
+ color: #ff7733;
+ }
}
.el-tabs__active-bar {
background-color: #ff7733;
--
Gitblit v1.8.0