顶部图标图片完整展示

2024-08-02 10:16:06 +08:00 · 2024-08-02 10:16:06 +08:00 · 75084dc667
parent 11e52b490a
commit 75084dc667
4 changed files with 313 additions and 292 deletions
--- 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",
--- 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",
--- a/src/views/index.vue
+++ b/src/views/index.vue
@ -2,52 +2,44 @@
  <!-- <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="">
+      <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>
+            <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>
+            <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>
+            <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="">
+      <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>
+            <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>
+            <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;">
+            <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>
@ -65,47 +57,46 @@
 </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();
+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) => {
+    api.post('/multialarm/client/user/active', {}).then((res) => {
      console.log('token保活', res)
-			});
-		}, 180000);
    })
+  }, 180000)
+})

-	watch(
+watch(
  () => router.currentRoute.value,
-		(newValue : any) => {
+  (newValue: any) => {
    // console.log('newValue', newValue)
    if (newValue.path == '/index/communitymanage' || newValue.path == '/index/hkplay') {
-				isshow.value = false;
+      isshow.value = false
    }
  },
  { immediate: true }
-	)
-	let istab = ref('6');
-	const sendStationList = (rollCall_websocket, stationTempArr) => {
+)
+let istab = ref('6')
+const sendStationList = (rollCall_websocket: any, stationTempArr: any) => {
  var getIot = {
-			"msgcode": 102,
-			"msgname": "station-sensor-list",
-			"message": stationTempArr
+    msgcode: 102,
+    msgname: 'station-sensor-list',
+    message: stationTempArr,
  }
-		var msg = JSON.stringify(getIot);
-		rollCall_websocket.send(msg);
-	};
-	const stationHashList = ref([]);
-	const stationWebsocket = () => {
+  var msg = JSON.stringify(getIot)
+  rollCall_websocket.send(msg)
+}
+const stationHashList = ref([])
+const stationWebsocket = () => {
  //心跳检测 建立链接 断开重连
  const { data, ws } = useWebSocket(wsUrl('/ClientWebSocket'), {
    heartbeat: {
@ -114,88 +105,87 @@
      pongTimeout: 1000 * 10,
    },
    autoReconnect: true,
-		});
+  })
  ws.value.onopen = () => {
    console.log('链接打开')
    var messageObj = {
-				"msgcode": 100,
-				"msgname": "session",
-				"message": useUserStore().getToken
+      msgcode: 100,
+      msgname: 'session',
+      message: useUserStore().getToken,
    }
-			var msg = JSON.stringify(messageObj);
-			ws.value.send(msg);
-			var stationTempArr = [];
+    var msg = JSON.stringify(messageObj)
+    ws.value.send(msg)
+    var stationTempArr = []
    for (var i in stationHashList.value) {
-				stationTempArr.push(i);
+      stationTempArr.push(i)
      if (stationTempArr.length >= 500) {
-					sendStationList(ws.value, stationTempArr);
-					stationTempArr = [];
+        sendStationList(ws.value, stationTempArr)
+        stationTempArr = []
      }
    }
-			sendStationList(ws.value, 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"];
+    var data = JSON.parse(evt.data)
+    var msgcode = data['msgcode']
+    var message = data['message']
    switch (msgcode) {
-				case 1035://获取传感器列表   
+      case 1035: //获取传感器列表
        // jinbao.value.push(message[0])
        useUserStore().setwebsoketdata(message[0])
-					break;
-				case 1020://接受别处登录的消息
+        break
+      case 1020: //接受别处登录的消息
        // kickout(message);
-					break;
+        break
      default:
-					break;
+        break
    }
  }
-
-	};
-	const toStudent = (a) => {
-		istab = a;
+}
+const toStudent = (a: any) => {
+  istab = a
  switch (a) {
-			case "1":
+    case '1':
      router.push('/index/index')
-				break;
-			case "2":
+      break
+    case '2':
      router.push('/index/histordata')
-				break;
-			case "3":
+      break
+    case '3':
      router.push('/index/system')
-				break;
-			case "4":
+      break
+    case '4':
      router.push('/index/command')
-				break;
-			case "5":
+      break
+    case '5':
      // router.push('/index/command')
-				break;
-			case "6":
+      break
+    case '6':
      router.push('/index/indexmin')
-				break;
-			case "7":
+      break
+    case '7':
      router.push('/index/information')
-				break;
+      break
  }
-	}
-	const confirmEvent = () => {
+}
+const confirmEvent = () => {
  console.log('退出')
-		localStorage.clear();
+  localStorage.clear()
  // router.push('/login')
  // router.push({
  // 	path: '/login'
  // })
  location.reload()
-	};
+}
 </script>

 <style scoped lang="scss">
-	.ist {
+.ist {
  // background-image: url(@/assets/images/nav.png);
  background-image: url(@/views/page/indeximag/dhxz.png);
  background-size: 100% 100%;
@ -206,31 +196,31 @@
  // background-size: 100% 100%;
  // background-repeat: no-repeat;
  // background-position: center;
-	}
+}

-	.ist2 {
+.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 {
+.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 {
+.active {
  color: #fff;
-	}
+}

-	.content {
+.content {
  width: 100%;
  height: 100vh;
  // background: #142738;
@ -242,13 +232,13 @@

  .community_top {
    width: 100%;
-			height: 68px;
+    height: 77px;
    // background:#4880FF;
-			background: #07315E;
+    background: #07315e;
    background-image: url(@/views/page/imag/titleBg1.png);
-			background-size: 68% 100%;
+    background-size: auto 100%;
    background-repeat: no-repeat;
-			background-position-x: 63%;
+    background-position-x: 55%;
    display: flex;
    justify-content: space-between;

@ -268,12 +258,12 @@
    }
  }

-		.community_top>ul:first-child {
+  .community_top > ul:first-child {
    left: 44px;
  }

-		.community_top>ul:first-child,
-		.community_top>ul:last-child {
+  .community_top > ul:first-child,
+  .community_top > ul:last-child {
    width: 524px;
    float: left;
    height: 24px;
@ -282,8 +272,8 @@
    position: relative;
  }

-		.community_top>ul:first-child>li,
-		.community_top>ul:last-child>li {
+  .community_top > ul:first-child > li,
+  .community_top > ul:last-child > li {
    float: left;
    height: 100%;
    width: 80px;
@ -293,7 +283,7 @@
    font-size: 14px;
    font-family: ysbth;
    font-weight: 600;
-			background: #1F1757;
+    background: #1f1757;
    margin-right: 10px;
    padding: 2px 0px;
  }
@ -307,5 +297,5 @@
    position: relative;
    // background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 31, 65, 1));
  }
-	}
+}
 </style>
--- 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