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 @@ ...@@ -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)
\ No newline at end of file \ No newline at end of file
const log = console.log.bind(console)
src/views/SnapshotCluster/ClusterResult/ClusterResult.vue
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
<a-select-option :value="1">进</a-select-option> <a-select-option :value="1">进</a-select-option>
<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="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="4">从左到右</a-select-option>
<a-select-option :value="5">从右到左</a-select-option> <a-select-option :value="5">从右到左</a-select-option>
<a-select-option :value="7">关注</a-select-option> <a-select-option :value="7">关注</a-select-option>
...@@ -234,8 +234,22 @@ ...@@ -234,8 +234,22 @@
<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
<div class="classBox" :class="person.expand?'expand':''"> 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="person.checked?'checked':''">
<div class="boxInfo"> <div class="boxInfo">
<span class="iconExpand" v-show="!person.expand">▶</span> <span class="iconExpand" v-show="!person.expand">▶</span>
...@@ -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?'去加载':'加载失败'}}
...@@ -302,8 +316,10 @@ ...@@ -302,8 +316,10 @@
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</div> </div>
</template> </DynamicScrollerItem>
</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;
} }
......
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!