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

zhuzhuanzhuan

2023-10-10 de0d853f5d199389508054e330340995d9da858b

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

 package.json

@@ -41,6 +41,7 @@
    "vue-area-linkage": "^5.1.0",
    "vue-calendar-component": "^2.8.2",
    "vue-cropper": "^0.5.4",
    "vue-drag-resize": "^1.5.4",
    "vue-i18n": "^8.7.0",
    "vue-loader": "^15.7.0",
    "vue-ls": "^3.2.0",

 src/main.js

@@ -72,6 +72,9 @@
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

import VueDragResize from "vue-drag-resize"
Vue.component('vue-drag-resize', VueDragResize)

// import 'echarts-liquidfill'
Vue.prototype.$echarts = echarts
Vue.prototype.$qs = qs

 src/views/WorkshopSignage.vue

@@ -8,17 +8,54 @@
    </header>

    <dv-border-box-8 class="content-container">
      <div v-for="item in deviceList" :key="item.equipmentId" class="single-device"
           :style="{top:item.top+'px',left:item.left+'px',height:'135px',width:'175px'}" @mousedown="handleMouseDown"
           :id="item.equipmentId">
      <!--<div v-for="item in deviceList" :key="item.equipmentId" class="single-device"-->
      <!--:style="{top:item.top+'px',left:item.left+'px',height:'135px',width:'175px'}" @mousedown="handleMouseDown"-->
      <!--:id="item.equipmentId">-->
      <!--<div class="device-status">-->
      <!--<img v-if="item.status==0" src="@/assets/yellow.png" draggable="false">-->
      <!--<img v-if="item.status==1" src="@/assets/red.png" draggable="false">-->
      <!--<img v-if="item.status==2" src="@/assets/gray.png" draggable="false">-->
      <!--<img v-if="item.status==3" src="@/assets/green.png" draggable="false">-->
      <!--<img :src="item.equipmentImageUrl" draggable="false">-->
      <!--</div>-->
      <!--<div class="device-id">{{item.equipmentId}}</div>-->
      <!--&lt;!&ndash;<div draggable="false" class="device-info">&ndash;&gt;-->
      <!--&lt;!&ndash;<div v-if="item.status==0" class="status-square" style="background-color: gray"></div>&ndash;&gt;-->
      <!--&lt;!&ndash;<div v-if="item.status==1" class="status-square" style="background-color: red"></div>&ndash;&gt;-->
      <!--&lt;!&ndash;<div v-if="item.status==2" class="status-square" style="background-color: green"></div>&ndash;&gt;-->
      <!--&lt;!&ndash;<div v-if="item.status==3" class="status-square" style="background-color: yellow"></div>&ndash;&gt;-->
      <!--&lt;!&ndash;<div class="device-id">{{item.equipmentId}}</div>&ndash;&gt;-->
      <!--&lt;!&ndash;</div>&ndash;&gt;-->
      <!--&lt;!&ndash;</div>&ndash;&gt;-->
      <!--</div>-->
      <VueDragResize v-for="(item,index) in deviceList" :key="item.equipmentId" :w="item.vw"
                     :h="item.vh" :x="item.left" :y="item.top"
                     v-on:resizing="resize($event,index)"
                     v-on:dragging="resize($event,index)"
                     :parentLimitation="true"
                     :minw="175"
                     :minh="135"
                     :id="item.equipmentId"

      >
        <div class="single-device"
             :style="{width: + item.vw+ 'px',height:+item.vh+'px'}">
        <div class="device-status">
          <img v-if="item.status==0" src="@/assets/yellow.png" draggable="false">
          <img v-if="item.status==1" src="@/assets/red.png" draggable="false">
          <img v-if="item.status==2" src="@/assets/gray.png" draggable="false">
          <img v-if="item.status==3" src="@/assets/green.png" draggable="false">
          <img :src="item.equipmentImageUrl" draggable="false">
            <div v-if="item.status==0"
                 :style="{backgroundImage:`url(${require('@/assets/yellow.png')})`}" class="status-image"></div>
            <div v-if="item.status==1" :style="{backgroundImage:`url(${require('@/assets/red.png')})`}"
                 class="status-image"></div>
            <div v-if="item.status==2" :style="{backgroundImage:`url(${require('@/assets/gray.png')})`}"
                 class="status-image"></div>
            <div v-if="item.status==3" :style="{backgroundImage:`url(${require('@/assets/green.png')})`}"
                 class="status-image"></div>
            <div
              :style="{backgroundImage:`url(${item.equipmentImageUrl})`}"
              class="device-image"></div>
        </div>
        <div class="device-id">{{item.equipmentId}}</div>
          <div class="device-id" :style="{fontSize: item.fontSize+'px'}">
            {{item.equipmentId}}
          </div>
        <!--<div draggable="false" class="device-info">-->
        <!--<div v-if="item.status==0" class="status-square" style="background-color: gray"></div>-->
        <!--<div v-if="item.status==1" class="status-square" style="background-color: red"></div>-->
