完善数据融合功能（未完成）

feiyu02

2025-01-03 4f1fb28dad6a4df83752dc9b60f504764f8e3dcb

 src/views/satellitetelemetry/component/SatelliteDataMix.vue

@@ -1,10 +1,115 @@
<template>
    <el-row class="wrap">
      <BaseCard size="medium" direction="left">
        <template #content>
          
        </template>
        <template #footer> </template>
      </BaseCard>
    </el-row>
  </template>
  <el-row class="wrap">
    <el-col span="2">
      <el-row>
        <CardButton
          name="数据融合"
          direction="left"
          @click="() => (show = !show)"
        ></CardButton>
      </el-row>
    </el-col>
    <el-col span="2">
      <el-row>
        <BaseCard
          style="width: 300px"
          v-show="show"
          size="medium"
          direction="left"
        >
          <template #content>
            <div>原始数据</div>
            <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handelCheckAllChange"
              >全选</el-checkbox
            >
            <el-checkbox-group v-model="checkList" @change="handleChange">
              <el-scrollbar height="30vh">
                <el-checkbox
                  v-for="(item, index) in satelliteGridStore.gridDataList"
                  :key="index"
                  :label="timeFormatter(item.dataTime)"
                  :value="item.id"
                />
              </el-scrollbar>
            </el-checkbox-group>

            <div>已选：{{ checkList.length }}个</div>
            <!-- <div v-for="item in checkList">{{item}}</div> -->
            <el-button
              :loading="loading"
              type="primary"
              class="el-button-custom"
              size="small"
              @click="mixData"
            >
              融合数据
            </el-button>
          </template>
          <template #footer> </template>
        </BaseCard>
      </el-row>
    </el-col>
  </el-row>
</template>
<script setup>
import { ref } from 'vue';
import moment from 'moment';
import gridApi from '@/api/gridApi';
import { useSatelliteGridStore } from '@/stores/satellite-grid';

const satelliteGridStore = useSatelliteGridStore();
const checkList = ref([]);
const isIndeterminate = ref(false);
const checkAll = ref(false);
const selectType = ref([]);
const show = ref(true);
const loading = ref(false);

const emits = defineEmits(['mixData']);

function timeFormatter(time) {
  return moment(time).format('YYYY-MM-DD');
}

function mixData() {
  gridApi.mixGridData(checkList.value).then((res) => {
    if (res.data.length > 0) {
      emits('mixData', res.data[0]);
    }
  });
}

function handelCheckAllChange(val) {
  checkList.value = val ? satelliteGridStore.gridDataList.map((v) => v.id) : [];
  isIndeterminate.value = false;
  handleChange(checkList.value);
}
function handleChange(types) {
  const options = satelliteGridStore.gridDataList;
  let checkedCount = types.length;
  checkAll.value = checkedCount === options.length;
  isIndeterminate.value = checkedCount > 0 && checkedCount < options.length;
}
</script>
<style scoped>
:deep(.el-checkbox) {
  --el-checkbox-text-color: white;
  --main-color: #23dad1;
  --el-checkbox-checked-text-color: var(--main-color);
  --el-checkbox-checked-input-border-color: var(--main-color);
  --el-checkbox-checked-bg-color: var(--main-color);
  --el-checkbox-input-border-color-hover: var(--main-color);

  --el-checkbox-disabled-checked-input-fill: var(--main-color);
  --el-checkbox-disabled-checked-input-border-color: var(--main-color);
  --el-checkbox-disabled-checked-icon-color: white;
  /* height: initial; */
}

:deep(.el-checkbox__input.is-disabled + span.el-checkbox__label) {
  color: var(--el-color-primary);
}
</style>