363 lines
8.7 KiB
Vue
363 lines
8.7 KiB
Vue
<template>
|
|
<el-card class="content-div">
|
|
<div class="all-content">
|
|
<Menus :activeI="0"/>
|
|
<div class="top-div">
|
|
<div class="left-div">
|
|
<el-carousel height="258px" >
|
|
<el-carousel-item v-for="item in imgArr" :key="item">
|
|
<h3><img :src="requireImg(item.src)" alt=""></h3>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
<div id="echartDiv" class="echartDiv"></div>
|
|
</div>
|
|
<div class="right-div">
|
|
<el-calendar>
|
|
<template #date-cell="{ data }">
|
|
<p :class="data.isSelected ? 'is-selected' : ''">
|
|
{{ data.day.split('-').slice(2).join('') }}
|
|
{{ data.isSelected ? '✔️' : '' }}
|
|
</p>
|
|
</template>
|
|
</el-calendar>
|
|
</div>
|
|
</div>
|
|
<div class="bottom-div">
|
|
<el-card class="box-card">
|
|
<div slot="header" class="clearfix">
|
|
<span>电</span>
|
|
</div>
|
|
<div id="echartE" class="echartDiv100"></div>
|
|
<div class="flex-around s-circle">
|
|
<el-progress type="circle" :stroke-width="10" v-for="item in eleArr" :percentage="item.value">
|
|
<template #default="{ percentage }">
|
|
<span class="percentage-label">
|
|
{{ item.name }}
|
|
</span>
|
|
<span class="percentage-value">{{ percentage }}%</span>
|
|
</template>
|
|
</el-progress>
|
|
</div>
|
|
</el-card>
|
|
<el-card class="box-card">
|
|
<div slot="header" class="clearfix">
|
|
<span class="water">水</span>
|
|
</div>
|
|
<div id="echartW" class="echartDiv100"></div>
|
|
<div class="flex-around s-circle">
|
|
<el-progress type="circle" :stroke-width="10" status="success" v-for="item in waterArr" :percentage="item.value">
|
|
<template #default="{ percentage }">
|
|
<span class="percentage-label">
|
|
{{ item.name }}
|
|
</span>
|
|
<span class="percentage-value">{{ percentage }}%</span>
|
|
</template>
|
|
</el-progress>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script>
|
|
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
|
import infoApi from "@/api/infoApi.js";
|
|
import { ElMessage } from "element-plus";
|
|
import * as echarts from "echarts";
|
|
import Menus from "@/components/Menus.vue";
|
|
export default {
|
|
name: "home",
|
|
components: {
|
|
Menus
|
|
},
|
|
setup() {
|
|
const state = reactive({
|
|
imgArr: [{
|
|
src: 'bg.png'
|
|
},{
|
|
src: 'bg3.png'
|
|
}],
|
|
eleArr:[{
|
|
name:'实时量',
|
|
value: 50
|
|
},{
|
|
name:'同比',
|
|
value: 50
|
|
},{
|
|
name:'环比',
|
|
value: 50
|
|
}],
|
|
waterArr: [{
|
|
name:'实时量',
|
|
value: 50
|
|
},{
|
|
name:'同比',
|
|
value: 50
|
|
},{
|
|
name:'环比',
|
|
value: 50
|
|
}]
|
|
});
|
|
|
|
onMounted(() => {
|
|
drawAll();
|
|
dreawEandW("echartE", "#7CBBF7", "#5470C6", "当日用电", "同比用电");
|
|
dreawEandW("echartW", "#2CFEF7", "#51BDBE", "当日用水", "同比用水");
|
|
});
|
|
|
|
|
|
const requireImg = (imgPath) => {
|
|
return new URL(`../assets/${imgPath}`, import.meta.url).href;
|
|
};
|
|
const drawAll = () => {
|
|
var dom = document.getElementById("echartDiv");
|
|
var op = {
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
top: '5%',
|
|
left: 'center'
|
|
},
|
|
series: [
|
|
{
|
|
name: '能耗用量',
|
|
type: 'pie',
|
|
radius: ['30%', '50%'],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 10,
|
|
borderColor: '#fff',
|
|
borderWidth: 2
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: 20,
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
data: [
|
|
{ value: 20, name: '用电' },
|
|
{ value: 20, name: '用水' },
|
|
{ value: 40, name: '其他' }
|
|
]
|
|
}
|
|
]
|
|
};
|
|
getEchart(dom, op)
|
|
}
|
|
const getEchart = (dom, op) => {
|
|
|
|
if (dom) {
|
|
var myChart = echarts.init(dom);
|
|
var option = op;
|
|
|
|
option && myChart.setOption(option);
|
|
}
|
|
};
|
|
/***************************************************** */
|
|
|
|
const dreawEandW = (name, lineColor, barColor, barName, lineName) => {
|
|
var dom = document.getElementById(name);
|
|
if (dom) {
|
|
var myChart = echarts.init(dom);
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
grid: {
|
|
left: '2%',
|
|
right: '2%',
|
|
bottom: '5%',
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
data: [barName, lineName]
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['1点', '2点', '3点', '4点', '5点', '6点', '7点',
|
|
'8点', '9点', '10点', '11点', '12点', '13点', '14点','15点',
|
|
'16点', '17点', '18点', '19点', '20点', '21点', '22点', '23点', '24点']
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: barName,
|
|
data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130, 70, 110, 130],
|
|
type: 'bar',
|
|
itemStyle: {
|
|
color: barColor
|
|
}
|
|
},
|
|
{
|
|
name: lineName,
|
|
data: [150, 230, 224, 218, 135, 147, 260,150, 230, 224, 218, 135, 147, 260,150, 230, 224, 218, 135, 147, 260,150, 230],
|
|
type: 'line',
|
|
itemStyle: {
|
|
color: lineColor
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
}
|
|
}
|
|
return {
|
|
...toRefs(state),
|
|
requireImg,
|
|
getEchart,
|
|
drawAll,
|
|
dreawEandW,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.el-carousel {
|
|
width: 70% !important;
|
|
.el-carousel__container {
|
|
width: 100% !important;
|
|
}
|
|
.el-carousel__item--card.is-active {
|
|
height: 100%;
|
|
// border: 1px solid red;
|
|
h3 {
|
|
height: 100%;
|
|
// border: 1px solid blue;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.is-selected {
|
|
color: #1989fa;
|
|
}
|
|
.el-calendar__header {
|
|
padding: 0 10px;
|
|
}
|
|
.el-button-group>.el-button {
|
|
border: 0;
|
|
}
|
|
.el-calendar-table .el-calendar-day {
|
|
height: 45px;
|
|
font-size: 12px;
|
|
}
|
|
.el-calendar__body {
|
|
padding: 0;
|
|
}
|
|
.s-circle .el-progress-circle {
|
|
width: 70px !important;
|
|
height: 70px !important;
|
|
}
|
|
.percentage-value {
|
|
display: block;
|
|
margin-top: 10px;
|
|
font-size: 28px;
|
|
}
|
|
.percentage-label {
|
|
display: block;
|
|
margin-top: 10px;
|
|
font-size: 12px;
|
|
}
|
|
.demo-progress .el-progress--line {
|
|
margin-bottom: 15px;
|
|
width: 350px;
|
|
}
|
|
.demo-progress .el-progress--circle {
|
|
margin-right: 15px;
|
|
}
|
|
.bottom-div > .box-card .flex-around span {
|
|
background:transparent !important;
|
|
color: #333 !important;
|
|
font-size: 12px !important;
|
|
padding: 0 !important;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.all-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.top-div {
|
|
height: 35%;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
|
|
}
|
|
.bottom-div {
|
|
height: 55%;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border: 1px solid #c3c3c3;
|
|
border-radius: 20px;
|
|
padding: 20px;
|
|
> .box-card {
|
|
width: 49.5%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
span {
|
|
display: inline-block;
|
|
padding: 5px 20px;
|
|
background: #0a82f3;
|
|
border-radius: 5px;
|
|
color: #fff;
|
|
&.water {
|
|
background: #3dc21c;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.left-div {
|
|
height: 100%;
|
|
width: 77%;
|
|
border: 1px solid #c3c3c3;
|
|
border-radius: 20px;
|
|
display: flex;
|
|
padding: 20px;
|
|
}
|
|
.right-div {
|
|
height: 100%;
|
|
width: 22%;
|
|
border: 1px solid #c3c3c3;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
border-radius: 20px;
|
|
display: flex;
|
|
}
|
|
.echartDiv {
|
|
width: 30%;
|
|
height: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
.echartDiv100 {
|
|
width: 100%;
|
|
height: 70%;
|
|
margin: 0 auto;
|
|
}
|
|
.circle {
|
|
height: 38%;
|
|
}
|
|
.flex-around
|
|
{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
height: 100px;
|
|
// border: 1px solid red;
|
|
}
|
|
</style>
|