<template>
|
<el-row class="container" justify="space-between">
|
<el-col :span="6" class="grid-content bg-content">
|
<div class="fy-h1">线索清单</div>
|
<div class="search-wrap">
|
<span>时间</span>
|
<el-date-picker
|
v-model="updateTime"
|
type="datetime"
|
placeholder="选择日期和时间"
|
/>
|
<el-button type="primary" @click="getClues">查询</el-button>
|
<el-button type="primary" @click="fetchRemoteClue"
|
>拉取线索</el-button
|
>
|
</div>
|
<ClueList
|
:dataList="clueList"
|
@itemSelected="selectClue"
|
></ClueList>
|
</el-col>
|
<el-col :span="6" class="grid-content bg-content-1">
|
<div class="fy-h1">线索反馈</div>
|
<el-scrollbar height="80vh" class="bg-fill">
|
<ClueReport :clueData="selectedClue"></ClueReport>
|
</el-scrollbar>
|
</el-col>
|
</el-row>
|
</template>
|
|
<script setup>
|
import ClueList from './components/ClueList.vue';
|
import ClueReport from './components/ClueReport.vue';
|
|
import clueApi from '@/api/clue/clueApi';
|
import { onMapMounted } from '@/components/map/baseMap';
|
import moment from 'moment';
|
import { ref, watch } from 'vue';
|
|
// 下发时间（每次查询大于此时间的数据）
|
const updateTime = ref(new Date());
|
// 线索清单
|
const clueList = ref([]);
|
const selectedClue = ref();
|
|
/**
|
* 查询已下发的线索清单
|
*/
|
const getClues = function () {
|
const now = moment(updateTime.value);
|
const sTime = now.format('YYYY-MM-DD HH:mm:ss');
|
const eTime = now.add(1, 'month').format('YYYY-MM-DD HH:mm:ss');
|
onMapMounted(() => {
|
clueApi.getClue({ sTime, eTime }).then((res) => {
|
clueList.value = res;
|
});
|
});
|
};
|
|
function fetchRemoteClue() {
|
const time = moment(updateTime.value).format('YYYY-MM-DD HH:mm:ss');
|
onMapMounted(() => {
|
clueApi.fetchRemoteClue(time).then((res) => {
|
clueList.value = res;
|
});
|
});
|
}
|
|
/**
|
* 选择线索事件
|
*/
|
const selectClue = function (clue) {
|
selectedClue.value = clue;
|
};
|
</script>
|
|
<style scoped>
|
.title {
|
font-size: var(--el-font-size-large);
|
}
|
|
.container {
|
pointer-events: none;
|
}
|
|
.grid-content {
|
/* min-width: 180px; */
|
border-radius: var(--el-border-radius-round);
|
display: flex;
|
flex-direction: column;
|
gap: 16px;
|
/* padding: 8px 8px; */
|
pointer-events: auto;
|
box-shadow: var(--el-box-shadow-dark);
|
}
|
|
.bg-content {
|
height: 90vh;
|
background: white;
|
min-width: calc(var(--screen-min-width) / 6);
|
}
|
|
.bg-content-1 {
|
height: 90vh;
|
background: white;
|
}
|
|
.search-wrap {
|
padding: 0 8px;
|
display: flex;
|
align-items: center;
|
gap: 4px;
|
}
|
|
.bg-fill {
|
/* background: var(--el-fill-color-extra-light); */
|
padding: 0 8px;
|
}
|
</style>
|
