supplier-flair/src/views/home/index2.vue

<template>
    <div class="my-container">
        <!-- <div class="date-top">
            <span>欢迎您</span>
            <span>{{day}}</span>
            <span>{{times}}</span>
            <span>{{formatWeek(new Date())}}</span>
        </div> -->
        <el-row class="date-top">
            <el-col :span="11">{{day}}</el-col>
            <el-col :span="7" class="text-center">{{times}}</el-col>
            <el-col :span="6" class="text-center">{{formatWeek(new Date())}}</el-col>
        </el-row>
        <div class="company-info-block">
            <el-row>
                <el-col :span="4">
                    <img src="@/assets/images/profile.jpg" alt="">
                    <button class="auth-btn pointer">已认证</button>
                </el-col>
                <el-col :span="20">
                    <div><label class="company-info-lable text-muted">企业名称：</label><span class="company-info-span">{{companyInfo.enterpriseName}}</span></div>
                    <div><label class="company-info-lable text-muted">用户名：</label><span class="company-info-span">{{companyInfo.userName}}</span></div>
                    <div><label class="company-info-lable text-muted">手机号：</label><span class="company-info-span">{{companyInfo.phonenumber}}</span></div>
                    <div><label class="company-info-lable text-muted">上次登录时间：</label><span class="company-info-span">{{companyInfo.loginDate.split('T')[0]}}</span></div>
                </el-col>
            </el-row>
        </div>
        <div class="app-container">
            <div class="title-container">
                <label >操作日志</label>
                <el-button type="text" class="fr"  @click="jumpRouter('Operlog')">更多</el-button>
            </div>
            <el-table :data="tableData">
                <el-table-column label="日志编号" align="center" prop="operId" />
                <el-table-column label="系统模块" align="center" prop="title" />
                <el-table-column label="请求方式" align="center" prop="requestMethod" />
                <el-table-column label="操作人员" align="center" prop="operName" />
                <el-table-column label="主机" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
                <el-table-column label="操作地点" align="center" prop="operLocation" :show-overflow-tooltip="true" />
                <el-table-column label="操作日期" align="center" prop="operTime" width="180">
                    <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.operTime) }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <!-- <div class="el-col-2" style="height:1px">
            </div>
            <div class="el-col-6">
                <div class="echarts-content" id="echarts_1"></div>
            </div> -->
        </div>
        
    </div>
</template>
<script>
import {getDay} from "@/utils/index"
// import echarts from "echarts";
import { list} from "@/api/monitor/operlog";
import {getIndexInfo} from "@/api/home/index"
export default {
    name:'home',
    data() {
        return {
            day:getDay(),
            times:'',
            tableData: [
            ],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 8
            },
            companyInfo:{}
        }
    },
    mounted() {
        let theDate = new Date()
        this.times = theDate.getHours()+":"+ theDate.getMinutes()+ ":" +theDate.getSeconds()
        setInterval(() => {
            let theDate = new Date()
            this.times = theDate.getHours()+":"+ theDate.getMinutes()+ ":" +theDate.getSeconds() 
        }, 1000);
        this.initData()
        // this.initEcharts()
    },
    methods: {
        initData() {
            list(this.queryParams).then( response => {
                this.tableData = response.rows;
            });
            getIndexInfo().then(res =>{
                console.log(res);
                this.companyInfo = res.data
                if(this.companyInfo.loginDate) {
                    let times = this.companyInfo.loginDate.split("T")[0] + ' ' + this.companyInfo.loginDate.split("T")[1].split(".")[0]
                    this.companyInfo.loginDate = times
                }
            })
        },
        jumpRouter(name){
            this.$router.push({name:name})
        },
        initEcharts(){
            this.echarts_1 = echarts.init(document.getElementById("echarts_1"));
            this.setEcharts()
        },
        setEcharts() {
            let option = {
                title: {
                    text: '企业邀请',
                    left: 'left'
                },
                color:['rgb(115 192 222)','rgb(84 112 198)'],
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        name: '企业邀请',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            {value: 148, name: '已接受邀请'},
                            {value: 35, name: '邀请中'},
                        ],
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            this.echarts_1.setOption(option);
        }
    },
}
</script>
<style lang="scss" scoped>
.title-container {
    position: relative;
    width: 100%;
    height: 60px;
    line-height: 60px;
}
.date-top {
    position: relative;
    margin: 0 auto;
    height: 60px;
    width: 500px;
    line-height: 60px;
    font-size: 30px;
    color: #027DB4;
    border-bottom: 2px solid #027DB4;
    span {
        display: inline-block;
        padding: 0 15px;
    }
}
.echarts-content {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 400px;
}
.my-container {
    padding: 20px 10%;
}
.company-info-block {
    position: relative;
    width: 100%;
    .auth-btn {
        position: relative;
        margin: 0 auto;
        width: 70px;
        height: 25px;
        background-color: gray;
        color: #fff;
        border: 0;
        &:active,:hover {
            background-color: rgb(185, 184, 184);
        }
    }
    .company-info-lable {
        width: 100px;
        // height: 50px;
        line-height: 50px;
        font-size: 16px;
        text-align: right;
    }
    .company-info-span {
        // width: 300px;
        // height: 50px;
        font-size: 16px;
        line-height: 50px;
    }
}
</style>