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>
@@ -12,7 +13,7 @@
            </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-date-picker v-model="queryParams.paramDate" :disabledDate="disabledDate" format='YYYY-MM-DD'/>
              </a-form-item>
            </a-col>
            <a-col :span="6">
@@ -69,166 +70,206 @@
</template>

<script>
import moment from 'moment'
import * as echarts from 'echarts'
import {
  getAction,
  postAction
} from '@/api/manage'
import {
  duplicateCheck
} from '@/api/api'
  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: {},
  data() {
    return {
      spinning:false,
      labelCol: {
        xs: {
          span: 24
        },
        sm: {
          span: 6
        }
  export default {
    name: 'WorkChartModel',
    components: {},
    props: {
      collectTime: {
        type: Object
      },
      wrapperCol: {
        xs: {
          span: 24
      equipment: {
        type: Object
      }
    },
    watch: {
      // 监控父组件点击左右箭头切换的时间值将其赋给点击工作曲线后的时间选择器的值
      collectTime: {
        handler(newVal) {
          this.currentToggledTime = newVal
        }
      }
    },
    data() {
      return {
        spinning: false,
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 6
          }
        },
        sm: {
          span: 18
        }
        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')
      },
      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'
      }
    }
  },
  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 })
      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)
            }
          }
          that.plainOptions = temp
          if(temp.length>0){
            that.option = [temp[0].value]
          }
        }
      })
    },
    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
      let paramDate = moment()
      let start = moment('0:0', 'HH:mm')
      let end = moment(moment().format('HH:mm'), 'HH:mm')
      this.queryParams = {
        equipmentId: node.equipmentId,
        equipmentName: node.equipmentName,
        period: 1000,
        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)
        })
      },
      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: 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(',')
          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)
      })
    },
    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'))
      }
        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: 1000,
          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',
@@ -237,7 +278,7 @@
            }
          },
          legend: {
            data:[],
            data: []
          },
          title: {
            left: 'center',
@@ -252,12 +293,12 @@
              saveAsImage: {}
            }
          },
          grid:{
            left:'8%',
            top:'10%',
            right:'2%',
            bottom:'14%',
            containLabel:true
          grid: {
            left: '8%',
            top: '10%',
            right: '2%',
            bottom: '14%',
            containLabel: true
          },
          xAxis: {
            type: 'time',
@@ -265,44 +306,44 @@
          },
          yAxis: [
            {
              yAxisIndex:0,
            type: 'value',
              offset:0,
            position:'left',
            boundaryGap: [0, '15%'],
              axisLine:{
                show:true,
                // lineStyle:{
                //   color:'#000000'
                // }
              }
          },
            {
              yAxisIndex:1,
              yAxisIndex: 0,
              type: 'value',
              offset:60,
              position:'left',
              offset: 0,
              position: 'left',
              boundaryGap: [0, '15%'],
              axisLine:{
                show:true,
              axisLine: {
                show: true
                // lineStyle:{
                //   color:'#000000'
                // }
              }
            },
            {
              yAxisIndex:2,
              yAxisIndex: 1,
              type: 'value',
              offset:120,
              position:'left',
              offset: 60,
              position: 'left',
              boundaryGap: [0, '15%'],
              axisLine:{
                show:true,
              axisLine: {
                show: true
                // lineStyle:{
                //   color:'#000000'
                // }
              }
            },
            {
              yAxisIndex: 2,
              type: 'value',
              offset: 120,
              position: 'left',
              boundaryGap: [0, '15%'],
              axisLine: {
                show: true
                // lineStyle:{
                //   color:'#000000'
                // }
              }
            }
          ],
          dataZoom: [
            {
@@ -315,211 +356,236 @@
              end: 20
            }
          ],
          series:[
          series: [
            {
              showSymbol:true,
              symbolSize:20,
              label:'show',
              name:'',
              type:'line',
              data:[],
              smooth:true,
              symbol:'none',
              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)
        }
      }
      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);

        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)
          }
          // option.yAxis = Yarr;
          option.series = result;
          option.legend = lengenddata;
          // console.log(option);
          _this.workChart.setOption(option,true)
          window.addEventListener('resize', function() {
            _this.workChart.resize()
          })
        }
        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)

            }
            // 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;
  .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;
    }
  }
  .ant-modal-content {

  /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;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;

  /deep/ .ant-checkbox-group .ant-checkbox-wrapper {
    padding: 10px;
  }
}
/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;
  }

.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;
}
  .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-btn {
    padding: 0 10px;
    margin-left: 3px;
  }

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

/** 主表单行间距 */
.ant-form .ant-form-item {
  margin-bottom: 10px;
}
  /** 主表单行间距 */
  .ant-form .ant-form-item {
    margin-bottom: 10px;
  }

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