You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
563 lines
15 KiB
563 lines
15 KiB
<template>
|
|
<div id="index">
|
|
<!-- 左边 -->
|
|
<div class="leftbox">
|
|
<!-- 客流 -->
|
|
<div class="keliu">
|
|
<span class="kliu_title">客流趋势</span>
|
|
<div class="kliu_st">
|
|
<span id="yitem" :class="klselt == 'y' ? 'spactive' : ''" @click="selitem('y')" >年</span>
|
|
<span id="mitem" :class="klselt == 'm' ? 'spactive' : ''" @click="selitem('m')" >月</span>
|
|
<span id="ditem" :class="klselt == 'd' ? 'spactive' : ''" @click="selitem('d')" >日</span>
|
|
</div>
|
|
<!-- 柱状图 -->
|
|
<div class="tongjitu" id="homebar" style="height: 200px; width: 100%">
|
|
<!-- 柱图，注意样式 -->
|
|
</div>
|
|
<!-- 几大场馆预警图 -->
|
|
<div class="cgflow">
|
|
<!-- 左边的流量预警 -->
|
|
<div class="cgflow_leftbox">
|
|
<!-- 体育场的流量预警 -->
|
|
<div class="cgfitem">
|
|
<span class="cgtitle">体育场</span>
|
|
<span class="cgval">20%</span>
|
|
<span class="cgimg"><img src="../assets/index/tyc_icon.png" /></span>
|
|
</div>
|
|
<!-- 体育馆 -->
|
|
<div class="cgfitem">
|
|
<span class="cgtitle">体育馆</span>
|
|
<span class="cgval">20%</span>
|
|
<span class="cgimg"><img src="../assets/index/tyg_icon.png" /></span>
|
|
</div>
|
|
<!-- 游泳馆 -->
|
|
<div class="cgfitem">
|
|
<span class="cgtitle">游泳场</span>
|
|
<span class="cgval">20%</span>
|
|
<span class="cgimg"><img src="../assets/index/yyg_icon.png" /></span>
|
|
</div>
|
|
</div>
|
|
<!-- 右边流量预警 -->
|
|
<div class="cgflow_rightbox">
|
|
<!-- 图书馆 -->
|
|
<div class="cgfitem">
|
|
<span class="cgimg"><img src="../assets/index/tsg_icon.png" /></span>
|
|
<span class="cgval">20%</span>
|
|
<span class="cgtitle">图书馆</span>
|
|
</div>
|
|
<!-- 文化馆 -->
|
|
<div class="cgfitem">
|
|
<span class="cgimg"><img src="../assets/index/whg_icon.png" /></span>
|
|
<span class="cgval">20%</span>
|
|
<span class="cgtitle">文化馆</span>
|
|
</div>
|
|
<!-- 博物馆 -->
|
|
<div class="cgfitem">
|
|
<span class="cgimg"><img src="../assets/index/bwg_icon.png" /></span>
|
|
<span class="cgval">20%</span>
|
|
<span class="cgtitle">博物馆</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 今日各场馆人数趋势 -->
|
|
<div class="gcgqs">
|
|
<div class="gcg_title">今日各场馆人数趋势</div>
|
|
<div id="kl-line" style="width: 100%; height: 180px"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- 中间 -->
|
|
<div class="centerbox">
|
|
<!-- 今日进馆人数 -->
|
|
<div class="jgrs">
|
|
<span class="jgval">345,235</span>
|
|
<span class="jgdesc">今日进馆人数</span>
|
|
</div>
|
|
<!-- 本周进馆人数 -->
|
|
<div class="jgrs">
|
|
<span class="jgval">345,235</span>
|
|
<span class="jgdesc">本周进馆人数</span>
|
|
</div>
|
|
<!-- 本月进馆人数 -->
|
|
<div class="jgrs">
|
|
<span class="jgval">345,235</span>
|
|
<span class="jgdesc">本月进馆人数</span>
|
|
</div>
|
|
<!-- 会动的体育馆image -->
|
|
<div class="tygpic"><img src="../assets/index/zt.png" /></div>
|
|
<!-- 年度进馆人数 -->
|
|
<div class="ndjgrs">
|
|
<span class="nddesc">年度进馆人数</span>
|
|
<span class="ndval">33,532,890</span>
|
|
</div>
|
|
</div>
|
|
<!-- 右边 -->
|
|
<div class="rbox">
|
|
<div class="rbox_title">各场馆实施实时进馆人数</div>
|
|
<div class="rbox_con">
|
|
<!-- 各场馆实时人数 cg1 -->
|
|
<div class="rbitem">
|
|
<span class="rbcgname">体育场</span>
|
|
<span class="rbtitle">当前人数</span>
|
|
<span class="rbval">4,738</span>
|
|
<span class="rbrate">40%</span>
|
|
</div>
|
|
<!-- 各场馆实时人数 cg2 -->
|
|
<div class="rbitem">
|
|
<span class="rbcgname">体育场</span>
|
|
<span class="rbtitle">当前人数</span>
|
|
<span class="rbval">4,738</span>
|
|
<span class="rbrate">40%</span>
|
|
</div>
|
|
<!-- 各场馆实时人数 cg3 -->
|
|
<div class="rbitem">
|
|
<span class="rbcgname">体育场</span>
|
|
<span class="rbtitle">当前人数</span>
|
|
<span class="rbval">4,738</span>
|
|
<span class="rbrate">40%</span>
|
|
</div>
|
|
<!-- 各场馆实时人数 cg4 -->
|
|
<div class="rbitem">
|
|
<span class="rbcgname">体育场</span>
|
|
<span class="rbtitle">当前人数</span>
|
|
<span class="rbval">4,738</span>
|
|
<span class="rbrate">40%</span>
|
|
</div>
|
|
<!-- 各场馆实时人数 cg5 -->
|
|
<div class="rbitem">
|
|
<span class="rbcgname">体育场</span>
|
|
<span class="rbtitle">当前人数</span>
|
|
<span class="rbval">4,738</span>
|
|
<span class="rbrate">40%</span>
|
|
</div>
|
|
<!-- 各场馆实时人数 cg6 -->
|
|
<div class="rbitem">
|
|
<span class="rbcgname">体育场</span>
|
|
<span class="rbtitle">当前人数</span>
|
|
<span class="rbval">4,738</span>
|
|
<span class="rbrate">40%</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
// 引入echarts
|
|
import * as echarts from "echarts";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 年月日选中的样式,默认日
|
|
klselt: "d",
|
|
};
|
|
},
|
|
//创建的时候修改背景图片
|
|
created() {
|
|
let cc = window.document.getElementById("app");
|
|
// 清除其他多余的classname
|
|
let len = cc.classList.length;
|
|
|
|
if (len > 1) {
|
|
cc.className = "btgym page_bg";
|
|
}
|
|
},
|
|
mounted() {
|
|
// 首页线图
|
|
this.home_bar();
|
|
// 折线图
|
|
this.line_zone();
|
|
},
|
|
methods: {
|
|
//选择年月日中的某个
|
|
selitem(type) {
|
|
this.klselt = type;
|
|
},
|
|
// 透明背景柱状统计图
|
|
home_bar() {
|
|
var chartDom = document.getElementById("homebar");
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
|
|
//
|
|
let that = this;
|
|
|
|
option = {
|
|
xAxis: {
|
|
type: "category",
|
|
data: that.bar_tdata,
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
//网格线
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: "soild",
|
|
color: "#2F00FF",
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
data: [120, 200, 150, 80, 70, 110, 130, 630, 530, 460],
|
|
//data: that.bar_data,
|
|
type: "bar",
|
|
showBackground: true,
|
|
// 设置顶部圆形
|
|
symbolSize: function (d) {
|
|
console.log(d);
|
|
return d > 0 ? [10, 20] : [0, 0];
|
|
},
|
|
symbolPosition: "end",
|
|
|
|
// symbolPosition:'end',
|
|
// 背景颜色
|
|
backgroundStyle: {
|
|
symbolPosition: "end",
|
|
symbolSize: [20, 20],
|
|
symbolOffset: [0, "-20%"],
|
|
opacity: 0.75,
|
|
//color: 'rgba(180, 180, 180, 0.2)'
|
|
color: {
|
|
type: "linear",
|
|
x: 0,
|
|
y: 1,
|
|
x2: 1,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: "#2F00FF", // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 0.2,
|
|
color: "#000", // 50% 处的颜色
|
|
},
|
|
{
|
|
offset: 0.8,
|
|
color: "#000", // 50% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#2F00FF", // 0% 处的颜色
|
|
},
|
|
],
|
|
global: false, // 缺省为 false
|
|
},
|
|
},
|
|
|
|
// 条柱颜色
|
|
color: {
|
|
type: "linear",
|
|
x: 0,
|
|
y: 1,
|
|
x2: 1,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: "#00B4FF", // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 0.6,
|
|
color: "#2f00ff",
|
|
},
|
|
{
|
|
offset: 0.8,
|
|
color: "#2f00ff",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#00B4FF", // 100% 处的颜色
|
|
},
|
|
],
|
|
global: false, // 缺省为 false
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
},
|
|
|
|
// 大面积折线图
|
|
line_zone() {
|
|
var chartDom = document.getElementById("kl-line");
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
|
|
let base = +new Date(2022, 9, 3);
|
|
let oneDay = 24 * 3600 * 1000;
|
|
let date = [];
|
|
let data = [Math.random() * 300];
|
|
for (let i = 1; i < 20000; i++) {
|
|
var now = new Date((base += oneDay));
|
|
date.push(
|
|
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
|
|
);
|
|
data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
|
|
}
|
|
option = {
|
|
xAxis: {
|
|
type: "category",
|
|
boundaryGap: false,
|
|
data: date,
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
boundaryGap: [0, "100%"],
|
|
//网格线
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: "soild",
|
|
color: "#2F00FF",
|
|
},
|
|
},
|
|
},
|
|
|
|
series: [
|
|
{
|
|
name: "Fake Data",
|
|
type: "line",
|
|
symbol: "none",
|
|
sampling: "lttb",
|
|
itemStyle: {
|
|
color: "rgb(255, 170, 131)",
|
|
},
|
|
areaStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: "rgba(255, 158, 68,0.6)",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgb(255, 70, 131,0.6)",
|
|
},
|
|
]),
|
|
},
|
|
data: data,
|
|
},
|
|
],
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
#index{
|
|
width: 100%;
|
|
float: left;
|
|
}
|
|
.leftbox {
|
|
width: 30%;
|
|
float: left;
|
|
/* height: 100%; */
|
|
}
|
|
|
|
.leftbox .keliu {
|
|
background-image: url("../assets/index/left_t1_bg.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0;
|
|
height: 0.88rem;
|
|
color: #b5b7c5;
|
|
}
|
|
/* 客流趋势 */
|
|
.leftbox .keliu .kliu_title {
|
|
line-height: 0.88rem;
|
|
font-size: 22px;
|
|
padding-left: 2.4rem;
|
|
display: block;
|
|
float: left;
|
|
}
|
|
|
|
.leftbox .keliu .kliu_st {
|
|
float: right;
|
|
line-height: 0.88rem;
|
|
font-size: 0.26rem;
|
|
padding-top: 0.18rem;
|
|
}
|
|
|
|
.leftbox .keliu .kliu_st span {
|
|
display: block;
|
|
background: url("../assets/index/sel_zone_bg.png") no-repeat 0 0;
|
|
background-position: 0 0;
|
|
background-size: 100%;
|
|
text-align: center;
|
|
width: 0.48rem;
|
|
height: 0.48rem;
|
|
line-height: 0.48rem;
|
|
float: left;
|
|
margin-left: 0.08rem;
|
|
cursor: pointer;
|
|
}
|
|
.leftbox .keliu .kliu_st .spactive {
|
|
background-image: url("../assets/index/sel_zone_active_bg.png");
|
|
}
|
|
/* 统计图 */
|
|
.leftbox .keliu .tongjitu {
|
|
padding-top: 0.56rem;
|
|
width: 100%;
|
|
}
|
|
/* 场馆流量预警 */
|
|
.leftbox .cgflow {
|
|
margin-top: 0.2rem;
|
|
background-image: url("../assets/index/left_t3_bg.png");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: 0 center;
|
|
height: 2.8rem;
|
|
}
|
|
/* 场馆左侧 */
|
|
.leftbox .cgflow_leftbox {
|
|
padding:66px 0 0 6%;
|
|
float: left;
|
|
width: 40%;
|
|
}
|
|
|
|
.cgflow .cgfitem{
|
|
width: 100%;
|
|
height: 0.46rem;
|
|
}
|
|
.cgflow .cgfitem span{
|
|
display: block;
|
|
margin-left: 12px;
|
|
float: left;
|
|
display: block;
|
|
}
|
|
.cgflow .cgfitem .cgtitle{
|
|
color: #0096ff;
|
|
font-size:14px;
|
|
}
|
|
.cgflow .cgfitem .cgval{
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
}
|
|
.cgflow .cgfitem .cgimg img{
|
|
width: 26px;
|
|
height: 26px;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
}
|
|
/* 场馆左侧 */
|
|
.leftbox .cgflow_rightbox {
|
|
padding:66px 0 0 12%;
|
|
float: right;
|
|
width: 30%;
|
|
margin-left: 4%;
|
|
}
|
|
/* 各场馆人流趋势 */
|
|
.leftbox .gcgqs{
|
|
float: left;
|
|
width: 100%;
|
|
}
|
|
.leftbox .gcgqs .gcg_title{
|
|
background-image:url('../assets/index/left_t2_bg.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
height: 0.88rem;
|
|
font-size: 22px;
|
|
line-height: 0.88rem;
|
|
padding-left: 2.2rem;
|
|
}
|
|
/* 中间的数据 */
|
|
.centerbox{
|
|
background-image: url('../assets/index/mid_bg.png');
|
|
background-position: 0 0;
|
|
background-size: 100% 100%;
|
|
width:29%;
|
|
float: left;
|
|
margin-left: 3%;
|
|
padding:1%;
|
|
margin-top:4%;
|
|
}
|
|
.centerbox .jgrs{
|
|
width: 33.33%;
|
|
float: left;
|
|
height: 120px;
|
|
}
|
|
.centerbox .tygpic{
|
|
clear: both;
|
|
width: 100%;
|
|
}
|
|
.centerbox .tygpic img{
|
|
height: 360px;
|
|
margin:12% auto;
|
|
}
|
|
/* 右边 */
|
|
.rbox{
|
|
width:30%;
|
|
float: left;
|
|
margin-left: 3%;
|
|
color: #fff;
|
|
}
|
|
.rbox .rbox_title{
|
|
background-image: url('../assets/index/right_t1_bg.png');
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
height: 0.86rem;
|
|
line-height: 0.86rem;
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
text-align: right;
|
|
padding-right: 2.6rem;
|
|
color: #b5b7c5;
|
|
}
|
|
.rbox .rbox_con{
|
|
width: 100%;
|
|
margin-top: 12px;
|
|
}
|
|
.rbox .rbox_con .rbitem{
|
|
background-image:url('../assets/index/rb_data_bg.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
height: 2.2rem;
|
|
width: 46%;
|
|
margin-left: 0.28rem;
|
|
float: left;
|
|
margin-top: 0.46rem;
|
|
padding-top: 0.2rem;
|
|
}
|
|
.rbox .rbox_con .rbitem span{
|
|
display: block;
|
|
}
|
|
.rbox .rbox_con .rbitem .rbcgname{
|
|
margin-top: 0.28rem;
|
|
color: #0096ff;
|
|
text-align: right;
|
|
padding-right: 0.28rem;
|
|
|
|
}
|
|
.rbox .rbox_con .rbitem .rbtitle{
|
|
text-align: left;
|
|
padding-left: 0.66rem;
|
|
padding-top: 0.1rem;
|
|
}
|
|
.rbox .rbox_con .rbitem .rbval{
|
|
font-size: 18px;
|
|
width: 60%;
|
|
height: 118px;
|
|
text-align: center;
|
|
line-height: 118px;
|
|
}
|
|
.rbox .rbox_con .rbitem .rbrate{
|
|
width: 30%;
|
|
float: left;
|
|
height: 118px;
|
|
text-align: center;
|
|
line-height: 118px;
|
|
|
|
}
|
|
/* 页面背景 */
|
|
.page_bg {
|
|
clear: both;
|
|
background-image: url("../assets/index/bg.jpg") !important;
|
|
}
|
|
</style>
|