@@ -27,20 +64,23 @@
        <!--<div class="device-id">{{item.equipmentId}}</div>-->
        <!--</div>-->
      </div>
      <!--<div style="width: 175px;height: 135px;background-color: red;position: absolute;top: 200px;left: 100px"></div>-->
      </VueDragResize>
    </dv-border-box-8>
  </dv-full-screen-container>
</template>

<script>
  import VueDragResize from 'vue-drag-resize'

  export default {
    components: {
      VueDragResize
    },
    data() {
      return {
        mouseX: 0, // 鼠标在元素内的X坐标
        mouseY: 0, // 鼠标在元素内的Y坐标,
        dragging: false, //是否在拖拽中
        left: 0, // 元素左上角距离父容器左侧的距离
        top: 0, // 元素左上角距离父容器顶部的距离,
        elementId: '',// 被拖拽元素的id属性值
        elementWidth: '',
        elementHeight: '',
@@ -50,6 +90,9 @@
            equipmentImageUrl: require('@/assets/8.png'),
            top: 200,
            left: 100,
            vw: 175,
            vh: 135,
            fontSize: 20,
            status: 1
          },
          {
@@ -57,6 +100,9 @@
            equipmentImageUrl: require('@/assets/8.png'),
            top: 500,
            left: 753,
            vw: 175,
            vh: 135,
            fontSize: 20,
            status: 0
          },
          {
@@ -64,6 +110,9 @@
            equipmentImageUrl: require('@/assets/8.png'),
            top: 300,
            left: 860,
            vw: 175,
            vh: 135,
            fontSize: 20,
            status: 2
          },
          {
@@ -71,6 +120,9 @@
            equipmentImageUrl: require('@/assets/8.png'),
            top: 100,
            left: 380,
            vw: 175,
            vh: 135,
            fontSize: 20,
            status: 3
          },
          {
@@ -78,6 +130,9 @@
            equipmentImageUrl: require('@/assets/8.png'),
            top: 200,
            left: 1500,
            vw: 175,
            vh: 135,
            fontSize: 20,
            status: 2
          }
        ]
@@ -170,7 +225,23 @@
       */
      saveDevicePositionByApi() {
        console.log('保存位置')

      },
      /**
       * 设备拖拽或缩放时触发事件
       * @param newRect 拖拽或缩放后的尺寸及距离
       * @param index 拖拽设备在数组中的下标
       */
      resize(newRect, index) {
        console.log('newRect', newRect)
        if (newRect.width > 200) {
          this.deviceList[index].fontSize = newRect.width / 10
        } else {
          this.deviceList[index].fontSize = 20
        }
        this.deviceList[index].top = newRect.top
        this.deviceList[index].left = newRect.left
        this.deviceList[index].vw = newRect.width
        this.deviceList[index].vh = newRect.height
      }
    },
    mounted() {
@@ -215,15 +286,28 @@
        justify-content: space-between;
        cursor: default;
        &:active {
          border: 1px solid #00b3ff;
          border: 1px solid #1890ff;
        }
        .device-status {
          width: 145px;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-between;
          .status-image {
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 45px;
            margin-right: 10px;
          }
          .device-image {
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 100%;
            height: 100%;
          }
        }
        .device-id {
          font-size: 20px;
          /*font-size: 20px;*/
        }
        /*.device-info {*/
        /*width: 100%;*/

 src/views/mdc/base/modules/alarmAnalysis/alarmAnalysisMain.vue

@@ -7,7 +7,8 @@
          <a-row :gutter="24">
            <a-col :md="6" :sm="6">
              <a-form-item label="时间">
                <a-range-picker @change="dateParamChange" :disabledDate="disabledDate" format="YYYYMMDD" v-model="dates"/>
                <a-range-picker @change="dateParamChange" :disabledDate="disabledDate" format="YYYYMMDD"
                                v-model="dates"/>
              </a-form-item>
            </a-col>
            <a-col :lg="2" :md="3" :sm="3" :xs="3">
@@ -20,13 +21,21 @@
        <div class="openRateTrendDg">
          <div id="Efficiency" class="container" style="margin-top: 20px;">
            <div class="table2">
              <table class="dataContent table" border="1" cellspacing="0" cellpadding="0" style="white-space: nowrap;text-align: left;">
              <table class="dataContent table" border="1" cellspacing="0" cellpadding="0"
                     style="white-space: nowrap;text-align: left;">
                <thead>
                <tr class="thead fixed equipname">
                  <th class="thgu dong1 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;">报警号</th>
                  <th class="thgu dong2 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;">出现次数</th>
                  <th class="thgu dong3 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;">合计持续时间（秒）</th>
                  <th class="thgu dong4 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">报警信息</th>
                  <th class="thgu dong1 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;">报警号
                  </th>
                  <th class="thgu dong2 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;">
                    出现次数
                  </th>
                  <th class="thgu dong3 name" rowspan="2" style="min-width: 150px; max-width: 150px;width: 150px;">
                    合计持续时间（秒）
                  </th>
                  <th class="thgu dong4 name" rowspan="2" style="min-width: 100px; max-width: 100px;width: 100px;">
                    报警信息
                  </th>
                  <!--<template v-for="(tableHead, index) in tableHeads">-->
                    <!--<th class="timeth" :colspan="checkedList.length">{{tableHead}}</th>-->
                  <!--</template>-->
@@ -65,6 +74,7 @@
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'

  export default {
    // mixins: [JeecgListMixin],
    name: 'alarmAnalysisMain',
@@ -74,7 +84,7 @@
        dataSource: [],
        /* table加载状态 */
        loading: false,
        typeTree: "",
        typeTree: '',
        typeParent: 1,
        typeEquipment: 1,
        TreeIDOne: 1,
@@ -104,7 +114,7 @@
        tableHeads: [],
        pieDate:[0],
        XData:[0],
        YData:[0],
        YData: [0]
      }
    },
    props: { nodeTree: '', Type: '', nodePeople: '' },
