实时走航

riku

2024-05-11 e94ea7f723e616a0566ac5c7f9d77435333d9e92

 src/views/historymode/component/DataSheet.vue

@@ -0,0 +1,99 @@
<template>
  <el-row class="wrap">
    <el-col span="2" class="flex-col">
      <el-row justify="end">
        <CardButton
          name="走航数据详情"
          direction="left"
          @click="() => (show = !show)"
        ></CardButton>
      </el-row>
      <el-row class="flex-col">
        <DataSummary
          v-show="show"
          :loading="loading"
          :factor-datas="factorDatas"
          :select-factor-type="selectFactorType"
        ></DataSummary>
      </el-row>
    </el-col>
    <el-col v-show="show" span="10">
      <el-row align="bottom">
        <DataTable
          :loading="loading"
          :select-factor-type="selectFactorType"
          :factor-datas="factorDatas"
          :device-type="deviceType"
          :locate-index="locateIndex"
          @table-click="handleTableClick"
        ></DataTable>
        <FactorCheckbox
          direction="left"
          vertical
          borderless-direction="r"
          v-model="selectFactorType"
          :device-type="deviceType"
        ></FactorCheckbox>
      </el-row>
    </el-col>
  </el-row>
</template>
<script>
// import { toRefs } from 'vue';
import { TYPE0 } from '@/constant/device-type';
import { checkboxOptions } from '@/constant/checkbox-options';
import { FactorDatas } from '@/model/FactorDatas';
// import { useDefaultFactorType } from "../../../composables/defaultFactorType";

export default {
  // setup(){
  //   const {selectFactorType, props} = useDefaultFactorType()
  //   return {selectFactorType, ...toRefs(props)}
  // },
  props: {
    loading: Boolean,
    factorDatas: FactorDatas,
    deviceType: {
      type: String,
      // type0: 车载或无人机; type1:无人船
      default: TYPE0
    },
    // 当前选中高亮的数据点索引
    locateIndex: Number
  },
  data() {
    return {
      selectFactorType: this.defaultFactorTypes(),
      show: false
    };
  },
  emits: ['tableClick'],
  watch: {
    deviceType(nV, oV) {
      if (nV != oV) {
        this.selectFactorType = this.defaultFactorTypes();
      }
    }
  },
  methods: {
    handleTableClick(index) {
      this.$emit('tableClick', index);
    },
    defaultFactorTypes() {
      const list = checkboxOptions(this.deviceType);
      if (list.length > 3) {
        return list.slice(0, 3).map((v) => v.value);
      } else {
        return list.map((v) => v.value);
      }
    }
  }
};
</script>
<style scoped>
.flex-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>