feat: 地图居中点调整

罗广辉

2025-04-03 7635213630830c4cbb9ff6ada69ba9b5c8a35d42

 src/views/Home/components/HomeRight/TaskAchievements.vue

@@ -1,25 +1,6 @@
<script setup>
import CommonTitle from '@/components/CommonTitle.vue';
import { wToR } from '@/utils/pxConver';
import data1 from '@/assets/images/home/homeRight/data1.png';
import data2 from '@/assets/images/home/homeRight/data2.png';
import data3 from '@/assets/images/home/homeRight/data3.png';
import data4 from '@/assets/images/home/homeRight/data4.png';

const detailsFun = () => {
  console.log('details');
};

const list = ref([
  { name: 'AI识别', value: '14656', color: '#6DD7FF', img: data1 },
  { name: '全景', value: '174', color: '#FFAD64', img: data2 },
  { name: '三维', value: '897', color: '#8EFFAC', img: data3 },
  { name: '正射', value: '1185', color: '#61FFFC', img: data4 },
]);
</script>
<template>
  <CommonTitle title="任务成果" @details="detailsFun" />
  <div :style="{ marginLeft: wToR(14) }">
  <div :style="{ marginLeft: pxToRem(14) }">
    <div class="taskAchievements">
      <div class="rawData">
        <div class="bigTitle">原始<br />数据</div>
@@ -28,11 +9,11 @@
          <div class="rawDataContent">
            <div>
              <div class="title">照片总数(张)</div>
              <div class="value">6582</div>
              <div class="value">{{ photoNum }}</div>
            </div>
            <div>
              <div class="title">视频总数(个)</div>
              <div class="value">4785</div>
              <div class="value">{{ videoNum }}</div>
            </div>
          </div>
        </div>
@@ -52,11 +33,51 @@
    </div>
  </div>
</template>
<script setup>
import CommonTitle from '@/components/CommonTitle.vue';
import { pxToRem } from '@/utils/rem';
import data1 from '@/assets/images/home/homeRight/data1.png';
import data2 from '@/assets/images/home/homeRight/data2.png';
import data3 from '@/assets/images/home/homeRight/data3.png';
import data4 from '@/assets/images/home/homeRight/data4.png';
import {  getMediaFileCountBy } from '@/api/home/index.js'

const detailsFun = () => {
  console.log('details');
};

// 照片总数
let photoNum = ref(0);
// 视频总数
let videoNum = ref(0);

const list = ref([
  { name: 'AI识别', value: '14656', color: '#6DD7FF', img: data1 },
  { name: '全景', value: '174', color: '#FFAD64', img: data2 },
  { name: '三维', value: '897', color: '#8EFFAC', img: data3 },
  { name: '正射', value: '1185', color: '#61FFFC', img: data4 },
]);
const getStatisticalData = () => {
  getMediaFileCountBy().then((res) => {
    if (res.data.code !== 0) return;
    let result = res.data.data
    list.value[0].value = result.aiNum;
    list.value[1].value = result.fullNum;
    list.value[2].value = result.gisNum;
    list.value[3].value = result.tifNum;
    photoNum.value = result.phoneNum;
    videoNum.value = result.videoNum;
  });
};
onMounted(() => {
  getStatisticalData();
});
</script>

<style scoped lang="scss">
.taskAchievements {
  width: 390px;
  height: hToV(204);
  height: 204px;
  background: linear-gradient(
    270deg,
    #1f3e7a 0%,
@@ -64,9 +85,9 @@
    rgba(31, 62, 122, 0) 100%
  );
  opacity: 0.85;
  margin: hToV(2) 0 hToV(21) 0;
  margin: 2px 0 21px 0;
  padding-left: 17px;
  padding-top: hToV(15);
  padding-top: 15px;

  .rawData {
    display: flex;
@@ -80,7 +101,7 @@
      display: flex;

      > img {
        height: hToV(63);
        height: 63px;
        width: 63px;
      }

@@ -90,22 +111,22 @@
        color: #ffffff;
        width: 0;
        flex-grow: 1;
        padding-top: hToV(12);
        padding-top: 12px;

        .title {
          font-family: Source Han Sans CN, Source Han Sans CN, serif;
          font-weight: 400;
          font-size: 14px;
          line-height: hToV(13);
          line-height: 13px;
          text-align: left;
          margin-bottom: hToV(6);
          margin-bottom: 6px;
        }

        .value {
          font-family: YouSheBiaoTiHei, YouSheBiaoTiHei, serif;
          font-weight: 400;
          font-size: 26px;
          line-height: hToV(22);
          line-height: 22px;
          text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
          text-align: left;
        }
@@ -114,7 +135,7 @@
  }

  .processingData {
    margin-top: hToV(19);
    margin-top: 19px;
    display: flex;
    align-items: center;

@@ -123,16 +144,16 @@
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: hToV(8) 0;
      gap: 8px 0;

      > div {
        width: 135px;
        height: hToV(42);
        height: 42px;
        display: flex;

        > img {
          width: 32px;
          height: hToV(32);
          height: 32px;
          margin-right: 10px;
        }

@@ -145,7 +166,7 @@
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            line-height: hToV(17);
            line-height: 17px;
            text-align: left;
          }

@@ -153,7 +174,7 @@
            font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 24px;
            line-height: hToV(23);
            line-height: 23px;
            text-align: left;
          }
        }
@@ -168,6 +189,6 @@
  font-weight: bold;
  font-size: 18px;
  color: #e1f5ff;
  line-height: hToV(22);
  line-height: 22px;
}
</style>