修改统计图表消失问题

public/player.css

@@ -2,31 +2,31 @@
 
 :root {
 	/*Using colour scheme https://color.adobe.com/TD-Colors---Option-3-color-theme-10394433/*/
-	--colour1:#2B3A42;
-	--colour2:#3F5765;
-	--colour3:#BDD4DE;
-	--colour4:#EFEFEF;
-	--colour5:#FF5035;
-	
-	--buttonFont:Helvetica;
-	--inputFont:Helvetica;
+	--colour1: #2B3A42;
+	--colour2: #3F5765;
+	--colour3: #BDD4DE;
+	--colour4: #EFEFEF;
+	--colour5: #FF5035;
+
+	--buttonFont: Helvetica;
+	--inputFont: Helvetica;
 }
 
-body{
-    margin: 0px;
-    background-color: black;
-}	
+body {
+	margin: 0px;
+	background-color: black;
+}
 
 #playerUI {
 	width: 100%;
 	position: absolute;
-	/*top: 0;
-	left: 0;*/
+	top: 0;
+	left: 0;
 	z-index: 10;
 }
 
 .statsContainer {
-	background-color: rgba(0,0,0,0.8);
+	background-color: rgba(0, 0, 0, 0.8);
 	text-align: left;
 	display: block;
 	margin-top: 5px;
@@ -39,39 +39,47 @@ body{
 	color: lime;
 }
 
-canvas{
-    image-rendering: crisp-edges;
-    position: absolute;
+canvas {
+	image-rendering: crisp-edges;
+	position: absolute;
 }
 
-video{
+video {
 	position: absolute;
 	width: 100%;
 	height: 100%;
 }
 
-#player{
+#player {}
 
-}
-
-#overlay{
+#overlay {
 	-moz-border-radius-bottomright: 5px;
 	-moz-border-radius-bottomleft: 5px;
 	-webkit-border-bottom-right-radius: 5px;
 	-webkit-border-bottom-left-radius: 5px;
-	border-bottom-right-radius: 5px; /* future proofing */
-	border-bottom-left-radius: 5px; /* future proofing */
-	-khtml-border-bottom-right-radius: 5px; /* for old Konqueror browsers */
-	-khtml-border-bottom-left-radius: 5px; /* for old Konqueror browsers */
-	
-	-webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-     -khtml-user-select: none; /* Konqueror HTML */
-       -moz-user-select: none; /* Firefox */
-        -ms-user-select: none; /* Internet Explorer/Edge */
-            user-select: none; /* Non-prefixed version, currently
+	border-bottom-right-radius: 5px;
+	/* future proofing */
+	border-bottom-left-radius: 5px;
+	/* future proofing */
+	-khtml-border-bottom-right-radius: 5px;
+	/* for old Konqueror browsers */
+	-khtml-border-bottom-left-radius: 5px;
+	/* for old Konqueror browsers */
+
+	-webkit-touch-callout: none;
+	/* iOS Safari */
+	-webkit-user-select: none;
+	/* Safari */
+	-khtml-user-select: none;
+	/* Konqueror HTML */
+	-moz-user-select: none;
+	/* Firefox */
+	-ms-user-select: none;
+	/* Internet Explorer/Edge */
+	user-select: none;
+	/* Non-prefixed version, currently
                                   supported by Chrome and Opera */
-	
+
 	position: absolute;
 	padding: 4px;
 	top: 0;
@@ -82,43 +90,47 @@ video{
 }
 
 .overlay {
-    background-color: var(--colour2);
+	background-color: var(--colour2);
 	font-family: var(--buttonFont);
 	font-weight: lighter;
 	color: var(--colour4);
 }
 
-.overlay-shown > #overlaySettings {
+.overlay-shown>#overlaySettings {
 	padding: 50px 4px 4px 4px;
 	display: block;
 }
 
-.overlay-shown > div > #overlayButton {
+.overlay-shown>div>#overlayButton {
 	transform: rotate(-135deg);
-	-webkit-transform: rotate(-135deg); /* Safari */
-	-moz-transform: rotate(-135deg); /* Firefox */
-	-ms-transform: rotate(-135deg); /* IE */
-	-o-transform: rotate(-135deg); /* Opera */
+	-webkit-transform: rotate(-135deg);
+	/* Safari */
+	-moz-transform: rotate(-135deg);
+	/* Firefox */
+	-ms-transform: rotate(-135deg);
+	/* IE */
+	-o-transform: rotate(-135deg);
+	/* Opera */
 }
 
