1、mdc设备多选输入框优化新增点击输入框同样触发查询按钮弹出抽屉或弹窗 2、解决进入过产品结构树页面后再进入设备日志页面后设备状态分布图样式变形问题...

zhaowei

2025-06-23 4bdafebef311d37a28f84c09dcf74bebb096dbb6

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

@@ -6,18 +6,18 @@
        <a-row :gutter="24">
          <a-col :md="4" :sm="4">
            <a-form-item label="设备编号">
              <a-input placeholder="请选择设备" :readOnly="readOnly" v-model="queryParams.equipmentId"></a-input>
              <a-input placeholder="请选择设备" readOnly v-model="queryParams.equipmentId"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="6">
            <a-form-item label="设备名称">
              <a-input placeholder="请选择设备" :readOnly="readOnly" v-model="queryParams.equipmentName"></a-input>
              <a-input placeholder="请选择设备" readOnly v-model="queryParams.equipmentName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="4">
            <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.collectTimeStr" :disabledDate="disabledDate"
                             value-format='YYYY-MM-DD'/>
            </a-form-item>
          </a-col>
          <a-col :md="2" :sm="2" :xs="2">
@@ -29,131 +29,94 @@
        </a-row>
      </a-form>
    </div>
    <div style="width: 100%;height: 180px;border: none;" align="center">
      <table cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td>
            <table width="100%">
              <tr style="word-break: keep-all;">
                <td align="right"><a id="btnMdcLogWline" href="#">
                  <div style="padding-top: 15px;" @click="openWorkChart">
                    <img src="../../../../../assets/image/linechart.png" alt="">
                    <p>工作曲线</p>
                  </div>
                </a></td>
                <td width="100%" height="100%">
                  <table width="100%" height="100%" align="center" cellpadding="0" cellspacing="0">
                    <tr>
                      <td style="word-break: keep-all;" align="left">
                        <div
                          style="width: 100%;  height: 62px;border: 1px solid;border-color: #9d9d9d;position: relative;overflow: hidden">
                          <div class="mdcLogShowOne"
                               :style='{display: "inline-block",width:item.dateProportion,  height: "100%"}'
                               v-for="item in normal">
                            <span v-if="item.status == 0"
                                  :style='{display: "inline-block",width:item.dateProportion,  height: "100%", background: "#A8A8A8",position:"absolute",top:"0"}'></span>
                            <span v-if="item.status == 1"
                                  :style='{display: "inline-block",width:item.dateProportion,  height: "100%", background: "#fffc5c",position:"absolute",top:"0"}'></span>
                            <span v-if="item.status == 2"
                                  :style='{display: "inline-block",width:item.dateProportion,  height: "100%", background: "#fffc5c",position:"absolute",top:"0"}'></span>
                            <span v-if="item.status == 3"
                                  :style='{display: "inline-block",width:item.dateProportion,  height: "100%", background: "#19FE01",position:"absolute",top:"0"}'></span>
                            <span v-if="item.status == 23"
                                  :style='{display: "inline-block",width:item.dateProportion,  height: "100%", background: "#19FE01",position:"absolute",bottom:"0"}'></span>
                          </div>
                          <div v-if="item.status == 22" style="z-index: 999;"
                               :style='{display: "inline-block",left:item.left,width:item.dateProportion,  height: "100%",position:"absolute"}'
                               v-for="item in waring">

    <div>
      <div class="equipment-status-container">
        <a href="#" @click="openWorkChart">
          <img src="@/assets/image/linechart.png" alt="">
          <div>工作曲线</div>
        </a>

        <div>
          <div :style='{display: "inline-block",width:item.dateProportion,  height: "100%"}' v-for="item in normal">
            <span v-if="item.status == 0"
                  :style='{display: "inline-block",width:item.dateProportion,  height: "100%", background: "#A8A8A8",position:"absolute",top:"0"}'></span>
            <span v-if="item.status == 1"
                  :style='{display: "inline-block",width:item.dateProportion,  height: "100%", background: "#fffc5c",position:"absolute",top:"0"}'></span>
            <span v-if="item.status == 2"
                  :style='{display: "inline-block",width:item.dateProportion,  height: "100%", background: "#fffc5c",position:"absolute",top:"0"}'></span>
            <span v-if="item.status == 3"
                  :style='{display: "inline-block",width:item.dateProportion,  height: "100%", background: "#19FE01",position:"absolute",top:"0"}'></span>
            <span v-if="item.status == 23"
                  :style='{display: "inline-block",width:item.dateProportion,  height: "100%", background: "#19FE01",position:"absolute",bottom:"0"}'></span>
          </div>
          <div v-if="item.status == 22"
               :style='{display: "inline-block",left:item.left,width:item.dateProportion,  height: "100%",position:"absolute"}'
               v-for="item in warning">
                            <span
                              :style='{display: "inline-block",width:"100%", left:0, height: "68%", background: "#FD0008",position:"absolute",bottom:"0"}'></span>
                          </div>
                        </div>
                      </td>
                    </tr>
                  </table>
                </td>
                <td align="left"><a id="btnMdcLogBar" href="#">
                  <div style="padding-top: 15px;" @click="openHistoryChart">
                    <img src="../../../../../assets/image/Histogram.png" alt="">
                    <p>历史记录</p>
                  </div>
                </a></td>
              </tr>
              <tr>
                <td align="right">0</td>
                <td width="100%">
                  <table width="100%;" cellpadding="0" cellspacing="0">
                    <tr align="right" style="word-break: keep-all;">
                      <td>02:00</td>
                      <td>04:00</td>
                      <td>06:00</td>
                      <td>08:00</td>
                      <td>10:00</td>
                      <td>12:00</td>
                      <td>14:00</td>
                      <td>16:00</td>
                      <td>18:00</td>
                      <td>20:00</td>
                      <td>22:00</td>
                      <td>24:00</td>
                    </tr>
                  </table>
                </td>
                <td></td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td>
            <table width="400px;" align="center" style="margin-top: 20px;">
              <tr>
                <td align="right"><a id="btnMdcLogPreviousDay" style="margin-right:15px">
                  <img @click="dataBefore" src="../../../../../assets/image/left.png" alt="">
                </a></td>
                <td align="right">关机</td>
                <td align="left">
                  <div style="width: 15px;height: 15px;background-color: #A8A8A8;position: static;"/>
                </td>
                <td align="right">待机</td>
                <td align="left">
                  <div style="width: 15px;height: 15px;background-color: #ffea91"/>
                </td>
                <td align="right">运行</td>
                <td align="left">
                  <div style="width: 15px;height: 15px;background-color: #00ee00"/>
                </td>
                <td align="right">报警</td>
                <td align="left">
                  <div style="width: 15px;height: 15px;background-color: red"/>
                </td>
                <td><a id="btnMdcLogAfterDay" style="margin-left:20px">
                  <img @click="dataAfter" src="../../../../../assets/image/right.png" alt="">
                </a></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
          </div>
          <div v-if="item.status == 25"
               :style='{display: "inline-block",left:item.left,width:item.dateProportion,  height: "100%",position:"absolute"}'
               v-for="item in fault">
                            <span
                              :style='{display: "inline-block",width:"100%", left:0, height: "50%", background: "#C11900",position:"absolute",bottom:"0"}'></span>
          </div>
        </div>

        <a href="#" @click="openHistoryChart">
          <img src="@/assets/image/Histogram.png" alt="">
          <div>历史记录</div>
        </a>
      </div>

      <div class="time-container">
        <div>0</div>
        <div>
          <div v-for="item in 12">{{('0'+item*2).slice(-2)}}:00</div>
        </div>
        <div></div>
      </div>

      <a-space class="date-change-container">
        <img @click="dataBefore" src="@/assets/image/left.png" alt="">
        <span>关机</span>
        <div style="background-color: #A8A8A8"/>
        <span>待机</span>
        <div style="background-color: #ffea91"/>
        <span>运行</span>
        <div style="background-color: #00ee00"/>
        <span>报警</span>
        <div style="background-color: #f00"/>
        <span>故障</span>
        <div style="background-color: #C11900"/>
        <img @click="dataAfter" src="@/assets/image/right.png" alt="">
      </a-space>
    </div>
    <div id="mdcLogTabs" class="mdcLogTabs-title" style="width: 100%;">

    <div id="mdcLogTabs" class="mdcLogTabs-title">
      <div>
        <a-tabs :activeKey="activeKey" @change="tabChange">
        <a-tabs>
          <a-tab-pane key="1" tab="设备日志" force-render>
            <log-list :dataList='normalList' ref="logList" :loadingequip='loadingStatus'></log-list>
            <log-list :dataList='normalList' :loading='loading'/>
          </a-tab-pane>
          <a-tab-pane key="2" tab="运行日志">
            <work-log-list :dataList='runList' ref="workLogList" :loadingrun="loadingRunStatus"></work-log-list>
            <work-log-list :dataList='runList' :loading="loading"/>
          </a-tab-pane>
          <a-tab-pane key="3" tab="报警日志">
            <alarm-log-list :dataList='waringList' ref="alarmLogList" :loadingwarn="loadingWarnStatus"></alarm-log-list>
            <alarm-log-list :dataList='warningList' :loading="loading"/>
          </a-tab-pane>
          <a-tab-pane key="4" tab="故障日志">
            <fault-log-list :dataList='faultList' :loading="loading"/>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>

    <work-chart-model ref="workChartModel" :collectTime="this.queryParams.collectTime"
                      :equipment="this.equipment"></work-chart-model>
    <work-history-model ref="workHistoryModel"></work-history-model>
                      :equipment="equipment"/>

    <work-history-model ref="workHistoryModel"/>
  </div>
