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

zhuzhuanzhuan

2023-10-08 b70dab217e5ebcab6d98196cc2d4b2ffb842c3a1

1、优化车间看板四色灯状态展示以及限制拖拽区域
2、部分页面右侧区域元素位置离顶过高，调整布局
3、增加设备日志页面增加点击表格行数据展示当前行工作曲线功能
4、优化设备日志页面切换时间，工作曲线弹窗中的时间随之切换
5、优化设备日志页面加载后首次点击工作曲线后无法查询到数据问题（同时发送异步请求，先后顺序影响）

 src/config/router.config.js

@@ -12,7 +12,6 @@
    meta: { title: '首页' },
    redirect: '/dashboard/analysis',
    children: [

      // // dashboard
      // {
      //   path: '/dashboard',
@@ -373,8 +372,8 @@
    ]
  },
  {
    path:'/testWorkshop',
    component:()=>import('@/views/TestWorkshop.vue')
    path:'/workshopSignage/:workshopId',
    component:()=>import('@/views/WorkshopSignage.vue')
  },
  {
    path: '/404',

 src/views/TestWorkshop.vue

ÎļþÒÑɾ³ý

 src/views/WorkshopSignage.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,243 @@
<template>
  <dv-full-screen-container class="full-screen-container">
    <header class="page-header">
      {{getWorkshopName}}
      <div class="header-right">
        <a-button type="primary" icon="save" size="large" @click="saveDevicePositionByApi">保存位置</a-button>
      </div>
    </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 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>
        <!--<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>-->
        <!--<div v-if="item.status==2" class="status-square" style="background-color: green"></div>-->
        <!--<div v-if="item.status==3" class="status-square" style="background-color: yellow"></div>-->
        <!--<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>-->
    </dv-border-box-8>
  </dv-full-screen-container>
</template>

<script>
  export default {
    data() {
      return {
        mouseX: 0, // é¼ æ ‡åœ¨å…ƒç´ å†…çš„X坐标
        mouseY: 0, // é¼ æ ‡åœ¨å…ƒç´ å†…çš„Y坐标,
        dragging: false, //是否在拖拽中
        left: 0, // å…ƒç´ å·¦ä¸Šè§’距离父容器左侧的距离
        top: 0, // å…ƒç´ å·¦ä¸Šè§’距离父容器顶部的距离,
        elementId: '',// è¢«æ‹–拽元素的id属性值
        elementWidth: '',
        elementHeight: '',
        deviceList: [
          {
            equipmentId: '123213213123232',
            equipmentImageUrl: require('@/assets/8.png'),
            top: 200,
            left: 100,
            status: 1
          },
          {
            equipmentId: '512346789561232',
            equipmentImageUrl: require('@/assets/8.png'),
            top: 500,
            left: 753,
            status: 0
          },
          {
            equipmentId: '64746965647653',
            equipmentImageUrl: require('@/assets/8.png'),
            top: 300,
            left: 860,
            status: 2
          },
          {
            equipmentId: '33548976965462',
            equipmentImageUrl: require('@/assets/8.png'),
            top: 100,
            left: 380,
            status: 3
          },
          {
            equipmentId: '85484913549253',
            equipmentImageUrl: require('@/assets/8.png'),
            top: 200,
            left: 1500,
            status: 2
          }
        ]
      }
    },
    computed: {
      getWorkshopName() {
        switch (this.$route.params.workshopId) {
          case '5321':
            return '长沙车间'
          case '6312':
            return '天津车间'
          case '3463':
            return '武汉车间'
          case '8421':
            return '北京车间'
          default:
            return '测试车间'
        }
      }
    },
    methods: {
      /**
       * é€šè¿‡è½¦é—´Id调用接口获取设备列表
       * @param workshopId è½¦é—´Id
       */
      getDeviceListByApi(workshopId) {
        console.log('车间Id', workshopId)
      },
      /**
       * æ‹–拽对象鼠标按键按下事件
       * @param event
       */
      handleMouseDown(event) {
        this.dragging = true
        this.mouseX = event.clientX
        this.mouseY = event.clientY
        this.elementId = event.currentTarget.id
        this.top = event.currentTarget.offsetTop
        this.left = event.currentTarget.offsetLeft
        document.addEventListener('mousemove', this.handleMouseMove)
        document.addEventListener('mouseup', this.handleMouseUp)
        this.elementWidth = +event.currentTarget.style.width.replace('px', '')
        this.elementHeight = +event.currentTarget.style.height.replace('px', '')
      },
      /**
       * æ–‡æ¡£å¯¹è±¡é¼ æ ‡ç§»åŠ¨äº‹ä»¶
       * @param event
       */
      handleMouseMove(event) {
        if (this.dragging) {
          // x方向鼠标偏移量
          const deltaX = event.clientX - this.mouseX
          // y方向鼠标偏移量
          const deltaY = event.clientY - this.mouseY
          this.left += deltaX
          this.top += deltaY
          this.deviceList.forEach(item => {
            if (item.equipmentId === this.elementId) {
              item.top = this.top
              item.left = this.left
              // é™åˆ¶æ‹–拽超出区域(缩放浏览器窗口后距四周距离出现问题)
              if (item.top < 0) {
                item.top = 0
              } else if (item.top + this.elementHeight + 80 > window.innerHeight) {
                item.top = window.innerHeight- this.elementHeight
              }
              if (item.left < 0) {
                item.left = 0
              } else if (item.left + this.elementWidth > window.innerWidth) {
                item.left = window.innerWidth - this.elementWidth
              }
            }
          })
          this.mouseX = event.clientX
          this.mouseY = event.clientY
        }
      },
      /**
       * æ–‡æ¡£å¯¹è±¡é¼ æ ‡æŒ‰é”®å¼¹èµ·äº‹ä»¶
       * @param event
       */
      handleMouseUp(event) {
        this.dragging = false
        document.removeEventListener('mousemove', this.handleMouseMove)
        document.removeEventListener('mouseup', this.handleMouseUp)
      },
      /**
       * ç‚¹å‡»ä¿å­˜æŒ‰é’®è°ƒç”¨æŽ¥å£ä¿å­˜æ‹–拽后的位置
       */
      saveDevicePositionByApi() {
        console.log('保存位置')

      }
    },
    mounted() {
      // ç¦æ­¢ç”¨æˆ·é€‰ä¸­å†…容
      document.onselectstart = () => false
    },
    created() {
      if (this.$route.params.workshopId) {
        this.getDeviceListByApi(this.$route.params.workshopId)
      }
    }
  }
</script>

<style scoped lang="less">
  .full-screen-container {
    background-image: url('../assets/Bj.jpg');
    background-size: 100% 100%;
    color: #fff;

    .page-header {
      height: 80px;
      font-size: 50px;
      text-align: center;
      position: relative;
      .header-right {
        position: absolute;
        right: 200px;
        top: 0;
      }
    }

    .content-container {
      position: relative;
      .single-device {
        position: absolute;
        border: 1px solid transparent;
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        cursor: default;
        &:active {
          border: 1px solid #00b3ff;
        }
        .device-status {
          width: 145px;
          display: flex;
          justify-content: space-between;
        }
        .device-id {
          font-size: 20px;
        }
        /*.device-info {*/
        /*width: 100%;*/
        /*display: flex;*/
        /*align-items: center;*/
        /*justify-content: space-between;*/
        /*.status-square {*/
        /*width: 14px;*/
        /*height: 14px;*/
        /*border: 1px solid #fff;*/
        /*border-radius: 2px;*/
        /*}*/
        /*}*/
      }
    }
  }
</style>

 src/views/dashboard/Analysis.vue

@@ -11,17 +11,19 @@
        <!--&lt;!&ndash;<a-radio :value="3">任务表格</a-radio>&ndash;&gt;-->
      <!--&lt;!&ndash;</a-radio-group>&ndash;&gt;-->
    <!--</div>-->
    <a-button type="primary" @click="navigateToTestWorkshop">跳转至测试车间</a-button>
    <a-button type="primary" size="large" v-for="item in workshopList" :key="item.workshopId"
              @click="navigateToWorkshopSignage(item.workshopId)">{{item.workshopName}}
    </a-button>
  </div>
</template>

<script>
  import IndexChart from './IndexChart'
  import IndexTask from "./IndexTask"
  import IndexTask from './IndexTask'
  import IndexBdc from './IndexBdc'

  export default {
    name: "Analysis",
    name: 'Analysis',
    components: {
      IndexChart,
      IndexTask,
@@ -29,15 +31,33 @@
    },
    data() {
      return {
        indexStyle:1
        indexStyle: 1,
        workshopList: [
          {
            workshopName: '长沙车间',
            workshopId: '5321'
          },
          {
            workshopName: '天津车间',
            workshopId: '6312'
          },
          {
            workshopName: '武汉车间',
            workshopId: '3463'
          },
          {
            workshopName: '北京车间',
            workshopId: '8421'
          }
        ]
      }
    },
    created() {

    },
    methods: {
      navigateToTestWorkshop(){
        const url=this.$router.resolve('/testWorkshop').href
      navigateToWorkshopSignage(workshopId) {
        const url = this.$router.resolve(`/workshopSignage/${workshopId}`).href
        window.open(url,'_blank')
      }
    }

 src/views/mdc/base/modules/HolidayManagement/HolidayManagementList.vue

@@ -1,5 +1,5 @@
<template>
  <a-card :bordered="false" class="device_list">
  <div :bordered="false" class="device_list">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div style="width: 100%; background-color: #fff" class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
@@ -79,7 +79,7 @@
    <holiday-management-modal ref="modalForm" @ok="modalFormOk"></holiday-management-modal>
    <holiday-management-modal-edit  ref="modalFormedit" @ok="modalFormOk"></holiday-management-modal-edit>

  </a-card>
  </div>
</template>

<script>

 src/views/mdc/base/modules/OvertimeManagement/OvertimeManagementList.vue

@@ -1,5 +1,5 @@
<template>
  <a-card :bordered="false" class="device_list">
  <div :bordered="false" class="device_list">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div style="width: 100%; background-color: #fff" class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
@@ -83,8 +83,7 @@
    <!--<device-repair-model-add  ref="modalFormadd" @ok="modalFormOk"></device-repair-model-add>-->
    <!--<device-repair-model-edit ref="modalFormedit" @ok="modalFormOk"></device-repair-model-edit>-->
    <!--<repair-model ref="repairModelFrom" @ok="modalFormOk"></repair-model>-->

  </a-card>
  </div>
</template>

<script>

 src/views/mdc/base/modules/TorqueconfigurationList/TorqueconfigurationList.vue

@@ -1,5 +1,5 @@
<template>
  <a-card :bordered="false" class="device_list">
  <div :bordered="false" class="device_list">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div style="width: 100%; background-color: #fff" class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
@@ -83,7 +83,7 @@
    <!--<device-repair-model-edit ref="modalFormedit" @ok="modalFormOk"></device-repair-model-edit>-->
    <!--<repair-model ref="repairModelFrom" @ok="modalFormOk"></repair-model>-->

  </a-card>
  </div>
</template>

<script>

 src/views/mdc/base/modules/UnplannedDowntimemManager/UnplannedDowntimemManagerList.vue

@@ -1,5 +1,5 @@
<template>
  <a-card :bordered="false" class="device_list">
  <div :bordered="false" class="device_list">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div style="width: 100%; background-color: #fff" class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
@@ -81,7 +81,7 @@
    <plan-downtime-maintenance-modal ref="modalForm" @ok="modalFormOk"></plan-downtime-maintenance-modal>
    <plan-downtime-maintenance-modal-edit  ref="modalFormedit" @ok="modalFormOk"></plan-downtime-maintenance-modal-edit>

  </a-card>
  </div>
</template>

<script>

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

@@ -1,6 +1,6 @@
<template>
  <div class="efficiency_list" style="width: 100%;height: 100%;">
    <a-card :bordered="false">
    <div :bordered="false" style="height: 100%">
      <!-- æŸ¥è¯¢åŒºåŸŸ -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
@@ -52,7 +52,7 @@
          <div id="MdcEquipmentWarningLine" style="height: 100%;width: 65%;"></div>
        </div>
      </div>
    </a-card>
    </div>
  </div>
</template>


 src/views/mdc/base/modules/comparativeAnalysis/comparativeAnalysismain.vue

@@ -1,5 +1,5 @@
<template>
  <a-card :bordered="false" class="device_list">
  <div :bordered="false" class="device_list">
    <div class="com_box">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div style="width: 100%; background-color: #fff" class="table-page-search-wrapper">
@@ -53,7 +53,7 @@
    </div>
    <!-- table区域-end -->
    </div>
  </a-card>
  </div>
</template>

<script>

 src/views/mdc/base/modules/deviceCalendar/DeviceCalendarList.vue

@@ -1,6 +1,6 @@
<template>
  <div class="deviceCalendar_list">
    <a-card :bordered="false">
    <div :bordered="false">
      <!-- æŸ¥è¯¢åŒºåŸŸ -->

      <div>
@@ -47,7 +47,7 @@
        </a-table>
      </div>
      <device-calendar-model ref="modalForm" @ok="modalFormOk"></device-calendar-model>
    </a-card>
    </div>
  </div>
</template>


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

@@ -16,7 +16,8 @@
          </a-col>
          <a-col :md="6" :sm="6">
            <a-form-item label="日期">
              <a-date-picker v-model="queryParams.collectTime" :disabledDate="disabledDate" @change="dataChange" format='YYYY-MM-DD'/>
              <a-date-picker v-model="queryParams.collectTime" :disabledDate="disabledDate" @change="dataChange"
                             format='YYYY-MM-DD'/>
            </a-form-item>
          </a-col>
          <a-col :md="3" :sm="3">
@@ -150,7 +151,8 @@
        </a-tabs>
      </div>
    </div>
    <work-chart-model ref="workChartModel"></work-chart-model>
    <work-chart-model ref="workChartModel" :collectTime="this.queryParams.collectTime"
                      :equipment="this.equipment"></work-chart-model>
    <work-history-model ref="workHistoryModel"></work-history-model>
  </div>
</template>
@@ -182,7 +184,7 @@
        middleTime: '',
        queryParam:{},
        queryParams: {
          collectTime:undefined,
          collectTime: undefined
        },
        loadingstayus:false,
        loadingrunStatus:false,
@@ -225,20 +227,20 @@
      },
      disabledDate(current){
        //Can not slect days before today and today
        return current && current > moment().subtract('days', 0);
        return current && current > moment().subtract('days', 0)
      },
      queryChart() {
        // this.normal = []
        // this.waring = []
        this.loadingstayus = true;
        this.loadingrunStatus = true;
        this.loadingstayus = true
        this.loadingrunStatus = true
        this.loadingwarnStatus = true
        getAction(this.url.list, this.queryParams).then((res) => {
          this.normalList = []
          this.waringList = []
          this.runList = []
          this.loadingstayus = false;
          this.loadingrunStatus = false;
          this.loadingstayus = false
          this.loadingrunStatus = false
          this.loadingwarnStatus = false
          this.normal = []
          this.waring = []
@@ -329,8 +331,8 @@
          if(!this.queryParams.equipmentId||!this.queryParams.equipmentName){
            this.$notification.warning({
              message:'消息',
              description:"请选择设备"
            });
              description: '请选择设备'
            })
            return false
          }
          this.queryChart()
@@ -339,8 +341,8 @@
          console.log('触发提示')
          this.$notification.warning({
            message:'消息',
            description:"请选择时间"
          });
            description: '请选择时间'
          })
        }
        // this.queryList()
      },
