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

<template>
  <el-card
    v-loading="loading"
    shadow="always"
    class="sbjk-card-container common-card-container-no-title-bg running-card-container"
  >
    <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.batteryId"
          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>
    <!-- 切换 -->
    <div class="tip-container">
      <div class="color-tip" v-show="activeBtn === 'list'">
        单体信息
        <span class="tip minwd">最低单体温度</span>
        <span class="tip maxwd">最高单体温度</span>
        <span class="tip mindy">单体最低电压</span>
        <span class="tip maxdy">单体最高电压</span>
      </div>
      <el-button-group class="ems-btns-group">
        <el-button
          :class="{ activeBtn: activeBtn === 'table' }"
          @click="changeMenu('table')"
          >图表</el-button
        >
        <el-button
          :class="{ activeBtn: activeBtn === 'list' }"
          @click="changeMenu('list')"
          >图形</el-button
        >
      </el-button-group>
    </div>
    <component
      :is="activeBtn === 'table' ? 'DtdcTable' : 'DtdcList'"
      :tableData="tableData"
      :totalSize="totalSize"
      :pointIdList="pointIdList"
      @chart="chartDetail"
      @pointDetail="pointDetail"
    ></component>
    <el-pagination
      v-show="tableData.length > 0"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalSize"
      style="margin-top: 15px; text-align: center"
    >
    </el-pagination>
    <chart-detail ref="chartDetail" />
    <point-chart ref="pointChart" :site-id="siteId" />
    <point-table ref="pointTable"/>
  </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";
import List from "./List.vue";
import pointChart from "./../PointChart.vue";
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
export default {
  name: "DzjkSbjkDtdc",
  mixins: [getQuerySiteId],
  components: {
    PointTable,
    BarChart,
    ChartDetail,
    DtdcTable: Table,
    DtdcList: List,
    pointChart,
  },
  computed: {
    pointIdList() {
      let obj = {};
      this.pointData.forEach((item) => {
        const {
          maxCellTempId,
          maxCellVoltageId,
          minCellTempId,
          minCellVoltageId,
        } = item;
        obj[item.clusterId] = [
          parseInt(minCellTempId || 0),
          parseInt(maxCellTempId || 0),
          parseInt(minCellVoltageId || 0),
          parseInt(maxCellVoltageId || 0),
        ]; //最低单体温度 最高温度 最低电压 最高电压 todo 这里的顺序需要和图形组件里的顺序保持一致，
      });
      return obj;
    },
  },
  data() {
    return {
      loading: false,
      clusterloading: false,
      search: { stackId: "", clusterId: "", batteryId: "" },
      stackOptions: [], //{id:'',deviceName:''}
      clusterOptions: [], //{id:'',deviceName:''}
      tableData: [],
      pointData: [],
      pageSize: 40, //分页栏当前每个数据总数
      pageNum: 1, //分页栏当前页数
      totalSize: 0, //table表格数据总数
      activeBtn: "table",
    };
  },
  methods: {
    // 查看设备电位表格
    pointDetail(row){
      const {deviceId,clusterDeviceId} = row
      this.$refs.pointTable.showTable({siteId:this.siteId,deviceId,deviceCategory:'BATTERY',parentId:clusterDeviceId})
    },
    changeMenu(menu) {
      const { activeBtn } = this;
      activeBtn !== menu && (this.activeBtn = menu);
    },
    //查看表格行图表
    chartDetail({ deviceId, clusterDeviceId, dataType = "" }) {
      dataType &&
        this.$refs.pointChart.showChart({
          pointName: dataType,
          deviceCategory:'BATTERY',
          deviceId: clusterDeviceId,
          child: [deviceId],
        });
    },
    // 分页
    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: "", batteryId: "" };
      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,
        batteryId,
      } = this.search;
      const { siteId, pageNum, pageSize } = this;
      getClusterDataInfoList({
        stackDeviceId,
        clusterDeviceId,
        siteId,
        batteryId,
        pageNum,
        pageSize,
      })
        .then((response) => {
          this.tableData = response?.rows?.[0]?.batteryList || []; //todo check
          this.pointData = response?.rows?.[0]?.clusterList || []; //todo check
          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: "", batteryId: "" }; //保证切换站点时，清空选择项
      this.clusterOptions = [];
      this.pageNum = 1;
      this.totalSize = 0;
      this.getStackList();
      this.getTableData();
    },
  },
  mounted() {},
};
</script>
<style scoped lang="scss">
.tip-container {
  text-align: right;
  position: relative;
  .color-tip {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-size: 11px;
    line-height: 12px;
    color: #333;
    .tip {
      padding-left: 30px;
      position: relative;
      &::before {
        display: block;
        content: "";
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }
      &.minwd {
        color: #3794ff;
        &::before {
          background: #3794ff;
        }
      }
      &.maxwd {
        color: #ff3a3b;
        &::before {
          background: #ff3a3b;
        }
      }
      &.mindy {
        color: #de6902;
        &::before {
          background: #de6902;
        }
      }
      &.maxdy {
        color: #ffb521;
        &::before {
          background: #ffb521;
        }
      }
    }
  }
  ::v-deep {
    .el-button-group.ems-btns-group {
      & > .el-button {
        padding: 5px 30px !important;
        font-size: 11px;
        line-height: 16px;
        // padding-left: 50px;
        // padding-right: 50px;
        // font-size: 16px;
        // line-height: 24px;
      }
    }
  }
}
</style>