首页头部样式

guanqb

2022-10-10 d1debd562f16b69478adcf6da2092685542f43c7

首页头部样式

 package-lock.json

Diff too large

 package.json

@@ -79,4 +79,4 @@
        "last 2 versions",
        "not ie <= 10"
    ]
}
}

 public/img/home/juxing2.png

 public/img/home/juxing519.png

 public/img/home/logo.png

 public/img/home/logoko.png

 public/img/home/map.png

 public/img/home/school.png

 public/img/home/user.png

 public/img/home/xingz-copy.png

 public/img/home/全图.png

 public/img/home/全景.png

 public/img/home/右1.png

 public/img/home/右2.png

 public/img/home/名称.png

 public/img/home/图层 0.png

 public/img/home/在线.png

 public/img/home/左1.png

 public/img/home/左2.png

 public/img/home/形状 1.png

 public/img/home/急速.png

 public/img/home/指北.png

 public/img/home/椭圆 5 拷贝.png

 public/img/home/离线.png

 public/img/home/组 58.png

 public/img/home/距离.png

 public/img/home/面积.png

 public/img/home/高度.png

 public/img/login/background.png

 public/img/login/background2.png

 public/img/login/left.png

 public/img/login/login.png

 public/img/login/object.png

 public/img/login/password.png

 public/img/login/user.png

 public/img/login/zu1.png

 src/pcviews/Login/index.vue

New file
@@ -0,0 +1,251 @@
<template>
    <div class="page">
        <!-- 插件下载按钮 -->
        <a href="http://" target="_blank" rel="noopener noreferrer" class="plugin">点击下载插件</a>
        <!-- 左图 -->
        <div class="chips"></div>
        <!-- 登录表单 -->
        <div class="login-container">
            <div class="website_name">
                <span>智慧校园</span>
                <span>三维可视化</span>
                <span>信息管理平台</span>
            </div>
            <div class="school">
                <span class="arrow1"></span>
                <p>江西经济管理干部学院</p>
                <span class="arrow2"></span>
            </div>
            <div class="login_bg">
                <div class="title-container">
                    <h3 class="title">用户登录</h3>
                </div>
                <form action method="post">
                    <div class="username_container">
                        <input type="text" placeholder="用户名" />
                        <i></i>
                    </div>
                    <div class="pwd_container">
                        <input type="password" placeholder="密码" />
                        <i></i>
                    </div>
                    <div class="aboutPwd">
                        <span>
                            <input type="checkbox" id="keepPwd" />
                            <label for="keepPwd">记住密码</label>
                        </span>
                        <a href>忘记密码？</a>
                    </div>
                    <button @click="onLogin($event)">登录</button>
                    <div class="tip">
                        <p>注意：使用IE浏览器查看</p>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Login',
    methods: {
        onLogin () {
            this.$router.push('/homee')
        }
    }
}
</script>

