From 2477faf9573001169dd92d6969cf437caad25477 Mon Sep 17 00:00:00 2001
From: libingtao <1007325366@qq.com>
Date: Tue, 6 Aug 2024 15:35:51 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B6=E9=83=A8=E5=AF=BC=E8=88=AA=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/index.vue         | 572 +++++++++++++++++++-----------------
 src/views/page/indexMim.vue |   2 +-
 2 files changed, 299 insertions(+), 275 deletions(-)

diff --git a/src/views/index.vue b/src/views/index.vue
index ea01ae86..bcb68201 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,228 +1,243 @@
 <template>
-  <!-- <v-scale-screen width="1185" height="784"> -->
-  <div class="content" id="app">
-    <div class="community_top" v-if="isshow">
-      <div style="margin-left: 26px">
-        <ul style="display: flex; margin-top: 27px">
-          <li>
-            <router-link active-class="ist2" style="color: #b2b6c3; padding: 10px 18px; vertical-align: middle; font-weight: bold" to="/index/indexmin">服务总览</router-link>
-            <img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
-          </li>
-          <li>
-            <router-link active-class="ist" style="color: #b2b6c3; padding: 10px 18px; margin-left: 10px; vertical-align: middle; font-weight: bold" to="/index/index">安保力量</router-link>
-            <img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
-          </li>
-          <li>
-            <router-link active-class="ist" style="color: #b2b6c3; padding: 10px 18px; margin-left: 10px; vertical-align: middle; font-weight: bold" to="/index/command">警情推送</router-link>
-            <img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
-          </li>
-          <li>
-            <router-link active-class="ist" style="color: #b2b6c3; padding: 10px 18px; margin-left: 10px; vertical-align: middle; font-weight: bold" to="/index/system">智能布控</router-link>
-            <img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
-          </li>
-        </ul>
-      </div>
-      <div style="margin-right: 100px">
-        <ul style="display: flex; margin-top: 27px">
-          <li>
-            <router-link active-class="ist3" style="color: #b2b6c3; padding: 10px 18px; vertical-align: middle; font-weight: bold" to="/index/histordata">AI预警</router-link>
-            <img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
-          </li>
-          <li>
-            <router-link active-class="ist" style="color: #b2b6c3; padding: 10px 18px; vertical-align: middle; font-weight: bold" to="/index/analysis">统计分析</router-link>
-            <img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
-          </li>
-          <li>
-            <router-link active-class="ist" style="color: #b2b6c3; padding: 10px 18px; vertical-align: middle; font-weight: bold" to="/index/information">资源管理</router-link>
-            <img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
-          </li>
-        </ul>
-        <el-popconfirm title="确定退出吗？" @confirm="confirmEvent">
-          <template #reference>
-            <el-icon :size="20" style="display: inline-block; position: absolute; top: 31px; right: 32px; margin-left: 10px; vertical-align: middle; color: #9a4b48; font-weight: bold">
-              <switch-button />
-              <!-- <span style="color:#fff;">{{loginname}}</span> -->
-            </el-icon>
-          </template>
-        </el-popconfirm>
-      </div>
-    </div>
-    <div class="community_center" v-if="isshow">
-      <router-view></router-view>
-    </div>
+	<!-- <v-scale-screen width="1185" height="784"> -->
+	<div class="content" id="app">
+		<div class="community_top" v-if="isshow">
+			<div class="lefttit">多元警情融合及预警管控平台</div>
+			<div style="margin-left: 16px">
+				<ul style="display: flex; margin-top: 14px">
+					<li>
+						<img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
+						<router-link active-class="ist2"
+							style="color: #b2b6c3; padding: 10px 18px; vertical-align: middle; font-weight: bold"
+							to="/index/indexmin">服务总览</router-link>
+					</li>
+					<li>
+						<img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
+						<router-link active-class="ist"
+							style="color: #b2b6c3; padding: 10px 18px; margin-left: 10px; vertical-align: middle; font-weight: bold"
+							to="/index/index">安保力量</router-link>
+					</li>
+					<li>
+						<img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
+						<router-link active-class="ist"
+							style="color: #b2b6c3; padding: 10px 18px; margin-left: 10px; vertical-align: middle; font-weight: bold"
+							to="/index/command">警情推送</router-link>
+					</li>
+					<li>
+						<img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
+						<router-link active-class="ist"
+							style="color: #b2b6c3; padding: 10px 18px; margin-left: 10px; vertical-align: middle; font-weight: bold"
+							to="/index/system">智能布控</router-link>
+					</li>
+				</ul>
+			</div>
+			<div style="">
+				<ul style="display: flex; margin-top: 14px">
+					<li>
+						<img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
+						<router-link active-class="ist3"
+							style="color: #b2b6c3; padding: 10px 18px; vertical-align: middle; font-weight: bold"
+							to="/index/histordata">AI预警</router-link>
+					</li>
+					<li>
+						<img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
+						<router-link active-class="ist"
+							style="color: #b2b6c3; padding: 10px 18px; vertical-align: middle; font-weight: bold"
+							to="/index/analysis">统计分析</router-link>
+					</li>
+					<li>
+						<img style="vertical-align: middle" src="@/views/page/indeximag/ddh.png" alt="" />
+						<router-link active-class="ist"
+							style="color: #b2b6c3; padding: 10px 18px; vertical-align: middle; font-weight: bold"
+							to="/index/information">资源管理</router-link>
+					</li>
+				</ul>
+				<el-popconfirm title="确定退出吗？" @confirm="confirmEvent">
+					<template #reference>
+						<el-icon :size="20"
+							style="display: inline-block; position: absolute; top: 31px; right: 32px; margin-left: 10px; vertical-align: middle; color: #9a4b48; font-weight: bold">
+							<switch-button />
+							<span style="color:#fff;position: absolute;right: 29px;font-weight: 100;font-size: 16px;">{{loginname}}</span>
+						</el-icon>
+					</template>
+				</el-popconfirm>
+			</div>
+		</div>
+		<div class="community_center" v-if="isshow">
+			<router-view></router-view>
+		</div>
 
