<template>
  <d2-container v-loading="loading">
    <template #header>
      <el-form :inline="true" size="mini">
        <el-form-item :label="$t(key('workingsubclass'))"><el-select v-model="form.workingSubclass" clearable filterable multiple collapse-tags style="width:240px" @change="loadCodes"><el-option v-for="item in workingSubclassOptions" :key="item.value" :label="item.label" :value="item.value" /></el-select></el-form-item>
        <el-form-item :label="$t(key('node_code'))"><el-select v-model="form.code" clearable filterable multiple collapse-tags style="width:240px"><el-option v-for="item in codeOptions" :key="item.value" :label="item.label" :value="item.value" /></el-select></el-form-item>
        <el-form-item :label="$t(key('collection_time'))"><el-date-picker v-model="form.time" type="datetimerange" value-format="timestamp" :range-separator="$t(key('to'))" :start-placeholder="$t(key('time_start'))" :end-placeholder="$t(key('time_end'))" /></el-form-item>
        <el-form-item><el-switch v-model="form.dedup" :active-value="1" :inactive-value="0" :active-text="$t(key('yes'))" :inactive-text="$t(key('no'))" /></el-form-item>
        <el-form-item><el-button type="primary" @click="selectAll">{{ $t(key('select_all_nodes')) }}</el-button><el-button type="primary" icon="el-icon-search" @click="fetchData">{{ $t(key('query')) }}</el-button><el-button icon="el-icon-download" @click="exportExcel">{{ $t(key('export_excel')) }}</el-button></el-form-item>
      </el-form>
    </template>
    <el-table :data="tableData" border height="650"><el-table-column v-for="col in columns" :key="col.prop" :prop="col.prop" :label="col.label" width="140" show-overflow-tooltip /></el-table>
    <el-pagination class="query-pagination" :current-page="pagination.current" :page-size="pagination.size" :page-sizes="[50, 100, 200, 300]" :total="pagination.total" layout="total, sizes, prev, pager, next, jumper" @size-change="onSizeChange" @current-change="onCurrentChange" />
  </d2-container>
</template><script>
import { i18nMixin } from '@/composables/useI18n'
import { getQueryWorkingSubclasses, getQueryCodes, getQueryNodeData } from '@/api/scada-manage/edge-manager'
import { deviceDataExportTask } from '@/api/scada-manage/device-gather-management'
const now = Date.now()
export default { name: 'scada-query', mixins: [i18nMixin('page.scada_manage.basic_configuration.scada_query')], data () { return { loading: false, workingSubclassOptions: [], codeOptions: [], form: { workingSubclass: [], time: [now - 3600 * 1000 * 24 * 7, now], code: [], dedup: 1 }, pagination: { current: 1, size: 50, total: 0 }, columns: [], tableData: [] } }, created () { this.loadWorkings() }, methods: { async loadWorkings () { const res = await getQueryWorkingSubclasses(); this.workingSubclassOptions = Object.keys(res || {}).map(code => ({ label: res[code], value: code })) }, async loadCodes () { const selected = this.form.workingSubclass || []; const groups = await Promise.all(selected.map(code => getQueryCodes(code))); this.codeOptions = groups.flatMap(group => (Array.isArray(group) ? group : (group.data || [])).map(item => ({ label: item.name, value: item.code }))) }, selectAll () { this.form.code = this.codeOptions.map(item => item.value) }, async fetchData () { this.loading = true; try { const startRow = (this.pagination.current - 1) * this.pagination.size; const res = await getQueryNodeData({ startRow, endRow: startRow + this.pagination.size, workingSubclass: (this.form.workingSubclass || []).join(','), startTime: this.form.time && this.form.time[0], endTime: this.form.time && this.form.time[1], code: this.form.code, dedup: this.form.dedup }); const list = Array.isArray(res) ? res : (res.data || []); this.tableData = list; this.pagination.total = Array.isArray(res) ? res.length : (res.total || res.count || list.length); const fields = list.length ? Object.keys(list[0]) : []; this.columns = fields.map(prop => ({ prop, label: prop })) } finally { this.loading = false } }, onSizeChange (size) { this.pagination.size = size; this.fetchData() }, onCurrentChange (current) { this.pagination.current = current; this.fetchData() }, async exportExcel () { await deviceDataExportTask({ workingSubclass: this.form.workingSubclass, code: this.form.code, time: this.form.time }); this.$message.success(this.$t(this.key('export_task_created'))) } } }
</script><style scoped>.query-pagination{margin-top:12px;text-align:right}</style>
