Merge remote-tracking branch 'origin/master'

cuilei

5 天以前 ba77fdc6a30c9ad0941e40319f8c4f6fe6fdf9f1

 src/views/mdc/base/modules/DeviceLog/WorkChartModel.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,592 @@
<template>
  <div ref="workChart">
    <a-modal :title="title" :getContainer="() => this.$refs.workChart" width="80%" wrap-class-name="full-modal"
             :footer="null" :visible="visible"
             @cancel="handleCancel" cancelText="关闭">
      <div>
        <div>
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item label="设备编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input placeholder="输入设备编号查询" :readOnly="readOnly" v-model="queryParams.equipmentId"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-date-picker v-model="queryParams.paramDate" :disabledDate="disabledDate" format='YYYY-MM-DD'/>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="采样周期" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input-number v-model="queryParams.period" :min="100"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item label="安装位置" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input placeholder="输入安装位置查询" :readOnly="readOnly" v-model="queryParams.equipmentName"></a-input>
              </a-form-item>

            </a-col>
            <a-col :span="10">
              <a-form-item label="时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <div class="params_time">
                  <a-time-picker :open="stratOpen" format="HH:mm" @openChange="timeHandleChange('start')"
                                 v-model="queryParams.start">
                    <a-button slot="addon" size="small" type="primary" @click="timeHandleClose('start')">
                      ç¡®å®š
                    </a-button>
                  </a-time-picker>
                  <a-time-picker :open="endOpen" format="HH:mm" @openChange="timeHandleChange('end')"
                                 v-model="queryParams.end">
                    <a-button slot="addon" size="small" type="primary" @click="timeHandleClose('end')">
                      ç¡®å®š
                    </a-button>
                  </a-time-picker>
                </div>
              </a-form-item>
            </a-col>
            <a-col :span="4">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
            </a-col>
          </a-row>

        </div>
        <div class="checkboxgroup">
          <p>统计参数</p>
          <div class="checkboxgroup_con">
            <a-checkbox-group name="checkboxgroup" :value="option" :options="plainOptions" @change="checkboxOnChange"/>
          </div>
        </div>


        <a-spin :spinning="spinning">
          <div id="workChart" style="width:85%;height: 500px;"/>
        </a-spin>
      </div>
    </a-modal>
  </div>
</template>

