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="enterpriseUrl" style="width:200px;height:200px">
                    <br>
                    <button class="auth-btn pointer">已认证</button>
                </el-col>
                <el-col :span="8">
                    <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}}</span></div>
                </el-col>
                <el-col :span="12">
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="是否公开:">
                            <el-radio-group v-model="form.isItPublic" @change="changeIsPublic">
                                <el-radio label="0" >是</el-radio>
                                <el-radio label="1" >否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="企业名片:" prop="enterpriseId">
                            <vue-qr ref="Qrcode" :logoSrc="imageUrl" :text="qrTest" :size="200" :margin="0"></vue-qr>
                        </el-form-item>
                        <el-form-item >
                            <el-button type="primary" size="mini"  @click="downloadImg">下载企业名片</el-button>
                        </el-form-item>
                    </el-form>
                </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"
import vueQr from 'vue-qr'
export default {
    name:'home',
    components: {
        vueQr
    },
    data() {
        return {
            day:getDay(),
            times:'',
            tableData: [
            ],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 8
            },
            companyInfo:{},
            enterpriseUrl:'',
            // 表单参数
            form: {
                isItPublic:'0'
            },
            imageUrl:"",
            companyID:'',
            qrTest:"",
        }
    },
    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 =>{
                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
                }
                this.enterpriseUrl = this.companyInfo.enterpriseUrl || require("@/assets/images/profile.jpg") 
                this.companyID = this.companyInfo.enterpriseId
                if(this.companyInfo.enterpriseUrl) {
                    this.imageUrl = require(this.companyInfo.enterpriseUrl)
                }
                this.changeIsPublic()
            })
        },
        downloadImg () {
            const iconUrl = this.$refs.Qrcode.$el.src
            let a = document.createElement('a')
            let event = new MouseEvent('click')
            a.download = '二维码'
            a.href = iconUrl
            a.dispatchEvent(event)
        },
        changeIsPublic(val){
            this.qrTest = this.companyID+'&' + this.form.isItPublic
        },
        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>