内容修改

819527061@qq.com

2023-07-25 f0b2b04b1b43d4891c1808ad060b9959f9a1209c

 src/pages/show/showIndex/TimesLogs.vue

@@ -19,24 +19,25 @@
          <feComposite operator="atop" in2="SourceGraphic"/>
        </filter>
      </defs>
      <path
        filter="url(#strong-inner)"
        opacity="1" fill="rgba(10, 10, 26, 0.9)"
        d="M334.724,778.500 L29.788,778.500 L6.000,755.703 L6.000,20.881 L24.574,1.500 L337.320,1.500 L354.000,17.485 L354.000,758.386 L334.724,778.500 Z"/>
      <path fill-rule="evenodd"  stroke="rgb(0, 236, 255)" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
            d="M6.000,21.500 L24.000,1.500 L53.000,1.500 "/>
      <path fill-rule="evenodd"  stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
            d="M196.000,1.500 L286.000,1.500 "/>
      <path fill-rule="evenodd"  stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
            d="M366.000,62.500 L366.000,174.500 "/>
      <path fill-rule="evenodd"  stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
            d="M8.000,212.500 L8.000,414.500 "/>
      <path fill-rule="evenodd"  stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
            d="M6.000,661.500 L6.000,696.500 L29.000,718.500 L266.000,718.500 "/>
      <path fill-rule="evenodd"  stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
            d="M366.000,648.500 L366.000,698.500 L347.000,719.500 L325.000,719.500 "/>
        <path
          filter="url(#strong-inner)"
          opacity="1" fill="rgba(10, 10, 26, 0.9)"
          d="M334.724,778.500 L29.788,778.500 L6.000,755.703 L6.000,20.881 L24.574,1.500 L337.320,1.500 L354.000,17.485 L354.000,758.386 L334.724,778.500 Z"/>
        <path fill-rule="evenodd"  stroke="rgb(0, 236, 255)" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
              d="M6.000,21.500 L24.000,1.500 L53.000,1.500 "/>
        <path fill-rule="evenodd"  stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
              d="M196.000,1.500 L286.000,1.500 "/>
        <path fill-rule="evenodd"  stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
              d="M366.000,62.500 L366.000,174.500 "/>
        <path fill-rule="evenodd"  stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
              d="M8.000,212.500 L8.000,414.500 "/>
        <path fill-rule="evenodd"  stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
              d="M6.000,661.500 L6.000,696.500 L29.000,718.500 L266.000,718.500 "/>
        <path fill-rule="evenodd"  stroke="rgb(0, 236, 255)" stroke-width="3px" stroke-linecap="butt" stroke-linejoin="miter" fill="none"
              d="M366.000,648.500 L366.000,698.500 L347.000,719.500 L325.000,719.500 "/>

    </svg>
    <div class="YunweiBlock-wrap-inside">
    <div class="YunweiBlock-wrap-inside shishirizhi-inside">
      <div class="YunweiBlock-title">
        <h1>实时日志</h1>
        <div class="zhuangshi">
@@ -50,38 +51,20 @@
      </div>
      <div class="YunweiBlock-main">
        <div class="TimesLogs-tags">
          <!--<el-tabs v-model="activeName">
            <el-tab-pane label="通讯设备" name="1">
              <div class="tag-block">
                <h1>通讯设备</h1>
              </div>
          <el-tabs v-model="activeName">
            <el-tab-pane
              v-for="item in timeLogsData"
              :key="item.label"
              :label="item.label">
              <TimesLogsTable :logType="item.name" :label="item.label" v-if="activeName == item.name"></TimesLogsTable>
            </el-tab-pane>
            <el-tab-pane label="服务器" name="2">服务器</el-tab-pane>
            <el-tab-pane label="门禁" name="3">门禁</el-tab-pane>
            <el-tab-pane label="通讯设备" name="4">通讯设备</el-tab-pane>
            <el-tab-pane label="服务器" name="5">服务器</el-tab-pane>
            <el-tab-pane label="门禁" name="5">门禁</el-tab-pane>
          </el-tabs>-->
          </el-tabs>

          <div class="tag-block">
            <h1>服务器</h1>
          </div>
          <div class="tag-block">
            <h1>门禁</h1>
          </div>
          <div class="tag-block">
            <h1>通讯设备</h1>
          </div>
          <div class="tag-block">
            <h1>服务器</h1>
          </div>
          <div class="tag-block">
            <h1>门禁</h1>
          </div>

        </div>
        <div class="TimesLogs-table">
        <!--<div class="TimesLogs-table">
          <dv-scroll-board :config="ywTableConfig" style="width:500px;height:220px" />
          <!--<el-table
          &lt;!&ndash;<el-table
            style="width: 100%"
            :header-cell-class-name="headerCellName"
            stripe
