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

zhaowei

2025-06-18 8c610945469c4a4a0b0ff2b868e87f25fe01792d

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

@@ -1,6 +1,7 @@
<template>
  <div ref="workHistory">
  <a-modal :title="title" width="80%" :getContainer="() => this.$refs.workHistory" wrap-class-name="full-modal" :visible="visible"
    <a-modal :title="title" width="80%" :getContainer="() => this.$refs.workHistory" wrap-class-name="full-modal"
             :visible="visible"
           @cancel="handleCancel" cancelText="关闭" :footer="null">
    <div>
      <div class="his_params">
@@ -12,7 +13,8 @@
            <a-input placeholder="输入设备名称查询" :readOnly="true" v-model="queryParams.equipmentName"></a-input>
          </a-form-item>
          <a-form-item label="日期">
            <a-range-picker v-model="dates" :disabledDate="disabledDate" @change="dateParamChange" format='YYYY-MM-DD'/>
              <a-range-picker v-model="dates" :disabledDate="disabledDate" @change="dateParamChange"
                              format='YYYY-MM-DD'/>
          </a-form-item>
          <a-button type="primary" @click="queryCharts" icon="search">查询</a-button>
      </a-form>
@@ -24,7 +26,8 @@
              <table width="100%">
                <tr style="word-break: keep-all;">
                  <td width="100%" height="100%">
                    <table width="100%" height="100%" align="center" cellpadding="0" cellspacing="0" style="border-collapse:separate; border-spacing:10px;">
                      <table width="100%" height="100%" align="center" cellpadding="0" cellspacing="0"
                             style="border-collapse:separate; border-spacing:10px;">
                      <tr v-for="info in listInfo" >
                        <td align="left">{{info.date}}</td>
                        <td style="word-break: keep-all;" align="left">
@@ -49,6 +52,12 @@
                                  v-for="item in info.value.waring">
                            <span
                              :style='{display: "inline-block",width:"100%", left:0, height: "68%", background: "#FD0008",position:"absolute",bottom:"0"}'></span>
                              </div>
                              <div style="z-index: 1000;"
                                   :style='{display: "inline-block",left:item.left,width:item.dateProportion,  height: "100%",position:"absolute"}'
                                   v-for="item in info.value.fault">
                            <span
                              :style='{display: "inline-block",width:"100%", left:0, height: "50%", background: "#C11900",position:"absolute",bottom:"0"}'></span>
                            </div>
                          </div>
                        </td>
@@ -91,61 +100,43 @@

<script>
  import moment from 'moment'
  import * as echarts from 'echarts'
  import {
    getAction,
    postAction
  } from '@/api/manage'
  import {
    duplicateCheck
  } from '@/api/api'
  import { getAction } from '@/api/manage'

  export default {
    name: 'WorkHistoryModel',
    components: {},
    props: {    waring:[],},
    data() {
      return {
        title: '',
        listInfo: [],
        dates: [],
        node: {},

        stratOpen: false,
        endOpen: false,
        visible: false,
        show: false,
        queryParams: {},
        url: {
          logCharts: '/mdc/mdcEquipmentRunningSection/logCharts'
        }
      }
    },
    mounted() {
    },
    methods: {
      disabledDate(current){
        return current && current > moment().subtract('days', 1);
        return current && current > moment().subtract('days', 1)
      },
      queryCharts() {
        let _this = this
        getAction(this.url.logCharts, this.queryParams).then((res) => {
        this.listInfo = []
        getAction(this.url.logCharts, this.queryParams)
          .then((res) => {
          if (res.success) {
            for (let i = 0; i < res.result.length; i++) {
              let tmp = res.result[i].value
              // console.log(tmp)
              if (tmp) {
                if (tmp.normal) {
                  for (let k = 0; k < tmp.normal.length; k++) {
                    tmp.normal[k].dateProportion = tmp.normal[k].duration / 86400 * 100 + '%'
                    // let leftTmp = (moment(tmp.normal[i].startTime, 'YYYY-MM-DD HH:mm:ss').valueOf() - 57600000) / 1000 % 86400
                    // tmp.normal[i].left = leftTmp / 86400 * 100 + '%'
                  }
                } else {
                  tmp.normal = []
                }
                if (tmp.waring) {
                  // console.log("测试判断")
                  for (let j = 0; j < tmp.waring.length; j++) {
                    tmp.waring[j].dateProportion = tmp.waring[j].duration / 86400 * 100 + '%'
                    let leftTmp = (moment(tmp.waring[j].startTime, 'YYYY-MM-DD HH:mm:ss').valueOf() - 57600000) / 1000 % 86400
@@ -154,8 +145,18 @@
                } else {
                  tmp.waring = []
                }
                  if (tmp.fault) {
                    for (let j = 0; j < tmp.fault.length; j++) {
                      tmp.fault[j].dateProportion = tmp.fault[j].duration / 86400 * 100 + '%'
                      let leftTmp = (moment(tmp.fault[j].startTime, 'YYYY-MM-DD HH:mm:ss').valueOf() - 57600000) / 1000 % 86400
                      tmp.fault[j].left = leftTmp / 86400 * 100 + '%'
                    }
              } else {
                res.result[i].value = { normal: [], waring: [] }
                    tmp.fault = []
                  }
                }
                else {
                  res.result[i].value = { normal: [], waring: [], fault: [] }
              }
            }
            _this.listInfo = res.result
@@ -169,7 +170,6 @@
      add(node) {
        let _this = this
        this.visible = true
        this.node = node
        this.queryParams = {
          equipmentId: node.equipmentId,
          equipmentName: node.equipmentName
@@ -183,79 +183,8 @@
      },
      handleCancel() {
        this.visible = false
      },
      close() {
        this.visible = false
        this.show = false
      }
    }
  }
</script>

<style scoped lang="less">
  .full-modal {
    .ant-modal {
      max-width: 100%;
      top: 0;
      padding-bottom: 0;
      margin: 0;
    }
    .ant-modal-content {
      display: flex;
      flex-direction: column;
      height: calc(100vh);
    }
    .ant-modal-body {
      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)));*/
    /*background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
    /*background: -o-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
    /*background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
    /*background: linear-gradient(to right, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.4) 100%);*/
    /*background-color: #000;*/
    /*color: #fff;*/
    position: relative;
  }
  /deep/ .ant-modal-header{
    /*border-bottom: none!important;*/
  }
  /deep/ .ant-form-item-label label{
    /*color: #fff;*/
  }
  /*.ant-btn {*/
    /*padding: 0 10px;*/
    /*margin-left: 3px;*/
  /*}*/

  /*.ant-form-item-control {*/
    /*line-height: 0px;*/
  /*}*/

  /*!** 主表单行间距 *!*/
  /*.ant-form .ant-form-item {*/
    /*margin-bottom: 10px;*/
  /*}*/

  /*!** Tab页面行间距 *!*/
  /*.ant-tabs-content .ant-form-item {*/
    /*margin-bottom: 0px;*/
  /*}*/
</style>