<script>
  import moment from 'moment'
  import * as echarts from 'echarts'
  import {
    getAction,
    postAction
  } from '@/api/manage'
  import {
    duplicateCheck
  } from '@/api/api'

  export default {
    name: 'WorkChartModel',
    components: {},
    props: {
      collectTime: {
        type: Object
      },
      equipment: {
        type: Object
      }
    },
    watch: {
      // ç›‘控父组件点击左右箭头切换的时间值将其赋给点击工作曲线后的时间选择器的值
      collectTime: {
        handler(newVal) {
          this.currentToggledTime = newVal
        }
      }
    },
    data() {
      return {
        spinning: false,
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 6
          }
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 18
          }
        },
        readOnly: true,
        title: '',
        plainOptions: [],
        option: [],
        workChart: '',
        node: {},
        stratOpen: false,
        endOpen: false,
        visible: false,
        show: false,
        queryParams: {},
        panduanResult: [],
        url: {
          initPlainOptions: '/mdc/mdcDriveTypeParamConfig/findWorkCurveParamList',
          workChart: '/mdc/mdcEquipmentRunningSection/workChart'
        },
        currentToggledTime: '',
        isClicklogListRow: false
      }
    },
    created() {
      this.$bus.$on('tableRowRecord', this.getLogListRowRecord)
    },
    mounted() {

    },
    methods: {
      disabledDate(current) {
        //Can not slect days before today and today
        return current && current > moment().endOf('day')
      },
      initPlainOptions(param) {
        let that = this
        let equipment = param.equipmentId
        getAction(this.url.initPlainOptions, { equipmentId: equipment }).then((res) => {
          if (res.success) {
            let temp = []
            // debugger
            for (var item of res.result) {
              temp.push({ label: item.chineseName, value: item.id, englishName: item.englishName })
            }
            that.plainOptions = temp
            if (temp.length > 0) {
              that.option = [temp[0].value]
            }
            let param = {
              driveType: that.node.driveType,
              equipmentId: that.node.equipmentId,
              date: that.queryParams.paramDateStr,
              start: that.queryParams.startStr,
              end: that.queryParams.endStr,
              interval: that.queryParams.period,
              codeTypeId: that.option.join(',')
            }
            that.initChart(param)
          }
        })
      },
      searchQuery() {
        this.queryParams.paramDateStr = this.queryParams.paramDate.format('yyyy-MM-DD')
        this.queryParams.startStr = this.queryParams.start.format('HH:mm')
        this.queryParams.endStr = this.queryParams.end.format('HH:mm')
        let param = {
          driveType: this.node.driveType, equipmentId: this.node.equipmentId,
          date: this.queryParams.paramDateStr, start: this.queryParams.startStr,
          end: this.queryParams.endStr, interval: this.queryParams.period,
          codeTypeId: this.option.join(',')
        }
        this.initChart(param)
        this.spinning = true
      },
      timeHandleChange(val) {
        if (val == 'start') {
          this.stratOpen = true
        } else {
          this.endOpen = true
        }
      },
      timeHandleClose(val) {
        if (val == 'start') {
          this.stratOpen = false
          this.endOpen = true
        } else {
          this.endOpen = false
        }
      },
      add(node) {
        let _this = this
        this.visible = true
        this.node = node
        this.spinning = true
        let paramDate
        let start
        let end
        // å½“没有切换过时间currentToggledTime的值为空值，如果由于点击左右箭头切换过时间，则currentToggledTime为切换后的时间
        if (!this.currentToggledTime) {
          paramDate = moment()
        } else {
          paramDate = this.currentToggledTime
        }
        // åˆ¤æ–­æ˜¯å¦ç‚¹å‡»è®¾å¤‡æ—¥å¿—表格行的数据，若点击表格数据则显示表格数据中的时间，若点击工作曲线图片则显示0点至当前时间数据
        if (this.isClicklogListRow) {
          start = node.start
          end = node.end
        } else {
          start = moment('0:0', 'HH:mm')
          end = moment(moment().format('HH:mm'), 'HH:mm')
        }
        this.queryParams = {
          equipmentId: node.equipmentId,
          equipmentName: node.equipmentName,
          period: 100,
          paramDate: paramDate,
          paramDateStr: paramDate.format('yyyy-MM-DD'),
          start: start,
          startStr: start.format('HH:mm'),
          end: end,
          endStr: end.format('HH:mm')
        }
        this.$nextTick(() => {
          _this.initPlainOptions(node)
        })
      },
      handleCancel() {
        this.visible = false
        this.stratOpen = false
        this.endOpen = false
      },
      checkboxOnChange(e) {
        if (e.length <= 3) {
          this.option = e
        } else {
          // this.$message.warn('最多只能选择3个')
          this.$notification.warning({
            message: '消息',
            description: '最多只能选择三个'
          })
          return false
        }
      },
      close() {
        this.visible = false
        this.show = false
      },
      getYAxisOffset(index) {
        return index * 50 + 10
      },
      initChart(param) {
        if (!this.workChart) {
          this.workChart = echarts.init(document.getElementById('workChart'))
        }
        let option = {
          tooltip: {
            trigger: 'axis',
            position: function(pt) {
              return [pt[0], '10%']
            }
          },
          legend: {
            data: []
          },
          title: {
            left: 'center',
            text: ''
          },
          toolbox: {
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          grid: {
            left: '8%',
            top: '10%',
            right: '2%',
            bottom: '14%',
            containLabel: true
          },
          xAxis: {
            type: 'time',
            boundaryGap: false
          },
          yAxis: [
            {
              yAxisIndex: 0,
              type: 'value',
              offset: 0,
              position: 'left',
              boundaryGap: [0, '15%'],
              axisLine: {
                show: true,
                lineStyle:{
                  color:'#5470C6'
                }
              }
            },
            {
              yAxisIndex: 1,
              type: 'value',
              offset: 60,
              position: 'left',
              boundaryGap: [0, '15%'],
              axisLine: {
                show: true,
                lineStyle:{
                  color:'#91CC75'
                }
              }
            },
            {
              yAxisIndex: 2,
              type: 'value',
              offset: 120,
              position: 'left',
              boundaryGap: [0, '15%'],
              axisLine: {
                show: true,
                lineStyle:{
                  color:'#FAC858'
                }
              }
            }
          ],
          dataZoom: [
            {
              type: 'inside',
              start: 0,
              end: 20
            },
            {
              start: 0,
              end: 20
            }
          ],
          series: [
            {
              showSymbol: true,
              symbolSize: 20,
              label: 'show',
              name: '',
              type: 'line',
              data: [],
              smooth: true,
              symbol: 'none'
            }
          ]
        }
        let _this = this
        let temp = []
        for (let i = 0; i < this.plainOptions.length; i++) {
          let item = this.plainOptions[i]
          if (this.option.indexOf(item.value) > -1) {
            temp.push(item)
          }
        }
        console.log('temp',temp)
        getAction(this.url.workChart, param).then((res) => {
          if (JSON.stringify(res.result) == '[]' || res.result == null) {
            // this.$message.warning('无数据！')
            this.$notification.warning({
              message: '消息',
              description: '无数据!'
            })
            this.spinning = false
            _this.workChart.setOption(option, true)
          } else {
            this.spinning = false
            // debugger
            let result = []
            let itemLine = []
            //y轴数组
            var Yarr = []
            var lengenddata = []
            for (let i = 0; i < temp.length; i++) {
              let item = temp[i]
              itemLine = []
              for (let m = 0; m < res.result.length; m++) {
                let d = []
                d.push(res.result[m].collectTime)
                // debugger
                d.push(res.result[m][item.englishName])
                itemLine.push(d)
              }
              var lll = {
                name: item.label
              }
              lengenddata.push(lll)
              var Yline = {
                name: item.label,
                type: 'value',
                yAxisIndex: i,
                boundaryGap: [0, '100%']
              }
              Yarr.push(Yline)
              var line = {
                name: item.label,
                type: 'line',
                // areaStyle:{},
                smooth: true,
                symbol: 'circle',
                symbolSize: 10,
                yAxisIndex: i,
                data: itemLine
              }
              result.push(line)

            }
            console.log('result===========',result)
            console.log('legend=============',lengenddata)
            // option.yAxis = Yarr;
            option.series = result
            option.legend = lengenddata
            // console.log(option);
            _this.workChart.setOption(option, true)
            window.addEventListener('resize', function() {
              _this.workChart.resize()
            })
          }

        })
      },
      /**
       * èŽ·å–点击设备日志表格行后从兄弟组件传来的时间对象
       * @param timeObj å½“前行的开始时间与结束时间组成的对象
       */
      getLogListRowRecord(timeObj) {
        // åˆ¤æ–­æ˜¯å¦ç‚¹å‡»è®¾å¤‡æ—¥å¿—表格行的数据，此时为点击表格数据为true
        this.isClicklogListRow = true
        // åˆå¹¶çˆ¶ç»„件传来的当前设备信息对象与兄弟组件传来的当前行的时间对象
        const newQueryParams = Object.assign(this.equipment, timeObj)
        this.add(newQueryParams)
        this.title = '工作曲线'
      }
    }
  }