-    <router-view v-if="!isshow"></router-view>
-  </div>
-  <!-- </v-scale-screen> -->
+		<router-view v-if="!isshow"></router-view>
+	</div>
+	<!-- </v-scale-screen> -->
 </template>
 
 <script setup lang="ts">
-import { useUserStore } from '@/stores/modules/userStore'
-import { useWebSocket } from '@vueuse/core'
-import { wsUrl } from '@/utils/webSocket'
-import { ref, reactive, watch, onMounted } from 'vue'
-import api from '@/axios'
-import { useRouter } from 'vue-router'
-const router = useRouter()
-const isshow = ref(true)
-const loginname = localStorage.getItem('loginname')
-onMounted(() => {
-  stationWebsocket()
-  setInterval(function () {
-    api.post('/multialarm/client/user/active', {}).then((res) => {
-      console.log('token保活', res)
-    })
-  }, 180000)
-})
+	import { useUserStore } from '@/stores/modules/userStore'
+	import { useWebSocket } from '@vueuse/core'
+	import { wsUrl } from '@/utils/webSocket'
+	import { ref, reactive, watch, onMounted } from 'vue'
+	import api from '@/axios'
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+	const isshow = ref(true)
+	const loginname = localStorage.getItem('loginname')
+	onMounted(() => {
+		stationWebsocket()
+		setInterval(function () {
+			api.post('/multialarm/client/user/active', {}).then((res) => {
+				console.log('token保活', res)
+			})
+		}, 180000)
+	})
 