<style lang="scss" scoped>
.page {
    position: relative;
    height: 100%;
    background: url(/img/login/background.png);
    background-size: 100% auto;
    .chips {
        position: absolute;
        left: 200px;
        top: 268px;
        background: url(/img/login/left.png) no-repeat;
        background-size: contain;
        width: 750px;
        height: 543px;
        z-index: 1;
    }
    input {
        outline: none;
    }
}
.plugin {
    position: absolute;
    top: 46px;
    right: 80px;
    display: block;
    width: 130px;
    height: 50px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #58e2f5;
    line-height: 50px;
    text-align: center;
    background: url(/img/login/object.png);
    background-size: contain;
}
a {
    text-decoration: none;
}
.login-container {
    position: absolute;
    top: 247px;
    right: 190px;
    width: 667px;
    height: 620px;
    z-index: 2;
    .website_name {
        width: 667px;
        height: 42px;
        font-size: 43px;
        font-weight: 400;
        color: #cfdde7;
        line-height: 70px;
        text-align: center;
        :nth-child(2) {
            color: #58e2f5;
        }
    }
    .school {
        margin: 24px auto 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .arrow1 {
            display: block;
            width: 217px;
            height: 22px;
            background: url(/img/login/zu1.png) no-repeat;
            background-size: contain;
        }
        p {
            display: block;
            width: 283px;
            height: 26px;
            line-height: 26px;
            font-size: 26px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #92bef0;
            font-size: 24px;
            margin: 0 20px;
        }
        .arrow2 {
            display: block;
            width: 217px;
            height: 22px;
            background: url(/img/login/zu1.png) no-repeat;
            background-size: contain;
            -moz-transform: scaleX(-1);
            -webkit-transform: scaleX(-1);
            -o-transform: scaleX(-1);
            transform: scaleX(-1);
            filter: FlipH;
        }
    }
    .login_bg {
        position: absolute;
        margin-top: 21px;
        left: 50%;
        transform: translateX(-50%);
        width: 605px;
        height: 509px;
        background: url(/img/login/login.png) no-repeat;
        background-size: contain;
    }
    .title-container {
        position: absolute;
        top: 94px;
        left: 239px;
        height: 27px;
        font-size: 27px;
        font-weight: bold;
        color: #cfdde7;
        line-height: 64px;
    }
    form {
        overflow: hidden;
        position: absolute;
        top: 146px;
        left: 137px;
        width: 315px;
        height: 267px;
        .username_container {
            i {
                background: url(/img/login/user.png);
                background-size: contain;
            }
        }
        .pwd_container {
            i {
                background: url(/img/login/password.png);
                background-size: contain;
            }
        }
        .aboutPwd {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #c3d4e0;
            a {
                color: #c3d4e0;
            }
        }
        button {
            display: block;
            margin-top: 38px;
            width: 100%;
            height: 47.3px;
            color: #154c82;
            font-size: 16px;
            font-weight: 700;
            background-color: #58e2f5;
            border-radius: 7px;
        }
        .tip {
            p {
                position: absolute;
                color: #58e2f5;
                font-size: 14px;
            }
        }
    }
}
.login-container .website_name :nth-child(1),
.login-container .website_name :nth-child(3) {
    color: #cfdde7;
}
.login-container form .username_container,
.login-container form .pwd_container {
    position: relative;
}
.login-container form .username_container input,
.login-container form .pwd_container input {
    width: 100%;
    height: 47.2px;
    border: none;
    margin-bottom: 14px;
    background-color: #00376c;
    font-size: 18px;
    font-weight: 600;
    color: #b4c6d2;
    padding-left: 60px;
}
.login-container form .username_container i,
.login-container form .pwd_container i {
    display: block;
    position: absolute;
    top: 16px;
    left: 22px;
    width: 16px;
    height: 18px;
}
</style>

 src/pcviews/homee/AlertInfo/index.vue

New file
@@ -0,0 +1,149 @@
<template>
    <div class="container">
        <div class="title">
            <i></i>报警信息
        </div>
        <ul class="head">
            <li>
                <span class="type">全部</span>
                <span class="count">{{sum}}</span>
            </li>
            <li v-for="(item,index) in alertCount" :key="index">
                <span class="type">{{item.type}}</span>
                <span class="count">{{item.count}}</span>
            </li>
        </ul>
        <div class="alertMsg">
            <ul>
                <li v-for="(item,index) in alertMsg" :key="index">
                    <span class="serial">{{item.serial}}</span>
                    <span class="area">{{item.area}}</span>
                    <span class="alertType">
                        <img src="/img/home/椭圆 5 拷贝.png" alt />
                        {{item.alertType}}
                    </span>
                    <span class="date">{{item.date}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            alertCount: [
                { type: '建筑', count: 80 },
                { type: '水表', count: 94 },
                { type: '电表', count: 87 },
                { type: '网关', count: 106 },
                { type: '水平衡', count: 39 },
                { type: '电平衡', count: 85 },
                { type: '管网侧漏', count: 73 },
            ],
            sum: 0,
            alertMsg: [
                { serial: 1, area: '后勤集团', alertType: '网关通讯告警', date: '2022-05-23 14:32:00' },
                { serial: 2, area: '大阪1号', alertType: '网关通讯告警', date: '2022-05-23 14:32:00' },
                { serial: 3, area: '图书馆', alertType: '网关通讯告警', date: '2022-05-23 14:32:00' },
                { serial: 4, area: '风雨操场', alertType: '网关通讯告警', date: '2022-05-23 14:32:00' },
                { serial: 5, area: '教学楼', alertType: '网关通讯告警', date: '2022-05-23 14:32:00' },
                { serial: 6, area: '学生餐厅', alertType: '网关通讯告警', date: '2022-05-23 14:32:00' },
            ]
        }
    },
    mounted () {
        this.getSum()
    },
    methods: {
        getSum () {
            for (let i = 0; i < this.alertCount.length; i++) {
                this.sum += this.alertCount[i].count
            }
        }
    }

}
</script>

