Skip to content

罗鑫霖 / vion-tools

Go to a project
Commit fa967f04 by 陈岩
Options

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

1 parent c6c1d344
Expand all
Inline Side-by-side
Showing 7 changed files with 47 additions and 13 deletions
package-lock.json
This diff could not be displayed because it is too large.
package.json
......@@ -21,6 +21,7 @@
"moment": "^2.29.1",
"vue": "^3.2.27",
"vue-router": "^4.0.8",
"vue-virtual-scroller": "^2.0.0-beta.8",
"vue3-image-preview": "^0.2.7",
"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._baseUrl = ['localhost', '192.168.1.120'].includes(window.location.hostname) ? 'https://wenan-poc.efivestar.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._baseImgUrl = ['localhost', '192.168.1.120'].includes(window.location.hostname) ? 'https://wenan-poc.efivestar.com/images/' : `${window.location.origin}/images/`
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://store.keliuyun.com/tool/' : `${window.location.origin}/btool/`
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://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._socketUrl = ['localhost', '192.168.1.120'].includes(window.location.hostname) ? `wss://${window._serverHost}/btool/` : `wss://${window._serverHost}/btool/`
const log = console.log.bind(console)
\ No newline at end of file
const log = console.log.bind(console)
src/views/SnapshotCluster/ClusterResult/ClusterResult.vue
......@@ -62,7 +62,7 @@
<a-select-option :value="1">进</a-select-option>
<a-select-option :value="-1">出</a-select-option>
<a-select-option :value="0">横穿</a-select-option>
<a-select-option :value="2">过店</a-select-option>
<a-select-option :value="2">过店</a-select-option>
<a-select-option :value="4">从左到右</a-select-option>
<a-select-option :value="5">从右到左</a-select-option>
<a-select-option :value="7">关注</a-select-option>
......@@ -234,8 +234,22 @@
<div v-loading="isLoading">
<div class="resultContent" :style="{'height':contentHeight+'px'}">
<template v-for="person in dataList">
<div class="classBox" :class="person.expand?'expand':''">
<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="person.checked?'checked':''">
<div class="boxInfo">
<span class="iconExpand" v-show="!person.expand">▶</span>
......@@ -275,14 +289,14 @@
特征
</span>
</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>
<div class="image-slot">
{{dataSources==1?'去加载':'加载失败'}}
</div>
</template>
</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>
<div class="image-slot">
{{dataSources==1?'去加载':'加载失败'}}
......@@ -302,8 +316,10 @@
</el-col>
</el-row>
</div>
</div>
</template>
</div>
</DynamicScrollerItem>
</template>
</DynamicScroller>
</div>
<a-pagination
v-model:current="pageNum"
......@@ -361,6 +377,8 @@ import SnapShotRecordSearchDialog from "./components/SnapShotRecordSearchDialog.
import AddEditSnapshotClusterDialog from './components/AddEditSnapshotClusterDialog.vue'
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 {
components:{
......@@ -377,6 +395,8 @@ export default {
DetailDialogComparison,
singleImgComparisonDialog,
SnapShotRecordSearchDialog,
DynamicScroller,
DynamicScrollerItem,
......@@ -451,6 +471,7 @@ export default {
const zoneList = ref([])
const positionList = ref([])
const gateList = ref([])
const dynamicScrollerRef = ref(null)
// const imgModelRef = ref();
const pagedTableDataList = computed(
() => {
......@@ -1498,6 +1519,7 @@ export default {
return {
addEditSnapshotClusterRef,
handleAddSnapshotCluster,
dynamicScrollerRef,
// scalar
dataSources,
isLoading,
......@@ -1586,8 +1608,19 @@ export default {
}
</script>
<style lang="less" scoped>
@import "./ClusterResult";
.scroller-container {
height: 500px; /* Adjust as needed */
overflow-y: auto;
}
.classBox {
/* Ensure classBox takes full width within scroller */
width: 100%;
}
.actived{
border: 3px solid #1890ff;
}
......
vue.config.js
......@@ -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/',
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!