@@ -358,13 +360,14 @@
          // this.$message.warning("请选择设备进行查询")
          this.$notification.warning({
            message:'消息',
            description:"请选择设备进行查询"
          });
            description: '请选择设备进行查询'
          })
        }else{
          // åˆ¤æ–­æ˜¯å¦ç‚¹å‡»è®¾å¤‡æ—¥å¿—表格行的数据，此时为点击表格数据为false
          this.$refs.workChartModel.isClicklogListRow = false
          this.$refs.workChartModel.add(this.equipment)
          this.$refs.workChartModel.title = '工作曲线'
        }

      },
      openHistoryChart() {
        // console.log(this.equipment);
@@ -372,8 +375,8 @@
          // this.$message.warning("请选择设备进行查询")
          this.$notification.warning({
            message:'消息',
            description:"请选择设备进行查询"
          });
            description: '请选择设备进行查询'
          })
          // console.log(1111)
        } else{
          this.$refs.workHistoryModel.add(this.equipment)
@@ -391,7 +394,7 @@
          this.$notification.warning({
            message:'消息',
            description:'请选择今天以及今天之前的日期！！'
          });
          })
        }else{
          this.queryParams.collectTime = moment(this.queryParams.collectTime.add(1, 'd'), 'YYYY-MM-DD')
          this.searchQuery()
@@ -415,14 +418,14 @@
              _this.$notification.warning({
                message:'消息',
                description:'请联系管理员，开放设备权限！'
              });
              })
            }
          }else{
            // this.$message.warning(res.message)
            _this.$notification.warning({
              message:'消息',
              description:res.message
            });
            })

          }
        })
