1. 完成表格模块的功能迁移； 2. 完成表格、折线图、地图标记三者点击联动

riku

2024-05-08 f16acb06ab278cdcb1d39a29680634010638326d

 src/components/monitor/FactorCheckbox.vue

@@ -1,17 +1,20 @@
<template>
  <BaseCard direction="top-left" borderless="t">
  <BaseCard :direction="direction" :borderless="borderlessDirection">
    <template #content>
      <el-checkbox-group
        v-model="checkbox"
        :model-value="modelValue"
        size="default"
        @change="handleChange"
        :min="1"
        @update:model-value="handleChange"
      >
        <el-checkbox
          v-for="(item, i) in options"
          :key="i"
          :value="item.value"
          >{{ item.label }}</el-checkbox
        >
        <div :class="vertical ? 'vertical-class' : ''">
          <el-checkbox
            v-for="item in options"
            :key="item.label"
            :value="item.value"
            >{{ item.label }}</el-checkbox
          >
        </div>
      </el-checkbox-group>
    </template>
  </BaseCard>
@@ -24,13 +27,41 @@

export default {
  props: {
    // 复选框值
    modelValue: Array,
    deviceType: {
      type: String,
      // type0: 车载或无人机; type1:无人船
      default: TYPE0
    },
    /**
     *
     * 样式朝向
     * top-left | left
     */
    direction: {
      type: String,
      default: 'top-left'
    },
    /**
     * 无边框的方向
     * t | r
     */
    borderlessDirection: {
      type: String,
      default: 't'
    },
    /**
     * 内容是否垂直排布
     */
    vertical: Boolean,
    // 默认选中的个数（从第一个选项开始）
    defaultNum: {
      type: Number,
      default: 1
    }
  },
  emits: ['change'],
  emits: ['update:modelValue'],
  data() {
    return {
      checkbox: [checkboxOptions(TYPE0)[0].value]
@@ -44,13 +75,19 @@
  watch: {
    deviceType(nV, oV) {
      if (nV != oV) {
        this.checkbox = this.options[0].value;
        const res = [];
        const array = checkboxOptions(nV);
        for (let i = 0; i < this.defaultNum; i++) {
          const e = array[i];
          res.push(e.value);
        }
        this.$emit('update:modelValue', res);
      }
    }
  },
  methods: {
    handleChange(value) {
      this.$emit('change', value);
      this.$emit('update:modelValue', value);
    }
  }
};
@@ -61,4 +98,9 @@
  margin-right: 6px;
  /* height: initial; */
}

.vertical-class {
  display: flex;
  flex-direction: column;
}
</style>