-watch(
-  () => router.currentRoute.value,
-  (newValue: any) => {
-    // console.log('newValue', newValue)
-    if (newValue.path == '/index/communitymanage' || newValue.path == '/index/hkplay') {
-      isshow.value = false
-    }
-    if (newValue.path == '/index/communitymanage' || newValue.path == '/index/cwPlay') {
-      isshow.value = false
-    }
-  },
-  { immediate: true }
-)
-let istab = ref('6')
-const sendStationList = (rollCall_websocket: any, stationTempArr: any) => {
-  var getIot = {
-    msgcode: 102,
-    msgname: 'station-sensor-list',
-    message: stationTempArr,
-  }
-  var msg = JSON.stringify(getIot)
-  rollCall_websocket.send(msg)
-}
-const stationHashList = ref([])
-const stationWebsocket = () => {
-  //心跳检测 建立链接 断开重连
-  const { data, ws } = useWebSocket(wsUrl('/ClientWebSocket'), {
-    heartbeat: {
-      message: 'ping',
-      interval: 1000 * 10,
-      pongTimeout: 1000 * 10,
-    },
-    autoReconnect: true,
-  })
-  ws.value.onopen = () => {
-    console.log('链接打开')
-    var messageObj = {
-      msgcode: 100,
-      msgname: 'session',
-      message: useUserStore().getToken,
-    }
-    var msg = JSON.stringify(messageObj)
-    ws.value.send(msg)
-    var stationTempArr = []
-    for (var i in stationHashList.value) {
-      stationTempArr.push(i)
-      if (stationTempArr.length >= 500) {
-        sendStationList(ws.value, stationTempArr)
-        stationTempArr = []
-      }
-    }
-    sendStationList(ws.value, stationTempArr)
-  }
-  ws.value.onclose = () => {
-    // console.log('断开重连')
-    //重连
-    // stationWebsocket();
-  }
-  ws.value.onmessage = function (evt) {
-    var data = JSON.parse(evt.data)
-    var msgcode = data['msgcode']
-    var message = data['message']
-    switch (msgcode) {
-      case 1035: //获取传感器列表
-        // jinbao.value.push(message[0])
-        useUserStore().setwebsoketdata(message[0])
-        break
-      case 1020: //接受别处登录的消息
-        // kickout(message);
-        break
-      default:
-        break
-    }
-  }
-}
-const toStudent = (a: any) => {
-  istab = a
-  switch (a) {
-    case '1':
-      router.push('/index/index')
-      break
-    case '2':
-      router.push('/index/histordata')
-      break
-    case '3':
-      router.push('/index/system')
-      break
-    case '4':
-      router.push('/index/command')
-      break
-    case '5':
-      // router.push('/index/command')
-      break
-    case '6':
-      router.push('/index/indexmin')
-      break
-    case '7':
-      router.push('/index/information')
-      break
-  }
-}
-const confirmEvent = () => {
-  console.log('退出')
-  localStorage.clear()
-  // router.push('/login')
-  // router.push({
-  // 	path: '/login'
-  // })
-  location.reload()
-}
+	watch(
+		() => router.currentRoute.value,
+		(newValue : any) => {
+			// console.log('newValue', newValue)
+			if (newValue.path == '/index/communitymanage' || newValue.path == '/index/hkplay') {
+				isshow.value = false
+			}
+			if (newValue.path == '/index/communitymanage' || newValue.path == '/index/cwPlay') {
+				isshow.value = false
+			}
+		},
+		{ immediate: true }
+	)
+	let istab = ref('6')
+	const sendStationList = (rollCall_websocket : any, stationTempArr : any) => {
+		var getIot = {
+			msgcode: 102,
+			msgname: 'station-sensor-list',
+			message: stationTempArr,
+		}
+		var msg = JSON.stringify(getIot)
+		rollCall_websocket.send(msg)
+	}
+	const stationHashList = ref([])
+	const stationWebsocket = () => {
+		//心跳检测 建立链接 断开重连
+		const { data, ws } = useWebSocket(wsUrl('/ClientWebSocket'), {
+			heartbeat: {
+				message: 'ping',
+				interval: 1000 * 10,
+				pongTimeout: 1000 * 10,
+			},
+			autoReconnect: true,
+		})
+		ws.value.onopen = () => {
+			console.log('链接打开')
+			var messageObj = {
+				msgcode: 100,
+				msgname: 'session',
+				message: useUserStore().getToken,
+			}
+			var msg = JSON.stringify(messageObj)
+			ws.value.send(msg)
+			var stationTempArr = []
+			for (var i in stationHashList.value) {
+				stationTempArr.push(i)
+				if (stationTempArr.length >= 500) {
+					sendStationList(ws.value, stationTempArr)
+					stationTempArr = []
+				}
+			}
+			sendStationList(ws.value, stationTempArr)
+		}
+		ws.value.onclose = () => {
+			// console.log('断开重连')
+			//重连
+			// stationWebsocket();
+		}
+		ws.value.onmessage = function (evt) {
+			var data = JSON.parse(evt.data)
+			var msgcode = data['msgcode']
+			var message = data['message']
+			switch (msgcode) {
+				case 1035: //获取传感器列表
+					// jinbao.value.push(message[0])
+					useUserStore().setwebsoketdata(message[0])
+					break
+				case 1020: //接受别处登录的消息
+					// kickout(message);
+					break
+				default:
+					break
+			}
+		}
+	}
+	const toStudent = (a : any) => {
+		istab = a
+		switch (a) {
+			case '1':
+				router.push('/index/index')
+				break
+			case '2':
+				router.push('/index/histordata')
+				break
+			case '3':
+				router.push('/index/system')
+				break
+			case '4':
+				router.push('/index/command')
+				break
+			case '5':
+				// router.push('/index/command')
+				break
+			case '6':
+				router.push('/index/indexmin')
+				break
+			case '7':
+				router.push('/index/information')
+				break
+		}
+	}
+	const confirmEvent = () => {
+		console.log('退出')
+		localStorage.clear()
+		// router.push('/login')
+		// router.push({
+		// 	path: '/login'
+		// })
+		location.reload()
+	}
 </script>
 
 <style scoped lang="scss">