<style lang="scss" scoped>
.container {
    position: relative;
    width: 1020px;
    height: 310px;
    background: url(/img/home/juxing2.png) no-repeat;
    background-size: 100% 100%;
    .title {
        position: absolute;
        display: flex;
        top: 16px;
        left: 16px;
        width: 78px;
        height: 18px;
        color: #ffffff;
        font-size: 16px;
        font-weight: 400;
        vertical-align: middle;
        justify-content: space-between;
        align-items: center;
        i {
            display: inline-block;
            width: 3px;
            height: 16px;
            background-color: #28f2ff;
        }
    }
    .head {
        position: absolute;
        top: 51px;
        left: 30px;
        li {
            box-sizing: border-box;
            width: 180px;
            height: 28px;
            background: url(/img/home/juxing519.png);
            margin-bottom: 4px;
            padding: 0 29px;
            line-height: 28px;
            display: flex;
            justify-content: space-between;
            .type {
                font-size: 14px;
                font-weight: 400;
                color: #e9f2f3;
            }
            .count {
                font-size: 16px;
                font-weight: 500;
                color: #1cddff;
            }
        }
    }
    .alertMsg {
        position: absolute;
        right: 68px;
        bottom: 16px;
        width: 680px;
        height: 266px;
        // background-color: #fff;
        ul li {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 43px;
            border-bottom: 1px solid #4b77a48e;
            line-height: 42px;
            font-size: 14px;
            font-weight: 400;
            color: #e9f2f3;
            .alertType {
                display: flex;
                font-size: 14px;
                font-weight: 550;
                color: #ff4646;
            }
        }
    }
}
</style>

 src/pcviews/homee/BuildingCost/index.vue

New file
@@ -0,0 +1,159 @@
<template>
    <div class="container">
        <div class="chart" ref="buildingCost_ref"></div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            chartInstance: null,
            data: [
                {
                    building: '通讯楼',
                    cost: '9.75'
                },
                {
                    building: '学生公寓',
                    cost: 7.36
                },
                {
                    building: '外语楼',
                    cost: 4.95
                },
                {
                    building: '2号餐厅',
                    cost: 6.04
                },
                {
                    building: '1号餐厅',
                    cost: 6.89
                },
                {
                    building: '实验楼',
                    cost: 5.28
                },
                {
                    building: '教学楼',
                    cost: 12.60
                },
            ]
        }
    },
    mounted () {
        this.initChart()
        this.updateChart()
    },
    methods: {
        //初始化chart
        initChart () {
            this.chartInstance = this.$echarts.init(this.$refs.buildingCost_ref)
        },
        getData () {

        },
        //格式化数据并配置chart
        updateChart () {
            this.data.sort((a, b) => {
                return a.cost - b.cost
            })
            const buildings = this.data.map((item => {
                return item.building
            }))
            const cost = this.data.map((item) => {
                return item.cost
            })
            const option = {
                title: {
                    text: '▎学校建筑用电排名',
                    textStyle: {
                        color: '#fff',
                        fontSize: 16,
                        weight: 400
                    },
                    left: 16,
                    top: 16
                },
                tooltop: {
                    trigger: 'item',
                    formatter: '{c}%'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#206489'
                        }
                    },
                    axisLabel: {
                        show: false
                    },
                },
                yAxis: {
                    type: 'category',
                    data: buildings,
                    axisLine: {
                        lineStyle: {
                            color: '#206489'
                        }
                    },
                    axisLabel: {
                        color: '#E9F2F3',
                    },
                },
                series: [
                    {
                        name: '用电占比',
                        type: 'bar',
                        showBackground: true,
                        label: {
                            position: 'right',
                            show: true,
                            color: '#fff',
                        },
                        data: cost,
                        barWidth: '14px',
                        itemStyle: {
                            normal: {
                                // borderRadius: [0, 7, 7, 0],
                                // color: this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                //     offset: 0,
                                //     color: '#03132E'
                                // }, {
                                //     offset: 1,
                                //     color: '#F8BE42'
                                // }]),
                            }
                        },

                    }
                ]
            }
            this.chartInstance.setOption(option)
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    width: 400px;
    height: 310px;
    background: url(/img/home/juxing2.png) no-repeat;
    background-size: 100% 100%;
    .chart {
        width: 100%;
        height: 100%;
    }
}
</style>

 src/pcviews/homee/Devices/index.vue

