对接接口

zhangxiaoxu123

2023-07-04 22f9e400ea731da9ee6be6fa389adebfc3438f63

 src/pages/show/showIndex/YunweiBlock.vue

@@ -51,13 +51,18 @@
       <div class="YunweiBlock-main">
         <div class="datePicker-box">
           <el-date-picker
             @change="changePicker"
             v-model="value1"
             type="date"
             placeholder="选择日期">
             format="yyyy-MM-dd"
             value-format="yyyy-MM-dd"
             type="daterange"
             range-separator="至"
             start-placeholder="开始日期"
             end-placeholder="结束日期">
           </el-date-picker>
         </div>
         <div class="YunweiBlock-table">
           <dv-scroll-board :config="ywTableConfig" style="width:500px;height:220px" />
           <dv-scroll-board :key="key" class="yunwei-scroll" @click="handleClickRow" :config="ywTableConfig" style="width:500px;height:220px" />
           <!--<el-table
             style="width: 100%"
             :header-cell-class-name="headerCellName"
@@ -84,17 +89,25 @@

       </div>
     </div>

     <YunweiBlockForm ref="YunweiBlockForm" v-if="YunweiBlockVisable"></YunweiBlockForm>
   </div>
</template>

<script>
  import {getTaskByDate} from '@/api/daping'
    import {animateShanFlash} from '@/utils/animateShanFlash'
  import YunweiBlockForm from "./YunweiBlock/YunweiBlockForm";
    export default {
        name: "YunweiBlock",
        components: {
            YunweiBlockForm
        },
        data() {
            return {
                key:1,
                value1:'',
                startDate:'',
                endDate:'',
                ywTableConfig: {
                    header: ['内容','日期'],
                    headerBGC: 'rgba(255, 255, 255, 0)',
@@ -104,41 +117,41 @@
                    // index: 'true',
                    align:'center',
                    hoverPause: 'true',
                    columnWidth: ['70%','30%'],
                    columnWidth: ['70%','30%','0'],
                    data: [
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                        // ['3号服务器异常，报警错误', '2023-03-06',],
                    ],
                    rowNum: 14
                },
@@ -151,13 +164,76 @@
                },{
                    content1:'3号服务器异常，报警错误',
                    data:'2023-03-06'
                }]
                }],
                YunweiBlockVisable: false,
                timer: null
            }
        },
        destroyed() {
          clearInterval(this.timer)
        },
        mounted() {
            this.loading()
            this.resizeLsit()
            this.timer = setInterval(() => {
                this.getTaskByDate()
            },300000)
        },
        watch: {

        },
        methods: {
            resizeLsit() {
              this.key ++
              let rows = document.querySelector('.yunwei-scroll')
              let height = rows.clientHeight
              this.ywTableConfig.rowNum = Math.floor(height/38)
              this.getTaskByDate()
            },
            handleClickRow(config) {    //碘酒行信息
                console.log(config.row[2],'config===')
                console.log(document.querySelector('.configSpan').innerHTML,'document.querySelector(\'.configSpan\')')

                this.YunweiBlockVisable = true
                this.$nextTick(() => {
                    this.$refs.YunweiBlockForm.init(document.querySelector('.configSpan').innerHTML)
                })

            },
            changePicker(val) {  //日期change
                if(val) {
                   this.startDate = val[0]
                   this.endDate = val[1]
                }else {
                    this.startDate = ''
                    this.endDate = ''
                }
                this.getTaskByDate()
            },
            getTaskByDate() {  //运维日志
                getTaskByDate({startDate:this.startDate,endDate:this.endDate}).then(res => {
                    if(res.code == 0) {
                        this.ywTableConfig = {
                            header : ['内容','日期'],
                            headerBGC: 'rgba(255, 255, 255, 0)',
                            oddRowBGC: 'rgba(0,213,255,0.08)',
                            evenRowBGC: 'rgba(255, 255, 255, 0)',
                            // indexHeader: '#',
                            // index: 'true',
                            rowNum:this.ywTableConfig.rowNum,
                            align:'center',
                            hoverPause: 'true',
                            columnWidth: [180,120,0],
                            data:[]
                        }
                        let data = res.data.map(item => {
                            let tempStr = `<span class="configSpan" style="display:none">${item.id}</span>`
                            return [`${item.title}`,`${item.startDate}`,tempStr]
                        })
                        this.$set(this.ywTableConfig,'data',data)
                    }
                })
            },
            loading() {
                const tl = this.gsap.timeline({defaults: {duration: 0.8}})
                animateShanFlash('.zhuangshi span',{
@@ -184,6 +260,24 @@
    width: 100%;
    margin: 0.078125rem  /* 15/192 */ 0 0.0521rem  /* 10/192 */ 0;
    height: 0.1771rem  /* 34/192 */;
    .el-range-input{
      background: transparent;
      border: 1px solid #2f5a8b;
      width: 0.625rem  /* 120/192 */;
    }
    .el-date-editor .el-range-input{
      color: #fff;
    }
    .el-icon-circle-close:before{
      content: "\E78D";
      color: #1ee3f3 ;
      font-size: 0.1042rem  /* 20/192 */;
    }
    .el-range-separator{
      color: #fff;
      padding: 0;
      font-size: 0.0521rem  /* 10/192 */;
    }
    .el-input{
      background-color: transparent;
      border: 1px solid #1681af;