Prechádzať zdrojové kódy

增加声音及其他优化

wenningning 1 rok pred
rodič
commit
014eb4840a

+ 5 - 0
.idea/.gitignore

@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/

+ 15 - 0
.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,15 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="src" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
+  </profile>
+</component>

+ 8 - 0
.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/wdkl_screen.iml" filepath="$PROJECT_DIR$/.idea/wdkl_screen.iml" />
+    </modules>
+  </component>
+</project>

+ 6 - 0
.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

+ 12 - 0
.idea/wdkl_screen.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

+ 12 - 12
css/index.css

@@ -44,8 +44,8 @@ a{
     min-width: 1024px;
     max-width: 1920px;
     min-height: 780px;
-    margin: 0 auto;    
-    display: flex;    
+    margin: 0 auto;
+    display: flex;
     display: flex;
     padding: 0 0.833rem 0;
     z-index: 11;
@@ -118,12 +118,12 @@ a{
 	font-size: 0.75rem;
 	padding: 0 1.125rem;
   }
-  
+
   .monitor .tabs a:first-child{
 	border-right: 0.083rem solid #00f2f1;
 	padding-left: 0;
   }
-  
+
   .monitor .tabs a.active{
 	color: #fff;
   }
@@ -172,8 +172,8 @@ a{
   .monitor .marquee-view{
   position: absolute;
   top: 1.6rem;
-  bottom: 0; 
-  width: 100%; 
+  bottom: 0;
+  width: 100%;
   overflow: hidden;
 }
 
@@ -203,17 +203,17 @@ a{
 	position: absolute;
 	top: 1.6rem;
 	bottom: 0;
-  height: 341px;
-	width: 100%; 
+  height: 15rem;
+	width: 100%;
 	overflow: hidden;
   }
-  
+
   .monitor .row{
 	line-height: 1.05;
 	padding: 0.5rem 1.5rem;
 	color: #61a8ff;
 	font-size: 0.5rem;
-	position: relative; 
+	position: relative;
 	display: flex;
 	justify-content: space-between;
   }
@@ -224,7 +224,7 @@ a{
   .monitor .row:hover .icon-dot{
 	opacity: 0;
   }
-  
+
   .monitor .icon-dot{
 	position: absolute;
 	left: 0.64rem;
@@ -240,7 +240,7 @@ a{
 /* 调用动画 */
 .monitor .marquee {
   /* //infinite永久调用动画 */
-  animation: row  10s linear infinite;
+  animation: row  20s linear infinite;
 }
 /*鼠标划入 停止动画  */
 .monitor .marquee:hover {

BIN
images/mute.png


+ 1 - 0
index.html

@@ -16,6 +16,7 @@
 <body>
     <div class="header">
         <div class="title" id="title">维鼎康联养老看板</div>
+        <div id="muteImg" style="top:20px;right: 20px;position: absolute;"><image src="./images/mute.png" style="height: 30px;width: 30px"></image></div>
     </div>
     <div class="clearfix"></div>
     <div class="viewport">

+ 7 - 1
js/index.js

@@ -47,6 +47,10 @@ var colorList = ['#00f2f1','#006cff', '#eab408', '#ed8884', '#ff9f7f', '#0096ff'
         initWebSocket();
         // 打开定时器
         openTimer();
+        let image = document.getElementById('muteImg');
+        image.addEventListener('click', function () {
+            image.style.display = "none";
+        })
     }
 })();
 // 获取看板用户信息
@@ -184,6 +188,9 @@ function initWebSocket() {
         const data = JSON.parse(e.data);
         if (data.renewType === 'SOS') {
             console.log('有人报警...')
+            let mp3 = new Audio('./music/sos.mp3')
+            mp3.loop = false
+            mp3.play()
             openSOSMap(data); // 地图高亮
             getSOSInfo(); // 刷新看板
         } else if ("LOG") {
@@ -281,7 +288,6 @@ function openTimer() {
         //再将新的到的加入原来的
         $(dom).append(rows);
     });
-
 })();
 // 报警分布柱状图
 function initBarChar() {

BIN
music/sos.mp3