<template>
    <div class="testdiv">
        <div class="divborder newSearchDiv" style="margin:0px;">
            <div class="filter">
                <label>{{$t(900908)}}：</label>
                <DatePicker
                    class="searchInput MaxWidth"
                    type="datetimerange"
                    v-model="dateTime"
                    @on-change="selectdate"
                ></DatePicker>
            </div>
            <div class="searchBtn">
            <Button type="primary" class="twoWord" icon="ios-search" @click="search()">{{$t('1001')}}</Button>
            </div>
        </div>
        <!-- 质量模块各通道新增数据量 -->
        <div class="divborder newTableDiv">
            <h4>1、{{$t('5500045')}}</h4>
            <Table
            class="tableClass"
            highlight-row
            :data="tableData1"
            :columns="tableColumns1"
            :max-height="300"
            ></Table>
        </div>
        <!-- 质量模块各通道操作人数 -->
        <div class="divborder newTableDiv">
            <h4>2、{{$t('5500046')}}</h4>
            <Table
            class="tableClass"
            highlight-row
            :data="tableData2"
            :columns="tableColumns2"
            :max-height="300"
            ></Table>
        </div>

        <!-- 质量模块人员数据录入量 -->
        <div class="divborder newTableDiv">
            <h4>3、{{$t('5500047')}}</h4>
            <Table
            class="tableClass"
            highlight-row
            :data="tableData3"
            :columns="tableColumns3"
            :max-height="300"
            ></Table>
        </div>

        <!-- 安灯模块通道操作数据 -->
        <div class="divborder newTableDiv">
            <h4>4、{{$t('5500048')}}</h4>
            <Table
            class="tableClass"
            highlight-row
            :data="tableData4"
            :columns="tableColumns4"
            :max-height="300"
            ></Table>
        </div>
        <!-- 安灯模块异常类别数据量 -->
        <div class="divborder newTableDiv">
            <h4>5、{{$t('5500049')}}</h4>
            <Table
           class="tableClass"
            highlight-row
            :data="tableData5"
            :columns="tableColumns5"
            :max-height="300"
            ></Table>
        </div>
        <!-- 安灯模块人员数据量 -->
        <div class="divborder newTableDiv">
            <h4>6、{{$t('5500050')}}</h4>
            <Table
            class="tableClass"
            highlight-row
            :data="tableData6"
            :columns="tableColumns6"
            :max-height="300"
            ></Table>
        </div>
        <!--安灯模块异常处理时长-通道  -->
        <div class="divborder newTableDiv">
            <h4>7、{{$t('5500051')}}</h4>
            <Table
            class="tableClass"
            highlight-row
            :data="tableData7"
            :columns="tableColumns7"
            :max-height="300"
            ></Table>
        </div>
        <!-- 安灯模块异常处理时长-责任部门 -->
        <div class="divborder newTableDiv">
            <h4>8、{{$t('5500052')}}</h4>
            <Table
            class="tableClass"
            highlight-row
            :data="tableData8"
            :columns="tableColumns8"
            :max-height="300"
            ></Table>
        </div>

        <!-- 安灯模块异常处理时长-责任人员 -->
        <div class="divborder newTableDiv">
            <h4>9、{{$t('5500053')}}</h4>
            <Table
            class="tableClass"
            highlight-row
            :data="tableData9"
            :columns="tableColumns9"
            :max-height="300"
            ></Table>
        </div>
        <!-- 追溯模块新增数据量(通道) -->
        <div class="divborder newTableDiv">
            <h4>10、{{$t('5500054')}}</h4>
            <Table
            class="tableClass"
            highlight-row
            :data="tableData10"
            :columns="tableColumns10"
            :max-height="300"
            ></Table>
        </div>
        <!-- KPI指标使用情况 -->
        <div class="divborder newTableDiv">
            <h4>11、{{$t('5500055')}}</h4>
            <Table
            class="tableClass"
            highlight-row
            :data="tableData11"
            :columns="tableColumns11"
            :max-height="300"
            ></Table>
        </div>
        <!--设备模块各操作的工单量  -->
        <div class="divborder newTableDiv">
            <h4>12、{{$t('设备模块各操作的工单量')}}</h4>
            <Table
            class="tableClass"
            highlight-row
            :data="tableData12"
            :columns="tableColumns12"
            :max-height="300"
            ></Table>
        </div>
        <!-- 设备模块各操作操作人数 -->
        <div class="divborder newTableDiv">
            <h4>13、{{$t('5500056')}}</h4>
            <Table
             class="tableClass"
            highlight-row
            :data="tableData13"
            :columns="tableColumns13"
            :max-height="300"
            ></Table>
        </div>

    </div>
</template>

