2024.7.11

riku

2024-07-11 505798927f75c84693cc51becf16aa525503fc92

 src/views/inspection/problem/component/ProblemTable.vue

@@ -6,6 +6,7 @@
    :row-class-name="tableRowClassName"
    :height="tableHeight"
    size="small"
    @row-click="handleRowClick"
  >
    <el-table-column type="index" label="" width="30"> </el-table-column>
    <el-table-column prop="scene.name" :show-overflow-tooltip="true" label="名称" width="150">
@@ -27,13 +28,22 @@
      </template>
    </el-table-column>
  </el-table>
  <div class="btn-more font-small">
    <el-link type="primary" @click="showMore = !showMore">查看更多</el-link>
  <div v-if="showMoreBtn" class="btn-more font-small">
    <el-link type="primary" @click="showMore = !showMore">
      {{ showMore ? '收起更多' : '查看更多' }}
    </el-link>
  </div>
</template>
<script setup>
import { computed, ref } from 'vue'
import dayjs from 'dayjs'
import { useMapStore } from '@/stores/map.js'

import marks from '@/utils/map/marks.js'
import mapUtil from '@/utils/map/util.js'
import scene_1 from '@/assets/icon/scene_1.png'

const mapStore = useMapStore()

const props = defineProps({
  data: {
@@ -42,7 +52,12 @@
  loading: Boolean
})

const showCount = 3

const showMore = ref(false)
const showMoreBtn = computed(() => {
  return props.data.length > showCount
})

const tableData = computed(() => {
  const l = props.data.map((value) => {
@@ -54,7 +69,13 @@
  })

  return l.sort((a, b) => {
    return dayjs(b.updateTime) - dayjs(a.updateTime)
    if (!a.updateTime) {
      return 1
    } else if (!b.updateTime) {
      return -1
    } else {
      return dayjs(b.updateTime) - dayjs(a.updateTime)
    }
  })
  // return l
})
@@ -63,7 +84,7 @@
  if (showMore.value) {
    return tableData.value
  } else {
    return tableData.value.slice(0, 3)
    return tableData.value.slice(0, showCount)
  }
})

@@ -76,9 +97,20 @@
  if (p == 0) {
    return '/'
  } else {
    return Math.round((c / p) * 100) / 100 + '%'
    return Math.round((c / p) * 100) + '%'
  }
}

function handleRowClick(row, col, event) {
  const title = row.scene.name
  const lnglat = [row.scene.longitude, row.scene.latitude]
  const img = scene_1
  mapUtil.clearViews()
  marks.drawMarker(title, lnglat, img)
  mapUtil.setFitView()

  mapStore.focusMarker = row
}
</script>
<style scoped>
.btn-more {