<template>
|
<el-row class="container">
|
<el-col :span="6" class="grid-content bg-content">
|
<div class="title">下发线索清单</div>
|
<div class="search-wrap">
|
<span>时间</span>
|
<el-date-picker
|
v-model="updateTime"
|
type="datetime"
|
placeholder="选择日期和时间"
|
/>
|
<el-button type="primary" @click="getClues">查询</el-button>
|
</div>
|
<ClueList
|
:dataList="clueList"
|
@itemSelected="selectClue"
|
></ClueList>
|
</el-col>
|
<el-col :span="6" class="grid-content bg-content-1">
|
<ClueReport></ClueReport>
|
</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 getClues = function () {
|
const now = moment(updateTime.value);
|
const sTime = now.format('YYYY-MM-DD HH:mm:ss');
|
const eTime = now.add(1, 'month');
|
onMapMounted(() => {
|
clueApi.getClue({ sTime, eTime }).then((res) => {
|
clueList.value = res;
|
});
|
});
|
};
|
|
/**
|
* 选择线索事件
|
*/
|
const selectClue = function (clue) {
|
|
};
|
</script>
|
|
<style scoped>
|
.title {
|
font-size: var(--el-font-size-large);
|
}
|
|
.container {
|
pointer-events: none;
|
}
|
|
.grid-content {
|
/* min-width: 180px; */
|
border-radius: 4px;
|
display: flex;
|
flex-direction: column;
|
gap: 16px;
|
padding: 8px 8px;
|
pointer-events: auto;
|
}
|
|
.bg-content {
|
height: 90vh;
|
background: white;
|
min-width: calc(var(--screen-min-width) / 6);
|
}
|
|
.bg-content-1 {
|
height: 90vh;
|
background: white;
|
}
|
|
.search-wrap {
|
display: flex;
|
gap: 4px;
|
}
|
</style>
|
