centralized-control-center-frontend_v1/src/views/manage-log/bms.vue

<template>
    <div class="charge-box">
      <div class="charge-tools">
        <el-form :inline="true" :model="queryParams">
          <el-form-item label="日志范围：" style="margin-left: 35px">
            <el-select 
              multiple
              v-model="robotValue" 
              clearable 
              placeholder="请选择"
              @change="changeSelect"
              collapse-tags
              @remove-tag="removeTag"
            >
              <el-option label="全选" value="全选" @click.native="selectAll"></el-option>
              <el-option
                v-for="item in logOptions"
                :key="item.alarmCode"
                :label="item.alarmName"
                :value="item.alarmCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="充电机ID：" style="margin-left: 35px">
          <el-select v-model="queryParams.deviceNo" clearable placeholder="请选择">
            <el-option
              v-for="item in chargerArr"
              :key="item.value"
              :label="item+'号充电机'"
              :value="item"
            />
          </el-select>
          </el-form-item>
          <el-form-item label="电池编号:" style="margin-left: 50px;">
            <el-input v-model.trim="queryParams.sn" placeholder="请输入电池编号" clearable />
          </el-form-item>
          <el-form-item label="时间范围:" style="margin-left: 50px">
            <el-date-picker
              v-model="dateTime"
              class="times"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="yyyy-MM-dd HH:mm:ss"
            />
          </el-form-item>
  
          <el-form-item>
            <el-button type="primary" class="serch actve" @click="handleQuery">查询</el-button>
            <el-button type="primary" class="serch" @click="resetForm">重置</el-button>
          </el-form-item>
  
        </el-form>
      </div>
  
      <div class="charge-table">
        <div class="charge-table-top">
          <el-button type="primary" class="daochu" @click="chargeExport">导出结果</el-button>
        </div>
        <div class="charge-table-bottom">
          <el-table
            :data="datalist"
            :header-cell-style="{
              background: '#1d283e',
              borderColor: '#2f3c86',
              height: '36px',
              lineHeight: '36px',
              color:'white',
              fontSize: '15px',
            }"
            stripe
            fit
            :height="tableheight"
            style="width: 100%"
            ref="tblist"
          >
          <el-table-column
            prop="time"
            label="发生时间"
            fixed
            width="150">
          </el-table-column>
          <el-table-column
            prop="deviceNo"
            label="充电机ID"
            fixed
            width="150"
            v-if="logheader.length"
            >
          </el-table-column>
          <el-table-column
            prop="sn"
            label="电池编号"
            fixed
            width="150">
          </el-table-column>
          <el-table-column v-for="log in logheader" :key="log.alarmCode" :label="log.alarmName" :render-header="labelHead">
            <template slot-scope="scope">
              {{ scope.row[log.alarmCode] }}
            </template>
          </el-table-column>
          </el-table>
        </div>
        <div class="pageblock">
          <el-pagination
            :current-page="queryParams.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <!--导出弹窗-->
      <div class="rolemanage chargeshow">
        <el-dialog
          title="生成导出任务"
          :visible.sync="dialogExportVisible"
          :destroy-on-close="true"
        >
          <div class="setExport">
            <el-form :model="ruleForm" :rules="rules" ref="ExportForm">
              <el-form-item label="任务名称" prop="exportName">
                <el-input v-model="ruleForm.exportName" placeholder="请输入任务名称"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="AddExport">生成</el-button>
              </el-form-item>
            </el-form>
            <div class="descript">说明：导出任务生成后，你可以在数据导出列表中进行查询和下载</div>
          </div>
        </el-dialog>
      </div>
      <!--导出弹窗结束-->
    </div>
  </template>
  
  <script>
  import './log.scss'
  import { BmsModel,bmsList,exportFile } from '@/api/log'
  import { getChargeCode } from '@/api/records'
  export default {
    name: 'Bms',
    components: {},
    data() {
      return {
        // 查询时间数组
        dateTime: '',
        // 充电机ID下拉列表
        chargerArr: null,
        // 数据列表
        datalist: [],
        // 查询参数
        queryParams: {
          page: 1, // 当前页
          pageSize: 10, // 每页条数
          deviceNo: undefined,
          endTime: undefined, // 电池编号
          signals: undefined, // 排序字段
          startTime: undefined, // 排序方式
          sn: undefined,
          sort: 1,
        },
        total: 0, // 总条数，
        tableheight: 0, // 表格高度设置
        dialogExportVisible: false, // 弹窗显示
        checked: false,
        indeterminate: false,
        robotValue:'',
        logOptions: [],
        logheader:[],
        heightTimer:false,
        loading: false,
        ruleForm:{
          exportName:undefined,
        },
        rules:{
          exportName: [
              { required: true, message: '请输入任务名称', trigger: 'blur' },
              { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
            ],
        }
      }
    },
    mounted() {
      this.getChargeCode()
      this.onLoadHeight()
      this.changeWindow()
      this.getLogModel()
      this.getrobotList()
    },
    methods: {
      labelHead(h,{column,index}){
        let l = column.label.length
        let f = 20
        if(l <= 3){
          f = 30
        }else if(l >= 14){
          f = 15
        }
        column.minWidth = f*l 
        return h('div',{class:'table-head',style:{minWidth:'100%'}},[column.label])
      },
      selectAll() {
        if (this.robotValue.length < this.logOptions.length) {
          this.robotValue = [];
          this.logOptions.map((item) => {
            this.robotValue.push(item.alarmCode);
          });
          this.robotValue.unshift("全选");
        } else {
          this.robotValue = [];
        }
      },
      changeSelect(val) {
        if (!val.includes("全选") && val.length === this.logOptions.length) {
          this.robotValue.unshift("全选");
        } else if (val.includes("全选") && val.length - 1 < this.logOptions.length) {
          this.robotValue = this.robotValue.filter((item) => {
            return item !== "全选";
          });
        }
      },
      removeTag(val) {
        if (val === "全选") {
          this.robotValue = [];
        }
      },
       // 获取充电机ID
       getChargeCode() {
        getChargeCode().then(res => {
          this.chargerArr = res.data
        })
      },
      //获取BMS日志列表
      getrobotList(){
        this.loading=true;
        bmsList(this.queryParams).then( res =>{
          this.datalist= res.data.list
          this.total=res.data.total
          this.$nextTick(()=>{
            this.$refs.tblist.doLayout();
          })
          this.loading=false
        })
      },
      //获取日志数据字典
      getLogModel(){
        BmsModel().then( res =>{
          this.logOptions= res.data
          this.logheader=res.data
          this.$nextTick(()=>{
            this.$refs.tblist.doLayout();
          })
        })
      },
      /** 分页下一页 */
      handleSizeChange(val) {
        this.queryParams.pageSize = val
        this.getrobotList()
      },
      /** 分页选择页数 */
      handleCurrentChange(val) {
        this.queryParams.page = val
        this.getrobotList()
      },
      // 搜索
      handleQuery() {
        console.log(this.queryParams.sn)
        if (this.dateTime || this.robotValue.length > 0 || this.queryParams.sn || this.queryParams.deviceNo != undefined) {
        if (this.dateTime) {
          this.queryParams.startTime = this.$moment(this.dateTime[0]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          this.queryParams.endTime = this.$moment(this.dateTime[1]).format(
            "YYYY-MM-DD HH:mm:ss"
          );
        }
        if (this.robotValue.length > 0) {
          this.queryParams.signals = this.robotValue;
          let differenceABSet = Array.from(
            new Set(
              [...this.logOptions].filter((x) =>
                this.robotValue.includes(x.alarmCode)
              )
            )
          );
          this.logheader = differenceABSet;
        }
        this.getrobotList();
        }else{
          this.$message({
            message: "请选择查询条件！",
            type: "warning",
            duration: 1000,
            offset: 20,
          });
        }
      },
      // 搜索重置
      resetForm() {
        this.queryParams.startTime = undefined;
        this.queryParams.endTime = undefined;
        this.queryParams.signals = undefined;
        this.queryParams.batteryNum = undefined;
        this.queryParams.deviceNo = undefined;
        this.queryParams.sn = "";
        this.robotValue = "";
        this.dateTime = "";
        this.queryParams.page = 1;
        this.queryParams.pageSize = 10;
        this.getrobotList();
        this.getLogModel();
      },
      // 导出结果
      chargeExport() {
        this.dialogExportVisible=true
      },
      //生成报表
      AddExport(){
        this.$refs.ExportForm.validate((valid) => {
            if (valid) {
              let addParams={
                exportName:this.ruleForm.exportName,
                signals:this.robotValue,
                sn:this.queryParams.sn,
                startTime:this.queryParams.startTime,
                endTime:this.queryParams.endTime,
                exportLogType:3
              }
              exportFile(addParams).then( res =>{
                console.log(res)
                if(res.code === 0){
                  this.dialogExportVisible = false;
                  this.$router.push({path:"/manage-log/data-export"})
                }else{
                  this.$message({
                    message: res.msg,
                    type: "warning",
                    duration: 1000,
                    offset: 20,
                  });
                }
              })
            } else {
              return false;
            }
          });
      }
    }
  }
  </script>