@@ -431,13 +434,12 @@
    created() {
      this.queryParams.collectTime = moment()
      this.queryParams.collectTimeStr = this.queryParams.collectTime.format('YYYY-MM-DD')
      this.initEquipment();
      this.initEquipment()
      // this.queryTreeData();
    },
    watch: {
      equement(val) {
        console.log('通过watch触发')

        if (val && val.equipmentId) {
          this.$set(this.queryParams, 'equipmentName', val.equipmentName)
          this.$set(this.queryParams, 'equipmentId', val.equipmentId)
@@ -492,6 +494,7 @@
  #mdcLogShow > div {
    flex: 1;
  }

  /*.mdcLogShowOne{*/
    /*position: absolute;*/
  /*}*/

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

@@ -3,7 +3,7 @@
    <!-- table区域-begin -->
    <div class="table_logList">
      <a-table ref="table" bordered size="middle" :rowKey="(record,index)=>{return index}" :columns="columns"
               :dataSource="dataList" :pagination="ipagination" :loading="loadingequip"  @change="handleTableChange">
               :dataSource="dataList" :pagination="ipagination" :loading="loadingequip"  @change="handleTableChange" :customRow="rowClick">
        <template slot="status" slot-scope="status">
          <div v-if="status == '3' || status ==  '23'" style="color: #00ee00;width: 100%; height: 100%;">运行</div>
          <div v-else-if="status == '1' || status == '2'" style="color: #ffea91;width: 100%; height: 100%;">待机</div>
@@ -28,6 +28,7 @@
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'
  import moment from 'moment'
  export default {
    name: 'LogList',
    mixins: [JeecgListMixin],
@@ -154,6 +155,24 @@
        this.ipagination = pagination;
        // this.loadData();
      },
      /**
       * ç»™è®¾å¤‡æ—¥å¿—表格中的行添加点击事件
       * @param record ç‚¹å‡»çš„当前行数据
       * @returns {{on: {click: on.click}}} æ·»åŠ äº‹ä»¶å¯¹è±¡
       */
      rowClick(record){
        return {
          on:{
            click:()=>{
              const timeObj={
                start:moment(record.startTime),
                end:moment(record.endTime)
              }
              this.$bus.$emit('tableRowRecord',timeObj)
            }
          }
        }
      }
    },
    created() {
    }

 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;

 src/views/mdc/base/modules/deviceRepair/DeviceRepairList.vue

@@ -1,5 +1,5 @@
<template>
  <a-card :bordered="false" class="device_list">
  <div :bordered="false" class="device_list">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div style="width: 100%; background-color: #fff" class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
@@ -68,7 +68,7 @@
    <!--<device-repair-model-add  ref="modalFormadd" @ok="modalFormOk"></device-repair-model-add>-->
    <device-repair-model-edit ref="modalFormedit" @ok="modalFormOk"></device-repair-model-edit>
    <!--<repair-model ref="repairModelFrom" @ok="modalFormOk">0</repair-model>-->
  </a-card>
  </div>
</template>

<script>

 src/views/mdc/base/modules/efficiencyPOReport/EfficiencyPOList.vue

@@ -1,6 +1,6 @@
<template>
  <div style="width: 100%;">
    <a-card :bordered="false">
    <div :bordered="false">
      <!-- æŸ¥è¯¢åŒºåŸŸ -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
@@ -28,7 +28,7 @@
          </a-row>
        </a-form>
      </div>
      <div style="width: 530px;position: absolute;top: 20px; right:1.5%;">
      <div style="width: 530px;position: absolute;top: 0; right:1.5%;">
        <table cellpadding="5" cellspacing="1" style="border: 1px solid darkgray;">
          <tr>
            <td v-for="(item, index) in identifying">{{item.title}}</td>
@@ -101,7 +101,7 @@
          </table>
        </div>
      </div>
    </a-card>
    </div>
  </div>
</template>


 src/views/mdc/base/modules/efficiencyReport/EfficiencyList.vue

@@ -1,6 +1,6 @@
<template>
  <div class="efficiency_list" style="width: 100%">
    <a-card :bordered="false">
    <div :bordered="false">
      <!-- æŸ¥è¯¢åŒºåŸŸ -->
      <div>
        <div class="table-page-search-wrapper">
@@ -29,7 +29,7 @@
            </a-row>
          </a-form>
        </div>
        <div style="width: 530px;position: absolute;top: 20px; right: 1.5%;">
        <div style="width: 530px;position: absolute;top: 0; right: 1.5%;">
          <table cellpadding="5" cellspacing="1" style="border: 1px solid darkgray;">
            <tr>
              <td v-for="(item, index) in identifying">{{item.title}}</td>
@@ -103,7 +103,7 @@
          </table>
        </div>
      </div>
    </a-card>
    </div>
  </div>
</template>


 src/views/mdc/base/modules/efficiencyShiftReport/EfficiencyShiftList.vue

@@ -1,6 +1,6 @@
<template>
  <div style="width: 100%;">
    <a-card :bordered="false">
    <div :bordered="false">
      <!-- æŸ¥è¯¢åŒºåŸŸ -->
      <div class="seach-content">
        <div class="table-page-search-wrapper">
@@ -49,7 +49,7 @@
          </a-row>
        </a-form>
      </div>
        <div style="width: 530px;top: 20px; right: 0px;">
        <div style="width: 530px;top: 0; right: 0px;">
        <table cellpadding="5" cellspacing="1" style="border: 1px solid darkgray;">
          <tr>
            <td v-for="(item, index) in identifying">{{item.title}}</td>
@@ -143,7 +143,7 @@
          </table>
        </div>
      </div>
    </a-card>
    </div>
  </div>
</template>


 src/views/mdc/base/modules/equipmentAvailCompare/equipmentAvailCompareMain.vue

@@ -1,6 +1,6 @@
<template>
  <a-spin :spinning="loading">
    <a-card :bordered="false" class="device_list">
    <div :bordered="false" class="device_list">
      <div class="com_box">
        <!-- æŸ¥è¯¢åŒºåŸŸ -->
        <div style="width: 100%; background-color: #fff" class="table-page-search-wrapper">
@@ -46,7 +46,7 @@
        </div>
        <!-- table区域-end -->
      </div>
    </a-card>
    </div>
  </a-spin>
</template>


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

@@ -1,5 +1,5 @@
<template>
  <a-card :bordered="false" class="device_list">
  <div :bordered="false" class="device_list">
    <div class="com_box">
      <!-- æŸ¥è¯¢åŒºåŸŸ -->
      <div style="width: 100%; background-color: #fff" class="table-page-search-wrapper">
@@ -57,7 +57,7 @@
      </div>
      <!-- table区域-end -->
    </div>
  </a-card>
  </div>
</template>

<script>

 src/views/mdc/base/modules/mdcPassRate/mdcPassRateList.vue

@@ -1,5 +1,5 @@
<template>
  <a-card :bordered="false" class="device_list">
  <div :bordered="false" class="device_list">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div style="width: 100%; background-color: #fff" class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
@@ -85,7 +85,7 @@
    <!--<device-repair-model></device-repair-model>-->
    <mdc-pass-rate-modal  ref="modalForm" @ok="modalFormOk"></mdc-pass-rate-modal>
    <mdc-pass-rate-edit  ref="modalFormedit" @ok="modalFormOk"></mdc-pass-rate-edit>
  </a-card>
  </div>
</template>

<script>

 src/views/mdc/base/modules/mdcProcessQuantity/mdcProcessQuantityList.vue

@@ -1,5 +1,5 @@
<template>
  <a-card :bordered="false" class="device_list">
  <div :bordered="false" class="device_list">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div style="width: 100%; background-color: #fff" class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
@@ -81,7 +81,7 @@
    <mdc-process-quantity-modal  ref="modalForm" @ok="modalFormOk"></mdc-process-quantity-modal>
    <mdc-process-quantity-edit ref="modalFormedit" @ok="modalFormOk"></mdc-process-quantity-edit>

  </a-card>
  </div>
</template>

<script>

 src/views/mdc/base/modules/mdcStandardProcessDuration/MdcStandardProcessDurationList.vue

@@ -1,5 +1,5 @@
<template>
  <a-card :bordered="false" class="device_list">
  <div :bordered="false" class="device_list">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div style="width: 100%; background-color: #fff" class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
@@ -81,7 +81,7 @@
    <mdc-standard-process-duration-modal  ref="modalForm" @ok="modalFormOk"></mdc-standard-process-duration-modal>
    <mdc-standard-process-duration-edit   ref="modalFormedit" @ok="modalFormOk"></mdc-standard-process-duration-edit>

  </a-card>
  </div>
</template>

<script>

 src/views/mdc/base/modules/openRateFractionAnalysis/openRateFractionAnalysisMain.vue

@@ -1,6 +1,6 @@
<template>
  <div class="efficiency_list" style="width: 100%;height: 100%;">
    <a-card :bordered="false">
    <div :bordered="false" style="height: 100%">
      <!-- æŸ¥è¯¢åŒºåŸŸ -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
@@ -64,7 +64,7 @@
        </div>
        <div id="openRateTrendChart" style="width: 100%;height: 60%"></div>
      </div>
    </a-card>
    </div>
  </div>
</template>


 src/views/mdc/base/modules/openRateTrendAnalysis/openRateTrendAnalysisMain.vue

@@ -1,6 +1,6 @@
<template>
  <div class="efficiency_list" style="width: 100%;height: 100%;">
    <a-card :bordered="false">
    <div :bordered="false" style="height: 100%">
      <!-- æŸ¥è¯¢åŒºåŸŸ -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
@@ -57,7 +57,7 @@
        </div>
        <div id="openRateTrendChart" style="width: 100%;height: 60%"></div>
      </div>
    </a-card>
    </div>
  </div>
</template>