-#overlayButton:hover{
+#overlayButton:hover {
 	cursor: pointer;
 }
 
-#overlayButton{
+#overlayButton {
 	transition-duration: 250ms;
 	float: right;
 	text-align: right;
 	font-size: 40px;
 }
 
-#qualityStatus{
+#qualityStatus {
 	float: left;
 	font-size: 37px;
 	padding-right: 4px;
 }
 
-#overlaySettings{
+#overlaySettings {
 	width: 400px;
 	display: none;
 }
@@ -139,17 +151,19 @@ video{
 	color: red;
 }
 
-#videoMessageOverlay{
+#videoMessageOverlay {
 	z-index: 20;
-	color: var(--colour4);;
+	color: var(--colour4);
+	;
 	font-size: 1.8em;
 	position: absolute;
 	margin: auto;
-	font-family: var(--inputFont);;
+	font-family: var(--inputFont);
+	;
 	width: 100%;
 }
 
-#videoPlayOverlay{
+#videoPlayOverlay {
 	z-index: 30;
 	position: absolute;
 	color: var(--colour4);
@@ -161,7 +175,7 @@ video{
 }
 
 /* State for element to be clickable */
-.clickableState{
+.clickableState {
 	align-items: center;
 	justify-content: center;
 	display: flex;
@@ -169,51 +183,52 @@ video{
 }
 
 /* State for element to show text, this is for informational use*/
-.textDisplayState{
+.textDisplayState {
 	display: flex;
 }
 
 /* State to hide overlay, WebRTC communication is in progress and or is playing */
-.hiddenState{
+.hiddenState {
 	display: none;
 }
 
-#playButton{
+#playButton {
 	display: inline-block;
 	height: auto;
 }
 
-img#playButton{
+img#playButton {
 	max-width: 241px;
 	width: 10%;
 }
 
-#UIInteraction{
+#UIInteraction {
 	position: fixed;
 }
 
-#UIInteractionButtonBoundary{
+#UIInteractionButtonBoundary {
 	padding: 2px;
 }
 
-#UIInteractionButton{
+#UIInteractionButton {
 	cursor: pointer;
 }
 
-#hiddenInput{
+#hiddenInput {
 	position: absolute;
-	left: -10%;   /* Although invisible, push off-screen to prevent user interaction. */
+	left: -10%;
+	/* Although invisible, push off-screen to prevent user interaction. */
 	width: 0px;
 	opacity: 0;
 }
 
-#editTextButton{
+#editTextButton {
 	position: absolute;
 	height: 40px;
 	width: 40px;
 }
 