New file
@@ -0,0 +1,92 @@
<template>
    <div class="container">
        <div class="title">
            <i></i>物联设备
        </div>
        <div class="devices-container">
            <div class="online">
                <span>
                    <i>964</i> 台
                </span>
                <img src="/img/home/在线.png" alt />在线
            </div>
            <div class="offline">
                <span>
                    <i>86</i> 台
                </span>
                <img src="/img/home/离线.png" alt />离线
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
        }
    },


}
</script>

<style lang="scss" scoped>
.container {
    position: relative;
    width: 400px;
    height: 310px;
    background: url(/img/home/juxing2.png) no-repeat;
    background-size: 100% 100%;
    .title {
        position: absolute;
        display: flex;
        top: 16px;
        left: 16px;
        width: 78px;
        height: 18px;
        color: #ffffff;
        font-size: 16px;
        font-weight: 400;
        vertical-align: middle;
        justify-content: space-between;
        align-items: center;
        i {
            display: inline-block;
            width: 3px;
            height: 16px;
            background-color: #28f2ff;
        }
    }
    .devices-container {
        padding-top: 50px;
        margin: 70px auto;
        display: flex;
        width: 161+161+18px;
        height: 193px;
        justify-content: space-between;
        div {
            position: relative;
            text-align: center;
            color: #e9f2f3;
            font-size: 16px;
            span {
                position: absolute;
                left: 50%;
                top: 93px;
                transform: translateX(-50%);
                i {
                    font-size: 22px;
                    font-weight: bold;
                }
            }
        }
        .online i {
            color: #30ffd1;
        }
        .offline i {
            color: #ffcf29;
        }
    }
}
</style>

 src/pcviews/homee/Header/index.vue

New file
@@ -0,0 +1,159 @@
<template>
    <div class="header">
        <div class="title">智慧校园可视化信息管理平台</div>
        <div class="btn1 navBtn">首页</div>
        <div class="btn2 navBtn">能源管理</div>
        <div class="btn3 navBtn">地下管网</div>
        <div class="btn4 navBtn">资产管理</div>
        <div class="btn5 navBtn">虚拟三维</div>
        <div class="btn6 navBtn">新生迎新</div>

        <div class="underLine"></div>
    </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