</script>

<style scoped lang="less">
  .full-modal {
    .ant-modal {
      max-width: 100%;
      top: 0;
      padding-bottom: 0;
      margin: 0;
    }
    .ant-modal-content {
      display: flex;
      flex-direction: column;
      height: calc(100vh);
    }
    .ant-modal-body {
      flex: 1;
    }
  }

  /deep/ .ant-modal {
    /*background-color: #000;*/
    /*color: #fff;*/
  }

  /deep/ .ant-modal-header {
    /*background-color: #000;*/
  }

  /deep/ .ant-modal-title {
    /*color: #fff;*/
  }

  /deep/ .ant-modal-close {
    color: #1191b0;
    font-size: 24px;
  }

  /deep/ .ant-modal-content {
    /*background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.27) 100%);*/
    /*background: -webkit-gradient(linear, left left, right right, color-stop(0%, rgba(0, 0, 0, 0.66)), color-stop(100%, rgba(0, 0, 0, 0.4)));*/
    /*background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
    /*background: -o-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
    /*background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
    /*background: linear-gradient(to right, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
    /*background-color: #000;*/
    /*color: #fff;*/
    position: relative;
  }

  /deep/ .ant-modal-header {
    /*border-bottom: none!important;*/
  }

  /deep/ .ant-checkbox-wrapper {
    /*color: #fff;*/
  }

  /deep/ .ant-form-item-label label {
    /*color: #fff;*/
  }

  /deep/ .ant-btn {
    /*position: absolute;*/

  }

  .checkboxgroup {
    position: absolute;
    right: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  /deep/ .ant-checkbox-group {
    display: flex;
    flex-direction: column;
  }

  /deep/ .ant-checkbox-group .ant-checkbox-wrapper {
    padding: 10px;
  }

  .con_btn {
    display: flex;
    align-items: center;
  }

  .workChart_params {
    display: flex;
    /*align-items: center;*/
    flex-direction: column;
    float: left;
  }

  .workChart_params .params_one {
    display: flex;
    justify-content: space-between;
  }

  .workChart_params .params_two {
    display: flex;
    justify-content: space-between;
  }

  /deep/ .workChart_params .ant-form-item {
    display: flex;
  }

  /deep/ .workChart_params .ant-form-item .ant-form-item-control-wrapper {
    margin: 0 10px;
  }

  .ant-btn {
    padding: 0 10px;
    margin-left: 3px;
  }

  .ant-form-item-control {
    line-height: 0px;
  }

  /** ä¸»è¡¨å•è¡Œé—´è· */
  .ant-form .ant-form-item {
    margin-bottom: 10px;
  }

  /** Tab页面行间距 */
  .ant-tabs-content .ant-form-item {
    margin-bottom: 0px;
  }
</style>