<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>
|
