U 电源历史曲线

whychw

2020-09-24 e7326881f6d828c23a03df3ae6424b225a8322ff

U 电源历史曲线

 src/api/services/electric/chargepower.js

@@ -139,8 +139,8 @@
  /**
   * Electric_2MW_alarmAction_e2kw_serchByCondition
   * 2MW电源系统告警
   * 传参json:{"electric2KW_id":"6001"}
   * electric2KW_id=0是全部
   * 传参json:{"electric_id":"6001"}
   * electric_id=0是全部
   */
  ,getAlarm (data) {
    return self.$axios({

 src/api/services/electric/index.js

@@ -278,6 +278,18 @@
        });
    },
    /**
     * 分组实时故障
     * {electric_id: 4001}  AB
     * {electric_id: 4003}  CD
     */
    groupAlarmInfo(data) {
        return axios({
            method: 'post',
            url: 'Electric_alarmAction_ele_serchByCondition',
            data: 'json='+JSON.stringify(data),
        });
    },
    /**
     * 获取组合界面设定电压和电流的值
     * 传参：json:{"electric_id":"4001"}
     */

 src/assets/css/m-element-ui.css

@@ -308,9 +308,18 @@
.el-pager li {
    background: transparent; 
}
.el-pagination button:disabled {
.el-pagination {
    color: #fff;
}
.el-pagination .btn-next,
.el-pagination .btn-prev {
    color: #fff;
    background-color: transparent;
}
.el-pagination .btn-next:disabled,
.el-pagination .btn-prev:disabled {
    background-color: transparent;
    color: #ccc;
    background-color: transparent; 
}
.el-pagination__jump,
.el-pagination__total {

 src/components/chart/LineChartMul.vue

@@ -2,7 +2,7 @@
    <div class="chart-container" :class="{'maxSize': maxSize}" ref="root" :style="getStyle">
        <div class="chart-content-container"
        :class="{'chart-content-fixed':isFull}">
            <div class="chart-content" :id="id"></div>
            <div class="chart-content" :id="id" :style="getStyle"></div>
        </div>
    </div>
</template>
@@ -23,7 +23,6 @@
import "./theme/transparent"

let resizeHandler;

export default {
    props: {
        title: {
@@ -34,6 +33,10 @@
            type: [Number, String],
            default: 300
        },
        // width: {
        //     type: [Number, String],
        //     default: 300
        // },
        maxSize: {
            type: Boolean,
            default: false
@@ -217,16 +220,23 @@

            // 绘制图表
            this.$G.chartManage.get(this.id).setOption(option);
            // 返回chart实例
            return this.$G.chartManage.get(this.id);
        }
    },
    computed: {
        getStyle(){
            let height = this.height;
            // let width = this.width;
            if(typeof height == 'number') {
                height += 'px';
            }
            // if(typeof width == 'number') {
            //     width += 'px';
            // }
            return {
                height: height,
                // width: width
            }
        }
        ,setCanvasHeight () {
@@ -263,7 +273,7 @@
        // 销毁echarts
        this.$G.chartManage.del(this.id);
        window.removeEventListener('resize', resizeHandler);
    },
    }
}
</script>


 src/views/chargePower/alone.vue

@@ -279,8 +279,7 @@

          this.real_set_cur = data.localgivecurr;
          this.real_set_vol = data.localgivevol;
          // TODO
          this.record_time += 1;
          this.record_time = data.record_time;
        }

      });
