1、优化部分页面布局问题 2、完善车间看板设备缩放以及拖拽功能

zhuzhuanzhuan

2023-10-10 de0d853f5d199389508054e330340995d9da858b

 src/views/mdc/base/modules/equipmentDayAvail/equipmentDayAvailMain.vue

@@ -1,4 +1,5 @@
<template>
  <a-spin :spinning="loading">
  <div :bordered="false" class="device_list">
    <div class="com_box">
      <!-- 查询区域 -->
@@ -17,7 +18,8 @@
            </a-col>
            <a-col :md="4" :sm="4" :xs="4">
              <a-form-item label="日期">
                <a-date-picker v-model="queryParam.dateTime" :disabledDate="disabledDate" format='YYYYMMDD' @change="dataChange"/>
                  <a-date-picker v-model="queryParam.dateTime" :disabledDate="disabledDate" format='YYYYMMDD'
                                 @change="dataChange"/>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="4" :xs="4">
@@ -35,7 +37,8 @@
                  <a-select-option :value="6">
                    6
                  </a-select-option>
                </a-select>小时
                  </a-select>
                  小时
              </a-form-item>
            </a-col>
            <a-col :md="3" :sm="3" :xs="3">
@@ -58,6 +61,7 @@
      <!-- table区域-end -->
    </div>
  </div>
  </a-spin>
</template>

<script>
@@ -78,6 +82,7 @@
  import JEllipsis from '@/components/jeecg/JEllipsis'
  import Tooltip from 'ant-design-vue/es/tooltip'
  import { ajaxGetDictItems, getDictItemsFromCache, duplicateCheck } from '@/api/api'

  export default {
    name: 'equipmentDayAvailMain',
    // mixins: [JeecgListMixin],
@@ -95,13 +100,13 @@
    data() {
      return {
        activeKey: '1',
        typeTree:"",
        typeTree: '',
        typeParent:1,
        typeEquipment:1,
        spaceTime:[],
        useingRates:[],
        dates: [],
        xianshi:"",
        xianshi: '',
        readOnly:true,
        queryParam: {
          dateTime:undefined,
@@ -117,12 +122,13 @@
          getEquipmentByPid: '/mdc/mdcEquipment/getEquipmentByPid',
          getEquipmentByDepPid:'/mdc/mdcEquipment/getEquipmentByDepPid'
        },
        AnalysisList:{}
        AnalysisList: {},
        loading: false
      }
    },
    watch:{
      Type(valmath){
        this.dataList = [];
        this.dataList = []
        this.queryParams.typeTree = valmath
        // console.log(this.queryParams.typeTree)
      },
@@ -130,7 +136,7 @@
        if (JSON.stringify(val) != '{}') {
          if (val.equipmentId) {
            // this.$set(this.queryParam, 'tierName', val.title)
            this.queryParamEquip.parentId =  ""
            this.queryParamEquip.parentId = ''
            this.queryParams.equipmentId = val.equipmentId
            this.queryParamEquip.equipmentId = val.equipmentId
            this.searchQuery()
@@ -141,14 +147,13 @@
            this.initEquipment(val.key)
          }


        }
      },
      nodePeople(val){
        if (JSON.stringify(val) != '{}') {
          if (val.equipmentId) {
            // this.$set(this.queryParam, 'tierName', val.title)
            this.queryParamEquip.parentId =  ""
            this.queryParamEquip.parentId = ''
            this.queryParams.equipmentId = val.equipmentId
            this.queryParamEquip.equipmentId = val.equipmentId
            this.searchQuery()
@@ -165,7 +170,7 @@
    methods: {
      moment,
      drawTu(){
        let dayAvailBar = this.$echarts.init(document.getElementById('dayAvailBar'), 'macarons');
        let dayAvailBar = this.$echarts.init(document.getElementById('dayAvailBar'), 'macarons')
        //dayAvailLine = echarts.init(document.getElementById('dayAvailLine'));
        let dayAvailBarOption = {
          title: {
@@ -174,12 +179,12 @@
            textStyle: {
              fontSize: 18,
              fontWeight: 'bolder',
              color: "#151414"
              color: '#151414'
            }
          },
          tooltip: {
            trigger: 'axis',
            formatter: "{a} <br/>{b} :({c}%)"
            formatter: '{a} <br/>{b} :({c}%)'
          },
          toolbox: {
            show: true,
@@ -225,12 +230,12 @@
              }
            }
          ]
        };
        dayAvailBar.setOption(dayAvailBarOption);
        }
        dayAvailBar.setOption(dayAvailBarOption)
      },
      disabledDate(current){
        //Can not slect days before today and today
        return current && current > moment().subtract('days', 1);
        return current && current > moment().subtract('days', 1)
      },
      dataChange(val) {
        this.queryParam.dateTime = val.format('YYYYMMDD')
@@ -249,6 +254,7 @@
        // console.log(v2[0],v2[1])
      },
      loadAnalysis(){
        this.loading = true
        getAction(this.url.dayUtilizationRate,this.queryParam).then(res => {
          if (res.success) {
            this.spaceTime.push(res.result.dataList)
@@ -262,7 +268,7 @@
            this.$notification.warning({
              message:'消息',
              description:res.message
            });
            })
          }
        }).finally(() => {
          this.loading = false
@@ -277,21 +283,20 @@
      },
      searchQuery(){
        if(this.queryParam.dateTime){
          this.loading = true
          this.spaceTime = []
          this.useingRates = []
          if(this.queryParams.typeTree == "1"){
          if (this.queryParams.typeTree == '1') {
            this.queryParams.parentId =  this.queryParamEquip.parentId
            // this.queryParams.equipmentId =  this.queryParamEquip.equipmentId

          }else{
            this.queryParams.parentId = this.queryParamEquip.parentId

            // this.queryParams.equipmentId = ""
          }
          this.AnalysisList = [];
          this.AnalysisList = []
          //获取查询条件
          this.queryParam.parentId = this.queryParams.parentId;
          this.queryParam.equipmentId = this.queryParams.equipmentId;
          this.queryParam.parentId = this.queryParams.parentId
          this.queryParam.equipmentId = this.queryParams.equipmentId
          this.queryParam.typeTree = this.queryParams.typeTree
          getAction(this.url.dayUtilizationRate,this.queryParam).then((res) => {
            if(res.success){
@@ -305,7 +310,7 @@
              this.$notification.warning({
                message:'消息',
                description:res.message
              });
              })
            }
          }).finally(() => {
            this.loading = false
@@ -314,14 +319,13 @@
          this.$notification.warning({
            message:'消息',
            description:'请选择时间'
          });
          })
        }

      },
      searchReset() {
        this.spaceTime = []
        this.useingRates = []
        if(this.queryParams.typeTree == "1"){
        if (this.queryParams.typeTree == '1') {
          this.typeTree = this.queryParams.typeTree
          this.typeParent =  this.queryParams.parentId
          this.typeEquipment = this.queryParams.equipmentId
@@ -329,8 +333,8 @@
          this.queryParam = {}
          this.queryParams.typeTree = this.typeTree
          this.queryParams.parentId = this.typeParent
          if(this.queryParams.parentId !=  ""){
            this.queryParams.equipmentId =  ""
          if (this.queryParams.parentId != '') {
            this.queryParams.equipmentId = ''
            this.initEquipment()
          }else{
            if(this.queryParams.equipmentId == this.queryParamEquip.equipmentId){
@@ -351,7 +355,7 @@
              this.$notification.warning({
                message:'消息',
                description:res.message
              });
              })
            }
          }).finally(() => {
            this.loading = false
@@ -365,8 +369,8 @@
          this.dates = []
          this.queryParams.typeTree = this.typeTree
          this.queryParams.parentId = this.typeParent
          if(this.queryParams.parentId !=  ""){
            this.queryParams.equipmentId =  ""
          if (this.queryParams.parentId != '') {
            this.queryParams.equipmentId = ''
            this.initEquipment()
          }else{
            if(this.queryParams.equipmentId == this.queryParamEquip.equipmentId){
@@ -387,7 +391,7 @@
              this.$notification.warning({
                message:'消息',
                description:res.message
              });
              })
            }
          }).finally(() => {
            this.loading = false
@@ -413,14 +417,14 @@
              _this.$notification.warning({
                message:'消息',
                description:'请联系管理员，开放设备权限！'
              });
              })
            }
          }else{
            // this.$message.warning(res.message)
            _this.$notification.warning({
              message:'消息',
              description:res.message
            });
            })

          }
        })