@@ -115,7 +125,7 @@
      this.dates = [moment().subtract('days', 8), moment().subtract('days', 1)]
      this.queryParam.startDate = moment(this.dates[0]).format('YYYYMMDD')
      this.queryParam.endDate = moment(this.dates[1]).format('YYYYMMDD')
      this.queryParam.typeTree = "1"
      this.queryParam.typeTree = '1'
      this.loadData1()

    },
@@ -124,7 +134,7 @@
    },
    watch: {
      Type(valmath) {
        this.dataList = [];
        this.dataList = []
        this.queryParam.typeTree = valmath
      },
      nodeTree(val) { //监听currSelected 变化，将变化后的数值传递给 getCurrSelected 事件
@@ -180,7 +190,10 @@
        getAction(that.url.alarmTrend, that.queryParam).then(res => {
          if (res.success) {
            for (var i = 0;i<res.result.equipmentCountList.length;i++){
              that.pieDate.push({name:res.result.equipmentCountList[i].key,value:res.result.equipmentCountList[i].count})
              that.pieDate.push({
                name: res.result.equipmentCountList[i].key,
                value: res.result.equipmentCountList[i].count
              })
            }
            for (var j = 0;j<res.result.dateCountList.length;j++){
              that.XData.push(res.result.dateCountList[j].key)
@@ -202,7 +215,7 @@
      },
      disabledDate(current) {
        //Can not slect days before today and today
        return current && current > moment().subtract('days', 1);
        return current && current > moment().subtract('days', 1)
      },
      initDeviceType(deviceList) {
        let dictCode = 'mdc_equipmentType'
@@ -237,12 +250,12 @@
      },
      searchQuery() {
        if (this.dates&&this.dates.length>0){
          if (this.queryParam.typeTree == "1") {
          if (this.queryParam.typeTree == '1') {
            this.queryParam.parentId = this.queryParamEquip.parentId
            this.queryParam.equipmentId = this.queryParamEquip.equipmentId
          } else {
            this.queryParam.parentId = this.queryParamPeople.parentId
            this.queryParam.equipmentId = ""
            this.queryParam.equipmentId = ''
          }
          this.loadData1()
        } else{
@@ -341,7 +354,7 @@
        })
      },
      drawWrin(){
        let equipmentWarningPie = this.$echarts.init(document.getElementById('MdcEquipmentWarningPie'), 'macarons');
        let equipmentWarningPie = this.$echarts.init(document.getElementById('MdcEquipmentWarningPie'), 'macarons')
        let equipmentWarningPieOption = {
          title: {
            text: '各设备出现此报警的比例',
@@ -350,7 +363,7 @@
          },
          tooltip: {
            trigger: 'item',
            formatter: "<br/>{b} : {c} ({d}%)"
            formatter: '<br/>{b} : {c} ({d}%)'
          },
          calculable: true,
          series: [{
@@ -373,9 +386,9 @@
            data:this.pieDate
            // data:[{name:'jjjjjjj',value:'2'}]
          }]
        };
        equipmentWarningPie.setOption(equipmentWarningPieOption,true);
        let equipmentWarningLine = this.$echarts.init(document.getElementById('MdcEquipmentWarningLine'), 'macarons');
        }
        equipmentWarningPie.setOption(equipmentWarningPieOption, true)
        let equipmentWarningLine = this.$echarts.init(document.getElementById('MdcEquipmentWarningLine'), 'macarons')
        let equipmentWarningLineOption = {
          title : {
            text: '每天出现此报警的数量走势',
@@ -383,7 +396,7 @@
            y: 'bottom'
          },
          tooltip:{
            trigger: 'item'
            trigger: 'axis'
          },
          calculable: true,
          xAxis: [
@@ -415,8 +428,8 @@
              }
            }
          ]
        };
        equipmentWarningLine.setOption(equipmentWarningLineOption,true);
        }
        equipmentWarningLine.setOption(equipmentWarningLineOption, true)
      }
    }
  }