<script>
export default {
    data () {
        return {
            dateTime: '', // 时间范围
            dtStart: '', // 开始时间
            dtEnd: '', // 结束时间

            tableData1: [],
            tableColumns1: [
                {
                    type: 'index',
                    title: this.$t(1008),
                    key: 'xuhao',
                    width: '80px'
                },
                {
                    title: this.$t('5500057'),
                    key: ''
                },
                {
                    title: this.$t('5500058'),
                    key: ''
                },
                {
                    title: this.$t('5500059'),
                    key: ''
                },
                {
                    title: this.$t('900942'),
                    key: ''
                },
                {
                    title: this.$t('400016'),
                    key: ''
                }
            ],
            tableData2: [],
            tableColumns2: [
                {
                    type: 'index',
                    title: this.$t(1008),
                    key: 'xuhao',
                    width: '80px'
                },
                {
                    title: this.$t('5500060'),
                    key: ''
                },
                {
                    title: this.$t('5500061'),
                    key: ''
                },
                {
                    title: this.$t('5500062'),
                    key: ''
                },
                {
                    title: this.$t('5500063'),
                    key: ''
                },
                {
                    title: this.$t('5500064'),
                    key: ''
                }
            ],
            tableData3: [],
            tableColumns3: [
                {
                    type: 'index',
                    title: this.$t(1008),
                    key: 'xuhao',
                    width: '80px'
                },
                {
                    title: this.$t('100046'),
                    key: ''
                },
                {
                    title: this.$t('5500057'),
                    key: ''
                },
                {
                    title: this.$t('5500058'),
                    key: ''
                },
                {
                    title: this.$t('1950505'),
                    key: ''
                },
                {
                    title: this.$t('900942'),
                    key: ''
                },
                {
                    title: this.$t('400016'),
                    key: ''
                }
            ],
            tableData4: [],
            tableColumns4: [
                {
                    type: 'index',
                    title: this.$t(1008),
                    key: 'xuhao',
                    width: '80px'
                },
                {
                    title: this.$t('5000009'),
                    key: ''
                },
                {
                    title: this.$t('5500065'),
                    key: ''
                },
                {
                    title: this.$t('5500066'),
                    key: ''
                },
                {
                    title: this.$t('5500067'),
                    key: ''
                },
                {
                    title: this.$t('5500068'),
                    key: ''
                },
                {
                    title: this.$t('5500069'),
                    key: ''
                }
            ],
            tableData5: [],
            tableColumns5: [
                {
                    type: 'index',
                    title: this.$t(1008),
                    key: 'xuhao',
                    width: '80px'
                },
                {
                    title: this.$t('5000010'),
                    key: ''
                },
                {
                    title: this.$t('5500065'),
                    key: ''
                },
                {
                    title: this.$t('5500066'),
                    key: ''
                },
                {
                    title: this.$t('5500067'),
                    key: ''
                },
                {
                    title: this.$t('5500068'),
                    key: ''
                },
                {
                    title: this.$t('5500069'),
                    key: ''
                }
            ],
            tableData6: [],
            tableColumns6: [
                {
                    type: 'index',
                    title: this.$t(1008),
                    key: 'xuhao',
                    width: '80px'
                },
                {
                    title: this.$t('100046'),
                    key: ''
                },
                {
                    title: this.$t('5500065'),
                    key: ''
                },
                {
                    title: this.$t('5500066'),
                    key: ''
                },
                {
                    title: this.$t('5500067'),
                    key: ''
                },
                {
                    title: this.$t('5500068'),
                    key: ''
                }
            ],
            tableData7: [],
            tableColumns7: [
                {
                    type: 'index',
                    title: this.$t(1008),
                    key: 'xuhao',
                    width: '80px'
                },
                {
                    title: this.$t('5000009'),
                    key: ''
                },
                {
                    title: this.$t('5000015'),
                    key: ''
                },
                {
                    title: this.$t('5000016'),
                    key: ''
                },
                {
                    title: this.$t('5500070'),
                    key: ''
                }
            ],
            tableData8: [],
            tableColumns8: [
                {
                    type: 'index',
                    title: this.$t(1008),
                    key: 'xuhao',
                    width: '80px'
                },
                {
                    title: this.$t('8000022'),
                    key: ''
                },
                {
                    title: this.$t('5000015'),
                    key: ''
                },
                {
                    title: this.$t('5000016'),
                    key: ''
                },
                {
                    title: this.$t('5500070'),
                    key: ''
                }
            ],
            tableData9: [],
            tableColumns9: [
                {
                    type: 'index',
                    title: this.$t(1008),
                    key: 'xuhao',
                    width: '80px'
                },
                {
                    title: this.$t('100046'),
                    key: ''
                },
                {
                    title: this.$t('5000015'),
                    key: ''
                },
                {
                    title: this.$t('5000016'),
                    key: ''
                },
                {
                    title: this.$t('5500070'),
                    key: ''
                }
            ],
            tableData10: [],
            tableColumns10: [
                {
                    type: 'index',
                    title: this.$t(1008),
                    key: 'xuhao',
                    width: '80px'
                },
                {
                    title: this.$t('5000009'),
                    key: ''
                },
                {
                    title: this.$t('5500071'),
                    key: ''
                },
                {
                    title: this.$t('5500072'),
                    key: ''
                }
            ],
            tableData11: [],
            tableColumns11: [
                {
                    type: 'index',
                    title: this.$t(1008),
                    key: 'xuhao',
                    width: '80px'
                },
                {
                    title: this.$t('100000'),
                    key: ''
                },
                {
                    title: this.$t('5500073'),
                    key: ''
                },
                {
                    title: this.$t('5500074'),
                    key: ''
                },
                {
                    title: this.$t('5500075'),
                    key: ''
                },
                {
                    title: this.$t('5500076'),
                    key: ''
                },
                {
                    title: this.$t('5500077'),
                    key: ''
                },
                {
                    title: this.$t('5500078'),
                    key: ''
                },
                {
                    title: this.$t('5500079'),
                    key: ''
                }
            ],
            tableData12: [],
            tableColumns12: [
                {
                    type: 'index',
                    title: this.$t(1008),
                    key: 'xuhao',
                    width: '80px'
                },
                {
                    title: this.$t('100001'),
                    key: ''
                },
                {
                    title: this.$t('5500080'),
                    key: ''
                },
                {
                    title: this.$t('5500081'),
                    key: ''
                },
                {
                    title: this.$t('5500082'),
                    key: ''
                },
                {
                    title: this.$t('5500083'),
                    key: ''
                },
                {
                    title: this.$t('5500084'),
                    key: ''
                },
                {
                    title: this.$t('5500085'),
                    key: ''
                }
            ],
            tableData13: [],
            tableColumns13: [
                {
                    type: 'index',
                    title: this.$t(1008),
                    key: 'xuhao',
                    width: '80px'
                },
                {
                    title: this.$t('100001'),
                    key: ''
                },
                {
                    title: this.$t('5500080'),
                    key: ''
                },
                {
                    title: this.$t('5500081'),
                    key: ''
                },
                {
                    title: this.$t('5500082'),
                    key: ''
                },
                {
                    title: this.$t('5500083'),
                    key: ''
                },
                {
                    title: this.$t('5500084'),
                    key: ''
                },
                {
                    title: this.$t('5500085'),
                    key: ''
                }
            ]
        }
    },
    created () {
        this.inittime()
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
        this.tableColumns2 = this.$time.initTableTitle(this.tableColumns2)
        this.tableColumns3 = this.$time.initTableTitle(this.tableColumns3)
        this.tableColumns4 = this.$time.initTableTitle(this.tableColumns4)
        this.tableColumns5 = this.$time.initTableTitle(this.tableColumns5)
        this.tableColumns6 = this.$time.initTableTitle(this.tableColumns6)
        this.tableColumns7 = this.$time.initTableTitle(this.tableColumns7)
        this.tableColumns8 = this.$time.initTableTitle(this.tableColumns8)
        this.tableColumns9 = this.$time.initTableTitle(this.tableColumns9)
        this.tableColumns10 = this.$time.initTableTitle(this.tableColumns10)
        this.tableColumns11 = this.$time.initTableTitle(this.tableColumns11)
        this.tableColumns12 = this.$time.initTableTitle(this.tableColumns12)
        this.tableColumns13 = this.$time.initTableTitle(this.tableColumns13)
    },
    methods: {
        inittime () {
            // 时间赋值
            var date = new Date()
            var dtStart = this.timestampToTime(date.getTime() - 3600 * 1000 * 24 * 7)
            var dtEnd = this.timestampToTime(date.getTime())
            this.dateTime = [dtStart, dtEnd]
        },
        timestampToTime (timeStampe) {
            var date = new Date(timeStampe) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-'
            var M =
                (date.getMonth() + 1 < 10
                    ? '0' + (date.getMonth() + 1)
                    : date.getMonth() + 1) + '-'
            var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
            var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':'
            var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':'
            var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds())
            return Y + M + D + h + m + s
        },
        selectdate (e) {
            this.dtStart = e[0]
            this.dtEnd = e[1]
        },
        search () {
            var data = {
                starttime: this.dtStart,
                endtime: this.dtEnd
            }

            console.log(data)
        }
    }

}
</script>

 <style lang="less" scoped>
    h4{
        text-align:center;
    }
</style>
