emsfront/src/views/ems/dzjk/sbjk/dtdc/index.vue

<template>
  <el-card
    v-loading="loading"
    shadow="always"
    class="common-card-container common-card-container-no-title-bg"
  >
    <div slot="header">
      <span class="large-title">单体电池实时数据</span>
    </div>
    <!--    搜索栏-->
    <el-form :inline="true" class="select-container">
      <el-form-item label="编号">
        <el-input
          v-model="search.deviceId"
          placeholder="请输入"
          clearable
          style="width: 150px"
        />
      </el-form-item>
      <el-form-item label="电池堆">
        <el-select
          v-model="search.stackId"
          placeholder="请选择"
          @change="changeStackId"
        >
          <el-option
            :label="item.deviceName"
            :value="item.id"
            v-for="(item, index) in stackOptions"
            :key="index + 'stackOptions'"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="电池簇">
        <el-select
          v-model="search.clusterId"
          :no-data-text="
            !search.stackId && stackOptions.length > 0
              ? '请先选择电池堆'
              : '无数据'
          "
          placeholder="请选择"
          :loading="clusterloading"
          loading-text="正在加载数据"
        >
          <el-option
            :label="item.deviceName"
            :value="item.id"
            v-for="(item, index) in clusterOptions"
            :key="index + 'clusterOptions'"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch" native-type="button"
          >搜索</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button @click="onReset" native-type="button">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <dtdc-table
      :tableData="tableData"
      :pageNum="pageNum"
      :pageSize="pageSize"
      :totalSize="totalSize"
      @chart="chartDetail"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <chart-detail ref="chartDetail" />
  </el-card>
</template>

<script>
import BarChart from "./BarChart";
import {
  getStackNameList,
  getClusterNameList,
  getClusterDataInfoList,
} from "@/api/ems/dzjk";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import ChartDetail from "./ChartDetail.vue";
import Table from "./Table.vue";
export default {
  name: "DzjkSbjkDtdc",
  mixins: [getQuerySiteId],
  components: { BarChart, ChartDetail, DtdcTable: Table },
  data() {
    return {
      loading: false,
      clusterloading: false,
      search: { stackId: "", clusterId: "", deviceId: "" },
      stackOptions: [], //{id:'',deviceName:''}
      clusterOptions: [], //{id:'',deviceName:''}
      tableData: [],
      pageSize: 10, //分页栏当前每个数据总数
      pageNum: 1, //分页栏当前页数
      totalSize: 0, //table表格数据总数
    };
  },
  methods: {
    //查看表格行图表
    chartDetail({ clusterDeviceId, deviceId, dataType = "" }) {
      const { siteId } = this;
      this.$refs.chartDetail.initChart(
        { siteId, clusterDeviceId, deviceId },
        dataType
      );
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.$nextTick(() => {
        this.getTableData();
      });
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.$nextTick(() => {
        this.getTableData();
      });
    },
    // 搜索
    onSearch() {
      this.pageNum = 1; //每次搜索从1开始搜索
      this.getTableData();
    },
    // 重置
    // 清空搜索栏选中数据
    // 清空电池簇列表，保留电池堆列表
    onReset() {
      this.search = { stackId: "", clusterId: "", deviceId: "" };
      this.clusterOptions = [];
      this.pageNum = 1;
      this.getTableData();
    },
    changeStackId(val) {
      if (val) {
        console.log(
          "选择了电池堆，需要获取对应的电池簇",
          val,
          this.search.stackId
        );
        this.search.clusterId = "";
        this.getClusterList();
      }
    },
    //表格数据
    getTableData() {
      this.loading = true;
      const {
        stackId: stackDeviceId,
        clusterId: clusterDeviceId,
        deviceId,
      } = this.search;
      const { siteId, pageNum, pageSize } = this;
      getClusterDataInfoList({
        stackDeviceId,
        clusterDeviceId,
        siteId,
        // deviceId,
        pageNum,
        pageSize,
      })
        .then((response) => {
          this.tableData = response?.rows || [];
          this.totalSize = response?.total || 0;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getStackList() {
      getStackNameList(this.siteId).then((response) => {
        this.stackOptions = JSON.parse(JSON.stringify(response?.data || []));
      });
    },
    getClusterList() {
      this.clusterloading = true;
      getClusterNameList({
        stackDeviceId: this.search.stackId,
        siteId: this.siteId,
      })
        .then((response) => {
          this.clusterOptions = JSON.parse(
            JSON.stringify(response?.data || [])
          );
        })
        .finally(() => {
          this.clusterloading = false;
        });
    },
    init() {
      // 只有页面初次加载或切换站点的时候调用电池堆列表，其他情况不需要
      this.search = { stackId: "", clusterId: "" }; //保证切换站点时，清空选择项
      this.getStackList();
      this.getTableData();
    },
  },
  mounted() {},
};
</script>