hwmom-ui/src/components/Configure/modelComponents/srcollTable/srcollTable.vue

<template>
  <div style="height: 100%">
    <el-row style="height: 100%">
      <el-col :span="12" style="height: 100%;overflow: auto;padding-bottom: 12px;" class="leftCol">
        <div style="text-align: center">
          <el-switch
            v-model="configSwitch"
            active-text="数据配置"
            inactive-text="图表配置">
          </el-switch>
        </div>
        <div v-show="!configSwitch" style="height: 100%">
          <el-form ref="form" :model="defaultData" label-width="80px">
            <el-form-item label="表头数据">
              <el-select
                v-model="defaultData.th"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="请选择表头">
                <el-option
                  v-for="item in defaultData.th"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="列数据">
              <el-select
                v-model="defaultData.td"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="请选择列数据">
                <el-option
                  v-for="item in tdkeys"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="数据集">
              <el-select v-model="defaultData.tableDataKey" placeholder="请选择数据" @change="dataChange" clearable>
                <el-option :label="i" :value="i"
                           v-for="i in Object.keys(networkData)"></el-option>
              </el-select>
            </el-form-item>
          </el-form>

          <div style="text-align: center;height: 60px;line-height: 60px">
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>重置</el-button>
          </div>
        </div>
        <div v-show="configSwitch">
          <NetworkRequest ref="NetworkRequest" :requests="defaultData.requests" @GetFinalData="getData" />
        </div>
      </el-col>
      <el-col :span="12" style="height: 100%">
        <div class="chart">
          <ComplexScrollTable ref="ComplexScrollTable" :defaultData="defaultData"
                              :default-table-data="tableData"></ComplexScrollTable>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ComplexScrollTable } from '@/components/Configure/complex';
import NetworkRequest from '@/components/Configure/networkRequest/NetworkRequest';

let time1 = null;

export default {
  components: {
    ComplexScrollTable,
    NetworkRequest
  },
  props: ['defaultData', 'isDialog'],
  watch: {
    'defaultData.requests': {
      handler() {
        console.log('this.networkData1122');
        this.dataChange();
      },
      deep: true
    }
  },
  data() {
    return {
      tableData: [],
      configSwitch: false,
      networkData: {},
      tdkeys: []
    };
  },
  created() {
  },
  async mounted() {
    await this.getData();
    this.dataChange();
    time1 = setInterval(async () => {
      await this.getData();
    }, 1000 * 10);
  },
  beforeDestroy() {
    clearInterval(time1);
  },
  methods: {
    async getData(e) {
      const $getFinalData = inject('$getFinalData');
      if (!$getFinalData) {
        return;
      }
      let data = await $getFinalData(this.defaultData.requests);
      console.log('data', data);
      this.networkData = data;
    },
    async onSubmit() {
      if (this.isDialog) {
        this.$emit('close');
      }
    },
    dataChange() {
      this.tableData = this.networkData[this.defaultData.tableDataKey];
      let keys = Object.keys(this.tableData?.[0] || {});
      this.tdkeys = keys;
    }
  }
};
</script>
<style scoped lang="less">
.chart {
  width: 100%;
  height: 100%;
}

.notScroll {
  &::-webkit-scrollbar {
    display: none;
  }
}

.leftCol::-webkit-scrollbar {
  display: none;
}

.add {
  display: inline-block;
  width: 1vw;
  height: 1vw;
  padding: 0.5vw;
  background-color: #409EFF;
  border-radius: 50%;
  margin: 0 1vw;
  cursor: pointer;
}

.subtract {
  display: inline-block;
  width: 1vw;
  height: 1vw;
  padding: 0.5vw;
  background-color: #909399;
  border-radius: 50%;
  cursor: pointer;
}

.textArea {
  position: relative;

  .textAreaIcon {
    position: absolute;
    top: 12px;
    right: 8px;
  }
}
</style>