Merge branch 'master' of http://125.76.225.53:18448/r/xhj/vue_mdc_xhj

cuijian

2025-07-28 accebdce93486d3b4f26e55ffdea047549cce20c

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,411 @@
<template>
  <div id="mdcLogLayout" style="width: 100%; height: 100%; overflow: hidden">
    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <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-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-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-form-item>
          </a-col>
          <a-col :md="2" :sm="2" :xs="2">
            <a-space>
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
            </a-space>
          </a-col>
        </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">
                            <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 id="mdcLogTabs" class="mdcLogTabs-title" style="width: 100%;">
      <div>
        <a-tabs :activeKey="activeKey" @change="tabChange">
          <a-tab-pane key="1" tab="设备日志" force-render>
            <log-list :dataList='normalList' ref="logList" :loadingequip='loadingStatus'></log-list>
          </a-tab-pane>
          <a-tab-pane key="2" tab="运行日志">
            <work-log-list :dataList='runList' ref="workLogList" :loadingrun="loadingRunStatus"></work-log-list>
          </a-tab-pane>
          <a-tab-pane key="3" tab="报警日志">
            <alarm-log-list :dataList='waringList' ref="alarmLogList" :loadingwarn="loadingWarnStatus"></alarm-log-list>
          </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>
  </div>
</template>


<script>
  import moment from 'moment'
  import LogList from './LogList'
  import WorkLogList from './WorkLogList'
  import AlarmLogList from './AlarmLogList'
  import WorkChartModel from './WorkChartModel'
  import WorkHistoryModel from './WorkHistoryModel'
  import { getAction } from '@/api/manage'

  export default {
     components: {
      LogList,
      WorkLogList,
      AlarmLogList,
      WorkChartModel,
      WorkHistoryModel
    },
    props: { equipment: {} },
    data() {
      return {
        readOnly: true,
        defaultId: '',
        defaultName: '',
        middleTime: '',
        queryParam: {},
        queryParams: {
          collectTime: undefined
        },
        loadingStatus: false,
        loadingRunStatus: false,
        loadingWarnStatus: false,
        normal: [],
        waring: [],
        normalList: [],
        waringList: [],
        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])
                  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])
                }
              }
            }
          }
        }).finally(() => {
          this.loading = false
          this.cardLoading = false
        })
      },
      dataChange(val) {
        this.queryParams.collectTime = val
        this.queryParams.collectTimeStr = this.queryParams.collectTime.format('YYYY-MM-DD')
      },
      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: '请选择设备'
          })
          return false
        }
        this.queryChart()
      },
      searchReset() {
        this.queryParams = {
          collectTime : moment()
      }
        this.equipment = {}
        this.queryChart()
      },
      openWorkChart() {
        if (!this.equipment.equipmentId) {
          this.$notification.warning({
            message: '消息',
            description: '请选择设备进行查询'
          })
        } else {
          // åˆ¤æ–­æ˜¯å¦ç‚¹å‡»è®¾å¤‡æ—¥å¿—表格行的数据，此时为点击表格数据为false
          this.$refs.workChartModel.isClicklogListRow = false
          this.$refs.workChartModel.add(this.equipment)
          this.$refs.workChartModel.title = '工作曲线'
        }
      },
      openHistoryChart() {
        if (!this.equipment.equipmentId) {
          this.$notification.warning({
            message: '消息',
            description: '请选择设备进行查询'
          })
        } else {
          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.searchQuery()
      },
      dataAfter() {
        if ((this.queryParams.collectTime).format('YYYY-MM-DD') == moment().format('YYYY-MM-DD')) {
          this.$notification.warning({
            message: '消息',
            description: '请选择今天以及今天之前的日期！！'
          })
        } else {
          this.queryParams.collectTime = moment(this.queryParams.collectTime.add(1, 'd'), 'YYYY-MM-DD')
          this.searchQuery()
        }

      },
      initEquipment(id) {
        let _this = this
        getAction(this.url.getEquipmentByPid, { pid: id }).then((res) => {
          if (res.success) {
            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()
            } else {
              this.queryParams = {}
              this.equipment = {}
              _this.$notification.warning({
                message: '消息',
                description: '请联系管理员，开放设备权限！'
              })
            }
          } else {
            _this.$notification.warning({
              message: '消息',
              description: res.message
            })

          }
        })
      }
    },
    created() {
      this.queryParams.collectTime = moment()
      this.queryParams.collectTimeStr = this.queryParams.collectTime.format('YYYY-MM-DD')
      this.initEquipment()
    },
    watch: {
      equipment(val) {
        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)
        }
      }
    }
  }
</script>

<style scoped="scoped">
  .mdcLogTabs-title {
    display: flex;
    width: 100%;
  }

  .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 {
    display: flex;
  }

  #mdcLogShow > div {
    flex: 1;
  }

  /*.mdcLogShowOne{*/
  /*position: absolute;*/
  /*}*/
</style>