1、设备日志页面列表及状态横向分布图新增故障状态颜色区分以及增加故障日志列表页签 2、设备日志页面历史记录弹窗中状态横向分布图新增故障状态颜色区分

zhaowei

2025-06-18 8c610945469c4a4a0b0ff2b868e87f25fe01792d

 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,7 +29,8 @@
        </a-row>
      </a-form>
    </div>
    <div style="width: 100%;height: 180px;border: none;" align="center">

    <div>
      <table cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td>
@@ -63,9 +64,15 @@
                          </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">
                               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 v-if="item.status == 25" style="z-index: 1000;"
                               :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>
                      </td>
@@ -104,56 +111,47 @@
            </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>

      <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 +161,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 +178,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 +263,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 +277,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 +305,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 +325,6 @@
      }
    },
    created() {
      this.queryParams.collectTime = moment()
      this.queryParams.collectTimeStr = this.queryParams.collectTime.format('YYYY-MM-DD')
      this.initEquipment()
    },
    watch: {
@@ -354,7 +332,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 +341,25 @@
  }
</script>

<style scoped="scoped">
  .mdcLogTabs-title {
<style scoped="scoped" lang="less">
  .date-change-container {
    display: flex;
    width: 100%;
  }
    align-items: center;
    justify-content: center;
    margin-top: 20px;

  .mdcLogTabs-title > div {
    margin: 2px 5px;
    width: 100%;
    color: #000;
    font-weight: 600;
    padding: 3px;
    border-radius: 5px;
  }
    /deep/ .ant-space-item {
      display: flex;
      align-items: center;

  .btnMdcLogSearch {
    position: relative;
    margin-left: 10px;
  }
      > div {
        width: 15px;
        height: 15px;
      }
    }

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

  .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>