@@ -102,8 +85,8 @@
              header-align="center"
              min-width="40">
            </el-table-column>
          </el-table>-->
        </div>
          </el-table>&ndash;&gt;
        </div>-->

      </div>
    </div>
@@ -113,65 +96,82 @@

<script>
    import {animateShanFlash} from '@/utils/animateShanFlash'
    import {getWarn} from '@/api/daping'
    import TimesLogsTable from "./TimesLogs/TimesLogsTable";

    export default {
        name: "TimesLogs",
        components: {
            TimesLogsTable
        },
        data() {
            return {
                value1:'',
                ywTableConfig: {
                    header: ['时间','设备名称','原因'],
                    headerBGC: 'rgba(255, 255, 255, 0)',
                    oddRowBGC: 'rgba(0,213,255,0.08)',
                    evenRowBGC: 'rgba(255, 255, 255, 0)',
                    // indexHeader: '#',
                    // index: 'true',
                    align:'center',
                    hoverPause: 'true',
                    columnWidth: [100,140],
                    data: [
                        ['2023-04-06','3号服务器异常，报警错误', '异常错误'],
                        ['2023-04-06','3号服务器异常，报警错误', '异常错误'],
                        ['2023-04-06','3号服务器异常，报警错误', '异常错误'],
                        ['2023-04-03','3号服务器异常，报警错误', '异常错误'],
                        ['2023-03-02','3号服务器异常，报警错误', '异常错误'],
                        ['2023-03-02','3号服务器异常，报警错误', '异常错误'],
                        ['2023-03-02','3号服务器异常，报警错误', '异常错误'],
                        ['2023-03-02','3号服务器异常，报警错误', '异常错误'],
                        ['2023-03-02','3号服务器异常，报警错误', '异常错误'],
                        ['2023-03-02','3号服务器异常，报警错误', '异常错误'],
                        ['2023-03-02','3号服务器异常，报警错误', '异常错误'],
                        ['2023-03-02','3号服务器异常，报警错误', '异常错误'],
                        ['2023-03-02','3号服务器异常，报警错误', '异常错误'],
                    ],
                    rowNum: 14
                },
                activeName:'1'
                activeName:'0',
                timeLogsData:[{
                    label: '全部',
                    name:'0'
                },{
                    label: '主机',
                    name:'1'
                },{
                    label: '数通设备',
                    name:'2'
                },{
                    label: 'ups',
                    name:'3'
                },{
                    label: '空调',
                    name:'4'
                },{
                    label: '温湿度',
                    name:'5'
                },{
                    label: '漏水',
                    name:'6'
                },{
                    label: '其他',
                    name:'7'
                }],
                type:null,
                label:''
            }
        },
        mounted() {
            this.loading()
            //this.loading()
        },
        methods: {
          getWarn(){
            getWarn().then(res => {
              res.data;
            })
          },
            loading() {
                const tl = this.gsap.timeline({defaults: {duration: 0.8}})
                animateShanFlash('.zhuangshi span',{
                    duration: 1,
                })
                tl.from('.TimesLogs-wrap',{
                    x: '200',
                    autoAlpha: 0,
                    duration:0.8,
                    // ease: 'power2.out',
                    delay:0.5,
                    ease:'back.out(1.7)',
                tl.fromTo('.TimesLogs-wrap',{
                  x:'105%'
                },{
                  x: '0',
                  autoAlpha: 0,
                  duration:0.8,
                  // ease: 'power2.out',
                  delay:0.5,
                  ease:'back.out(1.7)',
                })
            },
          loading2() {
            const tl = this.gsap.timeline({defaults: {duration: 0.8}})
            animateShanFlash('.zhuangshi span',{
              duration: 1,
            })
            tl.fromTo('.TimesLogs-wrap',{
              x:'0'
            },{
              x: '105%',
              autoAlpha: 0,
              duration:0.8,
              // ease: 'power2.out',
              delay:0.5,
              ease:'back.out(1.7)',
            })
          },
            headerCellName(obj) {
                return 'kehuxinxiBox'
            },
@@ -180,25 +180,100 @@
</script>

<style lang="scss">
  .TimesLogs-table{
    width: 100%;
    height: calc(100% - 0.4792rem  /* 92/192 */);
    .dv-scroll-board{
      width: 100% !important;
      height: 100%!important;
    }
    .header-item{
      width: 50%;
      display: flex;
      justify-content: center;
    }
    .dv-scroll-board .rows .ceil{
      font-size: 0.0677rem  /* 13/192 */;

.TimesLogs-wrap{
  .is-active{
    border: 1px solid rgba(255,80,80,0.8);
    box-shadow: 0 0 0.078125rem  /* 15/192 */ rgba(255,80,80,0.5) inset!important;
    color: #fff;
    &:before,
    &:after{
      content: none!important;
      border: none!important;
      box-shadow: none!important;
    }
  }
.YunweiBlock-wrap-inside{
  .el-tabs__active-bar,.el-tabs__nav-wrap::after{
    height: 0!important;
  }
}
.TimesLogs-tags{
  .el-tabs__nav{
    display: flex;
    flex-wrap: wrap;
  }
  .el-tabs__item{
    width: 0.4948rem /* 95/192 */;
    height: 0.1771rem /* 34/192 */;
    box-shadow: 0 0 10px rgba(0, 207, 249, 0.5) inset;
    margin-top: 0.03125rem /* 6/192 */;
    margin-bottom: 0.03125rem /* 6/192 */;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #fff;
    font-size: 0.078125rem /* 15/192 */;
    &:nth-child(3n){
      margin-right: 0.0521rem  /* 10/192 */;
      margin-left: 0.0521rem  /* 10/192 */;
    }
    /*&:nth-child(n) {*/
    /*  margin-left: 0;*/
    /*}*/

    /*&:nth-child(3n) {*/
    /*  margin-right: 0;*/
    /*}*/
    &:before,
    &:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
      box-sizing: border-box;
      border: 1px solid #00d5ff;
      transition: clip-path .5s ease-in-out;
    }

    &:before {
      clip-path: inset(0 calc(100% - 10px) calc(100% - 10px) 0);
    }

    &:after {
      clip-path: inset(calc(100% - 10px) 0 0 calc(100% - 10px));
    }
    &:hover{
      &:before,
      &:after{
        clip-path: inset(0 0 0 0);
      }
    }
  }
  .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2), .el-tabs--bottom .el-tabs__item.is-top:nth-child(2), .el-tabs--top .el-tabs__item.is-bottom:nth-child(2), .el-tabs--top .el-tabs__item.is-top:nth-child(2){
    padding-left: 20px!important;
  }
  .el-tabs--bottom .el-tabs__item.is-bottom:last-child, .el-tabs--bottom .el-tabs__item.is-top:last-child, .el-tabs--top .el-tabs__item.is-bottom:last-child, .el-tabs--top .el-tabs__item.is-top:last-child{
    padding-right: 20px!important;
  }
  .el-tabs__content{
    width: 100%;
    height: calc(100% - 0.7292rem  /* 140/192 */);
  }
  .el-tabs__header{
    margin: 0 0 5px;
  }
  .el-tab-pane{
    width: 100%;
    height: 100%;
  }
  .el-tabs{
    width: 100%;
    height: 100%;
  }
}
</style>
@@ -208,13 +283,13 @@
    padding:0;
  }
  .TimesLogs-wrap{
    width: 1.8229rem  /* 350/192 */;
    width: 1.875rem  /* 360/192 */;
    height: 100%;
    .yunweiSvg{
      width: 100%;
      height: 100%;
    }
    .YunweiBlock-wrap-inside{
    .shishirizhi-inside{
      position: absolute;
      left: 0.1042rem  /* 20/192 */;
      top: 0.1042rem  /* 20/192 */;
@@ -255,17 +330,15 @@

      .TimesLogs-tags {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;

        .tag-block {
          width: 0.4948rem /* 95/192 */
        ;
          height: 0.1771rem /* 34/192 */
        ;
          width: 0.4948rem /* 95/192 */;
          height: 0.1771rem /* 34/192 */;
          box-shadow: 0 0 10px rgba(0, 207, 249, 0.5) inset;
          margin: 0.03125rem /* 6/192 */
        ;
          margin: 0.03125rem /* 6/192 */;
          cursor: pointer;
          display: flex;
          align-items: center;
@@ -274,8 +347,7 @@

          h1 {
            color: #fff;
            font-size: 0.078125rem /* 15/192 */
          ;
            font-size: 0.078125rem /* 15/192 */;
          }

          &:nth-child(n) {