-.ist {
-  // background-image: url(@/assets/images/nav.png);
-  background-image: url(@/views/page/indeximag/dhxz.png);
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  padding: 10px 18px;
-  border-radius: 3px;
-  color: #fff !important;
-  // background-size: 100% 100%;
-  // background-repeat: no-repeat;
-  // background-position: center;
-}
+	.ist {
+		// background-image: url(@/assets/images/nav.png);
+		background-image: url(@/views/page/indeximag/dhxz.png);
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+		padding: 10px 18px;
+		border-radius: 3px;
+		color: #fff !important;
+		// background-size: 100% 100%;
+		// background-repeat: no-repeat;
+		// background-position: center;
+	}
 
-.ist2 {
-  background-image: url(@/views/page/indeximag/dhxz.png);
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  padding: 10px 18px;
-  border-radius: 3px;
-  color: #fff !important;
-}
+	.ist2 {
+		background-image: url(@/views/page/indeximag/dhxz.png);
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+		padding: 10px 18px;
+		border-radius: 3px;
+		color: #fff !important;
+	}
 
-.ist3 {
-  background-image: url(@/views/page/indeximag/dhxz.png);
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-  padding: 10px 18px;
-  border-radius: 3px;
-  color: #fff !important;
-}
-
-.active {
-  color: #fff;
-}
+	.ist3 {
+		background-image: url(@/views/page/indeximag/dhxz.png);
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+		padding: 10px 18px;
+		border-radius: 3px;
+		color: #fff !important;
+	}
 