.header {
    position: relative;
    width: 100%;
    height: 100px;
    padding: 0 30px;
    box-sizing: border-box;
    .logo {
        position: absolute;
        background: url(/img/home/logoko.png) no-repeat;
        background-size: contain;
        top: 0px;
        width: 258px;
        height: 73px;
    }
    .mainTitle {
        position: absolute;
        top: 62px;
        left: 30px;
        color: #28f2ff;
        font-size: 22px;
        font-weight: 500;
    }
    .title {
        color: #eed;
        width: 550px;
        position: absolute;
        left: 678px;
        top: 20px;
        font-size: 34px;
        letter-spacing: 5px;
    }
    .navBtn {
        position: absolute;
        top: 27px;
        width: 126px;
        height: 39px;
        line-height: 39px;
        text-align: center;
        background: url(/img/login/object.png);
        background-size: 100% 100%;
        color: #24f2ff;
        letter-spacing: 3px;
        cursor: pointer;
    }
    .btn1 {
        right: 1700px;
    }
    .btn2 {
        right: 1500px;
    }
    .btn3 {
        right: 1300px;
    }
    .btn4 {
        right: 437px;
    }
    .btn5 {
        right: 237px;
    }
    .btn6 {
        right: 37px;
    }
    .nav {
        position: absolute;
        display: flex;
        width: 1064px;
        height: 37px;
        left: 50%;
        margin-top: 22px;
        transform: translateX(-50%);
        justify-content: space-between;
        li {
            background: linear-gradient(
                0deg,
                #28f2ff 0%,
                rgba(0, 24, 68, 0.22) 100%
            );
            display: block;
            line-height: 37px;
            text-align: center;
            background: linear-gradient(
                0deg,
                rgba(160, 230, 251, 0.38) 0%,
                #75a3e7 100%
            );
            border: 1px solid;
            border-image: linear-gradient(
                    0deg,
                    rgba(65, 216, 238, 0),
                    #5cd7ff,
                    #9fbfe3,
                    #90f4f3,
                    #12ccd8
                )
                1 1;
            opacity: 0.8;
            a {
                color: #ffffff;
                font-size: 16px;
                font-weight: 400;
                width: 169px;
                height: 37px;
                display: block;
            }
        }
    }
    .userInfo {
        position: absolute;
        display: flex;
        top: 23px;
        right: 0px;
        width: 263px;
        height: 31px;
        justify-content: space-between;
        align-content: center;
        span {
            color: #24f2ff;
            font-size: 18px;
            font-weight: 400;
            line-height: 0px;
        }
        .avatar {
            display: inline-block;
            width: 32px;
            height: 31px;
            background: url(/img/home/user.png) no-repeat;
        }
    }

    .underLine {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 21px;
        background: url(/img/home/xingz-copy.png);
        background-size: contain;
    }
}
</style>

 src/pcviews/homee/Map/index.vue

New file
@@ -0,0 +1,21 @@
<template>
    <div class="container"></div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.container {
    width: 1020px;
    height: 600px;
    background: url(/img/home/map.png) no-repeat;
    background-size: contain;
    border: 1px solid #28f2ff;
    box-sizing: border-box;
    // display: none;
}
</style>

 src/pcviews/homee/PipeNetCount/index.vue

New file
@@ -0,0 +1,150 @@
<template>
    <div class="container">
        <div class="chart" ref="PipeNet_ref"></div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            chartInstance: null,
            data: [
                {
                    pipe: '给水',
                    long: 530
                },
                {
                    pipe: '雨水',
                    long: 640
                },
                {
                    pipe: '污水',
                    long: 420
                },
                {
                    pipe: '供电',
                    long: 750
                },
                {
                    pipe: '路灯',
                    long: 600
                },
                {
                    pipe: '燃气',
                    long: 500
                },

            ]
        }
    },
    mounted () {
        this.initChart()
        this.updateChart()
    },
    methods: {
        initChart () {
            this.chartInstance = this.$echarts.init(this.$refs.PipeNet_ref)
        },
        getData () {

        },
        updateChart () {
            const that = this

            const pipe = this.data.map((item) => {
                return item.pipe
            })
            const long = this.data.map(item => {
                return item.long
            })
            const option = {
                title: {
                    text: '▎管网统计',
                    textStyle: {
                        color: '#fff',
                        fontSize: 16,
                        weight: 400
                    },
                    left: 16,
                    top: 16
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '23%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: pipe,
                    axisLabel: {
                        color: '#E9F2F3',
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#206489'
                        }
                    },

                },
                yAxis: {
                    type: 'value',
                    name: '单位:KM',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#206489'
                        }
                    },
                    axisLabel: {
                        color: '#E9F2F3'
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#072651'
                        }
                    }

                },
                series: [
                    {
                        name: '管网长度',
                        type: 'bar',
                        data: long,
                        barWidth: '16px',
                        itemStyle: {
                            normal: {
                                // color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                //     offset: 0,
                                //     color: '#001541'
                                // }, {
                                //     offset: 1,
                                //     color: '#28F2FF'
                                // }]),
                            }
                        },
                    }
                ]
            }

            this.chartInstance.setOption(option)
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    width: 400px;
    height: 310px;
    background: url(/img/home/juxing2.png) no-repeat;
    background-size: 100% 100%;

    .chart {
        width: 100%;
        height: 100%;
    }
}
</style>

 src/pcviews/homee/PipeWellPercent/index.vue