</template>

@@ -163,12 +126,14 @@
  import LogList from './LogList'
  import WorkLogList from './WorkLogList'
  import AlarmLogList from './AlarmLogList'
  import FaultLogList from './FaultLogList'
  import WorkChartModel from './WorkChartModel'
  import WorkHistoryModel from './WorkHistoryModel'
  import { getAction } from '@/api/manage'

  export default {
     components: {
    components: {
      FaultLogList,
      LogList,
      WorkLogList,
      AlarmLogList,
@@ -178,101 +143,82 @@
    props: { equipment: {} },
    data() {
      return {
        readOnly: true,
        defaultId: '',
        defaultName: '',
        middleTime: '',
        queryParam: {},
        queryParams: {
          collectTime: undefined
          collectTimeStr: moment().format('YYYY-MM-DD')
        },
        loadingStatus: false,
        loadingRunStatus: false,
        loadingWarnStatus: false,
        loading: false,
        normal: [],
        waring: [],
        warning: [],
        fault: [],
        normalList: [],
        waringList: [],
        warningList: [],
        faultList: [],
        runList: [],
        activeKey: '1',
        equipment: {},
        url: {
          getBaseTree: '/mdc/mdcequipment/loadTree',
          getEquipmentByPid: '/mdc/mdcEquipment/getEquipmentByPid',
          list: '/mdc/mdcEquipmentRunningSection/logList'
        },
        ProStartId: ''
        }
      }
    },
    methods: {
      tabChange(val) {
        this.activeKey = val
      },
      disabledDate(current) {
        return current && current > moment().subtract('days', 0)
      },
      queryChart() {
        // this.normal = []
        // this.waring = []
        this.loadingStatus = true
        this.loadingRunStatus = true
        this.loadingWarnStatus = true
        getAction(this.url.list, this.queryParams).then((res) => {
          this.normalList = []
          this.waringList = []
          this.runList = []
          this.loadingStatus = false
          this.loadingRunStatus = false
          this.loadingWarnStatus = false
          this.normal = []
          this.waring = []
          if (res.success) {
            if (res.result != null) {
              for (let i = 0; i < res.result.length; i++) {
                this.normalList.push(res.result[i])
                if ('22' == res.result[i].status) {
                  this.waringList.push(res.result[i])
        this.loading = true
        this.normalList = []
        this.warningList = []
        this.runList = []
        this.faultList = []
        this.normal = []
        this.warning = []
        this.fault = []
        getAction(this.url.list, this.queryParams)
          .then((res) => {
            if (res.success) {
              if (res.result != null) {
                for (let i = 0; i < res.result.length; i++) {
                  this.normalList.push(res.result[i])
                  res.result[i].dateProportion = res.result[i].duration / 86400 * 100 + '%'
                  let leftTmp = (moment(res.result[i].startTime, 'YYYY-MM-DD HH:mm:ss').valueOf() - 57600000) / 1000 % 86400
                  res.result[i].left = leftTmp / 86400 * 100 + '%'
                  this.waring.push(res.result[i])

                } else if ('3' == res.result[i].status) {
                  this.runList.push(res.result[i])
                  res.result[i].dateProportion = res.result[i].duration / 86400 * 100 + '%'
                  this.normal.push(res.result[i])
                } else {
                  res.result[i].dateProportion = res.result[i].duration / 86400 * 100 + '%'
                  this.normal.push(res.result[i])
                  if ('22' == res.result[i].status) {
                    let leftTmp = (moment(res.result[i].startTime, 'YYYY-MM-DD HH:mm:ss').valueOf() - 57600000) / 1000 % 86400
                    res.result[i].left = leftTmp / 86400 * 100 + '%'
                    this.warning.push(res.result[i])
                    this.warningList.push(res.result[i])
                  } else if ('25' == res.result[i].status) {
                    let leftTmp = (moment(res.result[i].startTime, 'YYYY-MM-DD HH:mm:ss').valueOf() - 57600000) / 1000 % 86400
                    res.result[i].left = leftTmp / 86400 * 100 + '%'
                    this.faultList.push(res.result[i])
                    this.fault.push(res.result[i])
                  } else if ('3' == res.result[i].status) {
                    this.runList.push(res.result[i])
                    this.normal.push(res.result[i])
                  } else {
                    this.normal.push(res.result[i])
                  }
                }
              }
            }
          }
        }).finally(() => {
          this.loading = false
          this.cardLoading = false
        })
      },
      dataChange(val) {
        this.queryParams.collectTime = val
        this.queryParams.collectTimeStr = this.queryParams.collectTime.format('YYYY-MM-DD')
          })
          .finally(() => {
            this.loading = false
          })
      },
      searchQuery() {
        // console.log(this.queryParams.collectTime)
        this.queryParams.collectTimeStr = this.queryParams.collectTime.format('YYYY-MM-DD')
        if (!this.queryParams.equipmentId || !this.queryParams.equipmentName) {
          this.$notification.warning({
            message: '消息',
            description: '请选择设备'
            description: '请选择设备进行查询'
          })
          return false
          return
        }
        this.queryChart()
      },
      searchReset() {
        this.queryParams = {
          collectTime : moment()
      }
          collectTimeStr: moment().format('YYYY-MM-DD')
        }
        this.equipment = {}
        this.queryChart()
      },
@@ -282,12 +228,13 @@
            message: '消息',
            description: '请选择设备进行查询'
          })
        } else {
          // 判断是否点击设备日志表格行的数据，此时为点击表格数据为false
          this.$refs.workChartModel.isClicklogListRow = false
          this.$refs.workChartModel.add(this.equipment)
          this.$refs.workChartModel.title = '工作曲线'
          return
        }

        // 判断是否点击设备日志表格行的数据，此时为点击表格数据为false
        this.$refs.workChartModel.isClicklogListRow = false
        this.$refs.workChartModel.add(this.equipment)
        this.$refs.workChartModel.title = '工作曲线'
      },
      openHistoryChart() {
        if (!this.equipment.equipmentId) {
@@ -295,27 +242,26 @@
            message: '消息',
            description: '请选择设备进行查询'
          })
        } else {
          this.$refs.workHistoryModel.add(this.equipment)
          this.$refs.workHistoryModel.title = '历史日志'
          return
        }

        this.$refs.workHistoryModel.add(this.equipment)
        this.$refs.workHistoryModel.title = '历史日志'
      },
      dataBefore() {
        this.queryParams.collectTime = moment(this.queryParams.collectTime.add(-1, 'd'), 'YYYY-MM-DD')
        this.queryParams.collectTimeStr = moment(this.queryParams.collectTimeStr).add(-1, 'd').format('YYYY-MM-DD')
        this.searchQuery()
      },
      dataAfter() {
        if ((this.queryParams.collectTime).format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) {
        if (moment(this.queryParams.collectTimeStr).isSame(moment(), 'd')) {
          this.$notification.warning({
            message: '消息',
            description: '请选择今天以及今天之前的日期！！'
          })
        } else {
          this.queryParams.collectTime = moment(this.queryParams.collectTime.add(1, 'd'), 'YYYY-MM-DD')
          this.searchQuery()
          return
        }

        this.queryParams.collectTimeStr = moment(this.queryParams.collectTimeStr).add(1, 'd').format('YYYY-MM-DD')
        this.searchQuery()
      },
      initEquipment(id) {
        let _this = this
@@ -324,11 +270,10 @@
            if (res.result != null) {
              _this.$set(this.queryParams, 'equipmentName', res.result.equipmentName)
              _this.$set(this.queryParams, 'equipmentId', res.result.equipmentId)
              _this.equipment = res.result
              _this.searchQuery()
              _this.$emit('initEquipment', res.result)
            } else {
              this.queryParams = {}
              this.equipment = {}
              _this.queryParams = {}
              _this.$emit('initEquipment', {})
              _this.$notification.warning({
                message: '消息',
                description: '请联系管理员，开放设备权限！'
@@ -345,8 +290,6 @@
      }
    },
    created() {
      this.queryParams.collectTime = moment()
      this.queryParams.collectTimeStr = this.queryParams.collectTime.format('YYYY-MM-DD')
      this.initEquipment()
    },
    watch: {
@@ -354,7 +297,6 @@
        if (val && val.equipmentId) {
          this.$set(this.queryParams, 'equipmentName', val.equipmentName)
          this.$set(this.queryParams, 'equipmentId', val.equipmentId)
          this.equipment = val
          this.searchQuery()
        } else {
          this.initEquipment(val.key)
@@ -364,48 +306,65 @@
  }
</script>

<style scoped="scoped">
  .mdcLogTabs-title {
<style scoped="scoped" lang="less">
  @image-container-width: 58px;

  .equipment-status-container {
    display: flex;
    width: 100%;

    > a {
      display: inline-block;
      text-align: center;
      width: @image-container-width
    }

    > div {
      height: 62px;
      border: 1px solid #9d9d9d;
      position: relative;
      overflow: hidden;
      flex: 1
    }
  }

  .mdcLogTabs-title > div {
    margin: 2px 5px;
    width: 100%;
    color: #000;
    font-weight: 600;
    padding: 3px;
    border-radius: 5px;
  }

  .btnMdcLogSearch {
    position: relative;
    margin-left: 10px;
  }

  .btnMdcLogSearch .btnMdcLogSearchZi {
    position: absolute;
    left: 3px;
  }

  .btnMdcLogSearch input {
    padding-left: 23px;
    border-radius: 5px;
    outline: none;
    color: #000;
    border: 1px solid #000;
  }

  #mdcLogShow {
  .time-container {
    display: flex;
    align-items: center;

    > div:not(:nth-child(2)) {
      width: @image-container-width;
      text-align: right;
    }

    > div:nth-child(2) {
      width: calc(100% - @image-container-width * 2);
      display: flex;

      div {
        width: calc(100% / 12);
        text-align: right;
      }
    }
  }

  #mdcLogShow > div {
    flex: 1;
  }
  .date-change-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;

  /*.mdcLogShowOne{*/
  /*position: absolute;*/
  /*}*/
    /deep/ .ant-space-item {
      display: flex;
      align-items: center;

      > div {
        width: 15px;
        height: 15px;
      }
    }

    img {
      cursor: pointer;
    }
  }
</style>