es-web/src/views/model/vueflow/aside/asideData.vue

<template>
  <el-container style="height: 100%">
    <el-header class="panel-header">
      <p>管网预览</p>
      <el-button style="border: none" @click="closePanel">
        <el-icon><Close /></el-icon>
      </el-button>
    </el-header>
    <el-main>
      <el-tabs v-model="activename" style="height: 100%">
        <el-tab-pane label="数据" name="data" style="height: 100%">
          <Splitpanes horizontal>
            <Pane min-size="20" size="50" max-size="80">
              <!-- <div>shang</div> -->
              <el-table :data="comdata" border class="datatable">
                <el-table-column type="index" width="40" label="" />
                <el-table-column prop="name" label="属性"> </el-table-column>
                <el-table-column prop="val" label="值">
                  <template #default="{ row }">
                    <el-select
                      v-if="row.valueType === 1"
                      v-model="row.val"
                      placeholder="请选择"
                      class="full-width-select"
                    >
                      <el-option
                        v-for="option in row.options"
                        :key="option.val"
                        :label="option.tag"
                        :value="option.val"
                      >
                      </el-option>
                    </el-select>
                    <el-input
                      v-else-if="row.valueType === 2"
                      v-model="row.val"
                      class="full-width-input"
                    />
                    <el-button
                      v-else-if="row.valueType === 3"
                      @click="handleClick(row)"
                    ></el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="unit" label="单位" width="100">
                  <template #default="{ row }">
                    <el-select
                      v-if="row.unitType !== '无'"
                      v-model="row.unit"
                      placeholder="请选择"
                      class="full-width-select"
                    >
                      <el-option
                        v-for="option in row.unitoptions"
                        :key="option.val"
                        :label="option.tag"
                        :value="option.val"
                      >
                      </el-option>
                    </el-select>
                    <div v-else>{{ row.unitType }}</div>
                  </template>
                </el-table-column>
              </el-table>
            </Pane>
            <Pane min-size="20" size="50" max-size="80">
              <!-- <div>xia</div> -->
            </Pane>
          </Splitpanes>
        </el-tab-pane>
        <el-tab-pane label="模拟数据" name="simulatedata" style="height: 100%">
          <Splitpanes horizontal>
            <Pane min-size="20" size="50" max-size="80">
              <div>shang</div>
            </Pane>
            <Pane min-size="20" size="50" max-size="80">
              <div>xia</div>
            </Pane>
          </Splitpanes>
        </el-tab-pane>
      </el-tabs>
    </el-main>
    
    <!-- 用于数据按钮table -->
    <el-dialog
      v-model="paneTabledialog"
      align-center
      :append-to-body="true"
      width="500"
      class="dialog_class"
      draggable
    >
      <template #header="{ titleId, titleClass }">
        <div class="my-header">
          <!-- <el-image :src="icon" fit="contain"></el-image> -->
          <h4 :id="titleId" :class="titleClass">{{ $t("dialog.new") }}</h4>
        </div>
      </template>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-colum prop="name" label="属性"></el-table-colum>
        <el-table-colum prop="" label="值"></el-table-colum>
      </el-table>
      
      <template #footer>
        <span class="lastbtn">
          <el-button @click="paneTabledialog = false">{{
            $t("dialog.cancel")
          }}</el-button>
          <el-button type="primary" >
            {{ $t("dialog.ok") }}
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 用于数据按钮键值对 -->
    <el-dialog
      v-model="paneKVdialog"
      align-center
      :append-to-body="true"
      width="500"
      class="dialog_class"
      draggable
    >
      <template #header="{ titleId, titleClass }">
        <div class="my-header">
          <!-- <el-image :src="icon" fit="contain"></el-image> -->
          <h4 :id="titleId" :class="titleClass">{{ $t("dialog.new") }}</h4>
        </div>
      </template>
      <el-table :data="tableData" border style="width: 100%">
        <!-- 动态列 -->
        <el-table-column
          v-for="col in tableColumns"
          :key="col.code"
          :prop="col.code"
          :label="col.name"
          :min-width="100"
        />
      </el-table>
      
      <template #footer>
        <span class="lastbtn">
          <el-button @click="paneKVdialog = false">{{
            $t("dialog.cancel")
          }}</el-button>
          <el-button type="primary" >
            {{ $t("dialog.ok") }}
          </el-button>
        </span>
      </template>
    </el-dialog>

  </el-container>
</template>
<script setup>
import { Splitpanes, Pane } from "splitpanes"
import "splitpanes/dist/splitpanes.css"
import { Close } from "@element-plus/icons-vue"
import { request } from "@/utils/request"
import {
  ElMessage,
  ElButton,
  ElDialog,
  ElSelect,
  ElMessageBox
} from "element-plus"

const activename = ref("data")

const emit = defineEmits(["close"])

const comdata = ref()
const paneTabledialog = ref(false)
const paneKVdialog = ref(false)

// data表格按钮点击弹窗表格
const tableColumns = ref([]);
const tableData = ref([]);

const closePanel = () => {
  emit("close")
}

const getcomdata = (pcId) => {
  const params = {
    transCode: "ES0009",
    pcId: pcId
  }

  request(params)
    .then((res) => {
      comdata.value = res.rows
      console.log("comdata.value", comdata.value)

      comdata.value.forEach((item) => {
        if (item.pcaId) {
          // 若为下拉类型，则获取选项
          if (item.valueType === 1) {
            getlistopt(item, "value")
          } else {
          }

          if (item.unitType !== "无") {
            getlistopt(item, "unit")
          }
        }
      })
    })
    .catch((err) => {
      console.error(err)
      ElMessage.error("初始化失败")
    })
}

const getbtnvalue = (pcaId,dataType) => {
  const params = {
    transCode: "ES0010",
    pcaId: pcaId
  }
  request(params)
    .then((res) => {
      console.log(`值获取成功 [${pcaId}]:`, res)
      if(dataType === 1){
        tableColumns.value = res.headers || [];
        tableData.value = res.datas || [];
      }
      else {

      }
    })
    .catch((err) => {
      ElMessage.error("值初始化失败")
    })
}

const getlistopt = (item, gettype) => {
  let params = {}
  if (gettype === "value") {
    params = {
      transCode: "BES001",
      type: item.valueDef
    }
  } else {
    params = {
      transCode: "BES001",
      type: item.unitType
    }
  }
  request(params)
    .then((res) => {
      console.log("选项获取成功", res)

      if (gettype === "value") {
        item.val = res.rows[0].val
        item.options = res.rows || []
      } else {
        item.unit = res.rows[0].val
        item.unitoptions = res.rows || []
      }
    })
    .catch((err) => {
      console.error("err", err)
      ElMessage.error("选项初始化失败")
    })
}

const handleClick = (row) => {
  paneTabledialog.value = true;
  const pcaId = row.pcaId;
  const dataType = row.dataType;
  getbtnvalue(pcaId,dataType)
}

defineExpose({
  getcomdata
})
</script>
<style scoped>
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.datatable {
  width: 100%;
  max-height: 300px;
  overflow: auto;
}
</style>