New file
@@ -0,0 +1,98 @@
<template>
    <div class="container">
        <div class="chart" ref="PipeWell_ref"></div>
    </div>
</template>

<script>
export default {
    data () {

        return {
            chartInstance: null,
            data: [
                { name: '给水管井', value: 20.62 },
                { name: '雨水管井', value: 18.56 },
                { name: '污水管井', value: 16.49 },
                { name: '供电管井', value: 17.11 },
                { name: '燃气管井', value: 11.55 },
                { name: '检查井', value: 15.67 },
            ]
        }
    },
    mounted () {
        this.initChart()
        this.updateChart()
    },
    methods: {
        initChart () {
            this.chartInstance = this.$echarts.init(this.$refs.PipeWell_ref)
        },
        getData () {

        },
        updateChart () {
            const pipe = this.data.map((item) => {
                return item.pipe
            })
            const long = this.data.map(item => {
                return item.long
            })
            const option = {
                title: {
                    text: '▎管井占比',
                    textStyle: {
                        color: '#fff',
                        fontSize: 16,
                        weight: 400
                    },
                    left: 16,
                    top: 16
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 30,
                    top: '23%',
                    textStyle: {
                        color: '#fff'
                    },
                    formatter: '{name}',
                    itemGap: 20
                },
                series: [
                    {
                        name: 'Nightingale Chart',
                        type: 'pie',
                        radius: [30, 120],
                        center: ['30%', '55%'],
                        roseType: 'area',
                        data: this.data,
                        label: {
                            show: true,
                            position: 'inner',
                            fontSize: 12,
                            color: '#fff',
                            formatter: '{b}\n{d}%'
                        },
                    }
                ]
            }
            this.chartInstance.setOption(option)
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    width: 400px;
    height: 310px;
    background: url(/img/home/juxing2.png) no-repeat;
    background-size: 100% 100%;
    .chart {
        width: 100%;
        height: 100%;
    }
}
</style>

 src/pcviews/homee/SchoolCostCompare/index.vue

New file
@@ -0,0 +1,180 @@
<template>
    <div class="container">
        <div class="chart" ref="SchoolCostCompare"></div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            chartInstance: null,
            data: [
                {
                    mouth: '1月',
                    costIn2018: 15000,
                    costIn2019: 15000,
                },
                {
                    mouth: '2月',
                    costIn2018: 20000,
                    costIn2019: 25000,
                },
                {
                    mouth: '3月',
                    costIn2018: 15000,
                    costIn2019: 18000,
                },
                {
                    mouth: '4月',
                    costIn2018: 29000,
                    costIn2019: 28000,
                },
                {
                    mouth: '5月',
                    costIn2018: 37000,
                    costIn2019: 34000,
                },
                {
                    mouth: '6月',
                    costIn2018: 33000,
                    costIn2019: 30000,
                },
                {
                    mouth: '7月',
                    costIn2018: 45000,
                    costIn2019: 47000,
                },
                {
                    mouth: '8月',
                    costIn2018: 48500,
                    costIn2019: 49000,
                },
                {
                    mouth: '9月',
                    costIn2018: 38000,
                    costIn2019: 39000,
                },
                {
                    mouth: '10月',
                    costIn2018: 28000,
                    costIn2019: 30000,
                },
                {
                    mouth: '11月',
                    costIn2018: 20000,
                    costIn2019: 21500,
                },
                {
                    mouth: '12月',
                    costIn2018: 16000,
                    costIn2019: 16000,
                },

            ]
        }
    },
    mounted () {
        this.initChart()
        this.updateChart()
    },
    methods: {
        initChart () {
            this.chartInstance = this.$echarts.init(this.$refs.SchoolCostCompare)
        },
        updateChart () {
            const mouth = this.data.map(item => {
                return item.mouth
            })
            const costIn2018 = this.data.map(item => {
                return item.costIn2018
            })
            const costIn2019 = this.data.map(item => {
                return item.costIn2019
            })
            const option = {
                title: {
                    text: '▎学校用电同比',
                    textStyle: {
                        color: '#fff',
                        fontSize: 16,
                        weight: 400
                    },
                    left: 16,
                    top: 16
                },
                grid: {
                    top: '35%',
                    left: '1%',
                    right: '2%',
                    bottom: '3%',
                    containLabel: true
                },
                legend: {
                    top: '16%',
                    textStyle: {
                        color: '#fff',
                    }
                },
                xAxis: {
                    type: 'category',
                    data: mouth,
                    axisLabel: {
                        interval: 0
                    },


                },
                yAxis: {
                    type: 'value',
                    name: 'KW·H',
                },
                series: [
                    {
                        name: '2018年用电量',
                        type: 'bar',
                        barWidth: 10,
                        data: costIn2018,
                        itemStyle: {
                            normal: {
                                // color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                //     offset: 0,
                                //     color: '#001541'
                                // }, {
                                //     offset: 1,
                                //     color: '#28F2FF'
                                // }]),
                            }
                        },

                    },
                    {
                        name: '2019年用电量',
                        type: 'line',
                        data: costIn2019,
                        itemStyle: {
                            color: '#F8BE42',
                        }
                    },
                ]
            }
            this.chartInstance.setOption(option)
        }
    },

}
</script>

