| | |
| | | <template> |
| | | <el-row class="container"> |
| | | <el-row class="container" justify="space-between"> |
| | | <el-col :span="6" class="grid-content bg-content"> |
| | | <div class="title">下发线索清单</div> |
| | | <div class="fy-h1">线索清单</div> |
| | | <div class="search-wrap"> |
| | | <span>时间</span> |
| | | <el-date-picker |
| | |
| | | placeholder="选择日期和时间" |
| | | /> |
| | | <el-button type="primary" @click="getClues">查询</el-button> |
| | | <el-button type="primary" @click="fetchRemoteClue" |
| | | >拉取线索</el-button |
| | | > |
| | | </div> |
| | | <ClueList |
| | | :dataList="clueList" |
| | |
| | | ></ClueList> |
| | | </el-col> |
| | | <el-col :span="6" class="grid-content bg-content-1"> |
| | | <ClueReport></ClueReport> |
| | | <div class="fy-h1">线索反馈</div> |
| | | <el-scrollbar height="80vh" class="bg-fill"> |
| | | <ClueReport :clueData="selectedClue"></ClueReport> |
| | | </el-scrollbar> |
| | | </el-col> |
| | | </el-row> |
| | | </template> |
| | |
| | | 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'); |
| | | 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> |
| | | |
| | |
| | | |
| | | .grid-content { |
| | | /* min-width: 180px; */ |
| | | border-radius: 4px; |
| | | border-radius: var(--el-border-radius-round); |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 16px; |
| | | padding: 8px 8px; |
| | | /* padding: 8px 8px; */ |
| | | pointer-events: auto; |
| | | box-shadow: var(--el-box-shadow-dark); |
| | | } |
| | | |
| | | .bg-content { |
| | |
| | | } |
| | | |
| | | .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> |