From 4d010f1940db29c1effc0f9bd6a975436c1183d9 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期三, 13 十月 2021 13:53:55 +0800
Subject: [PATCH] 解决冲突
---
src/pages/settings/views/clusterManagement.vue | 2
src/components/player/wfs/controller/buffer-controller.js | 45 +-
src/pages/changchunTrack/components/VideoItem.vue | 142 +++++--
src/pages/systemMonitor/index/App.vue | 132 ++++---
src/pages/settings/views/generalSettings.vue | 7
src/pages/settings/views/NetSettings.vue | 98 ++--
src/pages/changchunTrack/index/Video.vue | 517 +++--------------------------
src/components/player/wfs/wfs.js | 29 -
8 files changed, 327 insertions(+), 645 deletions(-)
diff --git a/src/components/player/wfs/controller/buffer-controller.js b/src/components/player/wfs/controller/buffer-controller.js
index 3578198..31c5e27 100644
--- a/src/components/player/wfs/controller/buffer-controller.js
+++ b/src/components/player/wfs/controller/buffer-controller.js
@@ -2,17 +2,12 @@
* Buffer Controller
*/
/* eslint-disable */
-import Event from '../events';
-import EventHandler from '../event-handler';
+import Event from "../events";
+import EventHandler from "../event-handler";
class BufferController extends EventHandler {
constructor(wfs) {
- super(
- wfs,
- Event.MEDIA_ATTACHING,
- Event.BUFFER_APPENDING,
- Event.BUFFER_RESET
- );
+ super(wfs, Event.MEDIA_ATTACHING, Event.BUFFER_APPENDING, Event.BUFFER_RESET);
this.mediaSource = null;
this.media = null;
@@ -27,10 +22,10 @@
this.onsbue = this.onSBUpdateEnd.bind(this);
this.browserType = 0;
- if (navigator.userAgent.toLowerCase().indexOf('firefox') !== -1) {
+ if (navigator.userAgent.toLowerCase().indexOf("firefox") !== -1) {
this.browserType = 1;
}
- this.mediaType = 'H264Raw';
+ this.mediaType = "H264Raw";
this.websocketName = undefined;
this.channelName = undefined;
@@ -54,9 +49,9 @@
this.onmso = this.onMediaSourceOpen.bind(this);
this.onmse = this.onMediaSourceEnded.bind(this);
this.onmsc = this.onMediaSourceClose.bind(this);
- ms.addEventListener('sourceopen', this.onmso);
- ms.addEventListener('sourceended', this.onmse);
- ms.addEventListener('sourceclose', this.onmsc);
+ ms.addEventListener("sourceopen", this.onmso);
+ ms.addEventListener("sourceended", this.onmse);
+ ms.addEventListener("sourceclose", this.onmsc);
// link video and media Source
media.src = URL.createObjectURL(ms);
}
@@ -78,7 +73,7 @@
}
onMediaSourceEnded() {
- console.log('media source ended');
+ console.log("media source ended");
}
onSBUpdateEnd(event) {
@@ -99,10 +94,10 @@
let mediaSource = this.mediaSource;
if (mediaSource) {
// once received, don't listen anymore to sourceopen event
- mediaSource.removeEventListener('sourceopen', this.onmso);
+ mediaSource.removeEventListener("sourceopen", this.onmso);
}
- if (this.mediaType === 'FMp4') {
+ if (this.mediaType === "FMp4") {
this.checkPendingTracks();
}
@@ -116,13 +111,13 @@
}
checkPendingTracks() {
- this.createSourceBuffers({ tracks: 'video', mimeType: '' });
+ this.createSourceBuffers({ tracks: "video", mimeType: "" });
this.pendingTracks = {};
}
onBufferReset(data) {
- if (this.mediaType === 'H264Raw') {
- this.createSourceBuffers({ tracks: 'video', mimeType: data.mimeType });
+ if (this.mediaType === "H264Raw") {
+ this.createSourceBuffers({ tracks: "video", mimeType: data.mimeType });
}
}
@@ -130,15 +125,15 @@
var sourceBuffer = this.sourceBuffer,
mediaSource = this.mediaSource;
let mimeType;
- if (tracks.mimeType === '') {
- mimeType = 'video/mp4;codecs=avc1.420028'; // avc1.42c01f avc1.42801e avc1.640028 avc1.420028
+ if (tracks.mimeType === "") {
+ mimeType = "video/mp4;codecs=avc1.420028"; // avc1.42c01f avc1.42801e avc1.640028 avc1.420028
} else {
- mimeType = 'video/mp4;codecs=' + tracks.mimeType;
+ mimeType = "video/mp4;codecs=" + tracks.mimeType;
}
try {
- let sb = (sourceBuffer['video'] = mediaSource.addSourceBuffer(mimeType));
- sb.addEventListener('updateend', this.onsbue);
+ let sb = (sourceBuffer["video"] = mediaSource.addSourceBuffer(mimeType));
+ sb.addEventListener("updateend", this.onsbue);
track.buffer = sb;
} catch (err) {}
this.wfs.trigger(Event.BUFFER_CREATED, { tracks: tracks });
@@ -161,6 +156,8 @@
return;
}
+ wfs.playerStatus = 1;
+
if (segments && segments.length) {
var segment = segments.shift();
try {
diff --git a/src/components/player/wfs/wfs.js b/src/components/player/wfs/wfs.js
index 51a5761..c7a42ea 100644
--- a/src/components/player/wfs/wfs.js
+++ b/src/components/player/wfs/wfs.js
@@ -2,28 +2,26 @@
* WFS interface, Jeff Yang 2016.10
*/
/* eslint-disable */
-'use strict';
+"use strict";
-import Event from './events';
-import FlowController from './controller/flow-controller';
-import BufferController from './controller/buffer-controller';
-import EventEmitter from 'events';
+import Event from "./events";
+import FlowController from "./controller/flow-controller";
+import BufferController from "./controller/buffer-controller";
+import EventEmitter from "events";
// import XhrLoader from './utils/xhr-loader';
-import WebsocketLoader from './loader/websocket-loader';
+import WebsocketLoader from "./loader/websocket-loader";
class Wfs {
static get version() {
// replaced with browserify-versionify transform
- return '__VERSION__' + 'v.0.0.0.1';
+ return "__VERSION__" + "v.0.0.0.1";
}
static isSupported() {
return (
window.MediaSource &&
- typeof window.MediaSource.isTypeSupported === 'function' &&
- window.MediaSource.isTypeSupported(
- 'video/mp4; codecs="avc1.42c01f,mp4a.40.2"'
- )
+ typeof window.MediaSource.isTypeSupported === "function" &&
+ window.MediaSource.isTypeSupported('video/mp4; codecs="avc1.42c01f,mp4a.40.2"')
);
}
@@ -86,6 +84,7 @@
this.websocketLoader = new WebsocketLoader(this);
this.mediaType = undefined;
this.cameraInfo = {};
+ this.playerStatus = -1;
}
destroy() {
@@ -95,13 +94,7 @@
this.websocketLoader.destroy();
}
- attachMedia(
- media,
- channelName = 'chX',
- mediaType = 'H264Raw',
- websocketName = 'ws',
- cameraInfo = {}
- ) {
+ attachMedia(media, channelName = "chX", mediaType = "H264Raw", websocketName = "ws", cameraInfo = {}) {
// 'H264Raw' 'FMp4'
this.mediaType = mediaType;
this.media = media;
diff --git a/src/pages/changchunTrack/components/VideoItem.vue b/src/pages/changchunTrack/components/VideoItem.vue
index c6b9893..34df410 100644
--- a/src/pages/changchunTrack/components/VideoItem.vue
+++ b/src/pages/changchunTrack/components/VideoItem.vue
@@ -6,10 +6,7 @@
@mouseenter.stop.prevent="videoMouseEnter($event)"
@mouseleave="videoMouseLeave($event)"
>
- <div
- class="video-box-top"
- v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null"
- >
+ <div class="video-box-top" v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null">
<b>{{ videoItem.name }}</b>
<span @click="deleteVideo(videoIndex)">脳</span>
</div>
@@ -35,23 +32,34 @@
:isRunning="videoItem.isRunning"
:isGb="videoItem.cameraType === 1"
:showArea="showArea"
- :hasPoster="hasPoster"
- v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null && TreeDataPool.treeActiveName==='camera'"
+ v-if="!quietSwitch && videoItem !== '' && videoItem !== undefined && videoItem !== null"
></camera-player>
-
- <video
- v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null && TreeDataPool.treeActiveName==='dataStack'"
- :src="videoItem.rtsp"
- autoplay="autoplay"
- poster="/images/cameraVideo/video-poster.png"
- controls
- >鎮ㄧ殑娴忚鍣ㄤ笉鏀寔 video 鏍囩銆�</video>
+ <camera-player
+ :cameraName="qsVideoItem0.name"
+ :cameraID="qsVideoItem0.id"
+ :rtspUrl="qsVideoItem0.rtsp"
+ :isRunning="qsVideoItem0.isRunning"
+ :isGb="qsVideoItem0.cameraType === 1"
+ v-show="quietSwitch && workPlayer === 0"
+ ref="qsPlayer0"
+ v-if="qsVideoItem0 !== '' && qsVideoItem0 !== undefined && qsVideoItem0 !== null"
+ ></camera-player>
+ <camera-player
+ :cameraName="qsVideoItem1.name"
+ :cameraID="qsVideoItem1.id"
+ :rtspUrl="qsVideoItem1.rtsp"
+ :isRunning="qsVideoItem1.isRunning"
+ :isGb="qsVideoItem1.cameraType === 1"
+ v-show="quietSwitch && workPlayer === 1"
+ ref="qsPlayer1"
+ v-if="qsVideoItem1 !== '' && qsVideoItem1 !== undefined && qsVideoItem1 !== null"
+ ></camera-player>
</div>
</div>
</template>
<script>
-import { ptzControl } from "@/api/camera"
+import { ptzControl } from "@/api/camera";
import CameraPlayer from "@/components/player";
@@ -67,42 +75,92 @@
videoIndex: null,
starW: {
type: String,
- default: ''
+ default: ""
},
- starH:{
+ starH: {
type: String,
- default: ''
+ default: ""
},
videoItem: {
type: [Object, String],
default: null
},
- showArea: Boolean,
- hasPoster: Boolean,
+ showArea: {
+ type: Boolean,
+ default: false
+ },
+ quietSwitch: {
+ type: Boolean,
+ default: false
+ }
},
data() {
return {
- timer: '',
+ timer: "",
mouseDown: false,
- videoDataItem: null
- }
+ workPlayer: -1,
+ qsVideoItem0: null,
+ qsVideoItem1: null,
+ checkStatusTimer: 0
+ };
},
computed: {
vWidth() {
- if (this.starW!=0) {
- return this.starW
-
+ if (this.starW != 0) {
+ return this.starW;
}
let per = (1 / this.videoGuid) * 100 + "%";
return `calc(${per} - 4px)`;
},
-
+
vHeight() {
- if (this.starH!=0) {
- return this.starH
+ if (this.starH != 0) {
+ return this.starH;
}
let per = (1 / this.videoGuid) * 100 + "%";
return `calc(${per} - 4px)`;
+ }
+ },
+ watch: {
+ videoItem: function(newVal, oldVal) {
+ if (!this.quietSwitch) {
+ return;
+ }
+
+ console.log("new rtsp:", newVal);
+ console.log("this.workPlayer:", this.workPlayer);
+ // 棣栨
+ if (this.workPlayer < 0) {
+ this.workPlayer = 0;
+ this.qsVideoItem0 = newVal;
+ return;
+ }
+
+ let _this = this;
+ clearInterval(_this.checkStatusTimer);
+
+ if (_this.workPlayer == 0) {
+ _this.qsVideoItem1 = newVal;
+ _this.checkStatusTimer = setInterval(() => {
+ // console.log(_this.$refs.qsPlayer1.wfs.playerStatus);
+ if (_this.$refs.qsPlayer1.wfs.playerStatus == 1) {
+ _this.workPlayer = 1;
+ _this.qsVideoItem0 = null;
+ clearInterval(_this.checkStatusTimer);
+ }
+ }, 1000);
+ }
+
+ if (_this.workPlayer == 1) {
+ _this.qsVideoItem0 = newVal;
+ _this.checkStatusTimer = setInterval(() => {
+ if (_this.$refs.qsPlayer0.wfs.playerStatus == 1) {
+ _this.workPlayer = 0;
+ _this.qsVideoItem1 = null;
+ clearInterval(_this.checkStatusTimer);
+ }
+ }, 1000);
+ }
}
},
methods: {
@@ -113,42 +171,40 @@
// 褰撳墠鍙敮鎸佸浗鏍囨憚鍍忔満
// console.log(type, 'ptCtrl')
if (this.videoItem.cameraType != 1) {
- return
+ return;
}
this.mouseDown = true;
let params = {
cameraId: this.videoItem.id,
cameraType: this.videoItem.cameraType,
PTZType: type
- }
- ptzControl(params).then(rsp => {
+ };
+ ptzControl(params).then((rsp) => {
// console.log(rsp)
- })
- let that = this
+ });
+ let that = this;
this.timer = setTimeout(() => {
- that.ptStop()
- }, 5000)
+ that.ptStop();
+ }, 5000);
},
ptStop() {
// 褰撳墠鍙敮鎸佸浗鏍囨憚鍍忔満
if (this.videoItem.cameraType != 1) {
- return
+ return;
}
let params = {
cameraId: this.videoItem.id,
cameraType: this.videoItem.cameraType,
PTZType: "stop"
- }
+ };
if (this.mouseDown) {
- this.mouseDown = false
- ptzControl(params).then(rsp => {
+ this.mouseDown = false;
+ ptzControl(params).then((rsp) => {
// console.log(rsp)
- })
+ });
}
},
deleteVideo(index) {
- let video = this.TreeDataPool.videoArr;
- video[index].isPlaying = false;
this.TreeDataPool.setVideoArr(index, undefined, this);
},
videoMouseEnter(e) {
diff --git a/src/pages/changchunTrack/index/Video.vue b/src/pages/changchunTrack/index/Video.vue
index 11bba5b..1f1b84a 100644
--- a/src/pages/changchunTrack/index/Video.vue
+++ b/src/pages/changchunTrack/index/Video.vue
@@ -3,44 +3,13 @@
<div class="monitoring-right" ref="videoRight">
<div class="main-top">
<div class="monitoring-video" ref="monitorVideo">
- <!-- <div class="monitoring-video-guid">
- <span
- :class="guid === 1 ? 'iconfont icongongge1 activegongge':'iconfont icongongge1'"
- @click="setGuid(1)"
- ></span>
- <span
- :class="guid === 2 ? 'iconfont icongongge activegongge':'iconfont icongongge'"
- @click="setGuid(2)"
- ></span>
- <span
- :class="guid === 3 ? 'iconfont icongongge2 activegongge':'iconfont icongongge2'"
- @click="setGuid(3)"
- ></span>
- <el-tooltip v-if="TreeDataPool.selectedNode.id" :content="`${showArea?'闅愯棌鍖哄煙':'鏌ョ湅鍖哄煙'}`" placement="bottom" popper-class="atooltip">
- <span :class="showArea?'activegongge':''" class="iconfont iconquyu" @click="toggleShowArea"></span>
- </el-tooltip>
- </div> -->
<div class="fixedRatioBox">
- <div
- class="video-main-box-side"
- v-if="visibilityState && allVideoNum == 5"
- >
+ <div class="video-main-box-side" v-if="visibilityState && allVideoNum == 5">
<VideoItem
- :videoGuid="guid"
:starW="`calc(66.66% - 4px)`"
:starH="`calc(66.66% - 4px)`"
:videoItem="centerVideo"
- :showArea="showArea"
- v-show="!showBackup"
- class="activeItem"
- ></VideoItem>
- <VideoItem
- :videoGuid="guid"
- :starW="`calc(66.66% - 4px)`"
- :starH="`calc(66.66% - 4px)`"
- :videoItem="BackupVideo"
- :showArea="showArea"
- v-show="showBackup"
+ quietSwitch
class="activeItem"
></VideoItem>
<VideoItem
@@ -49,21 +18,17 @@
:videoGuid="guid"
:videoIndex="index"
:videoItem="item"
- :showArea="showArea"
@click="videoItemClick(index)"
></VideoItem>
</div>
- <div
- class="video-main-box-side"
- v-if="visibilityState && allVideoNum == 7"
- >
+ <div class="video-main-box-side" v-if="visibilityState && allVideoNum == 7">
<VideoItem
:videoGuid="guid"
:starW="`calc(74.99% - 4px)`"
:starH="`calc(74.99% - 4px)`"
:videoItem="centerVideo"
- :showArea="showArea"
+ quietSwitch
class="activeItem"
></VideoItem>
@@ -73,15 +38,11 @@
:videoGuid="guid"
:videoIndex="index"
:videoItem="item"
- :showArea="showArea"
@click="videoItemClick(index)"
></VideoItem>
</div>
- <div
- class="video-main-box-side"
- v-if="visibilityState && allVideoNum == 12"
- >
+ <div class="video-main-box-side" v-if="visibilityState && allVideoNum == 12">
<div style="width: 100%; height: 25%">
<VideoItem
v-for="(item, index) in TreeDataPool.videoArr.slice(0, 4)"
@@ -91,7 +52,6 @@
:starW="`calc(24.99% - 4px)`"
:starH="`calc(100% - 4px)`"
:videoItem="item"
- :showArea="showArea"
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -104,7 +64,6 @@
:starW="`calc(100% - 4px)`"
:starH="`calc(50% - 4px)`"
:videoItem="item"
- :showArea="showArea"
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -113,19 +72,8 @@
:starW="`calc(50% - 4px)`"
:starH="`calc(50% - 4px)`"
:videoItem="centerVideo"
- :showArea="showArea"
- :hasPoster="false"
+ quietSwitch
></VideoItem>
- <!-- <VideoItem
- :videoGuid="guid"
- :starW="`calc(50% - 4px)`"
- :starH="`calc(50% - 4px)`"
- :videoItem="centerVideo"
- :showArea="showArea"
- class="activeItem"
- v-if="!showSub"
-
- ></VideoItem> -->
<div style="width: 25%; height: 50%; float: left">
<VideoItem
@@ -136,7 +84,6 @@
:starW="`calc(100% - 4px)`"
:starH="`calc(50% - 4px)`"
:videoItem="item"
- :showArea="showArea"
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -149,16 +96,12 @@
:starW="`calc(24.99% - 4px)`"
:starH="`calc(100% - 4px)`"
:videoItem="item"
- :showArea="showArea"
@click="videoItemClick(index)"
></VideoItem>
</div>
</div>
- <div
- class="video-main-box-side"
- v-if="visibilityState && allVideoNum == 16"
- >
+ <div class="video-main-box-side" v-if="visibilityState && allVideoNum == 16">
<div style="width: 100%; height: 20%">
<!-- :class="[
TreeDataPool.activeVideoIndex === index + 1
@@ -174,7 +117,6 @@
:starW="`calc(19.99% - 4px)`"
:starH="`calc(100% - 4px)`"
:videoItem="item"
- :showArea="showArea"
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -187,7 +129,6 @@
:starW="`calc(100% - 4px)`"
:starH="`calc(33.33% - 4px)`"
:videoItem="item"
- :showArea="showArea"
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -196,7 +137,7 @@
:starW="`calc(60% - 4px)`"
:starH="`calc(60% - 4px)`"
:videoItem="centerVideo"
- :showArea="showArea"
+ quietSwitch
class="activeItem"
></VideoItem>
<div style="width: 20%; height: 60%; float: left">
@@ -208,7 +149,6 @@
:starW="`calc(100% - 4px)`"
:starH="`calc(33.33% - 4px)`"
:videoItem="item"
- :showArea="showArea"
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -221,7 +161,6 @@
:starW="`calc(19.99% - 4px)`"
:starH="`calc(100% - 4px)`"
:videoItem="item"
- :showArea="showArea"
@click="videoItemClick(index)"
></VideoItem>
</div>
@@ -235,42 +174,34 @@
<script>
import VideoItem from "../components/VideoItem";
-import { getCameraPlayList, showAllCameras } from "@/api/trackCamera";
+import { showAllCameras } from "@/api/trackCamera";
export default {
name: "Video",
components: {
- VideoItem,
+ VideoItem
+ },
+ computed: {
+ nextIndex() {
+ if (this.centerIndex == this.list2TakeTurn.length - 1) {
+ return 0;
+ }
+ return this.centerIndex + 1;
+ }
},
data() {
return {
guid: 3,
- center: "",
- defaultHeight: 432,
- defaultWidth: 600,
- track: false,
- traceCache: {},
- traceTimer: null,
- tracePubUrl: `${location.protocol === "https" ? "wss" : "ws"}://${
- location.host
- }/track`,
- websocket: null,
visibilityState: true,
- showArea: false,
- videoNum2Play: 0,
+ allVideoNum: 5,
centerVideo: null,
- BackupVideo: null,
list2TakeTurn: [],
timer: null,
reqTimer: null,
- centerIndex: 0,
- showBackup: false,
+ centerIndex: 0
};
},
created() {
- this.TreeDataPool.activeVideoIndex = sessionStorage.activeIndex
- ? Number(sessionStorage.activeIndex)
- : this.TreeDataPool.activeVideoIndex;
this.getActiveIndex();
this.TreeDataPool.readonly = true;
this.TreeDataPool.gbReadonly = true;
@@ -278,19 +209,9 @@
},
mounted() {
document.addEventListener("visibilitychange", this.visibilitychange, false);
- this.$nextTick(() => {
- window.addEventListener("resize", this.resizeMonitorTask);
- //this.getRightWidth();
- this.resizeMonitorTask();
- });
- this.getCenter();
- this.blackAngWhite();
- this.VideoPhotoData.queryTagList();
- // let
- // this.TreeDataPool.getAllChildrenNodes()
showAllCameras()
.then((res) => {
- this.videoNum2Play = res.data.length;
+ this.setAllVideoNum(res.data.length);
res.data.forEach((info, i) => {
let camera = this.TreeDataPool.getCameraInfoById(info.id);
this.TreeDataPool.setVideoArr(i, camera, this);
@@ -311,40 +232,52 @@
},
beforeDestroy() {
window.removeEventListener("resize", this.getRightWidth);
- this.CardList.details = [];
window.clearInterval(this.trackTimer);
- if (this.websocket) {
- this.websocket.close();
- }
},
watch: {
- "TreeDataPool.videoArr": function (newArry) {
- const cameras = this.filterNodes(newArry);
+ "TreeDataPool.videoArr"(value) {
this.getActiveIndex();
- },
- "VideoPhotoData.selectBlacks": function (value) {
- this.blackAngWhite();
- },
- "VideoPhotoData.selectWhites": function (value) {
- this.blackAngWhite();
},
"TreeDataPool.showTreeBox"(value) {
this.getRightWidth();
},
"TreeDataPool.selectedNodes.length"(value) {
+ this.getActiveIndex();
this.list2TakeTurn = [];
- this.videoNum2Play = this.TreeDataPool.selectedNodes.length;
- this.TreeDataPool.selectedNodes.forEach((id, i) => {
- let camera = this.TreeDataPool.getCameraInfoById(id);
- this.TreeDataPool.setVideoArr(i, camera, this);
+ this.setAllVideoNum(this.TreeDataPool.selectedNodes.length);
+ this.TreeDataPool.setVideoArr(this.TreeDataPool.activeVideoIndex, this.TreeDataPool.selectedNode, this);
- if (camera.status >= 1) {
- this.list2TakeTurn.push(camera);
- }
- });
- },
+ // this.TreeDataPool.selectedNodes.forEach((id, i) => {
+ // let camera = this.TreeDataPool.getCameraInfoById(id);
+ // this.TreeDataPool.setVideoArr(i, camera, this);
+
+ // if (camera.status >= 1) {
+ // this.list2TakeTurn.push(camera);
+ // }
+ // });
+
+ this.centerVideo = { ...this.TreeDataPool.selectedNode };
+ }
},
methods: {
+ setAllVideoNum(videoCount) {
+ if (videoCount <= 5) {
+ this.guid = 3;
+ this.allVideoNum = 5;
+ } else if (videoCount <= 7) {
+ this.guid = 4;
+ this.allVideoNum = 7;
+ } else if (videoCount <= 12) {
+ this.guid = 4;
+ this.allVideoNum = 12;
+ } else if (videoCount <= 16) {
+ this.guid = 5;
+ this.allVideoNum = 16;
+ } else {
+ this.guid = 5;
+ this.allVideoNum = 16;
+ }
+ },
isSame(arr1, arr2) {
let _arr1 = [];
arr1.forEach((item) => {
@@ -360,35 +293,21 @@
}
return true;
},
- centerPlay(typ) {
+ centerPlay() {
if (this.list2TakeTurn.length == 1) {
- this.centerVideo = this.list2TakeTurn[0];
+ this.centerVideo = { ...this.list2TakeTurn[0] };
return;
}
let that = this;
- // if () {
-
- // }
- if (typ == 'change') {
- this.showBackup = true;
- }
- that.centerVideo = that.list2TakeTurn[that.centerIndex];
+ that.centerVideo = { ...that.list2TakeTurn[that.centerIndex] };
that.centerIndex++;
if (that.centerIndex == that.list2TakeTurn.length) {
that.centerIndex = 0;
}
- if (typ == 'change') {
- setTimeout(() => {
- this.showBackup = false;
- that.BackupVideo = that.centerVideo;
- }, 2000);
- }else{
- that.BackupVideo = that.centerVideo;
- }
clearInterval(this.timer);
this.timer = setInterval(() => {
- that.centerVideo = that.list2TakeTurn[that.centerIndex];
+ that.centerVideo = { ...that.list2TakeTurn[that.centerIndex] };
that.centerIndex++;
if (that.centerIndex == that.list2TakeTurn.length) {
that.centerIndex = 0;
@@ -413,143 +332,10 @@
if (newArr.length != 0 && !this.isSame(this.list2TakeTurn, newArr)) {
this.list2TakeTurn = [...newArr1];
this.centerIndex = 0;
- this.centerPlay('change');
+ this.centerPlay("change");
}
});
}, 2500);
- },
- initTrackWebsocket() {
- if (typeof WebSocket === "undefined") {
- alert("鎮ㄧ殑娴忚鍣ㄤ笉鏀寔socket");
- } else {
- // 瀹炰緥鍖杝ocket
- this.websocket = new WebSocket(this.tracePubUrl);
- // 鐩戝惉socket娑堟伅
- this.websocket.onopen = this.websocketonopen;
- this.websocket.onmessage = this.recvieTrackMessage;
- }
- },
- websocketonopen() {
- //杩炴帴寤虹珛涔嬪悗鎵цsend鏂规硶鍙戦�佹暟鎹�
- this.websocket.send("sub");
- },
- tracking() {
- getCameraPlayList().then((data) => {
- if (data && data.length) {
- data.forEach((ins) => {
- let newCamera = this.TreeDataPool.getCameraInfoById(
- ins.NewCameraId
- );
- if (!newCamera) {
- console.log("鏈煡鎵惧埌鎽勫儚鏈猴細", ins.NewCameraId);
- return;
- }
- if (ins.IsNew) {
- this.newPlayerInViewBox(newCamera);
- } else {
- this.replacePlayer(newCamera, ins.OldCameraId);
- }
- });
- }
- });
- },
- recvieTrackMessage(e) {
- let dataJson = JSON.parse(e.data);
- let cache = this.traceCache;
- let camera = dataJson.camera;
- let person = dataJson.person;
- let create = false;
-
- // 濡傛灉鏄凡缁忓湪鎾斁鐨勬憚鍍忔満, 鐩存帴杩斿洖
- if (cache[camera]) {
- cache[camera][person] = 10;
- return;
- }
-
- cache[camera] = {};
- cache[camera][person] = 10;
-
- // 鏌ヨ鎾斁璇ヤ汉鐨勪笂涓�涓憚鍍忔満
- for (var cam in cache) {
- if (cam === camera) {
- continue;
- }
-
- if (cache[cam][person]) {
- // 鎵惧埌涓婁竴涓憚鍍忔満, 鍒ゆ柇鎽勫儚鏈洪噷鏄惁杩樻湁鍏朵粬浜�, 鏈�:鏂板紑鎾斁鍣� 娌℃湁:鍒囨崲
- console.log("last camera:", cam, Object.keys(cache[cam]).length);
- if (Object.keys(cache[cam]).length > 2) {
- delete cache[cam][person];
- this.newPlayerInViewBox(camera);
- return;
- } else {
- this.replacePlayer(camera, cam);
- delete cache[cam];
- return;
- }
- }
- }
-
- // 鏈彂鐜版挱鏀捐褰�
- this.newPlayerInViewBox(camera);
- },
- newPlayerInViewBox(id) {
- // 鏂板鎾斁绐楀彛
- let camera = this.TreeDataPool.getCameraInfoById(id);
- let emptyIndex = -1;
- let exist = false;
- for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
- // eslint-disable-next-line
- if (
- this.TreeDataPool.videoArr[i] === "" ||
- this.TreeDataPool.videoArr[i] === undefined
- ) {
- if (emptyIndex === -1) {
- emptyIndex = i;
- }
- } else {
- if (this.TreeDataPool.videoArr[i].id === camera.id) {
- exist = true;
- }
- }
- }
- if (!exist && emptyIndex !== -1) {
- this.TreeDataPool.setVideoArr(emptyIndex, camera, this);
- }
- },
- replacePlayer(id, oldCameraId) {
- let camera = this.TreeDataPool.getCameraInfoById(id);
- // 鏇挎崲鎾斁鍣�
- for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
- // eslint-disable-next-line
- if (
- this.TreeDataPool.videoArr[i] &&
- this.TreeDataPool.videoArr[i] !== undefined &&
- this.TreeDataPool.videoArr[i] !== ""
- ) {
- if (this.TreeDataPool.videoArr[i].id === oldCameraId) {
- this.TreeDataPool.setVideoArr(i, camera, this);
- return true;
- }
- }
- }
-
- return false;
- },
- closePlayer(id) {
- for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
- // eslint-disable-next-line
- if (
- this.TreeDataPool.videoArr[i] &&
- this.TreeDataPool.videoArr[i] !== undefined &&
- this.TreeDataPool.videoArr[i] !== ""
- ) {
- if (this.TreeDataPool.videoArr[i].id === id) {
- this.TreeDataPool.setVideoArr(i, undefined, this);
- return true;
- }
- }
- }
},
visibilitychange() {
switch (document.visibilityState) {
@@ -561,198 +347,27 @@
break;
}
},
- blackAngWhite() {
- if (this.VideoPhotoData.selectBlacks.length > 0) {
- for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) {
- this.$set(this.VideoPhotoData.whiteList[i], "disabled", true);
- }
- }
- if (this.VideoPhotoData.selectBlacks.length == 0) {
- for (let i = 0; i < this.VideoPhotoData.whiteList.length; i++) {
- this.$set(this.VideoPhotoData.whiteList[i], "disabled", false);
- }
- }
- if (this.VideoPhotoData.selectWhites.length > 0) {
- for (let i = 0; i < this.VideoPhotoData.blackList.length; i++) {
- this.$set(this.VideoPhotoData.blackList[i], "disabled", true);
- }
- }
- if (this.VideoPhotoData.selectWhites.length == 0) {
- for (let i = 0; i < this.VideoPhotoData.blackList.length; i++) {
- this.$set(this.VideoPhotoData.blackList[i], "disabled", false);
- }
- }
- },
- closeWindow(index) {
- this.CardList.addBaseList.splice(index, 1);
- },
- getVideoHeight() {
- let h = this.$refs.monitorVideo.offsetHeight;
- // this.$refs.monitorTask.style.height = h + "px";
- },
- resizeMonitorTask() {
- this.getRightWidth();
- this.getVideoHeight();
- },
- getRightWidth() {
- let w = this.$refs.videoRight.offsetWidth;
- // this.$refs.monitorTask.style.width =w - this.$refs.monitorVideo.offsetWidth - 40 + "px";
- },
- filterNodes(selectArry) {
- let nodes = [];
- selectArry.forEach((i) => {
- if (i && nodes.indexOf(i.id) < 0) {
- nodes.push(i.id);
- }
- });
- return nodes;
- },
videoItemClick(index) {
this.TreeDataPool.activeVideoIndex = index;
this.TreeDataPool.activeForceChoose = true;
- },
- toAdd(item) {
- this.CardList.addBaseList.push(item);
- },
- getCenter() {
- this.center = {
- x: document.documentElement.clientWidth / 2 - 250,
- y: document.documentElement.clientHeight / 2 - 200,
- };
- },
- resizeWidth(w) {
- this.defaultWidth = w;
- },
- resizeHeight(h) {
- this.defaultHeight = h;
- },
- saveAddBase(item, index) {
- if (
- this.VideoPhotoData.selectBlacks.length === 0 &&
- this.VideoPhotoData.selectWhites.length === 0
- ) {
- this.$notify({
- title: "娉ㄦ剰",
- message: "璇烽�夋嫨瑕佹坊鍔犵殑搴曞簱",
- type: "warning",
- });
- return;
- }
- let res = this.VideoPhotoData.addBase(item);
- res.then((data) => {
- console.log("then", data);
- if (data.success) {
- this.$notify({
- title: "鎴愬姛",
- message: data.data,
- type: "success",
- });
- } else {
- this.$notify({
- title: "澶辫触",
- message: data.data,
- type: "error",
- });
- }
- this.CardList.addBaseList.splice(index, 1);
- this.VideoPhotoData.selectBlacks = [];
- this.VideoPhotoData.selectWhites = [];
- });
},
getActiveIndex() {
this.TreeDataPool.videoArr.length = this.allVideoNum;
let nullVideoIndex = "";
for (let i = 0; i < this.TreeDataPool.videoArr.length; i++) {
// eslint-disable-next-line
- if (
- this.TreeDataPool.videoArr[i] === "" ||
- this.TreeDataPool.videoArr[i] === undefined
- ) {
+ if (this.TreeDataPool.videoArr[i] === "" || this.TreeDataPool.videoArr[i] === undefined) {
nullVideoIndex = i;
- } else {
- nullVideoIndex = "";
+ break;
}
}
- if (
- this.TreeDataPool.activeVideoIndex !== "" &&
- this.TreeDataPool.activeVideoIndex <
- this.TreeDataPool.videoArr.length - 1
- ) {
- return this.TreeDataPool.activeVideoIndex;
+ if (nullVideoIndex === "") {
+ this.TreeDataPool.activeVideoIndex = this.TreeDataPool.videoArr.length - 1;
} else {
- if (nullVideoIndex === "") {
- this.TreeDataPool.activeVideoIndex =
- this.TreeDataPool.videoArr.length - 1;
- } else {
- this.TreeDataPool.activeVideoIndex = nullVideoIndex;
- }
+ this.TreeDataPool.activeVideoIndex = nullVideoIndex;
}
- },
- setGuid(value) {
- clearTimeout(this.trackTimer);
- if (value < this.guid && this.TreeDataPool.activeVideoIndex > value) {
- // eslint-disable-next-line
- for (
- let i = this.TreeDataPool.activeVideoIndex - 1;
- i < this.TreeDataPool.videoArr.length;
- i++
- ) {
- // eslint-disable-next-line
- if (
- this.TreeDataPool.videoArr[i] &&
- this.TreeDataPool.videoArr[i]["isPlaying"]
- ) {
- this.TreeDataPool.videoArr[i]["isPlaying"] = false;
- }
- }
- }
- this.guid = value;
- sessionStorage.guid = this.guid;
- sessionStorage.activeIndex = this.TreeDataPool.activeVideoIndex;
- this.getActiveIndex();
- },
- toggleShowArea() {
- this.showArea = !this.showArea;
- },
- },
- destroyed() {
- window.removeEventListener("resize", this.getRightWidth);
- // this.CardList.details = [];
- this.CardList.addBaseList = [];
- this.VideoPhotoData.selectBlacks = [];
- this.VideoPhotoData.selectWhites = [];
- },
- computed: {
- allVideoNum() {
- if (this.videoNum2Play <= 5) {
- this.guid = 3;
- return 5;
- }
-
- if (this.videoNum2Play <= 7) {
- this.guid = 4;
- return 7;
- }
-
- if (this.videoNum2Play <= 12) {
- this.guid = 4;
- return 12;
- }
-
- if (this.videoNum2Play <= 16) {
- this.guid = 5;
- return 16;
- }
- this.guid = 5;
- return 16;
- },
- nextIndex() {
- if (this.centerIndex == this.list2TakeTurn.length - 1) {
- return 0;
- }
- return this.centerIndex + 1;
- },
- },
+ }
+ }
};
</script>
diff --git a/src/pages/settings/views/NetSettings.vue b/src/pages/settings/views/NetSettings.vue
index 5d283e1..de44c6d 100644
--- a/src/pages/settings/views/NetSettings.vue
+++ b/src/pages/settings/views/NetSettings.vue
@@ -130,7 +130,8 @@
<el-form :model="ipv4Form" :rules="ipv4FormRules" ref="ipv4Form">
<el-form-item>
<div class="p-title">鏂规硶</div>
- <el-select v-model="value" placeholder="璇烽�夋嫨" size="small">
+ <el-select v-model="value" placeholder="璇烽�夋嫨" size="small"
+ :popper-append-to-body="false">
<el-option
v-for="item in options"
:key="item.value"
@@ -187,7 +188,7 @@
<el-form :model="ipv6Form" :rules="ipv6FormRules" ref="ipv6Form">
<el-form-item>
<div class="p-title">鏂规硶</div>
- <el-select v-model="value" placeholder="璇烽�夋嫨" size="small">
+ <el-select v-model="value" placeholder="璇烽�夋嫨" size="small" :popper-append-to-body="false">
<el-option
v-for="item in options"
:key="item.value"
@@ -207,18 +208,18 @@
<div class="p-title">鍓嶇紑</div>
<div style="display: flex; width: 100%">
<el-input
- v-model="wifiForm.password"
+ v-model="ipv6Form.prefix"
placeholder
size="small"
></el-input>
<div class="ad">
- <i class="el-icon-remove-outline"></i>
+ <i class="el-icon-remove-outline" @click="minusPrefix"></i>
</div>
<div class="ad">
- <i class="el-icon-circle-plus-outline"></i>
+ <i class="el-icon-circle-plus-outline" @click="+(ipv6Form.prefix)++"></i>
</div>
- <div class="ad"><i class="el-icon-refresh-left"></i></div>
+ <div class="ad"><i class="el-icon-refresh-left" @click="ipv6Form.prefix=''"></i></div>
</div>
</el-form-item>
@@ -285,38 +286,38 @@
<div class="wire-detail" v-if="activePage == 2 && inWireDetail">
<div class="title">缃戠粶璁剧疆</div>
<el-form :model="wireForm" :rules="wireFormRules" ref="wireForm">
- <el-form-item prop="name">
- <div class="p-title">缃戠粶鍚嶇О</div>
+ <el-form-item prop="name">
+ <div class="p-title">缃戠粶鍚嶇О</div>
<div class="wifi-name">{{ "缃戠粶" + activeWireItem.index }}</div>
</el-form-item>
- <el-form-item prop="ifname">
- <div class="p-title">缃戝崱</div>
+ <el-form-item prop="ifname">
+ <div class="p-title">缃戝崱</div>
<div class="wifi-name">{{ activeWireItem.name }}</div>
</el-form-item>
- <el-form-item prop="ip">
- <div class="p-title">IP</div>
+ <el-form-item prop="ip">
+ <div class="p-title">IP</div>
<ip-input
:ip="wireForm.ip"
@on-blur="wireForm.ip = arguments[0]"
></ip-input>
</el-form-item>
<el-form-item prop="subMask">
- <div class="p-title">瀛愮綉鎺╃爜</div>
+ <div class="p-title">瀛愮綉鎺╃爜</div>
<ip-input
:ip="wireForm.subMask"
@on-blur="wireForm.subMask = arguments[0]"
></ip-input>
</el-form-item>
- <el-form-item prop="gateway">
- <div class="p-title">缃戝叧</div>
+ <el-form-item prop="gateway">
+ <div class="p-title">缃戝叧</div>
<ip-input
:ip="wireForm.gateway"
@on-blur="wireForm.gateway = arguments[0]"
></ip-input>
</el-form-item>
- <el-form-item prop="dns">
- <div class="p-title">DNS</div>
+ <el-form-item prop="dns">
+ <div class="p-title">DNS</div>
<ip-input
:ip="wireForm.dns"
@on-blur="wireForm.dns = arguments[0]"
@@ -431,6 +432,10 @@
this.fetchWireList();
},
methods: {
+ minusPrefix(){
+ debugger
+ this.ipv6Form.prefix
+ },
switchNetCard(item) {
if (item.active) {
upNetCard({ ifname: item.name }).then(
@@ -583,22 +588,28 @@
.all {
width: 100%;
}
+.wire{
+ width: 460px;
+ margin: 0 auto;
+}
.wire-detail {
+ width: 460px;
+ margin: 0 auto;
.title {
font-size: 16px;
margin-bottom: 10px;
}
.ip-input-container {
- max-width: none !important;
- height: 32px;
- line-height: normal;
- box-sizing: border-box;
- // background-color: #f2f2f7;
- text-align: left;
- border-radius: 20px;
- border: 2px solid transparent; display: flex;
-
- }
+ max-width: none !important;
+ height: 32px;
+ line-height: normal;
+ box-sizing: border-box;
+ // background-color: #f2f2f7;
+ text-align: left;
+ border-radius: 20px;
+ border: 2px solid transparent;
+ display: flex;
+ }
.btns {
display: flex;
justify-content: space-between;
@@ -697,7 +708,9 @@
font-size: 16px;
line-height: 48px;
color: #333333;
- font-weight: bold;
+ font-weight: bold; background: #F2F2F7;
+ border-radius: 8px;
+ margin-bottom: 10px;
}
.el-form-item.is-required:not(.is-no-asterisk)
> .el-form-item__label:before,
@@ -758,11 +771,10 @@
background-color: #ffffff;
border: 2px solid transparent;
border-radius: 20px;
- height: 32px;
+ height: 32px !important;
padding: 0 15px;
font-size: 14px;
line-height: 32px;
-
font-weight: bold;
}
.el-input__inner::placeholder {
@@ -834,7 +846,7 @@
}
}
.wifi-detail {
- max-width: 600px;
+ max-width: 454px;
margin: 0 auto;
transition: all 0.3s linear 0s;
.general-box {
@@ -893,21 +905,12 @@
margin-top: 0;
display: flex;
justify-content: space-between;
- margin-bottom: 20px;
- .left {
- background-color: rgba(240, 240, 240, 1);
- height: 40px;
- line-height: 40px;
- width: 48%;
- border-radius: 10px;
+ margin-bottom: 4px;
+ .cancel {
+ width: 218px;
}
- .right {
- background-color: rgba(61, 104, 225, 1);
- height: 40px;
- line-height: 40px;
- width: 48%;
- color: #fff;
- border-radius: 10px;
+ .ok {
+ width: 218px;
}
}
.wifi-name {
@@ -922,13 +925,8 @@
.ad {
margin-top: 10px;
height: 32px;
- /* margin: 4px 0px 4px 5px; */
- /* border-radius: 5px; */
- line-height: 31px;
- /* width: 27px; */
text-align: center;
font-size: 17px;
- /* font-weight: bold; */
margin-left: 10px;
cursor: pointer;
}
diff --git a/src/pages/settings/views/clusterManagement.vue b/src/pages/settings/views/clusterManagement.vue
index 970ca94..df987f3 100644
--- a/src/pages/settings/views/clusterManagement.vue
+++ b/src/pages/settings/views/clusterManagement.vue
@@ -625,7 +625,7 @@
}
.cluster-guanli {
margin: 0 auto;
- /* width: 760px; */
+width: 760px;
padding: 0 10px;
.btns {
margin-top: 30px !important;
diff --git a/src/pages/settings/views/generalSettings.vue b/src/pages/settings/views/generalSettings.vue
index 51d202a..738019d 100644
--- a/src/pages/settings/views/generalSettings.vue
+++ b/src/pages/settings/views/generalSettings.vue
@@ -574,6 +574,9 @@
flex: 1;
flex-basis: auto;
box-sizing: border-box;
+ .el-input__inner {
+ height: 24px !important;
+}
.general-center {
height: 100%;
width: 300px;
@@ -1148,9 +1151,7 @@
color: #4E94FF;
}
-.el-input__inner {
- height: 24px !important;
-}
+
/* .el-tooltip__popper {
diff --git a/src/pages/systemMonitor/index/App.vue b/src/pages/systemMonitor/index/App.vue
index 3da55ad..2f20bd9 100644
--- a/src/pages/systemMonitor/index/App.vue
+++ b/src/pages/systemMonitor/index/App.vue
@@ -16,7 +16,11 @@
<div class="subtitle">
姝ｅ湪杩涜{{ algoProcessData.length }}涓畻娉曞崟鍏�
</div>
- <span class="iconfont icon" :style="activeTab == 0 ? {} :{color:'#fff'} "></span>
+ <span
+ class="iconfont icon"
+ :style="activeTab == 0 ? {} : { color: '#fff' }"
+ ></span
+ >
</div>
<div
class="tab-item"
@@ -25,7 +29,11 @@
>
<div class="title">搴旂敤鍗曞厓</div>
<div class="subtitle">姝ｅ湪杩涜{{ 1 }}涓簲鐢ㄥ崟鍏�</div>
- <span class="iconfont icon" :style="activeTab == 1 ? {} :{color:'#fff'} "></span>
+ <span
+ class="iconfont icon"
+ :style="activeTab == 1 ? {} : { color: '#fff' }"
+ ></span
+ >
</div>
</div>
<div class="form-title" v-if="activeTab == 0">
@@ -37,16 +45,16 @@
<el-table
:data="algoProcessData"
style="width: 100%"
-
:header-cell-style="'background: #F2F2F7;color: #333333;height: 40px;font-size: 16px;'"
stripe
class="tableBox"
>
- <el-table-column
- prop="desc"
- label="鍚嶇О"
- width="180"
- ></el-table-column>
+ <el-table-column label="鍚嶇О" width="180">
+ <template slot-scope="scope">
+ <span class="iconfont icon"></span>
+ <span>{{ scope.row.desc }} </span>
+ </template>
+ </el-table-column>
<el-table-column label="CPU" width="180">
<template slot-scope="scope">
<span>{{ scope.row.cpu.toFixed(2) }} %</span>
@@ -76,11 +84,7 @@
<el-table
:data="appProcessData"
style="width: 100%"
- :header-cell-style="{
- background: '#F2F2F7',
- color: '#333333',
- height: '40px',
- }"
+ :header-cell-style="'background: #F2F2F7;color: #333333;height: 40px;font-size: 16px;'"
stripe
class="tableBox"
>
@@ -102,7 +106,7 @@
</div>
</el-tab-pane>
- <el-tab-pane name="top">
+ <el-tab-pane name="top">
<span slot="label">
<span class="iconfont icon"></span>
鎬ц兘</span
@@ -119,7 +123,7 @@
<div class="ax_default_pic color-cpu"></div>
<div>
<div class="ax_default_text">CPU</div>
- <div class="ax_default_subtext">{{ cpuUsedPercent }}%</div>
+ <div class="ax_default_subtext">{{ cpuUsedPercent }}%</div>
</div>
</div>
@@ -131,8 +135,10 @@
@click="setActiveChartItem('mem')"
>
<div class="ax_default_pic color-mem"></div>
- <div><div class="ax_default_text">鍐呭瓨</div>
- <div class="ax_default_subtext">{{ memUsedPercent }}%</div></div>
+ <div>
+ <div class="ax_default_text">鍐呭瓨</div>
+ <div class="ax_default_subtext">{{ memUsedPercent }}%</div>
+ </div>
</div>
<div
@@ -143,8 +149,10 @@
@click="setActiveChartItem('gpu')"
>
<div class="ax_default_pic color-gpu"></div>
- <div> <div class="ax_default_text">绠楀姏</div>
- <div class="ax_default_subtext">{{ gpuUsedPercent }}%</div></div>
+ <div>
+ <div class="ax_default_text">绠楀姏</div>
+ <div class="ax_default_subtext">{{ gpuUsedPercent }}%</div>
+ </div>
</div>
<div
@@ -155,10 +163,12 @@
@click="setActiveChartItem('net')"
>
<div class="ax_default_pic color-net"></div>
- <div> <div class="ax_default_text">缃戠粶</div>
- <div class="ax_default_subtext">
- {{ netSend | byteConver }} / {{ netRecive | byteConver }}
- </div></div>
+ <div>
+ <div class="ax_default_text">缃戠粶</div>
+ <div class="ax_default_subtext">
+ {{ netSend | byteConver }} / {{ netRecive | byteConver }}
+ </div>
+ </div>
</div>
<div
@@ -171,10 +181,12 @@
@click="setActiveChartItem('disk|' + k)"
>
<div class="ax_default_pic color-disk"></div>
- <div><div class="ax_default_text">纾佺洏 {{ k }}</div>
- <div class="ax_default_subtext">
- {{ v.info.total | byteConver }}
- </div></div>
+ <div>
+ <div class="ax_default_text">纾佺洏 {{ k }}</div>
+ <div class="ax_default_subtext">
+ {{ v.info.total | byteConver }}
+ </div>
+ </div>
</div>
</div>
@@ -268,9 +280,14 @@
<span class="iconfont icon"></span>
鏈嶅姟</span
>
- <el-table :data="vasystemServicesData">
+ <el-table :data="vasystemServicesData"
+ :header-cell-style="'color: #333333;height: 40px;font-size: 16px;'"
+ stripe
+ class="tableBox"
+ >
<el-table-column label="鍚嶇О" show-overflow-tooltip>
<template slot-scope="scope">
+ <span class="iconfont icon"></span>
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
@@ -357,6 +374,7 @@
left: "1%",
right: "4%",
bottom: "3%",
+
containLabel: true,
borderWidth: 2,
borderColor: "#000",
@@ -470,8 +488,7 @@
showProcesses()
.then((rsp) => {
if (rsp && rsp.success) {
- if (rsp.data.algos)
- this.algoProcessData = [...rsp.data.algos, ...rsp.data.algos];
+ if (rsp.data.algos) this.algoProcessData = rsp.data.algos;
if (rsp.data.apps) this.appProcessData = rsp.data.apps;
}
@@ -708,7 +725,6 @@
color: #fff;
}
.el-table th.el-table__cell > .cell {
-
text-align: center;
}
.tableBox {
@@ -732,6 +748,7 @@
padding: 0 !important;
height: 40px;
line-height: 40px;
+ text-align: center;
}
}
.el-tabs--top {
@@ -812,17 +829,17 @@
margin-bottom: 4px;
}
.subtitle {
- font-size: 12px;
- line-height: 17px;
- z-index: 99;
- position: absolute;
+ font-size: 12px;
+ line-height: 17px;
+ z-index: 99;
+ position: absolute;
}
- .icon{
- color: #6da3f3;
- font-size: 60px;
- position: absolute;
- bottom: 4px;
- right: 4px;
+ .icon {
+ color: #6da3f3;
+ font-size: 60px;
+ position: absolute;
+ bottom: 4px;
+ right: 4px;
}
}
.tab-item-active {
@@ -894,8 +911,7 @@
}
.column-right {
- //overflow: hidden;
- overflow-y: hidden;
+ overflow-y: auto;
overflow-x: auto;
}
@@ -906,8 +922,8 @@
}
.resize-bar {
- width: 285px;
-height: 600px;
+ width: 285px;
+ // height: 600px;
}
/* 鎷栨嫿绾� */
@@ -922,7 +938,7 @@
}
.ax_default {
- width: 270px;
+ width: 270px;
height: 70px;
padding: 10px;
font-size: 14px;
@@ -932,15 +948,19 @@
box-sizing: border-box;
display: flex;
justify-content: space-between;
+ color: #333333;
}
-
+ .ax_default:hover {
+ color: #333333;
+ background: #f8f8ff;
+ }
.selected {
// background: inherit;
// background-color: #cde8ff;
// border: none;
// border-radius: 8px;
- background: inherit;
- background-color: #4E94FF;
+ background: inherit;
+ background-color: #4e94ff;
border: none;
border-radius: 8px;
color: #fff;
@@ -950,7 +970,7 @@
// position: absolute;
border-width: 0px;
width: 66px;
- height: 50px;
+ height: 50px;
box-sizing: border-box;
border: 1px solid rgba(255, 153, 0, 1);
background-color: #fff;
@@ -985,15 +1005,17 @@
.ax_default_text {
position: relative;
- text-align: left;
- font-size: 16px;
+ text-align: right;
+ font-size: 16px;
+ line-height: 22px;
+ font-weight: bold;
}
.ax_default_subtext {
- font-size: 13px;
- line-height: 35px;
- text-align: left;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: right;
}
.ax_default_label {
--
Gitblit v1.8.0