Libt
/
multiple-police-situations
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成 树组件搜索功能，并且对样式做了优化 

完成 树组件搜索功能，并且对样式做了优化
This commit is contained in:
TimSpan 2024-08-02 09:32:58 +08:00
parent 98b7b2d5d2
commit 11e52b490a
2 changed files with 230 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/fullScreenContainer.vue
View File

@ -7,12 +7,11 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {useAutoResize} from "./useAutoResize"; import { useAutoResize } from './useAutoResize'
import {ref} from "vue"; import { ref } from 'vue'
const currentDom = ref<HTMLElement>(null) const currentDom = ref<HTMLElement>(null)
const state = useAutoResize(currentDom) const state = useAutoResize(currentDom)
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

325
src/views/page/index.vue
View File

@ -22,17 +22,29 @@
</div> </div>
<div class="searchBox" v-show="show3"> <div class="searchBox" v-show="show3">
<el-form-item label=""> <el-form-item label="">
<el-input v-model="value1" placeholder="快速选择"></el-input> <el-input v-model="searchValue" placeholder="请输入搜索关键词">
<template #append>
<el-button @click="onSearch" :icon="Search" />
</template>
</el-input>
</el-form-item> </el-form-item>
<!-- <el-input v-model="0"></el-input> -->
</div> </div>
<!-- <button @click="refreshTreeData">刷新</button> -->
<div v-loading="loading" style="padding: 0px 20px; height: 75%; overflow: auto">
<!-- <div v-loading="loading"> -->
<!-- :load-data="onLoadData" -->
<!-- height="500" -->
<!-- —————————————————————————————重要的事情说三遍： key 值必须唯一 ————————————————————————————— -->
<!-- —————————————————————————————重要的事情说三遍： key 值必须唯一 ————————————————————————————— -->
<!-- —————————————————————————————重要的事情说三遍： key 值必须唯一 ————————————————————————————— -->
<!-- <button @click="stop">关闭</button> -->
<div style="padding: 0px 20px; height: 75%; overflow: auto" v-show="show3">
<a-tree <a-tree
v-loading="loading" :fieldNames="{ key: 'code', title: 'title', children: 'children' }"
v-if="treedataall.length > 0"
ref="treeRef"
:show-icon="true" :show-icon="true"
:default-expand-all="true" :default-expand-all="false"
v-model:expandedKeys="expandedKeys" v-model:expandedKeys="expandedKeys"
v-model:selectedKeys="selectedKeys" v-model:selectedKeys="selectedKeys"
v-model:checkedKeys="checkedKeys" v-model:checkedKeys="checkedKeys"
@ -115,51 +127,60 @@
</div> </div>
</div> </div>
<ul class="dataList" v-show="isActive1 == '1'"> <ul class="dataList" v-show="isActive1 == '1'">
<li v-if="jinbao.length > 0" v-for="(item, index) in jinbao" :key="index" @click="toinfo(item, index)"> <div v-if="jinbao.length > 0">
<p> <li v-for="(item, index) in jinbao" :key="index" @click="toinfo(item, index)">
<el-icon> <LocationFilled /> </el-icon>{{ item.address }} <p>
</p> <el-icon> <LocationFilled /> </el-icon>{{ item.address }}
<p> </p>
<el-icon> <Clock /> </el-icon>{{ item.timestamp }} <p>
</p> <el-icon> <Clock /> </el-icon>{{ item.timestamp }}
<p> </p>
<el-icon> <PhoneFilled /> </el-icon>{{ item.user1Phone }} <p>
</p> <el-icon> <PhoneFilled /> </el-icon>{{ item.user1Phone }}
<p>设备号：{{ item.deviceId }}</p> </p>
<p>平台来源：{{ item.alarmSource }}</p> <p>设备号：{{ item.deviceId }}</p>
</li> <p>平台来源：{{ item.alarmSource }}</p>
</li>
</div>
<el-empty v-else description="暂无数据"></el-empty> <el-empty v-else description="暂无数据"></el-empty>
</ul> </ul>
<ul class="dataList" v-show="isActive1 == '2'"> <ul class="dataList" v-show="isActive1 == '2'">
<li v-if="jinqing.length > 0" v-for="(item, index) in jinqing" :key="index" @click="toinfo(item, index)"> <div v-if="jinqing.length > 0">
<p> <li v-for="(item, index) in jinqing" :key="index" @click="toinfo(item, index)">
<el-icon> <LocationFilled /> </el-icon>{{ item.address }} <p>
</p> <el-icon> <LocationFilled /> </el-icon>{{ item.address }}
<p> </p>
<el-icon> <Clock /> </el-icon>{{ item.timestamp }} <p>
</p> <el-icon> <Clock /> </el-icon>{{ item.timestamp }}
<p> </p>
<el-icon> <PhoneFilled /> </el-icon>{{ item.user1Phone }} <p>
</p> <el-icon> <PhoneFilled /> </el-icon>{{ item.user1Phone }}
<p>设备号：{{ item.alarmSource }}</p> </p>
<p>平台来源：{{ item.station }}</p> <p>设备号：{{ item.alarmSource }}</p>
</li> <p>平台来源：{{ item.station }}</p>
</li>
</div>
<el-empty v-else description="暂无数据"></el-empty> <el-empty v-else description="暂无数据"></el-empty>
</ul> </ul>
<ul class="dataList" v-show="isActive1 == '3'"> <ul class="dataList" v-show="isActive1 == '3'">
<li v-if="AIyujing.length > 0" v-for="(item, index) in AIyujing" :key="index" @click="toinfo(item, index)"> <div v-if="AIyujing.length > 0">
<p> <li v-for="(item, index) in AIyujing" :key="index" @click="toinfo(item, index)">
<el-icon> <LocationFilled /> </el-icon>{{ item.address }} <p>
</p> <el-icon> <LocationFilled /> </el-icon>{{ item.address }}
<p> </p>
<el-icon> <Clock /> </el-icon>{{ item.timestamp }} <p>
</p> <el-icon> <Clock /> </el-icon>{{ item.timestamp }}
<p> </p>
<el-icon> <PhoneFilled /> </el-icon>{{ item.user1Phone }} <p>
</p> <el-icon> <PhoneFilled /> </el-icon>{{ item.user1Phone }}
<p>设备号：{{ item.deviceId }}</p> </p>
<p>平台来源：{{ item.alarmSource }}</p> <p>设备号：{{ item.deviceId }}</p>
</li> <p>平台来源：{{ item.alarmSource }}</p>
</li>
</div>
<el-empty v-else description="暂无数据"></el-empty> <el-empty v-else description="暂无数据"></el-empty>
</ul> </ul>
</div> </div>
@ -352,16 +373,15 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { cloneDeep } from 'lodash'
import type { TreeProps } from 'ant-design-vue'
import { Search } from '@element-plus/icons-vue'
import { createMqttData } from '@/utils/createMqttData' import { createMqttData } from '@/utils/createMqttData'
import { sendMqtt } from '@/utils/sendMqtt' import { sendMqtt } from '@/utils/sendMqtt'
import { DownOutlined, SmileOutlined, FrownOutlined, FrownFilled } from '@ant-design/icons-vue'
import { useWebSocket } from '@vueuse/core'
import { wsUrl } from '@/utils/webSocket' import { wsUrl } from '@/utils/webSocket'
import * as _ from 'lodash' import * as _ from 'lodash'
import api from '@/axios' import api from '@/axios'
import { useUserStore } from '@/stores/modules/userStore' import { useUserStore } from '@/stores/modules/userStore'
import { MoreFilled } from '@element-plus/icons-vue'
import { CLIENT_TYPE } from '@/configs'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import no from './imag/no.png' import no from './imag/no.png'
import yes from './imag/yes.png' import yes from './imag/yes.png'
@ -372,7 +392,6 @@ import image4 from './imag/dsds.png'
import closeimag from './imag/infoClose.png' import closeimag from './imag/infoClose.png'
import { Ref, ref, watch, onMounted, onBeforeMount, reactive, getCurrentInstance, nextTick } from 'vue' import { Ref, ref, watch, onMounted, onBeforeMount, reactive, getCurrentInstance, nextTick } from 'vue'
// import AMapLoader from "@amap/amap-jsapi-loader"; // import AMapLoader from "@amap/amap-jsapi-loader";
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
const showIframe = ref(false) const showIframe = ref(false)
const videoUrl = ref('') const videoUrl = ref('')
@ -381,34 +400,20 @@ const { proxy } = getCurrentInstance() as any
const day = proxy.day const day = proxy.day
const size = ref('') const size = ref('')
const lodash = proxy.lodash const lodash = proxy.lodash
const value1 = ref('a1')
const zoom = ref('12') const zoom = ref('12')
const center = ref([121.59996, 31.197646]) const center = ref([121.59996, 31.197646])
let map: any let map: any
const expandedKeys = ref([]) const expandedKeys = ref([])
const selectedKeys = ref([]) const selectedKeys = ref([])
const checkedKeys = ref([]) const checkedKeys = ref([])
const expandedKeysb = ref([])
const selectedKeysb = ref([])
const checkedKeysb = ref([])
const expandedKeysc = ref([])
const selectedKeysc = ref([])
const checkedKeysc = ref([])
const dialogTableVisible = ref(false)
const deviceTreeData = ref([])
const deviceTreeDatab = ref([])
const deviceTreeDatac = ref([])
const treeData = ref([])
const treeDatab = ref([])
const treeDatac = ref([])
const boroughList = ref([])
const detachmentList = ref([])
const stationDataA = ref([]) const dialogTableVisible = ref(false)
const stationDataB = ref([])
const visible = ref(false) const visible = ref(false)
const visibleb = ref(false) const visibleb = ref(false)
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
const activeName = ref('first') const activeName = ref('first')
const router = useRouter() const router = useRouter()
const env = ref(import.meta.env.VITE_APP_BASE_API) const env = ref(import.meta.env.VITE_APP_BASE_API)
@ -503,17 +508,24 @@ const lock = (data: any) => {
} }
}) })
} }
//
const printLeafs = (tree: any, jirearr: any) => { const printLeafs = (tree: any, jirearr: any) => {
if (!tree.children) { if (tree.children === null) {
if (tree.hasOwnProperty('stationId')) {
tree.code = tree?.stationId
// tree.code = '111'
}
tree.children = [] tree.children = []
jirearr.forEach((x: any) => { jirearr.forEach((x: any) => {
if (tree.stationId == x.stationId) { if (tree.stationId == x.stationId) {
//加入报警的
tree.children.push(x) tree.children.push(x)
} }
}) })
} else { } else {
tree.children.forEach((child: any) => printLeafs(child, jirearr)) tree.children.forEach((child: any) => {
printLeafs(child, jirearr)
})
} }
} }
const isActive = ref('6') const isActive = ref('6')
@ -540,9 +552,85 @@ const qhzty = (data: any) => {
break break
} }
} }
const fieldNames: TreeProps['fieldNames'] = {
// children: 'children',
// title: 'title',
key: 'code',
}
const loading = ref(false) const loading = ref(false)
//四级组织树获取 //四级组织树获取
const treedataall = ref([]) const treedataall = ref([])
const searchValue = ref('') //搜索
const treeRef = ref() // 创建一个 ref 用来引用 a-tree 组件
// checkKeyExists___验证 key 方法
const checkKeyExists = (nodes: any, key: string): boolean => {
return nodes.some((node: any) => {
if (node.code === key) return true
if (node.children) return checkKeyExists(node.children, key)
return false
})
}
// 展开指定 树节点
const scrollToKey = (key: string) => {
console.log('scrollToKey', key)
// console.log('treeRef________', treeRef.value.scrollTo)
// 验证 key 是否存在于树中
// const exists = treedataall.value.some((node) => node.key === key || node.children?.some((child: any) => child.key === key))
const exists = checkKeyExists(treedataall.value, key)
if (!exists) {
console.error(`Key ${key} not found in the tree.`)
return
}
// 调用 scrollTo 方法
nextTick(() => {
treeRef.value.scrollTo({
key,
align: 'top', // 可选 top, bottom, auto
offset: 0, // 可选偏移量
})
})
}
// 搜索 树结构
const onSearch = () => {
let keysToExpand: any[]
keysToExpand = []
let keysToSelect: any[]
keysToSelect = []
const findKeys = (nodes: any, parentKeyPath: any[]) => {
nodes.forEach((node: any) => {
const nodeId = node.code
const currentPath = [...parentKeyPath, nodeId]
if (node.title.includes(searchValue.value)) {
console.log('node______', node)
keysToSelect.push(nodeId)
currentPath.forEach((key) => keysToExpand.push(key))
}
if (node.children && node.children.length > 0) {
findKeys(node.children, currentPath) // 递归处理子节点，传递当前路径
}
})
}
findKeys(treedataall.value, [])
console.log('Expanded Keys:', Array.from(keysToExpand))
console.log('Selected Keys:', keysToSelect)
expandedKeys.value = [...new Set(keysToExpand)]
selectedKeys.value = keysToSelect
if (selectedKeys.value.length > 0) {
console.log('selectedKeys.value', selectedKeys.value)
scrollToKey(selectedKeys.value[0])
}
}
const refreshTreeData = () => {
treedataall.value = [...treedataall.value]
}
const gettree4 = (data: any) => { const gettree4 = (data: any) => {
loading.value = true loading.value = true
api api
@ -558,12 +646,21 @@ const gettree4 = (data: any) => {
hylxdm: data, hylxdm: data,
}) })
.then((res1) => { .then((res1) => {
let data = [res.data] res1.data.forEach((ele: any) => {
data.forEach((x) => { // 给 getlist 数据添加 code
printLeafs(x, res1.data)
// ele.code = ele.stationId
ele.code = ele.pointId
}) })
// console.log('级组织树4', res.data)
treedataall.value = data let data = [res.data]
// console.log('data_____________', data)
data.forEach((tree) => {
console.log(tree)
printLeafs(tree, res1.data)
})
treedataall.value = [...data]
loading.value = false loading.value = false
}) })
} else { } else {
@ -571,6 +668,22 @@ const gettree4 = (data: any) => {
} }
}) })
} }
const onLoadData: TreeProps['loadData'] = (treeNode) => {
return new Promise<void>((resolve) => {
if (treeNode.dataRef.children) {
resolve()
return
}
setTimeout(() => {
treeNode.dataRef.children = [
{ title: 'Child Node', key: `${treeNode.eventKey}-0` },
{ title: 'Child Node', key: `${treeNode.eventKey}-1` },
]
treedataall.value = [...treedataall.value]
resolve()
}, 1000)
})
}
//关闭 //关闭
const close = (info: any) => { const close = (info: any) => {
api api
@ -684,6 +797,7 @@ const clickKz = (dat2a: any) => {
} }
onMounted(() => { onMounted(() => {
// await nextTick()
gettotal() gettotal()
initMap() initMap()
gettree4('') gettree4('')
@ -708,7 +822,9 @@ const treedata = () => {
.then((res) => { .then((res) => {
var gridSize = 60 var gridSize = 60
// console.log('总数', res) // console.log('总数', res)
var points: any[] // var points: any[]
var points = []
res.data.map((x: any) => { res.data.map((x: any) => {
const marker = new AMap.Marker({ const marker = new AMap.Marker({
position: new AMap.LngLat(x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude), position: new AMap.LngLat(x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude),
@ -889,7 +1005,7 @@ const gettotal = () => {
// //
let deviceInfoWindow = ref(null) let deviceInfoWindow = ref(null)
const selectA = (selectedKeys: any, e: any) => { const selectA = (selectedKeys: any, e: any) => {
// console.log('selectedKeys',selectedKeys,e) console.log('selectedKeys', selectedKeys, e)
if (selectedKeys[0].length >= 13) { if (selectedKeys[0].length >= 13) {
let targetLangLat = [e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude, e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude] let targetLangLat = [e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude, e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude]
deviceInfoWindow = new AMap.InfoWindow({ deviceInfoWindow = new AMap.InfoWindow({
@ -902,18 +1018,18 @@ const selectA = (selectedKeys: any, e: any) => {
state.map.setZoomAndCenter(205, targetLangLat) state.map.setZoomAndCenter(205, targetLangLat)
} }
} }
const selectB = (selectedKeys: any, e: any) => { // const selectB = (selectedKeys: any, e: any) => {
if (e.selectedNodes[0]) { // if (e.selectedNodes[0]) {
let targetLangLat = [e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude, e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude] // let targetLangLat = [e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude, e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude]
state.map.panTo(targetLangLat) // state.map.panTo(targetLangLat)
} // }
} // }
const selectC = (selectedKeys: any, e: any) => { // const selectC = (selectedKeys: any, e: any) => {
if (e.selectedNodes[0]) { // if (e.selectedNodes[0]) {
let targetLangLat = [e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude, e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude] // let targetLangLat = [e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude, e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude]
state.map.panTo(targetLangLat) // state.map.panTo(targetLangLat)
} // }
} // }
const createSubstanceInfowindow = (obj: any, type: any) => { const createSubstanceInfowindow = (obj: any, type: any) => {
//定义顶部标题 //定义顶部标题
var mdinfoTop = document.createElement('div') var mdinfoTop = document.createElement('div')
@ -1330,6 +1446,9 @@ const defaultProps = {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
// .input-with-select .el-input-group__prepend {
// background-color: var(--el-fill-color-blank);
// }
.slide-fade-enter-active { .slide-fade-enter-active {
transition: all 0.3s linear; transition: all 0.3s linear;
} }
@ -1760,15 +1879,14 @@ const defaultProps = {
color: #fff; color: #fff;
} }
:deep(.el-input__wrapper) { // :deep(.el-input__wrapper) {
background-color: transparent; // background-color: transparent;
// box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset; // box-shadow: 0 0 0 1px #ccc;
box-shadow: 0 0 0 1px #ccc; // }
}
:deep(.el-input__inner) { // :deep(.el-input__inner) {
color: #fff; // color: #fff;
} // }
:deep(.el-select .el-input .el-select__caret) { :deep(.el-select .el-input .el-select__caret) {
color: #ccc; color: #ccc;
@ -1816,6 +1934,12 @@ const defaultProps = {
background-color: transparent; background-color: transparent;
} }
:deep(.ant-tree-iconEle) {
display: flex !important;
justify-content: center;
align-items: center;
}
:deep( :deep(
:where(.css-dev-only-do-not-override-1qb1s0s).ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected, :where(.css-dev-only-do-not-override-1qb1s0s).ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected,
:where(.css-dev-only-do-not-override-1qb1s0s).ant-tree .ant-tree-checkbox + span.ant-tree-node-selected :where(.css-dev-only-do-not-override-1qb1s0s).ant-tree .ant-tree-checkbox + span.ant-tree-node-selected
@ -1823,6 +1947,11 @@ const defaultProps = {
background-color: transparent; background-color: transparent;
} }
:deep(.ant-tree-node-content-wrapper) {
display: flex;
align-items: center;
}
::v-deep .ant-tree .ant-tree-list-holder-inner { ::v-deep .ant-tree .ant-tree-list-holder-inner {
// background: #cccccc2b; // background: #cccccc2b;
background: #fff; background: #fff;