-.settings-text{
+.settings-text {
 	color: var(--colour4);
 	vertical-align: middle;
 	font-size: 18px;
@@ -221,18 +236,18 @@ img#playButton{
 	display: inline-block;
 }
 
-.overlay-button{
+.overlay-button {
 	line-height: 1.1;
 	padding: 1px 6px;
 }
 
-.btn-overlay{
+.btn-overlay {
 	float: right;
 	vertical-align: middle;
 	display: inline-block;
 }
 
-.btn-flat{
+.btn-flat {
 	background: var(--colour4);
 	border: 2px solid var(--colour5);
 	font-weight: bold;
@@ -244,106 +259,133 @@ img#playButton{
 	height: 20px;
 }
 
-.btn-flat:disabled{
+.btn-flat:disabled {
 	background: var(--colour4);
 	border-color: var(--colour3);
 	color: var(--colour3);
 	cursor: default;
 }
 
-.btn-flat:active{
+.btn-flat:active {
 	border-color: var(--colour2);
 	color: var(--colour2);
 }
 
-.btn-flat:focus{
+.btn-flat:focus {
 	outline: none;
 }
+
 /*** Toggle Switch styles ***/
 .tgl-switch {
-  float: right;
-  vertical-align: middle;
-  display: inline-block;
+	float: right;
+	vertical-align: middle;
+	display: inline-block;
 }
 
 .tgl-switch .tgl {
-	display:none;
+	display: none;
 }
 
-.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-slider {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+.tgl,
+.tgl:after,
+.tgl:before,
+.tgl *,
+.tgl *:after,
+.tgl *:before,
+.tgl+.tgl-slider {
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
 }
-.tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-slider::-moz-selection {
-  background: none;
+
+.tgl::-moz-selection,
+.tgl:after::-moz-selection,
+.tgl:before::-moz-selection,
+.tgl *::-moz-selection,
+.tgl *:after::-moz-selection,
+.tgl *:before::-moz-selection,
+.tgl+.tgl-slider::-moz-selection {
+	background: none;
 }
-.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-slider::selection {
-  background: none;
+
+.tgl::selection,
+.tgl:after::selection,
+.tgl:before::selection,
+.tgl *::selection,
+.tgl *:after::selection,
+.tgl *:before::selection,
+.tgl+.tgl-slider::selection {
+	background: none;
 }
 
 .tgl-slider {
-	float:right;
+	float: right;
 }
 
-.tgl + .tgl-slider {
-  outline: 0;
-  display: block;
-  width: 40px;
-  height: 18px;
-  position: relative;
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
+.tgl+.tgl-slider {
+	outline: 0;
+	display: block;
+	width: 40px;
+	height: 18px;
+	position: relative;
+	cursor: pointer;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
 }
 
-.tgl + .tgl-slider:after, .tgl + .tgl-slider:before {
-  position: relative;
-  display: block;
-  content: "";
-  width: 50%;
-  height: 100%;
+.tgl+.tgl-slider:after,
+.tgl+.tgl-slider:before {
+	position: relative;
+	display: block;
+	content: "";
+	width: 50%;
+	height: 100%;
 }
-.tgl + .tgl-slider:after {
-  left: 0;
+
+.tgl+.tgl-slider:after {
+	left: 0;
 }
-.tgl + .tgl-slider:before {
-  display: none;
+
+.tgl+.tgl-slider:before {
+	display: none;
 }
 
-.tgl-flat + .tgl-slider {
-  padding: 2px;
-  -webkit-transition: all .2s ease;
-  transition: all .2s ease;
-  background: #fff;
-  border: 3px solid var(--colour4);
-  border-radius: 2em;
+.tgl-flat+.tgl-slider {
+	padding: 2px;
+	-webkit-transition: all .2s ease;
+	transition: all .2s ease;
+	background: #fff;
+	border: 3px solid var(--colour4);
+	border-radius: 2em;
 }
 
-.tgl-flat + .tgl-slider:after {
-  -webkit-transition: all .2s ease;
-  transition: all .2s ease;
-  background: var(--colour4);
-  content: "";
-  border-radius: 1em;
+.tgl-flat+.tgl-slider:after {
+	-webkit-transition: all .2s ease;
+	transition: all .2s ease;
+	background: var(--colour4);
+	content: "";
+	border-radius: 1em;
 }
 
-.tgl-flat:checked + .tgl-slider {
-  border: 3px solid var(--colour5);
+.tgl-flat:checked+.tgl-slider {
+	border: 3px solid var(--colour5);
 }
 
-.tgl-flat:checked + .tgl-slider:after {
-  left: 50%;
-  background: var(--colour5);
+.tgl-flat:checked+.tgl-slider:after {
+	left: 50%;
+	background: var(--colour5);
 }
+
 /*** Toggle Switch styles ***/
 
-#encoderSettings, #webRTCSettings {
+#encoderSettings,
+#webRTCSettings {
 	margin: 10px 0px;
 }
 
-#encoderParamsContainer, #webrtcParamsContainer {
+#encoderParamsContainer,
+#webrtcParamsContainer {
 	padding-left: 5%;
 }
 

public/ueapp.js

@@ -901,7 +901,7 @@ function resizePlayerStyleToFillWindow(playerElement) {
         styleHeight = window.innerHeight;
         styleTop = 0;
         styleLeft = 0;
-        playerElement.style = "top: " + styleTop + "px; left: " + styleLeft + "px; width: " + styleWidth + "px; height: " + styleHeight + "px; cursor: " + styleCursor + "; " + styleAdditional;
+        playerElement.style = "top: " + 0 + "px; left: " + 0 + "px; width: " + styleWidth + "px; height: " + styleHeight + "px; cursor: " + styleCursor + "; " + styleAdditional;
     } else if (windowAspectRatio < playerAspectRatio) {
         // Window height is the constraining factor so to keep aspect ratio change width appropriately
         styleWidth = Math.floor(window.innerHeight / videoAspectRatio);
@@ -909,7 +909,7 @@ function resizePlayerStyleToFillWindow(playerElement) {
         styleTop = 0;
         styleLeft = Math.floor((window.innerWidth - styleWidth) * 0.5);
         //Video is now 100% of the playerElement, so set the playerElement style
-        playerElement.style = "top: " + styleTop + "px; left: " + styleLeft + "px; width: " + styleWidth + "px; height: " + styleHeight + "px; cursor: " + styleCursor + "; " + styleAdditional;
+        playerElement.style = "top: " + 0 + "px; left: " + 0 + "px; width: " + styleWidth + "px; height: " + styleHeight + "px; cursor: " + styleCursor + "; " + styleAdditional;
     } else {
         // Window width is the constraining factor so to keep aspect ratio change height appropriately
         styleWidth = window.innerWidth;
@@ -917,7 +917,7 @@ function resizePlayerStyleToFillWindow(playerElement) {
         styleTop = Math.floor((window.innerHeight - styleHeight) * 0.5);
         styleLeft = 0;
         //Video is now 100% of the playerElement, so set the playerElement style
-        playerElement.style = "top: " + styleTop + "px; left: " + styleLeft + "px; width: " + styleWidth + "px; height: " + styleHeight + "px; cursor: " + styleCursor + "; " + styleAdditional;
+        playerElement.style = "top: " + 0 + "px; left: " + 0 + "px; width: " + styleWidth + "px; height: " + styleHeight + "px; cursor: " + styleCursor + "; " + styleAdditional;
     }
 }
 
@@ -933,7 +933,7 @@ function resizePlayerStyleToActualSize(playerElement) {
         styleTop = (Top > 0) ? Top : 0;
         styleLeft = (Left > 0) ? Left : 0;
         //Video is now 100% of the playerElement, so set the playerElement style
-        playerElement.style = "top: " + styleTop + "px; left: " + styleLeft + "px; width: 100% ; height: 100%; cursor: " + styleCursor + "; " + styleAdditional;
+        playerElement.style = "top: " + 0 + "px; left: " + 0 + "px; width: 100% ; height: 100%; cursor: " + styleCursor + "; " + styleAdditional;
     }
 }
 

src/components/home.vue

@@ -2,43 +2,33 @@
   <!-- <div class="container" > -->
   <Header />
   <img class="bg-shadow" :src="bgShadow" alt="" srcset="">
-  <Left v-if="isShowLeft" ref="childRef" @childMethod="childMethod"></Left>
+  <div v-show="isShowLeft">
+    <Left ref="childRef" @childMethod="childMethod"></Left>
+  </div>
+
   <right v-if="isShowRight"></right>
-  <div
-    ref="linedomRef"
-    style="
+  <div ref="linedomRef" style="
       width: 1px;
       height: 1px;
       position: absolute;
       z-index: 228;
       background: #ccc;
-    "
-  ></div>
+    "></div>
 
   <!-- </el-container> -->
   <div ref="popoverRef" id="popoverRef" class="modelInfo">
-    <div
-      v-if="orientation == 'Left' || orientation == 'Right'"
-      class="model-detail"
-    >
+    <div v-if="orientation == 'Left' || orientation == 'Right'" class="model-detail">
       <div v-for="item in classDeviceInfo" class="listbox">
         <div class="list">
           {{ item[0].value }}
         </div>
         <div v-for="item2 in item" class="listtitle">
-          <div
-            v-if="item2.name !== '设备名称'"
-            style="height: 30px; display: flex; align-items: center"
-          >
+          <div v-if="item2.name !== '设备名称'" style="height: 30px; display: flex; align-items: center">
             <span class="name"> {{ item2.name }} :</span>
             <span v-if="item2.value != '在线'" class="value">{{
               item2.value
             }}</span>
-            <span
-              v-else
-              style="font-family: 100; margin-left: 5px; color: #10c383"
-              >{{ item2.value }}</span
-            >
+            <span v-else style="font-family: 100; margin-left: 5px; color: #10c383">{{ item2.value }}</span>
           </div>
         </div>
       </div>
@@ -54,17 +44,8 @@
             <div v-for="item2 in item" class="listtitle">
               <div v-if="item2.name !== '设备名称'">
                 <span class="name"> {{ item2.name }} :</span>
-                <span
-                  v-if="item2.value != '在线'"
-                  class="value"
-                  style="font-weight: 400"
-                  >{{ item2.value }}</span
-                >
-                <span
-                  v-else
-                  style="font-family: 100; margin-left: 5px; color: #10c383"
-                  >{{ item2.value }}</span
-                >
+                <span v-if="item2.value != '在线'" class="value" style="font-weight: 400">{{ item2.value }}</span>
+                <span v-else style="font-family: 100; margin-left: 5px; color: #10c383">{{ item2.value }}</span>
               </div>
             </div>
           </div>
@@ -74,84 +55,41 @@
   </div>
 
   <!-- 视频播放弹框 -->
-  <el-dialog
-    class="videoDialog"
-    v-model="videoDialog"
-    :title="titleDialog"
-    width="62%"
-    align="center"
-    top="7%"
-    style="padding: 0"
-  >
+  <el-dialog class="videoDialog" v-model="videoDialog" :title="titleDialog" width="62%" align="center" top="7%"
+    style="padding: 0">
     <videoPlay v-bind="videoData" @play="onPlay" />
   </el-dialog>
 
-  <el-dialog
-    class="deviceDialog"
-    v-model="deviceDialog"
-    title="设备明细"
-    width="40%"
-    align="left"
-    top="30vh"
-    style="z-index: 2015; background: rgba(0, 0, 0, 0); padding: 0px"
-  >
-    <el-table
-      :data="deviceDetailsList"
-      border
-      :resizable="false"
-      height="350px"
-      style="width: 100%; background: rgba(0, 0, 0, 0)"
-    >
-      <el-table-column
-        align="center"
-        type="index"
-        label="序号"
-        width="100px"
-      ></el-table-column>
-      <el-table-column
-        align="center"
-        prop="device_name"
-        label="设备名称"
-      ></el-table-column>
+  <el-dialog class="deviceDialog" v-model="deviceDialog" title="设备明细" width="40%" align="left" top="30vh"
+    style="z-index: 2015; background: rgba(0, 0, 0, 0); padding: 0px">
+    <el-table :data="deviceDetailsList" border :resizable="false" height="350px"
+      style="width: 100%; background: rgba(0, 0, 0, 0)">
+      <el-table-column align="center" type="index" label="序号" width="100px"></el-table-column>
+      <el-table-column align="center" prop="device_name" label="设备名称"></el-table-column>
       <el-table-column align="center" prop="heart_status" label="设备状态">
         <template #default="scope">
-          <div
-            :class="{
-              normal: scope.row.heart_status == 0,
-              error: scope.row.heart_status == 1,
-            }"
-          >
+          <div :class="{
+            normal: scope.row.heart_status == 0,
+            error: scope.row.heart_status == 1,
+          }">
             <div>{{ scope.row.heart_status == 0 ? "在线" : "异常" }}</div>
           </div>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center">
         <template #default="scope">
-          <el-button type="primary" size="mini" @click="lookDetails(scope.row)"
-            >详情</el-button
-          >
+          <el-button type="primary" size="mini" @click="lookDetails(scope.row)">详情</el-button>
         </template>
       </el-table-column>
     </el-table>
-    <el-dialog
-      class="deviceDetailsDialog"
-      v-model="isShowDeviceDetails"
-      title="详情"
-      width="15%"
-      align="left"
-      top="40vh"
-      style="z-index: 2019; background: rgba(0, 0, 0, 0); padding: 0px"
-      :modal="false"
-    >
+    <el-dialog class="deviceDetailsDialog" v-model="isShowDeviceDetails" title="详情" width="15%" align="left" top="40vh"
+      style="z-index: 2019; background: rgba(0, 0, 0, 0); padding: 0px" :modal="false">
       <div class="details-container">
         <div>设备名称：{{ deviceDetails.device_name }}</div>
         <div>
-          设备状态：<span
-            :style="{
-              color: deviceDetails.heart_status == 0 ? '#30fcaa' : '#ff352e',
-            }"
-            >{{ deviceDetails.heart_status == 0 ? "在线" : "异常" }}</span
-          >
+          设备状态：<span :style="{
+            color: deviceDetails.heart_status == 0 ? '#30fcaa' : '#ff352e',
+          }">{{ deviceDetails.heart_status == 0 ? "在线" : "异常" }}</span>
         </div>
         <div>位置：{{ deviceDetails.teach_name }}</div>
         <div>型号：{{ deviceDetails.device_type_name }}</div>
@@ -217,6 +155,9 @@ export default {
     const orientation = ref("");
     const isShowLeft = ref(true);
     const isShowRight = ref(true);
+
+
+
     // 视频数据
     const videoData = reactive({
       width: "100%", //播放器高度
@@ -479,7 +420,7 @@ export default {
 
       if (JSON.parse(data).MainServiceName == "JianKong") {
         getVideoUrl({ rtsp: JSON.parse(data).MonitorURL }).then((res) => {
-            videoData.src = res.data.httpFlv;
+          videoData.src = res.data.httpFlv;
           // videoData.src =
           //   "https://weizhi.huanghuai.edu.cn/jk/hls/9159eba9-b4c6-4a4b-a8ff-a1dd94c88bae.m3u8";
           videoDialog.value = true;
@@ -493,9 +434,9 @@ export default {
       }
       if (JSON.parse(data).MainServiceName == "KanBanShouQi") {
         console.log("看看这个-------", Boolean(JSON.parse(data).PutAwayState));
-        
-        isShowLeft.value = JSON.parse(data).PutAwayState=="true" ? true: false;
-        isShowRight.value = JSON.parse(data).PutAwayState=="true" ? true: false;
+
+        isShowLeft.value = JSON.parse(data).PutAwayState == "true" ? true : false;
+        isShowRight.value = JSON.parse(data).PutAwayState == "true" ? true : false;
       }
     };
     const windowSize = function () {
@@ -542,7 +483,7 @@ export default {
       deviceDialog,
       deviceDetails,
       isShowLeft,
-      isShowRight,
+      isShowRight
     };
   },
 };

vite.config.js

@@ -25,15 +25,15 @@ export default defineConfig({
   build: {
     minify: 'terser',
     terserOptions: {
-        compress: {
-            //生产环境时移除console
-            drop_console: true,
-            drop_debugger: true,
-        }
+      compress: {
+        //生产环境时移除console
+        drop_console: true,
+        drop_debugger: true,
+      }
     }
   },
-  server:{
-    host:'0.0.0.0',
+  server: {
+    host: '0.0.0.0',
   },
   plugins: [
     vue(),
@@ -56,7 +56,7 @@ export default defineConfig({
         })]
     }
   },
-    configureWebpack: (config) => {
+  configureWebpack: (config) => {
     console.log("config");
     config.module.rules.push(
       {