Skip to content

罗鑫霖 / vion-tools

Go to a project
Commit fa967f04 by 陈岩
Options

feat: tool聚类、抓拍增加懒加载

1 parent c6c1d344
Inline Side-by-side
Showing 7 changed files with 70 additions and 25 deletions
package-lock.json
This diff could not be displayed because it is too large.
package.json
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
"moment": "^2.29.1", "moment": "^2.29.1",
"vue": "^3.2.27", "vue": "^3.2.27",
"vue-router": "^4.0.8", "vue-router": "^4.0.8",
"vue-virtual-scroller": "^2.0.0-beta.8",
"vue3-image-preview": "^0.2.7", "vue3-image-preview": "^0.2.7",
"vuex": "^4.0.0" "vuex": "^4.0.0"
}, },
......
public/config.js
window._serverHost = ['localhost', '192.168.1.120'].includes(window.location.hostname) ? 'https://wenan-poc.efivestar.com/' : window.location.host window._serverHost = ['localhost', '192.168.1.120'].includes(window.location.hostname) ? 'https://store.keliuyun.com/' : window.location.host
window._baseUrl = ['localhost', '192.168.1.120'].includes(window.location.hostname) ? 'https://wenan-poc.efivestar.com/tool/' : `${window.location.origin}/btool/` window._baseUrl = ['localhost', '192.168.1.120'].includes(window.location.hostname) ? 'https://store.keliuyun.com/tool/' : `${window.location.origin}/btool/`
window._reportUrl = ['localhost', '192.168.1.120'].includes(window.location.hostname) ? 'https://wenan-poc.efivestar.com/report/' : `${window.location.origin}/report/` window._reportUrl = ['localhost', '192.168.1.120'].includes(window.location.hostname) ? 'https://store.keliuyun.com/report/' : `${window.location.origin}/report/`
window._baseImgUrl = ['localhost', '192.168.1.120'].includes(window.location.hostname) ? 'https://wenan-poc.efivestar.com/images/' : `${window.location.origin}/images/` window._baseImgUrl = ['localhost', '192.168.1.120'].includes(window.location.hostname) ? 'https://store.keliuyun.com/images/' : `${window.location.origin}/images/`
window._matchHost = ['localhost', '192.168.1.120'].includes(window.location.hostname) ? 'http://192.168.1.64:6689/' : window.location.host window._matchHost = ['localhost', '192.168.1.120'].includes(window.location.hostname) ? 'http://192.168.1.64:6689/' : window.location.host
window._socketUrl = ['localhost', '192.168.1.120'].includes(window.location.hostname) ? `wss://${window._serverHost}/btool/` : `wss://${window._serverHost}/btool/` window._socketUrl = ['localhost', '192.168.1.120'].includes(window.location.hostname) ? `wss://${window._serverHost}/btool/` : `wss://${window._serverHost}/btool/`
const log = console.log.bind(console) const log = console.log.bind(console)
src/views/SnapshotCluster/ClusterResult/ClusterResult.vue
...@@ -234,7 +234,21 @@ ...@@ -234,7 +234,21 @@
<div v-loading="isLoading"> <div v-loading="isLoading">
<div class="resultContent" :style="{'height':contentHeight+'px'}"> <div class="resultContent" :style="{'height':contentHeight+'px'}">
<template v-for="person in dataList"> <DynamicScroller
class="scroller-container"
:items="dataList"
:min-item-size="570"
key-field="person_unid"
ref="dynamicScrollerRef"
>
<template #default="{ item: person, index, active }">
<DynamicScrollerItem
:item="person"
:active="active"
:size-dependencies="[person.expand]"
:data-index="index"
:key="person.person_unid"
>
<div class="classBox" :class="person.expand?'expand':''"> <div class="classBox" :class="person.expand?'expand':''">
<div :class="person.checked?'checked':''"> <div :class="person.checked?'checked':''">
<div class="boxInfo"> <div class="boxInfo">
...@@ -275,14 +289,14 @@ ...@@ -275,14 +289,14 @@
特征 特征
</span> </span>
</div> </div>
<el-image v-if="person.imageDisplayType" :src="item.eventPic" :fit="'fill'" class="single-image"> <el-image v-if="person.imageDisplayType" :src="item.eventPic" :fit="'fill'" class="single-image" lazy :scroll-container="dynamicScrollerRef?.$el">
<template #error> <template #error>
<div class="image-slot"> <div class="image-slot">
{{dataSources==1?'去加载':'加载失败'}} {{dataSources==1?'去加载':'加载失败'}}
</div> </div>
</template> </template>
</el-image> </el-image>
<el-image v-else :src="item.picture_url" :fit="'fill'" class="single-image"> <el-image v-else :src="item.picture_url" :fit="'fill'" class="single-image" lazy :scroll-container="dynamicScrollerRef?.$el">
<template #error> <template #error>
<div class="image-slot"> <div class="image-slot">
{{dataSources==1?'去加载':'加载失败'}} {{dataSources==1?'去加载':'加载失败'}}
...@@ -303,7 +317,9 @@ ...@@ -303,7 +317,9 @@
</el-row> </el-row>
</div> </div>
</div> </div>
</DynamicScrollerItem>
</template> </template>
</DynamicScroller>
</div> </div>
<a-pagination <a-pagination
v-model:current="pageNum" v-model:current="pageNum"
...@@ -361,6 +377,8 @@ import SnapShotRecordSearchDialog from "./components/SnapShotRecordSearchDialog. ...@@ -361,6 +377,8 @@ import SnapShotRecordSearchDialog from "./components/SnapShotRecordSearchDialog.
import AddEditSnapshotClusterDialog from './components/AddEditSnapshotClusterDialog.vue' import AddEditSnapshotClusterDialog from './components/AddEditSnapshotClusterDialog.vue'
import snapshotRecordApi from "@/views/SnapshotCluster/SnapshotRecord/SnapshotRecordApi"; import snapshotRecordApi from "@/views/SnapshotCluster/SnapshotRecord/SnapshotRecordApi";
import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
export default { export default {
components:{ components:{
...@@ -377,6 +395,8 @@ export default { ...@@ -377,6 +395,8 @@ export default {
DetailDialogComparison, DetailDialogComparison,
singleImgComparisonDialog, singleImgComparisonDialog,
SnapShotRecordSearchDialog, SnapShotRecordSearchDialog,
DynamicScroller,
DynamicScrollerItem,
...@@ -451,6 +471,7 @@ export default { ...@@ -451,6 +471,7 @@ export default {
const zoneList = ref([]) const zoneList = ref([])
const positionList = ref([]) const positionList = ref([])
const gateList = ref([]) const gateList = ref([])
const dynamicScrollerRef = ref(null)
// const imgModelRef = ref(); // const imgModelRef = ref();
const pagedTableDataList = computed( const pagedTableDataList = computed(
() => { () => {
...@@ -1498,6 +1519,7 @@ export default { ...@@ -1498,6 +1519,7 @@ export default {
return { return {
addEditSnapshotClusterRef, addEditSnapshotClusterRef,
handleAddSnapshotCluster, handleAddSnapshotCluster,
dynamicScrollerRef,
// scalar // scalar
dataSources, dataSources,
isLoading, isLoading,
...@@ -1586,8 +1608,19 @@ export default { ...@@ -1586,8 +1608,19 @@ export default {
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import "./ClusterResult"; @import "./ClusterResult";
.scroller-container {
height: 500px; /* Adjust as needed */
overflow-y: auto;
}
.classBox {
/* Ensure classBox takes full width within scroller */
width: 100%;
}
.actived{ .actived{
border: 3px solid #1890ff; border: 3px solid #1890ff;
} }
......
src/views/SnapshotCluster/SnapshotRecord/SnapshotRecord.vue
...@@ -163,8 +163,15 @@ ...@@ -163,8 +163,15 @@
<div v-loading="isLoading"> <div v-loading="isLoading">
<div class="resultContent" :style="{'height':contentHeight+'px'}"> <div class="resultContent" :style="{'height':contentHeight+'px'}">
<el-row v-for="row in pagedTableDataList"> <RecycleScroller
<el-col :span="3" v-for="item in row"> class="scroller"
:items="dataList"
:item-size="itemHeight"
:grid-items="8"
:item-secondary-size="itemWidth"
key-field="unid"
v-slot="{ item }"
>
<div style="margin: 0 5px;cursor: pointer;" @click="handleClick(item)" :class="currentItemId==item.id?'actived':''"> <div style="margin: 0 5px;cursor: pointer;" @click="handleClick(item)" :class="currentItemId==item.id?'actived':''">
<div style=""> <div style="">
<span @click="downloadTrajectoryFile(item.track_url)" <span @click="downloadTrajectoryFile(item.track_url)"
...@@ -188,7 +195,7 @@ ...@@ -188,7 +195,7 @@
>删除</span> >删除</span>
</a-popconfirm> </a-popconfirm>
</div> </div>
<el-image :src="item.picture_url" :fit="'fill'" class="single-image" :style="{'height':imgHeight+'px'}"> <el-image :src="item.picture_url" :fit="'fill'" class="single-image" :style="{'height':imgHeight+'px'}" lazy>
<template #error> <template #error>
<div class="image-slot"> <div class="image-slot">
{{dataSources==1?'去加载':'加载失败'}} {{dataSources==1?'去加载':'加载失败'}}
...@@ -238,8 +245,7 @@ ...@@ -238,8 +245,7 @@
<div style="width:100%;overflow:hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">机位号:{{ formatPosition(item.channelProductId)}}</div> <div style="width:100%;overflow:hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">机位号:{{ formatPosition(item.channelProductId)}}</div>
<div>持续时间:{{ item.duration!==null&&item.duration!==undefined&&item.duration>=0?item.duration+'秒':'--' }}</div> <div>持续时间:{{ item.duration!==null&&item.duration!==undefined&&item.duration>=0?item.duration+'秒':'--' }}</div>
</div> </div>
</el-col> </RecycleScroller>
</el-row>
</div> </div>
<a-pagination <a-pagination
v-model:current="pageNum" v-model:current="pageNum"
...@@ -261,12 +267,13 @@ ...@@ -261,12 +267,13 @@
</template> </template>
<script> <script>
import {computed, reactive, ref, toRaw} from 'vue' import { reactive, ref, toRaw} from 'vue'
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import snapshotRecordApi from '@/views/SnapshotCluster/SnapshotRecord/SnapshotRecordApi' import snapshotRecordApi from '@/views/SnapshotCluster/SnapshotRecord/SnapshotRecordApi'
import {isArray} from '@/PublicUtil/Judgment' import {isArray} from '@/PublicUtil/Judgment'
import moment from 'moment' import moment from 'moment'
import { flattenDeep } from 'lodash' import { filterEmptyValueInObject, formatDate} from '@/PublicUtil/PublicUtil'
import {filterEmptyValueInObject, formatDate, formatTime, getPagedList} from '@/PublicUtil/PublicUtil'
// import imgDialog from '../imgDialog.vue' // import imgDialog from '../imgDialog.vue'
import {ElMessage} from 'element-plus' import {ElMessage} from 'element-plus'
import DetailDialog from "../../ComparisonCapturedPictures/DetailDialog.vue"; import DetailDialog from "../../ComparisonCapturedPictures/DetailDialog.vue";
...@@ -277,7 +284,8 @@ export default { ...@@ -277,7 +284,8 @@ export default {
// imgDialog , // imgDialog ,
DetailDialog, DetailDialog,
batchesResultDialog, batchesResultDialog,
singleImgComparisonDialog singleImgComparisonDialog,
RecycleScroller
}, },
setup() { setup() {
// scalar // scalar
...@@ -301,11 +309,6 @@ export default { ...@@ -301,11 +309,6 @@ export default {
// ref // ref
const DetailDialogRef = ref(); const DetailDialogRef = ref();
const batchesResultDialogRef = ref(); const batchesResultDialogRef = ref();
const pagedTableDataList = computed(
() => {
return getPagedList(dataList.value, 8)
}
)
const queryForm = reactive( const queryForm = reactive(
{ {
...@@ -656,7 +659,9 @@ export default { ...@@ -656,7 +659,9 @@ export default {
} }
// 点击人id，将人id复制到剪切板 // 点击人id，将人id复制到剪切板
const personUnidClick = function(val){ const personUnidClick = function(val){
// return (personTypeList.value.filter(v => v.value == val)[0] || {label:'--'}).label navigator.clipboard.writeText(val).then(() => {
ElMessage.success('人员ID已复制到剪贴板')
})
} }
const formatProduct = function(val) { const formatProduct = function(val) {
if(val < 0){ if(val < 0){
...@@ -1503,10 +1508,14 @@ export default { ...@@ -1503,10 +1508,14 @@ export default {
} }
const contentHeight = ref(0) const contentHeight = ref(0)
const imgHeight = ref(0) const imgHeight = ref(0)
const itemWidth = ref(0)
const itemHeight = ref(0)
const __main = function() { const __main = function() {
getAccountList() getAccountList()
contentHeight.value = window.innerHeight - 320 contentHeight.value = window.innerHeight - 320
imgHeight.value = (((window.innerWidth - 240)/8)-10)*1.21 imgHeight.value = (((window.innerWidth - 240)/8)-10)*1.21
itemWidth.value = (window.innerWidth - 240)/8
itemHeight.value = imgHeight.value + 280
} }
__main() __main()
...@@ -1519,7 +1528,7 @@ export default { ...@@ -1519,7 +1528,7 @@ export default {
* 3.刷新列表页面 * 3.刷新列表页面
*/ */
// console.log('pagedTableDataList', pagedTableDataList) // console.log('pagedTableDataList', pagedTableDataList)
const allList = flattenDeep(pagedTableDataList.value) const allList = dataList.value
const paramsUnid = [] const paramsUnid = []
allList.forEach(item => { allList.forEach(item => {
if (!item.picture_url) { if (!item.picture_url) {
...@@ -1549,10 +1558,12 @@ export default { ...@@ -1549,10 +1558,12 @@ export default {
zoneList, zoneList,
positionList, positionList,
gateList, gateList,
pagedTableDataList, dataList,
currentItemId, currentItemId,
contentHeight, contentHeight,
imgHeight, imgHeight,
itemWidth,
itemHeight,
// mapping // mapping
queryForm, queryForm,
// function // function
......
vue.config.js
...@@ -70,7 +70,7 @@ module.exports = { ...@@ -70,7 +70,7 @@ module.exports = {
} }
}, },
'/': { '/': {
target: 'https://wenan-poc.efivestar.com/btool/', target: 'https://store.keliuyun.com/btool/',
// target: 'http://117.133.143.116:33333/btool/', // target: 'http://117.133.143.116:33333/btool/',
changeOrigin: true changeOrigin: true
}, },
......
yarn.lock 0 → 100644
This diff could not be displayed because it is too large.
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!