@@ -443,29 +447,28 @@
              _this.$notification.warning({
                message:'消息',
                description:'请联系管理员，开放设备权限！'
              });
              })
            }
          }else{
            // this.$message.warning(res.message)
            _this.$notification.warning({
              message:'消息',
              description:res.message
            });
            })
          }
        })
      }
    },
    created() {
      let collectTime = moment(moment().add(-1,'d'),'YYYY-MM-DD');
      let collectTime = moment(moment().add(-1, 'd'), 'YYYY-MM-DD')


      this.queryParams.collectTime = collectTime;
      this.queryParams.collectTime = collectTime

      this.queryParam.dateTime = this.queryParams.collectTime.format('YYYYMMDD')
      this.queryParams.typeTree = '1'
      this.initEquipment()

    },
    }
  }
</script>

@@ -478,30 +481,35 @@
      overflow: scroll;
    }
  }

  @media screen and (min-width: 1680px) and (max-width: 1920px){
    .device_list{
      height: 811px!important;
      overflow: scroll;
    }
  }

  @media screen and (min-width: 1400px) and (max-width: 1680px){
    .device_list{
      height: 663px!important;
      overflow: scroll;
    }
  }

  @media screen and (min-width: 1280px) and (max-width: 1400px){
    .device_list{
      height: 564px!important;
      overflow: scroll;
    }
  }

  @media screen and (max-width: 1280px){
    .device_list{
      height: 564px!important;
      overflow: scroll;
    }
  }

  /*.device_list{*/
  /*display: flex;*/
  /*}*/
@@ -511,14 +519,17 @@
  /deep/ .ant-card-body{
    height: 100%!important;
  }

  .device_list .com_box{
    display: flex!important;
    height: 100%!important;
    flex-direction: column!important;
  }

  .device_list .table-page-search-wrapper{
    height: 6%!important;
  }

  .device_list #DeviceList{
    height: 90%!important;
  }