@@ -475,6 +474,9 @@
      });
    }
    ,updateGraph () {
      if (!this.record_time) {
        return false;
      }
      this.G_data.push({
        brachdccurr: this.brachdccurr,
        brachdcvol: this.brachdcvol,

 src/views/chargePower/main.vue

@@ -85,41 +85,81 @@
        <div class="btn_3d" @click="showGraph('B')">B机组历史曲线</div>
      </div>
    </div>
    <!-- 告警弹窗 -->
    <el-dialog
      title="故障查询"
      :visible.sync="faultVisible"
      width="60%"
      class="dialog-bg">
      <div class="D-content">
        <el-table
          :data="fault_tableData"
          stripe
          style="width: 100%">
          <el-table-column
            prop="alarm_starttime"
            label="时间"
            width="180">
          </el-table-column>
          <el-table-column
            prop="alarm_name"
            label="故障名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="details"
            label="故障描述">
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-size="10"
            layout="total, prev, pager, next, jumper"
            :total="fault_total">
          </el-pagination>
        </div>
        <el-tabs type="border-card">
          <el-tab-pane label="实时故障">
            <el-table
              :data="fault_tableData"
              stripe
              style="width: 100%">
              <el-table-column
                prop="alarm_starttime"
                label="时间"
                width="180">
              </el-table-column>
              <el-table-column
                prop="electric2KW_name"
                label="组别"
                width="100">
              </el-table-column>
              <el-table-column
                prop="alarm_name"
                label="故障名称"
                width="180">
              </el-table-column>
              <el-table-column
                prop="details"
                label="故障描述">
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="历史故障">
            <div class="wrap-table">
              <div class="table-contain">
                <el-table
                  :data="fault_his_tableData"
                  stripe
                  style="width: 100%">
                  <el-table-column
                    prop="alarm_starttime"
                    label="时间"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="electric2KW_name"
                    label="组别"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="alarm_name"
                    label="故障名称"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="details"
                    label="故障描述">
                  </el-table-column>
                </el-table>
              </div>
              <!-- 分页 -->
              <div class="">
                <el-pagination
                  @current-change="handleCurrentChange"
                  :current-page="1"
                  :page-size="10"
                  layout="total, prev, pager, next, jumper"
                  :total="fault_his_total">
                </el-pagination>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <span slot="footer" class="dialog-footer h-center">
        <el-button type="primary" @click="faultVisible = false">关闭</el-button>
@@ -169,7 +209,9 @@
      timer: new Timeout(),
      faultVisible: false,
      fault_tableData: [],
      fault_total: 0,
      fault_his_tableData: [],
      fault_his_total: 0,
      pageCurr_hisAlarm: 1,
      G_title: 'A机组历史曲线',
      select_date: new Date().format('yyyy-MM-dd'),
      G_Visible: false,
@@ -296,6 +338,7 @@
        this.getControlData('A');
        this.getControlData('B');
        this.getHisAlarm();
        this.getAlarm();
        this.timer.open();
      }, 1000);
    }
