riku
2025-09-30 0306fcd184cc3617bc2758b301ecfcef4635f431
src/views/overlay-clue/ClueLayout.vue
@@ -1,119 +1,38 @@
<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-row class="fy-overlay-container" justify="space-between">
    <el-col :span="6">
      <ClueManage @itemSelected="selectClue"></ClueManage>
    </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 :span="6">
      <ClueReport
        v-model:show="show"
        :clueData="selectedClue"
        @pushed="(e) => (selectedClue.cuploaded = e)"
        @onClueTaskChange="handleClueTaskChange"
      ></ClueReport>
    </el-col>
  </el-row>
</template>
<script setup>
import ClueList from './components/ClueList.vue';
import ClueReport from './components/ClueReport.vue';
import ClueManage from './list/ClueManage.vue';
import ClueReport from './report/ClueReport.vue';
import { ref } from '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 show = ref(false);
/**
 * 选择线索事件
 */
const selectClue = function (clue) {
  show.value = true;
  selectedClue.value = clue;
};
function handleClueTaskChange() {
  selectedClue.value.taskCount = 1;
}
</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>
<style scoped></style>