+	.active {
+		color: #fff;
+	}
 .content {
   width: 100%;
   height: 100vh;
@@ -236,76 +251,85 @@ const confirmEvent = () => {
 
   .community_top {
     width: 100%;
-    height: 77px;
+    height: 60px;
     // position: absolute;
     // top: 0;
     // background:#4880FF;
     background: #07315e;
-    background-image: url(@/views/page/imag/titleBg1.png);
+    // background-image: url(@/views/page/imag/titleBg1.png);
     background-size: auto 100%;
     background-repeat: no-repeat;
     background-position-x: 55%;
     display: flex;
-    justify-content: space-between;
+    // justify-content: space-between;
+			.title {
+				float: left;
+				height: 100%;
+				width: 400px;
+				line-height: 80px;
+				text-align: center;
+				font-size: 29px;
+				font-family: pmzd;
+				font-weight: 550;
+				background: #fff;
+				// background: linear-gradient(to bottom, #fff, #9cd7ff);
+				-webkit-background-clip: text;
+				-webkit-text-fill-color: transparent;
+			}
+			.lefttit{
+				height: 60px;
+				line-height: 60px;
+				font-size: 18px;
+				font-weight: 600;
+				letter-spacing: 2px;
+				color: #ffffff;
+				background: -webkit-linear-gradient(45deg, #ffffff, #a1d7ff);
+				 -webkit-background-clip: text;
+				    -webkit-text-fill-color: transparent;
+				// background: linear-gradient(to bottom, #ffffff, #a1d7ff);
+				margin-left: 10px;
+			}
+		}
 
-    .title {
-      float: left;
-      height: 100%;
-      width: 400px;
-      line-height: 80px;
-      text-align: center;
-      font-size: 29px;
-      font-family: pmzd;
-      font-weight: 550;
-      background: #fff;
-      // background: linear-gradient(to bottom, #fff, #9cd7ff);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-  }
+		.community_top>ul:first-child {
+			left: 44px;
+		}
 
-  .community_top > ul:first-child {
-    left: 44px;
-  }
+		.community_top>ul:first-child,
+		.community_top>ul:last-child {
+			width: 524px;
+			float: left;
+			height: 24px;
+			margin-top: 23px;
+			padding: 0 20px;
+			position: relative;
+		}
 
-  .community_top > ul:first-child,
-  .community_top > ul:last-child {
-    width: 524px;
-    float: left;
-    height: 24px;
-    margin-top: 23px;
-    padding: 0 20px;
-    position: relative;
-  }
-
-  .community_top > ul:first-child > li,
-  .community_top > ul:last-child > li {
-    float: left;
-    height: 100%;
-    width: 80px;
-    border-radius: 3px;
-    text-align: center;
-    line-height: 24px;
-    font-size: 14px;
-    font-family: ysbth;
-    font-weight: 600;
-    background: #1f1757;
-    margin-right: 10px;
-    padding: 2px 0px;
-  }
-
-  .community_center {
-    // width: calc(100% - 100px);
-    width: 100%;
-    height: calc(100% - 68px);
-    overflow: hidden;
-    position: absolute;
-    // top: 0;
-    // height: 100%;
-    // margin: 10px 50px 30px 50px;
-    // position: absolute;
-    // position: relative;
-    // background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 31, 65, 1));
-  }
-}
+		.community_top>ul:first-child>li,
+		.community_top>ul:last-child>li {
+			float: left;
+			height: 100%;
+			width: 80px;
+			border-radius: 3px;
+			text-align: center;
+			line-height: 24px;
+			font-size: 14px;
+			font-family: ysbth;
+			font-weight: 600;
+			background: #1f1757;
+			margin-right: 10px;
+			padding: 2px 0px;
+		}
+		.community_center {
+			// width: calc(100% - 100px);
+			width: 100%;
+			height: calc(100% - 51px);
+			overflow: hidden;
+			// height: 100%;
+			// margin: 10px 50px 30px 50px;
+			// position: absolute;
+			// position: relative;
+			// background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 31, 65, 1));
+		}
+	}
 </style>
diff --git a/src/views/page/indexMim.vue b/src/views/page/indexMim.vue
index fd139c49..5fe2ffda 100644
--- a/src/views/page/indexMim.vue
+++ b/src/views/page/indexMim.vue
@@ -1102,7 +1102,7 @@
 
 			.right_bottm {
 				width: 97%;
-				height: 33%;
+				height: 35%;
 				padding: 5px;
 			}
 		}