From 75084dc6671afb7d39afa386f5fc309054939084 Mon Sep 17 00:00:00 2001
From: TimSpan <cat20201314@163.com>
Date: Fri, 2 Aug 2024 10:16:06 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B6=E9=83=A8=E5=9B=BE=E6=A0=87=20?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E5=AE=8C=E6=95=B4=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

顶部图标 图片完整展示
---
 package-lock.json        |  27 ++
 package.json             |   1 +
 src/views/index.vue      | 574 +++++++++++++++++++--------------------
 src/views/page/index.vue |   3 +
 4 files changed, 313 insertions(+), 292 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b66d5f53..1d4da895 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "@codemirror/lang-json": "^6.0.1",
         "@codemirror/lang-sql": "^6.5.4",
         "@codemirror/theme-one-dark": "^6.1.2",
+        "@dataview/datav-vue3": "^0.0.0-test.1672506674342",
         "@element-plus/icons-vue": "^2.3.1",
         "@jiaminghi/data-view": "^2.10.0",
         "@kjgl77/datav-vue3": "^1.7.2",
@@ -669,6 +670,27 @@
         "node": ">=10"
       }
     },
+    "node_modules/@dataview/datav-vue3": {
+      "version": "0.0.0-test.1672506674342",
+      "resolved": "https://registry.npmmirror.com/@dataview/datav-vue3/-/datav-vue3-0.0.0-test.1672506674342.tgz",
+      "integrity": "sha512-d0oT/msAi592CTvWmQl0umkLpHgMwtTN2+peyo0L2GHNG7b4cKeO9meEF5o28DgFzRwOLeNQW73vKCF4JC+ihw==",
+      "dependencies": {
+        "@jiaminghi/color": "^0.1.1",
+        "classnames": "^2.3.2",
+        "lodash-es": "^4.17.21"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      }
+    },
+    "node_modules/@dataview/datav-vue3/node_modules/@jiaminghi/color": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-0.1.1.tgz",
+      "integrity": "sha512-M09+Sb5HGqVim0zo+nG5gU1v+6gXT8ptr0BZR6dMGt83XmCJgnZtO8s7llTW4hLFFFM5co6geZvTekqLpSPAAQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
     "node_modules/@element-plus/icons-vue": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
@@ -2102,6 +2124,11 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "node_modules/claygl": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/claygl/-/claygl-1.3.0.tgz",
diff --git a/package.json b/package.json
index dc5e3db2..413fea68 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-sql": "^6.5.4",
     "@codemirror/theme-one-dark": "^6.1.2",
+    "@dataview/datav-vue3": "^0.0.0-test.1672506674342",
     "@element-plus/icons-vue": "^2.3.1",
     "@jiaminghi/data-view": "^2.10.0",
     "@kjgl77/datav-vue3": "^1.7.2",
diff --git a/src/views/index.vue b/src/views/index.vue
index e7e472f6..d4a444f9 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,311 +1,301 @@
 <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 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>
 
-			<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;
-			}
-		},
-		{ immediate: true }
-	)
-	let istab = ref('6');
-	const sendStationList = (rollCall_websocket, stationTempArr) => {
-		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) => {
-		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
+    }
+  },
+  { 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;
-	}
+.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;
-	}
+.active {
+  color: #fff;
+}
 
-	.content {
-		width: 100%;
-		height: 100vh;
-		// background: #142738;
-		background: #fff;
-		color: #fff;
-		// background-image: url(@/assets/images/community_container.jpg);
-		// background-size: 100% 100%;
-		// background-repeat: no-repeat;
+.content {
+  width: 100%;
+  height: 100vh;
+  // background: #142738;
+  background: #fff;
+  color: #fff;
+  // background-image: url(@/assets/images/community_container.jpg);
+  // background-size: 100% 100%;
+  // background-repeat: no-repeat;
 
-		.community_top {
-			width: 100%;
-			height: 68px;
-			// background:#4880FF;
-			background: #07315E;
-			background-image: url(@/views/page/imag/titleBg1.png);
-			background-size: 68% 100%;
-			background-repeat: no-repeat;
-			background-position-x: 63%;
-			display: flex;
-			justify-content: space-between;
+  .community_top {
+    width: 100%;
+    height: 77px;
+    // background:#4880FF;
+    background: #07315e;
+    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;
 
-			.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;
-			}
-		}
+    .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_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);
-			// height: 100%;
-			// margin: 10px 50px 30px 50px;
-			position: relative;
-			// background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 31, 65, 1));
-		}
-	}
-</style>
\ No newline at end of file
+  .community_center {
+    // width: calc(100% - 100px);
+    width: 100%;
+    height: calc(100% - 68px);
+    // height: 100%;
+    // margin: 10px 50px 30px 50px;
+    position: relative;
+    // background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 31, 65, 1));
+  }
+}
+</style>
diff --git a/src/views/page/index.vue b/src/views/page/index.vue
index af777d34..b6387e4c 100644
--- a/src/views/page/index.vue
+++ b/src/views/page/index.vue
@@ -620,6 +620,9 @@ const onSearch = () => {
 
   console.log('Expanded Keys:', Array.from(keysToExpand))
   console.log('Selected Keys:', keysToSelect)
+  if (keysToSelect.length === 0) {
+    ElMessage.warning(`未搜索到${searchValue.value}`)
+  }
 
   expandedKeys.value = [...new Set(keysToExpand)]
   selectedKeys.value = keysToSelect