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

zhaowei

2025-06-18 8c610945469c4a4a0b0ff2b868e87f25fe01792d

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

@@ -1,46 +1,28 @@
<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">
        <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>
        </template>
      </a-table>
    </div>
  </a-card>
  <div class="table_workLogist">
    <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>
        <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>
      </template>
    </a-table>
  </div>
</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:{
        type:Boolean,
      loading: {
        type: Boolean,
        default: false
      }
    },
@@ -58,62 +40,47 @@
          {
            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)
            customRender: (t, r, index) => {
              var ss = parseInt(t)
              if(ss>=3600){
              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'){
                if (min == '00') {
                  if (sec == '00') {
                    return hour + '小时'
                  }else{
                    return hour + '小时'+ sec + '秒'
                  } else {
                    return hour + '小时' + sec + '秒'
                  }

                }else{
                  if(sec == '00') {
                } else {
                  if (sec == '00') {
                    return hour + '小时' + min + '分'
                  }else{
                  } else {
                    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){
              } 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{
                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;
  @media screen and (min-width: 1920px) {
    .table_workLogist {
      height: 417px !important;
      overflow: auto;
    }
  }
  @media screen and (min-width: 1680px) and (max-width: 1920px){
    .table_workLogist{
      height: 417px!important;
      overflow: scroll;

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

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

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

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