<style lang="scss" scoped>
.container {
    position: relative;
    width: 400px;
    height: 270px;
    background: url(/img/home/juxing2.png);
    background-size: 100%;
    .chart {
        width: 100%;
        height: 100%;
    }
}
</style>

 src/pcviews/homee/SchoolInfo/index.vue

New file
@@ -0,0 +1,96 @@
<template>
    <div class="container">
        <div class="title">
            <i></i>学校概况
        </div>
        <img src="/img/home/school.png" alt />
        <ul>
            <li>
                占地面积：
                <span>1500</span>亩
            </li>
            <li>
                年度用电：
                <span>2389.34</span>KW·h
            </li>
            <li>
                用电同比：
                <span>153.7%</span>↓
            </li>
            <li>
                师生人数：
                <span>50274</span>人
            </li>
            <li>
                管网长度：
                <span>2910</span>KM
            </li>
            <li>
                物联设备：
                <span>4000</span>台
            </li>
            <li>
                管井数量：
                <span>830</span>台
            </li>
        </ul>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.container {
    position: relative;
    width: 400px;
    height: 270px;
    background: url(/img/home/juxing2.png);
    background-size: 100%;
    .title {
        position: absolute;
        display: flex;
        top: 16px;
        left: 16px;
        width: 78px;
        height: 18px;
        color: #ffffff;
        font-size: 16px;
        font-weight: 400;
        vertical-align: middle;
        justify-content: space-between;
        align-items: center;
        i {
            display: inline-block;
            width: 3px;
            height: 16px;
            background-color: #28f2ff;
        }
    }
    img {
        position: absolute;
        top: 53px;
        left: 26px;
        border: 1px solid #28f2ff;
        width: 41%;
        height: 65%;
    }
    ul {
        position: absolute;
        top: 44px;
        left: 204px;
        font-size: 14px;
        color: #e9f2f3;
        font-weight: 400;
        line-height: 28px;
        span {
            font-size: 18px;
            color: #28f2ff;
            margin-right: 7px;
        }
    }
}
</style>

 src/pcviews/homee/index.vue

