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

zhaowei

2025-06-18 8c610945469c4a4a0b0ff2b868e87f25fe01792d

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

 src/views/mdc/base/DeviceLog.vue

@@ -6,7 +6,7 @@
        <base-tree @getCurrSelected="changeSelectionNode"></base-tree>
      </a-col>
      <a-col :md="24-5" :sm="24">
        <log-info :equipment="selectEquipment"></log-info>
        <log-info :equipment="selectEquipment" @initEquipment="changeSelectionNode"></log-info>
      </a-col>
    </a-row>
    </div>

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

@@ -1,9 +1,7 @@
<template>
  <a-card :bordered="false">
    <!-- table区域-begin -->
    <div class="table_alarmLogist">
      <a-table ref="table" bordered size="middle" :rowKey="(record,index)=>{return index}" :columns="columns"
               :dataSource="dataList" :pagination="false" :loading="loadingwarnStatus">
             :dataSource="dataList" :pagination="false" :loading="loading">
        <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>
@@ -12,31 +10,18 @@
        </template>
      </a-table>
    </div>
  </a-card>
</template>

<script>
  import JDictSelectTag from '@/components/dict/JDictSelectTag'

  import JInput from '@/components/jeecg/JInput'
  import JEllipsis from '@/components/jeecg/JEllipsis'
  import Tooltip from 'ant-design-vue/es/tooltip'

  export default {
    name: 'AlarmLogList',
    components: {
      Tooltip,
      JDictSelectTag,
      JInput,
      JEllipsis
    },
    props: {
      dataList: {
        type: Array,
        required: true,
        default: []
      },
      loadingwarnStatus:{
      loading:{
        type:Boolean,
        default: false
      }
@@ -55,22 +40,17 @@
            title: '报警时间',
            align: 'center',
            dataIndex: 'startTime',
            // defaultSortOrder:'descend',
            // sorter: (a, b) => {return a.startTime>b.startTime?1:-1}
          },
          {
            title: '结束时间',
            align: 'center',
            dataIndex: 'endTime',
            // defaultSortOrder:'descend',
            // sorter: (a, b) => {return a.endTime>b.endTime?1:-1}
          },
          {
            title: '持续时间',
            align: 'center',
            dataIndex: 'duration',
            customRender:(t,r,index) =>{
              // console.log(t)
              var ss = parseInt(t)
              if(ss>=3600){
                // æ ¹æ®ç§’数转换成对应的时分秒
@@ -91,13 +71,6 @@
                    return hour + '小时' + min + '分' + sec + '秒'
                  }
                }
                // if(sec == '00'){
                //   return hour + '小时' + min + '分'
                // }
                // if(min == '00' && sec == '00'){
                //   return hour + '小时'
                // }
                // return hour + '小时' + min + '分' + sec + '秒'

              }else if(60<ss && ss<3600){
                const min1 = parseInt(ss % 3600 / 60) < 10 ? '0' + parseInt(ss % 3600 / 60) : parseInt(ss % 3600 / 60)
@@ -108,8 +81,6 @@
                return sec2 + '秒'
              }
            }
            // defaultSortOrder:'descend',
            // sorter: (a, b) => {return a.duration>b.duration?1:-1}
          },
          {
            title: '报警号',
@@ -137,31 +108,31 @@
  @media screen and (min-width: 1920px){
    .table_alarmLogist{
      height: 417px!important;
      overflow: scroll;
      overflow: auto;
    }
  }
  @media screen and (min-width: 1680px) and (max-width: 1920px){
    .table_alarmLogist{
      height: 417px!important;
      overflow: scroll;
      overflow: auto;
    }
  }
  @media screen and (min-width: 1400px) and (max-width: 1680px){
    .table_alarmLogist{
      height: 266px!important;
      overflow: scroll;
      overflow: auto;
    }
  }
  @media screen and (min-width: 1280px) and (max-width: 1400px){
    .table_alarmLogist{
      height: 360px!important;
      overflow: scroll;
      overflow: auto;
    }
  }
  @media screen and (max-width: 1280px){
    .table_alarmLogist{
      height: 170px!important;
      overflow: scroll;
      overflow: auto;
    }
  }
</style>

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,125 @@
<template>
  <div class="table_alarmLogist">
    <a-table ref="table" bordered size="middle" :rowKey="(record,index)=>{return index}" :columns="columns"
             :dataSource="dataList" :pagination="false" :loading="loading">
      <template slot="status" slot-scope="status">
        <div v-if="status == '25'" style="color: #C11900;width: 100%; height: 100%;">故障</div>
      </template>
    </a-table>
  </div>
</template>

<script>
  export default {
    name: 'FaultLogList',
    props: {
      dataList: {
        type: Array,
        required: true,
        default: []
      },
      loading: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        disabled: true,
        columns: [
          {
            title: '状态',
            align: 'center',
            dataIndex: 'status',
            scopedSlots: { customRender: 'status' }
          },
          {
            title: '故障时间',
            align: 'center',
            dataIndex: 'startTime'
          },
          {
            title: '结束时间',
            align: 'center',
            dataIndex: 'endTime'
          },
          {
            title: '持续时间',
            align: 'center',
            dataIndex: 'duration',
            customRender: (t, r, index) => {
              var ss = parseInt(t)
              if (ss >= 3600) {
                // æ ¹æ®ç§’数转换成对应的时分秒
                const hour = parseInt(ss / 3600) < 10 ? '0' + parseInt(ss / 3600) : parseInt(ss / 3600)
                const min = parseInt(ss % 3600 / 60) < 10 ? '0' + parseInt(ss % 3600 / 60) : parseInt(ss % 3600 / 60)
                const sec = parseInt(ss % 3600 % 60) < 10 ? '0' + parseInt(ss % 3600 % 60) : parseInt(ss % 3600 % 60)
                if (min == '00') {
                  if (sec == '00') {
                    return hour + '小时'
                  } else {
                    return hour + '小时' + sec + '秒'
                  }

                } else {
                  if (sec == '00') {
                    return hour + '小时' + min + '分'
                  } else {
                    return hour + '小时' + min + '分' + sec + '秒'
                  }
                }

              } else if (60 < ss && ss < 3600) {
                const min1 = parseInt(ss % 3600 / 60) < 10 ? '0' + parseInt(ss % 3600 / 60) : parseInt(ss % 3600 / 60)
                const sec1 = parseInt(ss % 3600 % 60) < 10 ? '0' + parseInt(ss % 3600 % 60) : parseInt(ss % 3600 % 60)
                return min1 + '分' + sec1 + '秒'
              } else {
                const sec2 = parseInt(ss % 3600 % 60) < 10 ? '0' + parseInt(ss % 3600 % 60) : parseInt(ss % 3600 % 60)
                return sec2 + '秒'
              }
            }
          },
        ]
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '~@assets/less/common.less';

  @media screen and (min-width: 1920px) {
    .table_alarmLogist {
      height: 417px !important;
      overflow: auto;
    }
  }

  @media screen and (min-width: 1680px) and (max-width: 1920px) {
    .table_alarmLogist {
      height: 417px !important;
      overflow: auto;
    }
  }

  @media screen and (min-width: 1400px) and (max-width: 1680px) {
    .table_alarmLogist {
      height: 266px !important;
      overflow: auto;
    }
  }

  @media screen and (min-width: 1280px) and (max-width: 1400px) {
    .table_alarmLogist {
      height: 360px !important;
      overflow: auto;
    }
  }

  @media screen and (max-width: 1280px) {
    .table_alarmLogist {
      height: 170px !important;
      overflow: auto;
    }
  }
</style>

 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: {
      FaultLogList,
      LogList,
      WorkLogList,
      AlarmLogList,
@@ -178,100 +178,81 @@
    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.loading = true
          this.normalList = []
          this.waringList = []
        this.warningList = []
          this.runList = []
          this.loadingStatus = false
          this.loadingRunStatus = false
          this.loadingWarnStatus = false
        this.faultList = []
          this.normal = []
          this.waring = []
        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])
                if ('22' == res.result[i].status) {
                  this.waringList.push(res.result[i])
                  res.result[i].dateProportion = res.result[i].duration / 86400 * 100 + '%'
                  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.waring.push(res.result[i])

                    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])
                  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(() => {
          })
          .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: '请选择设备'
            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 {
          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;
  }

  .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 {
    /deep/ .ant-space-item {
    display: flex;
      align-items: center;

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

  #mdcLogShow > div {
    flex: 1;
    img {
      cursor: pointer;
  }

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

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

@@ -1,52 +1,31 @@
<template>
  <a-card :bordered="false">
    <!-- 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"
    <a-table ref="table" bordered :rowKey="(record,index)=>{return index}" :columns="columns"
             :dataSource="dataList" :pagination="ipagination" :loading="loading" @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>
          <div v-else-if="status == '0'" style="color: #A8A8A8;width: 100%; height: 100%;">关机</div>
          <div v-else-if="status == '22'" style="color: red;width: 100%; height: 100%;">报警</div>
        <div v-else-if="status == '25'" style="color: #C11900;width: 100%; height: 100%;">故障</div>
        </template>
      </a-table>
    </div>
  </a-card>
</template>

<script>
  import JDictSelectTag from '@/components/dict/JDictSelectTag'
  import {
    requestPut,
    deleteAction
  } from '@/api/manage'

  import JInput from '@/components/jeecg/JInput'
  import JEllipsis from '@/components/jeecg/JEllipsis'
  import Tooltip from 'ant-design-vue/es/tooltip'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'
  import moment from 'moment'

  export default {
    name: 'LogList',
    mixins: [JeecgListMixin],
    components: {
      Tooltip,
      JDictSelectTag,
      JInput,
      JEllipsis
    },
    props: {
      dataList: {
        type: Array,
        required: true,
        default: []
      },
      loadingequip: {
      loading: {
        type: Boolean,
        default: false
      }
@@ -54,10 +33,6 @@
    watch: {},
    data() {
      return {
        statusName: '',
        disabled: true,
        disableMixinCreated: true,
        loading: false,
        ipagination: {
          current: 1,
          pageSize: 100,
@@ -116,14 +91,6 @@
                    return hour + '小时' + min + '分' + sec + '秒'
                  }
                }
                // if(sec == '00'){
                //   return hour + '小时' + min + '分'
                // }
                // if(min == '00' && sec == '00'){
                //   return hour + '小时'
                // }
                // return hour + '小时' + min + '分' + sec + '秒'

              } else if (60 < ss && ss < 3600) {
                const min1 = parseInt(ss % 3600 / 60) < 10 ? '0' + parseInt(ss % 3600 / 60) : parseInt(ss % 3600 / 60)
                const sec1 = parseInt(ss % 3600 % 60) < 10 ? '0' + parseInt(ss % 3600 % 60) : parseInt(ss % 3600 % 60)
@@ -153,7 +120,6 @@
          this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
        }
        this.ipagination = pagination
        // this.loadData();
      },
      /**
       * ç»™è®¾å¤‡æ—¥å¿—表格中的行添加点击事件
@@ -162,6 +128,9 @@
       */
      rowClick(record) {
        return {
          style: {
            cursor: 'pointer'
          },
          on: {
            click: () => {
              // å…³æœºçŠ¶æ€è®¾å¤‡æ—¥å¿—不弹出工作曲线
@@ -175,10 +144,7 @@
          }
        }
      }
    },
    created() {
    }

  }
</script>

@@ -188,35 +154,35 @@
  @media screen and (min-width: 1920px) {
    .table_logList {
      height: 417px !important;
      overflow: scroll;
      overflow: auto;
    }
  }

  @media screen and (min-width: 1680px) and (max-width: 1920px) {
    .table_logList {
      height: 417px !important;
      overflow: scroll;
      overflow: auto;
    }
  }

  @media screen and (min-width: 1400px) and (max-width: 1680px) {
    .table_logList {
      height: 266px !important;
      overflow: scroll;
      overflow: auto;
    }
  }

  @media screen and (min-width: 1280px) and (max-width: 1400px) {
    .table_logList {
      height: 360px !important;
      overflow: scroll;
      overflow: auto;
    }
  }

  @media screen and (max-width: 1280px) {
    .table_logList {
      height: 170px !important;
      overflow: scroll;
      overflow: auto;
    }
  }
</style>

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

@@ -4,7 +4,6 @@
             :footer="null" :visible="visible"
             @cancel="handleCancel" cancelText="关闭">
      <div>
        <div>
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item label="设备编号" :labelCol="labelCol" :wrapperCol="wrapperCol">
@@ -27,9 +26,8 @@
              <a-form-item label="设备名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input placeholder="输入设备名称查询" :readOnly="readOnly" v-model="queryParams.equipmentName"></a-input>
              </a-form-item>

            </a-col>
            <a-col :span="10">
          <a-col :span="6">
              <a-form-item label="时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <div class="params_time">
                  <a-time-picker :open="stratOpen" format="HH:mm" @openChange="timeHandleChange('start')"
@@ -60,11 +58,9 @@
          </div>
        </div>


        <a-spin :spinning="spinning">
          <div id="workChart" style="width:85%;height: 500px;"/>
        </a-spin>
      </div>
    </a-modal>
  </div>
</template>
@@ -476,51 +472,8 @@
    }
  }

  /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-checkbox-wrapper {
    /*color: #fff;*/
  }

  /deep/ .ant-form-item-label label {
    /*color: #fff;*/
  }

  /deep/ .ant-btn {
    /*position: absolute;*/

  }

  .checkboxgroup {

 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>

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

@@ -1,9 +1,7 @@
<template>
  <a-card :bordered="false">
    <!-- table区域-begin -->
    <div class="table_workLogist">
      <a-table ref="table" bordered size="middle" :rowKey="(record,index)=>{return index}" :columns="columns"
               :dataSource="dataList" :pagination="false" :loading="loadingrunStatus">
    <a-table ref="table" bordered :rowKey="(record,index)=>{return index}" :columns="columns"
             :dataSource="dataList" :pagination="false" :loading="loading">
        <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>
@@ -12,34 +10,18 @@
        </template>
      </a-table>
    </div>
  </a-card>
</template>

<script>
  import JDictSelectTag from '@/components/dict/JDictSelectTag'
  import {
    requestPut,
    deleteAction
  } from '@/api/manage'
  import JInput from '@/components/jeecg/JInput'
  import JEllipsis from '@/components/jeecg/JEllipsis'
  import Tooltip from 'ant-design-vue/es/tooltip'

  export default {
    name: 'WorkLogList',
    components: {
      Tooltip,
      JDictSelectTag,
      JInput,
      JEllipsis
    },
    props: {
      dataList: {
        type: Array,
        required: true,
        default: []
      },
      loadingrunStatus:{
      loading: {
        type:Boolean,
        default: false
      }
@@ -58,23 +40,18 @@
          {
            title: '开始时间',
            align: 'center',
            dataIndex: 'startTime',
            // defaultSortOrder:'descend',
            // sorter: (a, b) => {return a.startTime>b.startTime?1:-1}
            dataIndex: 'startTime'
          },
          {
            title: '结束时间',
            align: 'center',
            dataIndex: 'endTime',
            // defaultSortOrder:'descend',
            // sorter: (a, b) => {return a.endTime>b.endTime?1:-1}
            dataIndex: 'endTime'
          },
          {
            title: '持续时间',
            align: 'center',
            dataIndex: 'duration',
            customRender:(t,r,index) =>{
              // console.log(t)
              var ss = parseInt(t)
              if(ss>=3600){
                // æ ¹æ®ç§’数转换成对应的时分秒
@@ -95,25 +72,15 @@
                    return hour + '小时' + min + '分' + sec + '秒'
                  }
                }
                // if(sec == '00'){
                //   return hour + '小时' + min + '分'
                // }
                // if(min == '00' && sec == '00'){
                //   return hour + '小时'
                // }
                // return hour + '小时' + min + '分' + sec + '秒'

              }else if(60<ss && ss<3600){
                const min1 = parseInt(ss % 3600 / 60) < 10 ? '0' + parseInt(ss % 3600 / 60) : parseInt(ss % 3600 / 60)
                const sec1 = parseInt(ss % 3600 % 60) < 10 ? '0' + parseInt(ss % 3600 % 60) : parseInt(ss % 3600 % 60)
                return  min1 + '分' + sec1 + "秒"
                return min1 + '分' + sec1 + '秒'
              }else{
                const sec2 = parseInt(ss % 3600 % 60) < 10 ? '0' + parseInt(ss % 3600 % 60) : parseInt(ss % 3600 % 60)
                return sec2 + '秒'
              }
            }
            // defaultSortOrder:'descend',
            // sorter: (a, b) => {return a.duration>b.duration?1:-1}
          },
          {
            title: '程序号',
@@ -122,44 +89,43 @@
          }
        ]
      }
    },
    methods: {},
    created() {
    }

  }
</script>

<style lang="less" scoped>
  @import '~@assets/less/common.less';
  @media screen and (min-width: 1920px){
    .table_workLogist{
      height: 417px!important;
      overflow: scroll;
      overflow: auto;
    }
  }

  @media screen and (min-width: 1680px) and (max-width: 1920px){
    .table_workLogist{
      height: 417px!important;
      overflow: scroll;
      overflow: auto;
    }
  }

  @media screen and (min-width: 1400px) and (max-width: 1680px){
    .table_workLogist{
      height: 266px!important;
      overflow: scroll;
      overflow: auto;
    }
  }

  @media screen and (min-width: 1280px) and (max-width: 1400px){
    .table_workLogist{
      height: 360px!important;
      overflow: scroll;
      overflow: auto;
    }
  }

  @media screen and (max-width: 1280px){
    .table_workLogist{
      height: 170px!important;
      overflow: scroll;
      overflow: auto;
    }
  }
</style>