1、优化车间看板四色灯状态展示以及限制拖拽区域 2、部分页面右侧区域元素位置离顶过高，调整布局 3、增加设备日志页面增加点击表格行数据展示当前行工作曲...

zhuzhuanzhuan

2023-10-08 b70dab217e5ebcab6d98196cc2d4b2ffb842c3a1

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

@@ -1,6 +1,7 @@
<template>
  <div ref="workChart">
    <a-modal :title="title" :getContainer="() => this.$refs.workChart"  width="80%" wrap-class-name="full-modal" :footer="null" :visible="visible"
    <a-modal :title="title" :getContainer="() => this.$refs.workChart" width="80%" wrap-class-name="full-modal"
             :footer="null" :visible="visible"
             @cancel="handleCancel" cancelText="关闭">
      <div>
        <div>
@@ -82,7 +83,22 @@
export default {
  name: 'WorkChartModel',
  components: {},
  props: {},
    props: {
      collectTime: {
        type: Object
      },
      equipment: {
        type: Object
      }
    },
    watch: {
      // 监控父组件点击左右箭头切换的时间值将其赋给点击工作曲线后的时间选择器的值
      collectTime: {
        handler(newVal) {
          this.currentToggledTime = newVal
        }
      }
    },
  data() {
    return {
      spinning:false,
@@ -117,15 +133,21 @@
      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");
        return current && current > moment().endOf('day')
    },
    initPlainOptions(param) {
      let that = this
@@ -138,8 +160,19 @@
            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)
          }
        }
      })
@@ -154,8 +187,8 @@
        end: this.queryParams.endStr, interval: this.queryParams.period,
        codeTypeId: this.option.join(',')
      }
      this.initChart(param);
      this.spinning = true;
        this.initChart(param)
        this.spinning = true
    },
    timeHandleChange(val) {
      if (val == 'start') {
@@ -176,9 +209,24 @@
      let _this = this
      this.visible = true
      this.node = node
      let paramDate = moment()
      let start = moment('0:0', 'HH:mm')
      let end = moment(moment().format('HH:mm'), 'HH:mm')
        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,
@@ -192,19 +240,12 @@
      }
      this.$nextTick(() => {
        _this.initPlainOptions(node)
        let param = {
          driveType: node.driveType, equipmentId: 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)
      })
    },
    handleCancel() {
      this.visible = false;
      this.stratOpen = false;
      this.endOpen = false;
        this.visible = false
        this.stratOpen = false
        this.endOpen = false
    },
    checkboxOnChange(e) {
      if (e.length <= 3) {
@@ -214,7 +255,7 @@
        this.$notification.warning({
          message:'消息',
          description:'最多只能选择三个'
        });
          })
        return false
      }
    },
@@ -223,7 +264,7 @@
      this.show = false
    },
    getYAxisOffset(index) {
      return index * 50 + 10;
        return index * 50 + 10
    },
    initChart(param) {
      if (!this.workChart) {
@@ -237,7 +278,7 @@
            }
          },
          legend: {
            data:[],
            data: []
          },
          title: {
            left: 'center',
@@ -271,7 +312,7 @@
            position:'left',
            boundaryGap: [0, '15%'],
              axisLine:{
                show:true,
                show: true
                // lineStyle:{
                //   color:'#000000'
                // }
@@ -284,7 +325,7 @@
              position:'left',
              boundaryGap: [0, '15%'],
              axisLine:{
                show:true,
                show: true
                // lineStyle:{
                //   color:'#000000'
                // }
@@ -297,12 +338,12 @@
              position:'left',
              boundaryGap: [0, '15%'],
              axisLine:{
                show:true,
                show: true
                // lineStyle:{
                //   color:'#000000'
                // }
              }
            },
            }
          ],
          dataZoom: [
            {
@@ -324,7 +365,7 @@
              type:'line',
              data:[],
              smooth:true,
              symbol:'none',
              symbol: 'none'
            }
          ]
        }
@@ -342,17 +383,17 @@
          this.$notification.warning({
            message:'消息',
            description:'无数据!'
          });
          this.spinning = false;
            })
            this.spinning = false
          _this.workChart.setOption(option,true)
        }else{
          this.spinning = false;
            this.spinning = false
          // debugger
          let result = []
          let itemLine = []
          //y轴数组
          var Yarr = []
          var lengenddata = [];
            var lengenddata = []
          for (let i = 0; i < temp.length; i++) {
            let item = temp[i]
            itemLine = []
@@ -373,7 +414,7 @@
              yAxisIndex:i,
              boundaryGap: [0,'100%']
            }
            Yarr.push(Yline);
              Yarr.push(Yline)
            var line ={
              name:item.label,
              type:'line',
@@ -385,12 +426,12 @@

              data:itemLine
            }
            result.push(line);
              result.push(line)

          }
          // option.yAxis = Yarr;
          option.series = result;
          option.legend = lengenddata;
            option.series = result
            option.legend = lengenddata
          // console.log(option);
          _this.workChart.setOption(option,true)
          window.addEventListener('resize', function() {
@@ -399,6 +440,18 @@
        }

      })
      },
      /**
       * 获取点击设备日志表格行后从兄弟组件传来的时间对象
       * @param timeObj 当前行的开始时间与结束时间组成的对象
       */
      getLogListRowRecord(timeObj) {
        // 判断是否点击设备日志表格行的数据，此时为点击表格数据为true
        this.isClicklogListRow = true
        // 合并父组件传来的当前设备信息对象与兄弟组件传来的当前行的时间对象
        const newQueryParams = Object.assign(this.equipment, timeObj)
        this.add(newQueryParams)
        this.title = '工作曲线'
    }
  }
}
@@ -421,20 +474,25 @@
    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)));*/
@@ -446,19 +504,24 @@
  /*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%;
@@ -467,10 +530,12 @@
  align-items: center;
  flex-direction: column;
}

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

/deep/ .ant-checkbox-group .ant-checkbox-wrapper{
  padding: 10px;
}
@@ -479,30 +544,31 @@
  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;