From 24886024f56264fe5453a331bc076a52c19dc5bb Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期四, 06 八月 2020 13:38:16 +0800
Subject: [PATCH] 区域/时间规则/系统维护/实时监控/应用窗口全屏布局更新
---
src/pages/cameraAccess/index/App.vue | 2
src/pages/vindicate/index/App.vue | 392 +++++++++++++++++++++++++++++++-----------------
src/pages/cameraAccess/components/TimeSlider.vue | 2
src/pages/desktop/index/components/ToolsEntry.vue | 7
src/pages/cameraVideo/index/App.vue | 13
src/pages/desktop/index/components/DFrame.vue | 6
src/pages/cameraAccess/index/VideoManage.vue | 5
src/components/LeftNav.vue | 7
src/pages/cameraVideo/index/Video.vue | 7
src/pages/desktop/index/mock/userData.json | 2
src/pages/cameraAccess/components/SceneRule.vue | 2
11 files changed, 286 insertions(+), 159 deletions(-)
diff --git a/src/components/LeftNav.vue b/src/components/LeftNav.vue
index 1ad2f58..3bd521f 100644
--- a/src/components/LeftNav.vue
+++ b/src/components/LeftNav.vue
@@ -45,7 +45,7 @@
@click="searchAreaData"
></i>
</el-input>
- <div class="tree-close">
+ <!-- <div class="tree-close">
<el-tooltip content="鏀惰捣鐩綍鏍�" placement="bottom" popper-class="atooltip">
<i
class="el-icon-s-fold"
@@ -53,7 +53,7 @@
@click="closeTree"
></i>
</el-tooltip>
- </div>
+ </div> -->
</li>
<!-- 娣诲姞鍖哄煙鍥炬爣 -->
@@ -514,6 +514,9 @@
.left-tree-box {
float: left;
width: 100%;
+ .el-tabs__nav-prev,.el-tabs__nav-next{
+ display: none;
+ }
.el-tabs--border-card {
border: none;
box-shadow: none;
diff --git a/src/pages/cameraAccess/components/SceneRule.vue b/src/pages/cameraAccess/components/SceneRule.vue
index a24fec5..2fe8c47 100644
--- a/src/pages/cameraAccess/components/SceneRule.vue
+++ b/src/pages/cameraAccess/components/SceneRule.vue
@@ -6,7 +6,7 @@
type="primary"
size="mini"
@click="handleCreate"
- style="margin-left:87%"
+ style="margin-left:90%"
v-show="!editScene"
>+ 娣诲姞鍦烘櫙</el-button>
</div>
diff --git a/src/pages/cameraAccess/components/TimeSlider.vue b/src/pages/cameraAccess/components/TimeSlider.vue
index 4adce16..c3b4a8e 100644
--- a/src/pages/cameraAccess/components/TimeSlider.vue
+++ b/src/pages/cameraAccess/components/TimeSlider.vue
@@ -161,7 +161,7 @@
position: absolute;
margin-top: -27px;
top: 0;
- right: 0;
+ right: 30px;
display: flex;
i {
font-size: 16px;
diff --git a/src/pages/cameraAccess/index/App.vue b/src/pages/cameraAccess/index/App.vue
index c16940c..e219928 100644
--- a/src/pages/cameraAccess/index/App.vue
+++ b/src/pages/cameraAccess/index/App.vue
@@ -84,6 +84,7 @@
padding: 14px;
overflow-x: hidden;
overflow-y: hidden;
+ cursor: ew-resize;
}
.resize-bar {
width: 310px;
@@ -104,6 +105,7 @@
border-right: 2px solid #efefef;
border-left: 1px solid #e0e0e0;
pointer-events: none;
+ cursor: ew-resize;
}
.resize-bar:hover ~ .resize-line,
.resize-bar:active ~ .resize-line {
diff --git a/src/pages/cameraAccess/index/VideoManage.vue b/src/pages/cameraAccess/index/VideoManage.vue
index c388bb9..0cf560d 100644
--- a/src/pages/cameraAccess/index/VideoManage.vue
+++ b/src/pages/cameraAccess/index/VideoManage.vue
@@ -251,8 +251,11 @@
&>.el-tabs__header{
position: fixed;
top:0;
+
width:100%;
- z-index:9;
+ z-index:999;
+ height: 54px;
+ overflow-y: hidden;
}
}
.el-tabs__header {
diff --git a/src/pages/cameraVideo/index/App.vue b/src/pages/cameraVideo/index/App.vue
index ccaf13f..b2fc260 100644
--- a/src/pages/cameraVideo/index/App.vue
+++ b/src/pages/cameraVideo/index/App.vue
@@ -1,13 +1,13 @@
<template>
<div class="column">
- <div class="column-left" :style="`height:${screenHeight}px;`">
+ <div class="column-left" >
<div class="resize-bar"></div>
<div class="resize-line"></div>
<div class="resize-save">
<left-nav :appName="'Camera'" :height="screenHeight - 40"></left-nav>
</div>
</div>
- <div class="column-right" :style="`height:${screenHeight}px;`">
+ <div class="column-right" >
<right-side />
</div>
<card-window></card-window>
@@ -44,7 +44,7 @@
<style lang="scss" scoped>
.column {
- overflow: hidden;
+ height:100%;
}
.column-left {
height: inherit;
@@ -57,6 +57,7 @@
background-color: #fff;
box-sizing: border-box;
overflow: hidden;
+
}
.resize-save {
position: absolute;
@@ -64,7 +65,7 @@
right: 5px;
bottom: 0;
left: 0;
- padding: 16px;
+ padding: 14px;
overflow-x: hidden;
}
.resize-bar {
@@ -84,8 +85,8 @@
top: 0;
bottom: 0;
z-index: 100;
- border-right: 2px solid #eee;
- border-left: 1px solid #bbb;
+ border-right: 2px solid #efefef;
+ border-left: 1px solid #e0e0e0;
pointer-events: none;
}
.resize-bar:hover ~ .resize-line,
diff --git a/src/pages/cameraVideo/index/Video.vue b/src/pages/cameraVideo/index/Video.vue
index b8cf1a2..789a470 100644
--- a/src/pages/cameraVideo/index/Video.vue
+++ b/src/pages/cameraVideo/index/Video.vue
@@ -555,7 +555,8 @@
.monitoring-right {
width: 100%;
height: 100%;
- float: right;
+ min-width: 1243px;
+ //float: right;
box-sizing: border-box;
padding: 10px;
background-color: #e9ebf2;
@@ -609,9 +610,9 @@
// @media screen and (max-width: 1700px){
// }
- width: calc(29.5% - 10px);
+ //width: calc(29.5% - 10px);
+ width: calc(34% - 10px);
//width: auto;
- // width: 23%;
height: 73%;
background-color: #fff;
float: left;
diff --git a/src/pages/desktop/index/components/DFrame.vue b/src/pages/desktop/index/components/DFrame.vue
index c6e7cc6..4909bb4 100644
--- a/src/pages/desktop/index/components/DFrame.vue
+++ b/src/pages/desktop/index/components/DFrame.vue
@@ -96,7 +96,6 @@
this.fullScreen = !this.fullScreen;
},
frameClick() {
-
this.$store.commit('desktop/refreshFrame', this.data);
},
minFrame(data, e) {
@@ -105,12 +104,13 @@
//淇濆瓨褰撳墠搴旂敤蹇収
html2canvas(curIframe.contentWindow.document.body, {
dpi: window.devicePixelRatio * 4,
- logging: true, //鏌ョ湅html2canvas鍐呴儴鎵ц娴佺▼
+ //logging: true, //鏌ョ湅html2canvas鍐呴儴鎵ц娴佺▼
removeContainer: true,
imageTimeout: 0,
useCORS: true //寮�鍚法鍩熼厤缃�
}).then(canvas => {
let shotSrc = canvas.toDataURL();
+
this.$store.commit('desktop/addMinDock', {
id: this.data.id,
src: this.data.icon,
@@ -211,7 +211,7 @@
width: 100% !important;
height: 100% !important;
left: 0 !important;
- top: 0 !important;
+ top: 40px !important;
}
.d-frame .d-frame-title {
diff --git a/src/pages/desktop/index/components/ToolsEntry.vue b/src/pages/desktop/index/components/ToolsEntry.vue
index c6c4b2e..b343653 100644
--- a/src/pages/desktop/index/components/ToolsEntry.vue
+++ b/src/pages/desktop/index/components/ToolsEntry.vue
@@ -16,6 +16,9 @@
</div>
</div>
</div>
+ <div class="logo">
+ <img :src="`${publicPath}images/desktop/desk-logo.png`" alt="">
+ </div>
</div>
</div>
</template>
@@ -145,6 +148,10 @@
}
}
}
+ .logo{
+ text-align: right;
+ padding-right: 50px;
+ }
}
}
</style>
\ No newline at end of file
diff --git a/src/pages/desktop/index/mock/userData.json b/src/pages/desktop/index/mock/userData.json
index c55fcb2..fee5e06 100644
--- a/src/pages/desktop/index/mock/userData.json
+++ b/src/pages/desktop/index/mock/userData.json
@@ -130,7 +130,7 @@
"type": "2",
"url": "/view/vindicate",
"title": "绯荤粺缁存姢",
- "width": 733,
+ "width": 758,
"height": 534
}
]
diff --git a/src/pages/vindicate/index/App.vue b/src/pages/vindicate/index/App.vue
index 5884d28..167f6fa 100644
--- a/src/pages/vindicate/index/App.vue
+++ b/src/pages/vindicate/index/App.vue
@@ -1,157 +1,160 @@
<template>
- <el-tabs
- id="systemMaintenance"
- v-model="activeName"
- v-loading="loading"
- :element-loading-text="loadingText"
- >
- <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="s-system-manage">
+ <el-tabs
+
+ id="systemMaintenance"
+ v-model="activeName"
+ v-loading="loading"
+ :element-loading-text="loadingText"
+ >
+ <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>
+ <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>
+ </el-tab-pane>
+ <el-tab-pane label="鏁版嵁搴撶淮鎶�" name="second">
+ <div class="box">
+ <p class="title">
+ <label>鏁版嵁娓呯悊</label>
+ </p>
+ <div class="range">
+ <div class="left">
+ <p>閫夋嫨鏁版嵁鑼冨洿锛�</p>
+ </div>
+ <div class="middle">
+ <el-date-picker
+ v-model="dataRange"
+ type="daterange"
+ range-separator="鑷�"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ style="height:38px"
+ :picker-options="pickerOptions"
+ ></el-date-picker>
+ </div>
+ <div class="right">
+ <el-button @click="deleteData" style="height:38px;background:#ff0000;color:white">鍒犻櫎鏁版嵁</el-button>
+ </div>
+ </div>
+ <div class="tip">
+ <i class="iconfont icontishi-zhuyi"></i>
+ <p class="zhuyi">璇锋敞鎰忥紝鎸変互涓婃棩鏈熻寖鍥村垹闄ょ殑鏁版嵁涓嶅彲鎭㈠锛岀珛鍗崇敓鏁堬紝璇疯皑鎱庢搷浣�</p>
</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">
- <p class="title">
- <label>鏁版嵁娓呯悊</label>
- </p>
- <div class="range">
- <div class="left">
- <p>閫夋嫨鏁版嵁鑼冨洿锛�</p>
- </div>
- <div class="middle">
- <el-date-picker
- v-model="dataRange"
- type="daterange"
- range-separator="鑷�"
- start-placeholder="寮�濮嬫棩鏈�"
- end-placeholder="缁撴潫鏃ユ湡"
- style="height:38px"
- :picker-options="pickerOptions"
- ></el-date-picker>
- </div>
- <div class="right">
- <el-button @click="deleteData" style="height:38px;background:#ff0000;color:white">鍒犻櫎鏁版嵁</el-button>
- </div>
- </div>
- <div class="tip">
- <i class="iconfont icontishi-zhuyi"></i>
- <p class="zhuyi">璇锋敞鎰忥紝鎸変互涓婃棩鏈熻寖鍥村垹闄ょ殑鏁版嵁涓嶅彲鎭㈠锛岀珛鍗崇敓鏁堬紝璇疯皑鎱庢搷浣�</p>
- </div>
- </div>
- </el-tab-pane>
- </el-tabs>
+ </el-tab-pane>
+ </el-tabs>
+ </div>
</template>
<script>
@@ -383,9 +386,116 @@
};
</script>
<style lang="scss">
+.s-system-manage {
+ width: 100% !important;
+ 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;
--
Gitblit v1.8.0