@@ -471,24 +514,37 @@
        }
      });
    }
    ,getAlarm () {
      let param = {
        electric_id: 0
      };
      this.$api.chargepower.getAlarm(param).then((res) => {
        res = JSON.parse(res.data.result);
        if (res.code) {
          this.fault_tableData = res.data;
        }
      });
    }
    ,getHisAlarm () {
      let param = {
        electric_id: 0,
        page: {
          pageCurr: 1,
          pageCurr: this.pageCurr_hisAlarm,
          pageSize: 10
        }
      };
      this.$api.chargepower.getHisAlarm(param).then((res) => {
        res = JSON.parse(res.data.result);
        if (res.code) {
          this.fault_tableData = res.data;
          this.fault_total = res.sum;
          this.fault_his_tableData = res.data;
          this.fault_his_total = res.sum;
        }
      });
    }
    ,handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      // console.log(`当前页: ${val}`);
      this.pageCurr_hisAlarm = val;
      this.getHisAlarm();
    }
    // 显示历史曲线
    ,showGraph (group) {
@@ -562,7 +618,7 @@
    ,getHisData (group, date) {
      const param = {
        electric2KW_id: 'A' == group ? 6001 : 6002,
        record_time: (date ? date : new Date().format('yyyy-mm-dd')) + " 00:00:00"
        record_time: (date ? date : new Date().format('yyyy-MM-dd')) + " 00:00:00"
      };
      return this.$api.chargepower.getHisData(param).then((res) => {
        res = JSON.parse(res.data.result);
@@ -747,4 +803,7 @@
  .wrap_G {
    height: 600px;
  }
  .wrap-table {
    width: 100%;
  }
</style>

 src/views/rectifier/group.vue

@@ -196,6 +196,11 @@
            width="">
          </el-table-column>
          <el-table-column
             prop="electric_name"
            label="电源"
            width="">
          </el-table-column>
          <el-table-column
             prop="alarm_name"
            label="报警名称"
            width="">
@@ -213,7 +218,7 @@
            <div class="btn_3d" @click="faultVisible = true">历史报警</div>
          </div>
          <div class="">
            <div class="btn_3d">{{groupname}}历史曲线</div>
            <div class="btn_3d" @click="showGraph(groupname)">{{groupname}}历史曲线</div>
          </div>
        </div>
      </div>
@@ -291,6 +296,11 @@
            width="">
          </el-table-column>
          <el-table-column
             prop="electric_name"
            label="电源"
            width="">
          </el-table-column>
          <el-table-column
             prop="alarm_name"
            label="报警名称"
            width="">
@@ -311,14 +321,73 @@
        <el-button type="primary" @click="faultVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 弹窗  曲线 -->
    <el-dialog
      :title="G_title"
      :visible.sync="G_Visible"
      width="60%"
      class="dialog-bg">
      <div class="D-content">
        <!-- 筛选条件 -->
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="日期">
            <el-date-picker type="date" size="mini" placeholder="选择日期" :clearable="false" value-format="yyyy-MM-dd" v-model="select_date"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
        <el-radio-group class="selectG" v-model="G_cur" size="mini">
          <el-radio-button :label="group1 + '机组历史曲线'"></el-radio-button>
          <el-radio-button :label="group2 + '机组历史曲线'"></el-radio-button>
        </el-radio-group>
        <div class="wraper" :class="{'toEnd': this.group2 + '机组历史曲线' == this.G_cur}">
          <div class="wrap_G">
            <div class="posA_full">
              <line-chart-mul id="G_dialog_0" ref="G_dialog_0" 
                title="我是标题"
                height="100%"
                :max-size='true'
                :categoryLen="3"
                :show-zoom='true'
                :subtext="true"  trigger-on="mousemove"></line-chart-mul>
            </div>
          </div>
          <div class="wrap_G">
            <div class="posA_full">
              <line-chart-mul id="G_dialog_1" ref="G_dialog_1" 
                title="我是标题"
                height="100%"
                :max-size='true'
                :categoryLen="3"
                :show-zoom='true'
                :subtext="true"  trigger-on="mousemove"></line-chart-mul>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Timeout from '../../script/Timeout'

import LineChartMul from '@/components/chart/LineChartMul';
const info = {
  A: 4001
  ,B: 4002
  ,C: 4003
  ,D: 4004
};
let G_data = {
  data_0: null
  ,data_1: null
};
export default {
  name: 'RectifierGroup',
  components: {
      LineChartMul
  },
  data () {
    let itemName = this.$route.query.group.split('');
    return {
@@ -327,6 +396,11 @@
      faultVisible: false,
      fault_tableData: [],
      fault_total: 0,
      pageCurr_hisAlarm: 1,
      G_title: 'A机组历史曲线',
      select_date: new Date().format('yyyy-MM-dd'),
      G_Visible: false,
      G_cur: itemName[0] + '机组历史曲线',
      group: this.$route.query.group,
      isMaxSize: false,
      groupname: this.$route.query.group,
@@ -551,6 +625,14 @@
          ]
        },
      }
    }
  },
  computed: {
    group1 () {
      return this.group.split('')[0];
    },
    group2 () {
      return this.group.split('')[1];
    }
  },
  methods: {
@@ -849,7 +931,10 @@
    }
    ,alarmInfo() {
      // 设置点位(电压值乘10)
      this.$api.electric.alarmInfo().then((res)=>{
      let param = {
        electric_id: 'AB' == this.group ? 4001 : 4003
      };
      this.$api.electric.groupAlarmInfo(param).then((res)=>{
        let rs = JSON.parse(res.data.result);
        if(rs.code == 1) {
          rs.data.forEach((v) => {
@@ -894,7 +979,7 @@
      let param = {
        electric_id: 'AB' == this.group ? 4001 : 4003,
        page: {
          pageCurr: 1,
          pageCurr: this.pageCurr_hisAlarm,
          pageSize: 10
        }
      };
@@ -913,7 +998,96 @@
      });
    }
    ,handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      // console.log(`当前页: ${val}`);
      this.pageCurr_hisAlarm = val;
      this.getHisAlarm();
    }
    // 显示历史曲线
    ,showGraph (group) {
      this.select_date = new Date().format('yyyy-MM-dd');
      this.G_title = group + '套历史曲线';
      this.G_Visible = true;
      group.split('').forEach((v, i) => {
        const id = info[v];
        // console.log(v, i, this.$refs);
          // console.dir(this.$refs['G_dialog_' + 0]);
          // console.dir(this.$refs['G_dialog_' + 1]);
        this.getHisData(id).then((res) => {
          // console.log(res, '格式化后的图表数据');
          G_data['data_' + i] = res;
          this.$refs['G_dialog_' + i].setOption(res).resize();
        }).catch(e => {
          G_data['data_' + i] = this.format([]);
          this.$refs['G_dialog_' + i].setOption(this.format([])).resize();
          console.warn(e);
        });
      });
    }
    // 历史曲线 查询
    ,search () {
      this.group.split('').forEach((v, i) => {
        const id = info[v];
        this.getHisData(id, this.select_date).then((res) => {
          // console.log(res, 'search');
          G_data['data_' + i] = res;
          this.$refs['G_dialog_' + i].setOption(res).resize();
        }).catch(e => {
          G_data['data_' + i] = this.format([]);
          this.$refs['G_dialog_' + i].setOption(this.format([])).resize();
          console.warn(e);
        });
      });
    }
    ,format (data) {
      let xLabel = [],
          series = [],
          data_dccurr = [],
          data_dcvol = [],
          data_controlangle = [],
          data_localgivecurr = [],
          data_localgivevol = [];
      data.forEach((v) => {
        xLabel.push(v.record_time);
        data_dccurr.push(v.dccurr / 10);
        data_dcvol.push(v.dcvol / 10);
        data_controlangle.push(v.controlangle / 10);
      });
      series.push({
        name: '支路电流',
        unit: 'A',
        data: data_dccurr
      }, {
        name: '支路电压',
        unit: 'V',
        data: data_dcvol
      }, {
        name: '控制角',
        unit: '度',
        data: data_controlangle
      });
      // console.log(xLabel, series);
      return {
        xLabel,
        series
      }
    }
    // 查询历史数据
    ,getHisData (id, date) {
      const param = {
        electric_id: id,
        record_time: (date ? date : new Date().format('yyyy-MM-dd')) + " 00:00:00"
      };
      // console.log(param, 'his', info, group);
      // console.trace('getHis_callStack');
      return this.$api.electric.getHisData(param).then((res) => {
        res = JSON.parse(res.data.result);
        if (res.code) {
          // console.log(res.data, 'res.data');
          return this.format(res.data);
        } else {
          throw res.msg;
        }
      });
    }
  },
  mounted () {
@@ -1248,4 +1422,29 @@
    margin-top: 0.12rem;
    text-align: right;
  }
  .D-content {
    position: relative;
    overflow: hidden;
  }
  .wraper {
    width: 200%;
    display: -webkit-flex;
    display: flex;
    -webkit-transition: all .2s;
    transition: all .2s;
  }
  .wraper.toEnd {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .selectG {
    position: absolute;
    right: 0;
    top: 10px;
  }
  .wrap_G {
    flex: 1;
    height: 600px;
    position: relative;
  }
</style>

 src/views/rectifier/main.vue

@@ -124,6 +124,11 @@
            width="">
          </el-table-column>
          <el-table-column
             prop="electric_name"
            label="电源"
            width="">
          </el-table-column>
          <el-table-column
             prop="alarm_name"
            label="报警名称"
            width="">
@@ -279,6 +284,11 @@
            width="">
          </el-table-column>
          <el-table-column
             prop="electric_name"
            label="电源"
            width="">
          </el-table-column>
          <el-table-column
             prop="alarm_name"
            label="报警名称"
            width="">
@@ -325,6 +335,7 @@
      faultVisible: false,
      fault_tableData: [],
      fault_total: 0,
      pageCurr_hisAlarm: 1,
      G_title: 'A机组历史曲线',
      select_date: new Date().format('yyyy-MM-dd'),
      G_Visible: false,
@@ -858,6 +869,7 @@
      this.$api.electric.alarmInfo().then((res)=>{
        let rs = JSON.parse(res.data.result);
        if(rs.code == 1) {
          console.log(rs, '0000000000000')
          rs.data.forEach((v) => {
            let arr = v.alarm_starttime.split(' ');
            v.alarm_date = arr[0];
@@ -877,13 +889,14 @@
      let param = {
        electric_id: 0,
        page: {
          pageCurr: 1,
          pageCurr: this.pageCurr_hisAlarm,
          pageSize: 10
        }
      };
      return this.$api.electric.getHisAlarm(param).then((res) => {
        res = JSON.parse(res.data.result);
        if (res.code) {
          console.log(res, '===res');
          res.data.forEach((v) => {
            let arr = v.alarm_starttime.split(' ');
            v.alarm_date = arr[0];
@@ -895,7 +908,9 @@
      });
    }
    ,handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      // console.log(`当前页: ${val}`);
      this.pageCurr_hisAlarm = val;
      this.getHisAlarm();
    }
    // 显示历史曲线
    ,showGraph (group) {
@@ -934,9 +949,9 @@
          data_localgivevol = [];
      data.forEach((v) => {
        xLabel.push(v.record_time);
        data_dccurr.push(v.dccurr);
        data_dcvol.push(v.dcvol);
        data_controlangle.push(v.controlangle);
        data_dccurr.push(v.dccurr  / 10);
        data_dcvol.push(v.dcvol / 10);
        data_controlangle.push(v.controlangle / 10);
      });
      series.push({
        name: '支路电流',
@@ -961,7 +976,7 @@
    ,getHisData (group, date) {
      const param = {
        electric_id: info[group],
        record_time: (date ? date : new Date().format('yyyy-mm-dd')) + " 00:00:00"
        record_time: (date ? date : new Date().format('yyyy-MM-dd')) + " 00:00:00"
      };
      // console.log(param, 'his', info, group);
      // console.trace('getHis_callStack');