<!-- 环境验证页面 -->
<template>
    <div class="verifyEnvironment">
        <div class="labContent">
            <div class="labContent-title">
                <p >XC环境验证系统</p>
            </div>
            <div class="themeContent">
                <div class="themeName"> <i></i> XXX环境 </div>
                <div class="themeOne">
                    <p class="themeOne-title"> <i></i> 环境详情 </p>
                    <div class="themeOne-context">
                        <img src="../assets/img/save.png" alt="">
                        <div style="width: 100px;height: 100px;">
                            <span id="charts-left" style="width: 100px;height: 100px;"  class="chart-left"></span>
                        </div>
                    </div>
                </div>
                <div class="themeTwo">
                    <p class="themeOne-title"> <i></i> 项目体验 </p>
                    <div class="themeTwo-context">
                        <div class="threeTitle">xxx项目</div>
                        <div class="">
                            <ul>
                                <li class="reuseLi" v-for="(item,index) in dataLi">
                                    <div class="reuseLi-top">
                                        <i></i>
                                        <span>{{item.name}}</span>
                                        <a>体验</a>
                                    </div>
                                    <div class="reuseLi-bottom">
                                        <!--<p v-for="(item,index) in dataOne" :key="index">{{item.name}}：<span></span></p>-->
                                        <p>操作系统：<span>{{item.os}}</span></p>
                                        <p>数据库：<span>{{item.database}}</span></p>
                                        <p>中间件：<span>{{item.middle}}</span></p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="resultBtn">
                            <span >量化体检结果>></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
export default {
    name: 'verifyEnvironment',
    // import引入的组件需要注入到对象中才能使用
    components: {},
    props: {},
    data () {
        // 这里存放数据
        return {
            dataLi: [
                {name:'体验环境1',os: '龙芯',database: 'mysql',middle: '金蝶'},
                {name:'体验环境1',os: '龙芯',database: 'highgo',middle: '金蝶'}
            ]
        };
    },
    // 方法集合
    methods: {
        // 画最左边的echarts
        drawLeft() {
            // 基于准备好的dom，初始化echarts实例
            let LeftChart = this.$echarts.init(document.getElementById("charts-left"));
            // 绘制图表
            LeftChart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 10,
                    data: ['直接访问',]
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: 335, name: '直接访问'},
                        ]
                    }
                ]
            });
        },
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    //生命周期 - 创建完成（可以访问当前this实例）
    created () {},
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted () {
        this.drawLeft();
    },
    // 生命周期 - 创建之前
    beforeCreate () {},
    // 生命周期 - 挂载之前
    beforeMount () {},
    // 生命周期 - 更新之前
    beforeUpdate () {},
    // 生命周期 - 更新之后
    updated () {},
    // 生命周期 - 销毁之前
    beforeDestroy () {},
    // 生命周期 - 销毁完成
    destroyed () {},
    // 如果页面有keep-alive缓存功能，这个函数会触发
    activated () {},
}
</script>

<style scoped>
    .verifyEnvironment {
        background: #ebf0f8;
        padding: 30px 45px ;
        height: 96vh;
        overflow-y: scroll;
    }
    .labContent {
        width: 100%;
        background: #fff;
        height: 163vh;
    }
    .labContent-title p {
        font-size: 24px;
        color: #233b6e;
        padding: 30px;
        text-align: center;
    }
    .themeContent {
        padding: 0 64px;
    }
    .themeName {
        text-align: left;
        position: relative;
        background-color: #ecf1fc;
        height: 40px;
        margin-top: 40px;
        width: 100%;
        line-height: 40px;
        font-weight: bold;
        font-size: 20px
    }
    .themeName i {
        display: block;
        float: left;
        background-color: #4877e6;
        height: 40px;
        width: 4px;
        margin-right: 10px;
    }
    /* 二级标题样式可以重复使用 */
    .themeOne-title {
        position: relative;
        font-size: 20px;
        margin-top: 20px;
        color: #333;
        height: 40px;
        width: 100%;
        text-align: left;
        line-height: 40px;
        text-indent: 10px;
        font-weight: bold;
    }
    .themeOne-title i {
        width: 4px;
        height: 20px;
        float: left;
        display: block;
        background-color: #4877e6;
        margin-top: 10px;
    }
    /*二级标题的内容*/
    .themeOne-context {
        width: 90%;
        height: 115px;
        border: 2px solid #eaf1ff;
        margin-top: 10px;
        margin-bottom: 30px;
        padding: 30px 50px 30px 50px;
    }
    .themeTwo-context {
        width: 90%;
        /*height: 115px;*/
        border: 2px solid #eaf1ff;
        margin-top: 10px;
        margin-bottom: 30px;
        padding: 30px 50px 30px 50px;
    }
    .threeTitle {
        color: #3a8ee6;
        border-bottom: 4px solid #3a8ee6;
        padding-bottom: 16px;
        font-weight: bold;
    }
    .reuseLi-top {
        margin-top: 18px;
    }
    .reuseLi-top i {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgb(72,119,230);
        margin-right: 4px;
    }
    .reuseLi-top a {
        display: inline-block;
        width: 100px;
        height: 34px;
        line-height: 34px;
        background: rgba(72,119,230,.6);
        color: #fff;
        text-align: center;
        border-radius: 5px;
        float: right;
    }
    .reuseLi-top a:hover {
        background: #4877e6;
    }
    .reuseLi-bottom {
        height: 115px;
        border: 2px solid #eaf1ff;
        margin-top: 18px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .reuseLi-bottom p span {
        display: inline-block;
        width: 170px;
        border: 1px solid #eaf1ff;
        height: 35px;
        margin-bottom: -13px;
    }
    .resultBtn span {
        display: inline-block;
        width: 166px;
        height: 34px;
        line-height: 34px;
        background: #4877e6;
        color: #fff;
        text-align: center;
        border-radius: 5px;
        margin: 40px 0 10px 0;
    }
    .resultBtn span:hover {
        background: #1c45a4;
    }

</style>