@@ -456,28 +469,31 @@
  .dataContent tr td {
    height: 35px;
  }

  .dataContent .mathData:hover td{
    background-color: #e6f7ff;
  }

  .dataContent .mathData td {
    padding: 10px;
    /*display: none;*/
  }

  .dataContent .mathData .td {
  .dataContent .mathData td {
    /*background-color: #ff9bd2;*/
    display: inline-block;
    padding: 10px;
    cursor: pointer;
  }

  .dataContent .mathData .tdd {
    /*display: none;*/
  }

  .table2{
    width: 100%;
    height: 100%;
    overflow: auto;
  }

  /*tr th {*/
  /*height: 50px!important;*/
  /*}*/
@@ -490,70 +506,85 @@
    left: 0;
    z-index: 1;
  }

  .table tbody tr .kaitou{
    z-index: 1;
    background-color: white;
  }

  .table tbody tr .tdgu1{
    position: sticky;
    left: 150px;
    z-index: 2;
  }

  .table tbody tr .tdgu2{
    position: sticky;
    left: 300px;
    z-index: 2;
  }

  .table tbody tr .tdgu3{
    position: sticky;
    left: 450px;
    z-index: 2;
  }

  .table tbody tr .tdgu4{
    position: sticky;
    left: 550px;
    z-index: 2;
  }

  .table tbody tr .tdgu5{
    position: sticky;
    left: 700px;
    z-index: 2;
  }

  .table2 thead tr .timeth,
  .table2 thead tr  .thgu {
    position: sticky;
    top:0;
    z-index: 3;
  }

  .table2 thead .gudingth th{
    position: sticky;
    top: 32px;
    z-index: 6!important;
  }

  .table2 thead .equipname .name{
    z-index: 3;
  }

  .table2 thead .equipname .dong1{
    z-index: 4;
    left: 0;
    /*border: 1px solid #000;*/
  }

  .table2 thead .equipname .dong2{
    z-index: 5;
    left: 150px;
  }

  .table2 thead .equipname .dong3{
    z-index: 5;
    left: 300px;
  }

  .table2 thead .equipname .dong4{
    z-index: 5;
    left: 450px;
  }

  .table2 thead .equipname .dong5{
    z-index: 5;
    left: 550px;
  }

  .table2 thead .equipname .dong6{
    z-index: 5;
    left: 700px;
@@ -565,45 +596,54 @@
      overflow: scroll;
    }
  }

  @media screen and (min-width: 1680px) and (max-width: 1920px){
    #Efficiency{
      height: 337px!important;
      overflow: scroll;
    }
  }

  @media screen and (min-width: 1400px) and (max-width: 1680px){
    #Efficiency{
      height: 190px!important;
      overflow: scroll;
    }
  }

  @media screen and (min-width: 1280px) and (max-width: 1400px){
    #Efficiency{
      height: 90px!important;
      overflow: scroll;
    }
  }

  @media screen and (max-width: 1280px){
    #Efficiency{
      height: 90px!important;
      overflow: scroll;
    }
  }

  #Efficiency .table_guding1{
    position: absolute;
    overflow: hidden;
    width: 500px;
  }

  #Efficiency .table_guding2{
    overflow-x: scroll;
    width: 500px;
  }

  /deep/ .ant-card{
    height: 100%!important;
  }

  /deep/ .ant-card .ant-card-body{
    height: 100%!important;
  }

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

 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;
  }