New file
@@ -0,0 +1,132 @@
<template>
    <div class="page">
        <div class="screen-container">
            <Header></Header>
            <div class="screen-body">
                <section class="screen_left">
                    <div class="left_top">
                        <SchoolInfor></SchoolInfor>
                    </div>
                    <div class="left_middle">
                        <PipeNetCont></PipeNetCont>
                    </div>
                    <div class="left_bottom">
                        <BuildingCost></BuildingCost>
                    </div>
                </section>
                <section class="screen_middle">
                    <div class="middle_top">
                        <Map></Map>
                    </div>
                    <div class="middle_bottom">
                        <AlertInfo></AlertInfo>
                    </div>
                </section>
                <section class="screen_right">
                    <div class="right_top">
                        <SchoolCostCompare></SchoolCostCompare>
                    </div>
                    <div class="right_middle">
                        <PipeWellPercent></PipeWellPercent>
                    </div>
                    <div class="right_bottom">
                        <Devices></Devices>
                    </div>
                </section>
            </div>
        </div>
    </div>
</template>

<script>
import Header from '../homee/Header'
import SchoolInfor from '../homee/SchoolInfo'
import PipeNetCont from '../homee/PipeNetCount'
import BuildingCost from '../homee/BuildingCost'
import Map from '../homee/Map'
import SchoolCostCompare from '../homee/SchoolCostCompare'
import PipeWellPercent from '../homee/PipeWellPercent'
import Devices from '../homee/Devices'
import AlertInfo from '../homee/AlertInfo'
export default {
    name: '',
    components: {
        Header,
        SchoolInfor,
        PipeNetCont,
        BuildingCost,
        Map,
        SchoolCostCompare,
        PipeWellPercent,
        Devices,
        AlertInfo
    }
}
</script>

<style lang="scss" scoped>
.page {
    position: relative;
    background: url(/img/login/background.png);
    background-size: 100% auto;
}
.screen-container {
    width: 100%;
    height: 100%;
    justify-content: space-between;
    padding: 0 30px;
    box-sizing: border-box;
    .screen-body {
        width: 100%;
        height: 100%;
        display: flex;
        margin-top: 22px;
        .screen_left {
            height: 100%;
            width: 21.5%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            .left_top {
                width: 100%;
            }
            .left_middle {
                width: 100%;
                margin-top: 20px;
            }
            .left_bottom {
                width: 100%;
                margin-top: 20px;
            }
        }
        .screen_middle {
            height: 100%;
            width: 54.8%;
            margin-left: 1.2%;
            margin-right: 1.2%;
            .middle_top {
                width: 100%;
            }
            .middle_bottom {
                width: 100%;
                margin-top: 20px;
            }
        }
        .screen_right {
            height: 100%;
            width: 21.5%;
            .right_top {
                width: 100%;
            }
            .right_middle {
                width: 100%;
                margin-top: 20px;
            }
            .right_bottom {
                width: 100%;
                margin-top: -50px;
            }
        }
    }
}
</style>

 src/router/page/index.js

@@ -78,6 +78,24 @@
        path: '/',
        redirect: '/pcLayout'
    },
    {
        path: '/login',
        name: 'login',
        component: resolve => require(['../../pcviews/Login/index.vue'], resolve),
        meta: {
            title: '登录页',
            isAuth: false
        }
    },
    {
        path: '/homee',
        name: 'homee',
        component: resolve => require(['../../pcviews/homee/index.vue'], resolve),
        meta: {
            title: '首页',
            isAuth: false
        }
    },
    // pc端
    {
        path: '/pcLayout',