xioayue
/
btgym
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

20230617机试小哥修改

lite
xyiege 3 years ago
parent
1399b802e2
commit
9823b69371
12 changed files with 2503 additions and 671 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/tiyuguan/人流.png
  2. BIN
      src/assets/tiyuguan/人流饱和度.png
  3. BIN
      src/assets/tiyuguan/视频大框.png
  4. BIN
      src/assets/tiyuguan/视频小框.png
  5. 13
      src/components/index/index.vue
  6. 479
      src/components/library/index.vue
  7. 479
      src/components/stadium/stadium.vue
  8. 154
      src/components/tiyuchang/1.vue
  9. 479
      src/components/tiyuchang/tiyuchang copy.vue
  10. 723
      src/components/tiyuchang/tiyuchang.vue
  11. 831
      src/components/zongLan/zongLan.vue
  12. 16
      src/router/index.js

BIN
src/assets/tiyuguan/人流.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
src/assets/tiyuguan/人流饱和度.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 138 KiB

BIN
src/assets/tiyuguan/视频大框.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 165 KiB

BIN
src/assets/tiyuguan/视频小框.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

13
src/components/index/index.vue
View File

@ -23,7 +23,7 @@
<div class="txt">游泳场馆</div>
</div>
<div @click="clickItme(5)" class="bowu guan" :class="selectVal == 5 ? 'bowuS' : 'bowuD'">
<div class="txt">博物馆</div>
<div class="txt">图书馆</div>
</div>
</div>
</div>
@ -71,11 +71,18 @@
if(val == 1){
this.$router.push({ path: '/tiyuchang/tiyuchang' })
this.backVal = 1
}
if(val == 3){
}else if(val == 3){
this.$router.push({ path: '/zongLan/zongLan' })
this.backVal = 3
}
else if(val == 2){
this.$router.push({ path: '/stadium/stadium' })
this.backVal = 2
}
else if(val == 5){
this.$router.push({ path: '/library/library' })
this.backVal = 5
}
},
clickQushi(val){
this.selectVal1 = val

479
src/components/library/index.vue
View File

@ -0,0 +1,479 @@
<template>
<div class="hello">
<div class="main">
<div class="left">
<div class="tiyuBla">
<div style="position: absolute; right: 28%; top: 52%">体育场</div>
</div>
<div class="tongji">
<canvas
id="etELhoiEDSDBklnwaLybhInLlmnhnHuv"
:width="cWidth1"
:height="cHeight1"
class="charts1"
@click="tap1"
/>
<!-- <canvas
id="etELhoiEDSDBklnwaLybhInLlmnhnHuv1"
:width="cWidth1"
:height="cHeight1"
class="charts1"
@click="tap1"
/> -->
</div>
<div class="bfb">
<div class="renshu"><span><img src="../../assets/tiyuguan/人流.png"></span>进馆人数</div>
<div class="num">24,352,345</div>
<!-- <div class="cntTxt">
<div style="font-size: 30px;font-weight: bold;color: white;">75%</div>
<div style="color: #0082FF;font-size: 14px;">人流饱和</div>
</div> -->
<div class="cntTxt">
<canvas
id="PvqalmgjxGnTCXyTJMOKLkntpbgRzGND"
:width="cWidth"
:height="cHeight"
class="charts"
@click="tap"
/>
</div>
<div class="rsType">
<div class="typeItem">
<div>安静</div>
<img
style="width: 45%; height: 40%; margin-top: 10%"
src="../../assets/tiyuguan/安静.png"
/>
</div>
<div class="typeItem">
<div>舒适</div>
<img
style="width: 45%; height: 40%; margin-top: 10%"
src="../../assets/tiyuguan/舒适.png"
/>
</div>
<div class="typeItem">
<div>拥挤</div>
<img
style="width: 45%; height: 40%; margin-top: 10%"
src="../../assets/tiyuguan/拥挤.png"
/>
</div>
</div>
</div>
</div>
<div class="right">
<div class="item" ></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</div>
</template>
<script>
import uCharts from "../../utils/u-charts";
function getH5Offset(e) {
e.mp = {
changedTouches: [],
};
e.mp.changedTouches.push({
x: e.offsetX,
y: e.offsetY,
});
return e;
}
var uChartsInstance = {};
export default {
data() {
return {
cWidth: 225,
cHeight: 150,
cWidth1: 550,
cHeight1: 250,
};
},
mounted() {
this.getServerData();
this.getServerData1();
},
methods: {
getServerData1() {
//模拟从服务器获取数据时的延时
setTimeout(() => {
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
let res = {
categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
series: [
{
name: "成交量A",
linearColor: [
[0, "#1890FF"],
[0.25, "#00B5FF"],
[0.5, "#00D1ED"],
[0.75, "#00E6BB"],
[1, "#90F489"],
],
data: [15, 45, 15, 45, 15, 45],
},
{
name: "成交量B",
linearColor: [
[0, "#91CB74"],
[0.25, "#2BDCA8"],
[0.5, "#2AE3A0"],
[0.75, "#C4D06E"],
[1, "#F2D375"],
],
data: [55, 85, 55, 85, 55, 85],
},
{
name: "成交量C",
linearColor: [
[0, "#FAC858"],
[0.33, "#FFC371"],
[0.66, "#FFC2B2"],
[1, "#FA7D8D"],
],
data: [95, 125, 95, 125, 95, 125],
},
],
};
let res1 = {
categories: ["2018","2019","2020","2021","2022","2023"],
series: [
{
name: "山峰图",
index: 1,
type: "mount",
data: [70,50,85,130,64,88]
},
{
name: "曲线",
type: "line",
style: "curve",
color: "#1890ff",
disableLegend: true,
data: [70,50,85,130,64,88]
}
]
};
this.drawCharts1("etELhoiEDSDBklnwaLybhInLlmnhnHuv", res);
this.drawCharts2("etELhoiEDSDBklnwaLybhInLlmnhnHuv1", res1);
}, 50);
},
drawCharts1(id, data) {
const ctx = document.getElementById(id).getContext("2d");
uChartsInstance[id] = new uCharts({
type: "line",
context: ctx,
width: this.cWidth1,
height: this.cHeight1,
categories: data.categories,
series: data.series,
animation: true,
background: "#FFFFFF",
color: [
"#1890FF",
"#91CB74",
"#FAC858",
"#EE6666",
"#73C0DE",
"#3CA272",
"#FC8452",
"#9A60B4",
"#ea7ccc",
],
padding: [15, 10, 0, 15],
dataLabel: false,
dataPointShape: false,
enableScroll: false,
legend: {},
xAxis: {
disableGrid: true,
},
yAxis: {
gridType: "dash",
dashLength: 2,
data: [
{
min: 0,
max: 150,
},
],
},
extra: {
line: {
type: "curve",
width: 2,
activeType: "hollow",
linearType: "custom",
},
},
});
},
drawCharts2(id, data) {
const ctx = document.getElementById(id).getContext("2d");
uChartsInstance[id] = new uCharts({
type: "mix",
context: ctx,
width: this.cWidth1,
height: this.cHeight1,
categories: data.categories,
series: data.series,
animation: true,
background: "#FFFFFF",
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
padding: [15,15,0,15],
enableScroll: false,
legend: {},
xAxis: {
disableGrid: true,
},
yAxis: {
disabled: false,
disableGrid: false,
splitNumber: 5,
gridType: "dash",
dashLength: 4,
gridColor: "#CCCCCC",
padding: 10,
showTitle: true,
data: [
{
position: "left",
title: "折线"
},
{
position: "left",
title: "山峰图",
min: 0,
max: 200,
},
// {
// position: "right",
// min: 0,
// max: 200,
// title: "柱状图",
// textAlign: "left"
// },
// {
// position: "right",
// min: 0,
// max: 200,
// title: "点",
// textAlign: "left"
// }
]
},
extra: {
mount: {
type: "triangle",
widthRatio: 1,
borderWidth: 2,
linearType: "custom"
},
mix: {
column: {
width: 20
}
}
}
});
},
getServerData() {
//模拟从服务器获取数据时的延时
setTimeout(() => {
//模拟服务器返回数据
let res = {
series: [
{
name: "一班",
data: 0.75,
},
],
};
this.drawCharts("PvqalmgjxGnTCXyTJMOKLkntpbgRzGND", res);
}, 50);
},
drawCharts(id, data) {
const ctx = document.getElementById(id).getContext("2d");
uChartsInstance[id] = new uCharts({
type: "arcbar",
context: ctx,
width: this.cWidth,
height: this.cHeight,
series: data.series,
animation: true,
background: "#FFFFFF",
color: ["#FFFF00"],
padding: undefined,
title: {
name: "75%",
fontSize: 30,
color: "#fff",
fontWeight: "bold",
},
subtitle: {
name: "人流饱和",
fontSize: 12,
color: "#0082FF",
},
extra: {
arcbar: {
type: "circle",
width: 10,
backgroundColor: "#070A24",
startAngle: 1.5,
endAngle: 0.25,
gap: 2,
},
},
});
},
tap(e) {
uChartsInstance[e.target.id].touchLegend(getH5Offset(e));
uChartsInstance[e.target.id].showToolTip(getH5Offset(e));
},
tap1(e) {
uChartsInstance[e.target.id].touchLegend(getH5Offset(e));
uChartsInstance[e.target.id].showToolTip(getH5Offset(e));
},
},
};
</script>
<style lang="less" scoped>
.main {
display: flex;
justify-content: space-between;
.left {
width: 30%;
height: 75vh;
// border: 1px solid red;
margin-left: 2%;
margin-top: -4%;
.tiyuBla {
width: 100%;
height: 40%;
background-image: url("../../assets/tiyuguan/进馆人流标题.png");
background-repeat: no-repeat;
background-size: 100% 100%;
color: white;
font-size: 38px;
font-weight: bold;
position: relative;
}
.tongji {
width: 100%;
height: 35%;
border: 1px solid #019ade;
}
.bfb {
width: 100%;
height: 25%;
background-image: url("../../assets/tiyuguan/人流饱和度.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
.renshu {
span{
margin-right: 5px;
img{
width: 10px;
height: 12px;
}
}
position: absolute;
top: 30%;
left: 10%;
color: #8199bd;
font-weight: bold;
font-size: 14px;
}
.num {
color: white;
font-weight: bold;
font-size: 20px;
position: absolute;
top: 45%;
left: 6%;
}
.cntTxt {
width: 20%;
height: 60%;
// border: 1px solid red;
position: absolute;
top: -5%;
left: 30.5%;
text-align: center;
padding-top: 2.5%;
}
.rsType {
width: 30%;
height: 35%;
// border: 1px solid red;
position: absolute;
top: 30%;
right: 4%;
display: flex;
justify-content: space-between;
.typeItem {
width: 30%;
height: 95%;
text-align: center;
color: #687c9e;
font-size: 14px;
}
}
}
}
.right {
margin-top: 3%;
width: 65%;
height: 66vh;
// border: 1px solid #019ade;
display: flex;
flex-wrap: wrap;
// align-items: center;
align-content: center;
justify-content: center;
background-image: url("../../assets/tiyuguan/视频大框.png") ;
background-size:contain;
background-repeat:no-repeat;
.item{
width: 40%;
height: 40%;
margin-top: 5px;
background-image: url("../../assets/tiyuguan/视频小框.png") ;
background-size:contain;
background-repeat:no-repeat;
}
.item:nth-child(2),.item:nth-child(4){
margin-right: 60px;
}
}
.charts {
width: 225px;
height: 150px;
}
.charts1 {
width: 550px;
height: 250px;
}
}
</style>

479
src/components/stadium/stadium.vue
View File

@ -0,0 +1,479 @@
<template>
<div class="hello">
<div class="main">
<div class="left">
<div class="tiyuBla">
<div style="position: absolute; right: 28%; top: 52%">体育场</div>
</div>
<div class="tongji">
<canvas
id="etELhoiEDSDBklnwaLybhInLlmnhnHuv"
:width="cWidth1"
:height="cHeight1"
class="charts1"
@click="tap1"
/>
<!-- <canvas
id="etELhoiEDSDBklnwaLybhInLlmnhnHuv1"
:width="cWidth1"
:height="cHeight1"
class="charts1"
@click="tap1"
/> -->
</div>
<div class="bfb">
<div class="renshu"><span><img src="../../assets/tiyuguan/人流.png"></span>进馆人数</div>
<div class="num">24,352,345</div>
<!-- <div class="cntTxt">
<div style="font-size: 30px;font-weight: bold;color: white;">75%</div>
<div style="color: #0082FF;font-size: 14px;">人流饱和</div>
</div> -->
<div class="cntTxt">
<canvas
id="PvqalmgjxGnTCXyTJMOKLkntpbgRzGND"
:width="cWidth"
:height="cHeight"
class="charts"
@click="tap"
/>
</div>
<div class="rsType">
<div class="typeItem">
<div>安静</div>
<img
style="width: 45%; height: 40%; margin-top: 10%"
src="../../assets/tiyuguan/安静.png"
/>
</div>
<div class="typeItem">
<div>舒适</div>
<img
style="width: 45%; height: 40%; margin-top: 10%"
src="../../assets/tiyuguan/舒适.png"
/>
</div>
<div class="typeItem">
<div>拥挤</div>
<img
style="width: 45%; height: 40%; margin-top: 10%"
src="../../assets/tiyuguan/拥挤.png"
/>
</div>
</div>
</div>
</div>
<div class="right">
<div class="item" ></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</div>
</template>
<script>
import uCharts from "../../utils/u-charts";
function getH5Offset(e) {
e.mp = {
changedTouches: [],
};
e.mp.changedTouches.push({
x: e.offsetX,
y: e.offsetY,
});
return e;
}
var uChartsInstance = {};
export default {
data() {
return {
cWidth: 225,
cHeight: 150,
cWidth1: 550,
cHeight1: 250,
};
},
mounted() {
this.getServerData();
this.getServerData1();
},
methods: {
getServerData1() {
//模拟从服务器获取数据时的延时
setTimeout(() => {
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
let res = {
categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
series: [
{
name: "成交量A",
linearColor: [
[0, "#1890FF"],
[0.25, "#00B5FF"],
[0.5, "#00D1ED"],
[0.75, "#00E6BB"],
[1, "#90F489"],
],
data: [15, 45, 15, 45, 15, 45],
},
{
name: "成交量B",
linearColor: [
[0, "#91CB74"],
[0.25, "#2BDCA8"],
[0.5, "#2AE3A0"],
[0.75, "#C4D06E"],
[1, "#F2D375"],
],
data: [55, 85, 55, 85, 55, 85],
},
{
name: "成交量C",
linearColor: [
[0, "#FAC858"],
[0.33, "#FFC371"],
[0.66, "#FFC2B2"],
[1, "#FA7D8D"],
],
data: [95, 125, 95, 125, 95, 125],
},
],
};
let res1 = {
categories: ["2018","2019","2020","2021","2022","2023"],
series: [
{
name: "山峰图",
index: 1,
type: "mount",
data: [70,50,85,130,64,88]
},
{
name: "曲线",
type: "line",
style: "curve",
color: "#1890ff",
disableLegend: true,
data: [70,50,85,130,64,88]
}
]
};
this.drawCharts1("etELhoiEDSDBklnwaLybhInLlmnhnHuv", res);
this.drawCharts2("etELhoiEDSDBklnwaLybhInLlmnhnHuv1", res1);
}, 50);
},
drawCharts1(id, data) {
const ctx = document.getElementById(id).getContext("2d");
uChartsInstance[id] = new uCharts({
type: "line",
context: ctx,
width: this.cWidth1,
height: this.cHeight1,
categories: data.categories,
series: data.series,
animation: true,
background: "#FFFFFF",
color: [
"#1890FF",
"#91CB74",
"#FAC858",
"#EE6666",
"#73C0DE",
"#3CA272",
"#FC8452",
"#9A60B4",
"#ea7ccc",
],
padding: [15, 10, 0, 15],
dataLabel: false,
dataPointShape: false,
enableScroll: false,
legend: {},
xAxis: {
disableGrid: true,
},
yAxis: {
gridType: "dash",
dashLength: 2,
data: [
{
min: 0,
max: 150,
},
],
},
extra: {
line: {
type: "curve",
width: 2,
activeType: "hollow",
linearType: "custom",
},
},
});
},
drawCharts2(id, data) {
const ctx = document.getElementById(id).getContext("2d");
uChartsInstance[id] = new uCharts({
type: "mix",
context: ctx,
width: this.cWidth1,
height: this.cHeight1,
categories: data.categories,
series: data.series,
animation: true,
background: "#FFFFFF",
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
padding: [15,15,0,15],
enableScroll: false,
legend: {},
xAxis: {
disableGrid: true,
},
yAxis: {
disabled: false,
disableGrid: false,
splitNumber: 5,
gridType: "dash",
dashLength: 4,
gridColor: "#CCCCCC",
padding: 10,
showTitle: true,
data: [
{
position: "left",
title: "折线"
},
{
position: "left",
title: "山峰图",
min: 0,
max: 200,
},
// {
// position: "right",
// min: 0,
// max: 200,
// title: "柱状图",
// textAlign: "left"
// },
// {
// position: "right",
// min: 0,
// max: 200,
// title: "点",
// textAlign: "left"
// }
]
},
extra: {
mount: {
type: "triangle",
widthRatio: 1,
borderWidth: 2,
linearType: "custom"
},
mix: {
column: {
width: 20
}
}
}
});
},
getServerData() {
//模拟从服务器获取数据时的延时
setTimeout(() => {
//模拟服务器返回数据
let res = {
series: [
{
name: "一班",
data: 0.75,
},
],
};
this.drawCharts("PvqalmgjxGnTCXyTJMOKLkntpbgRzGND", res);
}, 50);
},
drawCharts(id, data) {
const ctx = document.getElementById(id).getContext("2d");
uChartsInstance[id] = new uCharts({
type: "arcbar",
context: ctx,
width: this.cWidth,
height: this.cHeight,
series: data.series,
animation: true,
background: "#FFFFFF",
color: ["#FFFF00"],
padding: undefined,
title: {
name: "75%",
fontSize: 30,
color: "#fff",
fontWeight: "bold",
},
subtitle: {
name: "人流饱和",
fontSize: 12,
color: "#0082FF",
},
extra: {
arcbar: {
type: "circle",
width: 10,
backgroundColor: "#070A24",
startAngle: 1.5,
endAngle: 0.25,
gap: 2,
},
},
});
},
tap(e) {
uChartsInstance[e.target.id].touchLegend(getH5Offset(e));
uChartsInstance[e.target.id].showToolTip(getH5Offset(e));
},
tap1(e) {
uChartsInstance[e.target.id].touchLegend(getH5Offset(e));
uChartsInstance[e.target.id].showToolTip(getH5Offset(e));
},
},
};
</script>
<style lang="less" scoped>
.main {
display: flex;
justify-content: space-between;
.left {
width: 30%;
height: 75vh;
// border: 1px solid red;
margin-left: 2%;
margin-top: -4%;
.tiyuBla {
width: 100%;
height: 40%;
background-image: url("../../assets/tiyuguan/进馆人流标题.png");
background-repeat: no-repeat;
background-size: 100% 100%;
color: white;
font-size: 38px;
font-weight: bold;
position: relative;
}
.tongji {
width: 100%;
height: 35%;
border: 1px solid #019ade;
}
.bfb {
width: 100%;
height: 25%;
background-image: url("../../assets/tiyuguan/人流饱和度.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
.renshu {
span{
margin-right: 5px;
img{
width: 10px;
height: 12px;
}
}
position: absolute;
top: 30%;
left: 10%;
color: #8199bd;
font-weight: bold;
font-size: 14px;
}
.num {
color: white;
font-weight: bold;
font-size: 20px;
position: absolute;
top: 45%;
left: 6%;
}
.cntTxt {
width: 20%;
height: 60%;
// border: 1px solid red;
position: absolute;
top: -5%;
left: 30.5%;
text-align: center;
padding-top: 2.5%;
}
.rsType {
width: 30%;
height: 35%;
// border: 1px solid red;
position: absolute;
top: 30%;
right: 4%;
display: flex;
justify-content: space-between;
.typeItem {
width: 30%;
height: 95%;
text-align: center;
color: #687c9e;
font-size: 14px;
}
}
}
}
.right {
margin-top: 3%;
width: 65%;
height: 66vh;
// border: 1px solid #019ade;
display: flex;
flex-wrap: wrap;
// align-items: center;
align-content: center;
justify-content: center;
background-image: url("../../assets/tiyuguan/视频大框.png") ;
background-size:contain;
background-repeat:no-repeat;
.item{
width: 40%;
height: 40%;
margin-top: 5px;
background-image: url("../../assets/tiyuguan/视频小框.png") ;
background-size:contain;
background-repeat:no-repeat;
}
.item:nth-child(2),.item:nth-child(4){
margin-right: 60px;
}
}
.charts {
width: 225px;
height: 150px;
}
.charts1 {
width: 550px;
height: 250px;
}
}
</style>

154
src/components/tiyuchang/1.vue
View File

@ -0,0 +1,154 @@
<template>
<div>
<canvas id="UKijRCmzReSTcyEAGvEhdEhlfvWfNbtZ" :width="cWidth" :height="cHeight" class="charts" @click="tap"/>
</div>
</template>
<script>
// 需要在您的项目内执行 npm i @qiun/ucharts
import uCharts from '@qiun/ucharts';
function getH5Offset(e) {
e.mp = {
changedTouches: []
};
e.mp.changedTouches.push({
x: e.offsetX,
y: e.offsetY
});
return e;
}
var uChartsInstance = {};
export default {
data() {
return {
cWidth: 750,
cHeight: 500
};
},
mounted() {
this.getServerData();
},
methods: {
getServerData() {
//模拟从服务器获取数据时的延时
setTimeout(() => {
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
let res = {
categories: ["2018","2019","2020","2021","2022","2023"],
series: [
{
name: "曲面",
type: "area",
style: "curve",
data: [70,50,85,130,64,88]
},
{
name: "柱1",
index: 1,
type: "column",
data: [40,{"value":30,"color":"#f04864"},55,110,24,58]
},
{
name: "柱2",
index: 1,
type: "column",
data: [50,20,75,60,34,38]
},
{
name: "曲线",
type: "line",
style: "curve",
color: "#1890ff",
disableLegend: true,
data: [70,50,85,130,64,88]
},
{
name: "折线",
type: "line",
color: "#2fc25b",
data: [120,140,105,170,95,160]
},
{
name: "点",
index: 2,
type: "point",
color: "#f04864",
data: [100,80,125,150,112,132]
}
]
};
this.drawCharts('UKijRCmzReSTcyEAGvEhdEhlfvWfNbtZ', res);
}, 500);
},
drawCharts(id,data){
const ctx = document.getElementById(id).getContext("2d");
uChartsInstance[id] = new uCharts({
type: "mix",
context: ctx,
width: this.cWidth,
height: this.cHeight,
categories: data.categories,
series: data.series,
animation: true,
background: "#FFFFFF",
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
padding: [15,15,0,15],
enableScroll: false,
legend: {},
xAxis: {
disableGrid: true,
title: "单位：年"
},
yAxis: {
disabled: false,
disableGrid: false,
splitNumber: 5,
gridType: "dash",
dashLength: 4,
gridColor: "#CCCCCC",
padding: 10,
showTitle: true,
data: [
{
position: "left",
title: "折线"
},
{
position: "right",
min: 0,
max: 200,
title: "柱状图",
textAlign: "left"
},
{
position: "right",
min: 0,
max: 200,
title: "点",
textAlign: "left"
}
]
},
extra: {
mix: {
column: {
width: 20
}
}
}
});
},
tap(e){
uChartsInstance[e.target.id].touchLegend(getH5Offset(e));
uChartsInstance[e.target.id].showToolTip(getH5Offset(e));
}
}
};
</script>
<style scoped>
.charts{
width: 750px;
height: 500px;
}
</style>

479
src/components/tiyuchang/tiyuchang copy.vue
View File

@ -0,0 +1,479 @@
<template>
<div class="hello">
<div class="main">
<div class="left">
<div class="tiyuBla">
<div style="position: absolute; right: 28%; top: 52%">体育场</div>
</div>
<div class="tongji">
<canvas
id="etELhoiEDSDBklnwaLybhInLlmnhnHuv"
:width="cWidth1"
:height="cHeight1"
class="charts1"
@click="tap1"
/>
<!-- <canvas
id="etELhoiEDSDBklnwaLybhInLlmnhnHuv1"
:width="cWidth1"
:height="cHeight1"
class="charts1"
@click="tap1"
/> -->
</div>
<div class="bfb">
<div class="renshu"><span><img src="../../assets/tiyuguan/人流.png"></span>进馆人数</div>
<div class="num">24,352,345</div>
<!-- <div class="cntTxt">
<div style="font-size: 30px;font-weight: bold;color: white;">75%</div>
<div style="color: #0082FF;font-size: 14px;">人流饱和</div>
</div> -->
<div class="cntTxt">
<canvas
id="PvqalmgjxGnTCXyTJMOKLkntpbgRzGND"
:width="cWidth"
:height="cHeight"
class="charts"
@click="tap"
/>
</div>
<div class="rsType">
<div class="typeItem">
<div>安静</div>
<img
style="width: 45%; height: 40%; margin-top: 10%"
src="../../assets/tiyuguan/安静.png"
/>
</div>
<div class="typeItem">
<div>舒适</div>
<img
style="width: 45%; height: 40%; margin-top: 10%"
src="../../assets/tiyuguan/舒适.png"
/>
</div>
<div class="typeItem">
<div>拥挤</div>
<img
style="width: 45%; height: 40%; margin-top: 10%"
src="../../assets/tiyuguan/拥挤.png"
/>
</div>
</div>
</div>
</div>
<div class="right">
<div class="item" ></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</div>
</template>
<script>
import uCharts from "../../utils/u-charts";
function getH5Offset(e) {
e.mp = {
changedTouches: [],
};
e.mp.changedTouches.push({
x: e.offsetX,
y: e.offsetY,
});
return e;
}
var uChartsInstance = {};
export default {
data() {
return {
cWidth: 225,
cHeight: 150,
cWidth1: 550,
cHeight1: 250,
};
},
mounted() {
this.getServerData();
this.getServerData1();
},
methods: {
getServerData1() {
//模拟从服务器获取数据时的延时
setTimeout(() => {
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
let res = {
categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
series: [
{
name: "成交量A",
linearColor: [
[0, "#1890FF"],
[0.25, "#00B5FF"],
[0.5, "#00D1ED"],
[0.75, "#00E6BB"],
[1, "#90F489"],
],
data: [15, 45, 15, 45, 15, 45],
},
{
name: "成交量B",
linearColor: [
[0, "#91CB74"],
[0.25, "#2BDCA8"],
[0.5, "#2AE3A0"],
[0.75, "#C4D06E"],
[1, "#F2D375"],
],
data: [55, 85, 55, 85, 55, 85],
},
{
name: "成交量C",
linearColor: [
[0, "#FAC858"],
[0.33, "#FFC371"],
[0.66, "#FFC2B2"],
[1, "#FA7D8D"],
],
data: [95, 125, 95, 125, 95, 125],
},
],
};
let res1 = {
categories: ["2018","2019","2020","2021","2022","2023"],
series: [
{
name: "山峰图",
index: 1,
type: "mount",
data: [70,50,85,130,64,88]
},
{
name: "曲线",
type: "line",
style: "curve",
color: "#1890ff",
disableLegend: true,
data: [70,50,85,130,64,88]
}
]
};
this.drawCharts1("etELhoiEDSDBklnwaLybhInLlmnhnHuv", res);
this.drawCharts2("etELhoiEDSDBklnwaLybhInLlmnhnHuv1", res1);
}, 50);
},
drawCharts1(id, data) {
const ctx = document.getElementById(id).getContext("2d");
uChartsInstance[id] = new uCharts({
type: "line",
context: ctx,
width: this.cWidth1,
height: this.cHeight1,
categories: data.categories,
series: data.series,
animation: true,
background: "#FFFFFF",
color: [
"#1890FF",
"#91CB74",
"#FAC858",
"#EE6666",
"#73C0DE",
"#3CA272",
"#FC8452",
"#9A60B4",
"#ea7ccc",
],
padding: [15, 10, 0, 15],
dataLabel: false,
dataPointShape: false,
enableScroll: false,
legend: {},
xAxis: {
disableGrid: true,
},
yAxis: {
gridType: "dash",
dashLength: 2,
data: [
{
min: 0,
max: 150,
},
],
},
extra: {
line: {
type: "curve",
width: 2,
activeType: "hollow",
linearType: "custom",
},
},
});
},
drawCharts2(id, data) {
const ctx = document.getElementById(id).getContext("2d");
uChartsInstance[id] = new uCharts({
type: "mix",
context: ctx,
width: this.cWidth1,
height: this.cHeight1,
categories: data.categories,
series: data.series,
animation: true,
background: "#FFFFFF",
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
padding: [15,15,0,15],
enableScroll: false,
legend: {},
xAxis: {
disableGrid: true,
},
yAxis: {
disabled: false,
disableGrid: false,
splitNumber: 5,
gridType: "dash",
dashLength: 4,
gridColor: "#CCCCCC",
padding: 10,
showTitle: true,
data: [
{
position: "left",
title: "折线"
},
{
position: "left",
title: "山峰图",
min: 0,
max: 200,
},
// {
// position: "right",
// min: 0,
// max: 200,
// title: "柱状图",
// textAlign: "left"
// },
// {
// position: "right",
// min: 0,
// max: 200,
// title: "点",
// textAlign: "left"
// }
]
},
extra: {
mount: {
type: "triangle",
widthRatio: 1,
borderWidth: 2,
linearType: "custom"
},
mix: {
column: {
width: 20
}
}
}
});
},
getServerData() {
//模拟从服务器获取数据时的延时
setTimeout(() => {
//模拟服务器返回数据
let res = {
series: [
{
name: "一班",
data: 0.75,
},
],
};
this.drawCharts("PvqalmgjxGnTCXyTJMOKLkntpbgRzGND", res);
}, 50);
},
drawCharts(id, data) {
const ctx = document.getElementById(id).getContext("2d");
uChartsInstance[id] = new uCharts({
type: "arcbar",
context: ctx,
width: this.cWidth,
height: this.cHeight,
series: data.series,
animation: true,
background: "#FFFFFF",
color: ["#FFFF00"],
padding: undefined,
title: {
name: "75%",
fontSize: 30,
color: "#fff",
fontWeight: "bold",
},
subtitle: {
name: "人流饱和",
fontSize: 12,
color: "#0082FF",
},
extra: {
arcbar: {
type: "circle",
width: 10,
backgroundColor: "#070A24",
startAngle: 1.5,
endAngle: 0.25,
gap: 2,
},
},
});
},
tap(e) {
uChartsInstance[e.target.id].touchLegend(getH5Offset(e));
uChartsInstance[e.target.id].showToolTip(getH5Offset(e));
},
tap1(e) {
uChartsInstance[e.target.id].touchLegend(getH5Offset(e));
uChartsInstance[e.target.id].showToolTip(getH5Offset(e));
},
},
};
</script>
<style lang="less" scoped>
.main {
display: flex;
justify-content: space-between;
.left {
width: 30%;
height: 75vh;
// border: 1px solid red;
margin-left: 2%;
margin-top: -4%;
.tiyuBla {
width: 100%;
height: 40%;
background-image: url("../../assets/tiyuguan/进馆人流标题.png");
background-repeat: no-repeat;
background-size: 100% 100%;
color: white;
font-size: 38px;
font-weight: bold;
position: relative;
}
.tongji {
width: 100%;
height: 35%;
border: 1px solid #019ade;
}
.bfb {
width: 100%;
height: 25%;
background-image: url("../../assets/tiyuguan/人流饱和度.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
.renshu {
span{
margin-right: 5px;
img{
width: 10px;
height: 12px;
}
}
position: absolute;
top: 30%;
left: 10%;
color: #8199bd;
font-weight: bold;
font-size: 14px;
}
.num {
color: white;
font-weight: bold;
font-size: 20px;
position: absolute;
top: 45%;
left: 6%;
}
.cntTxt {
width: 20%;
height: 60%;
// border: 1px solid red;
position: absolute;
top: -5%;
left: 30.5%;
text-align: center;
padding-top: 2.5%;
}
.rsType {
width: 30%;
height: 35%;
// border: 1px solid red;
position: absolute;
top: 30%;
right: 4%;
display: flex;
justify-content: space-between;
.typeItem {
width: 30%;
height: 95%;
text-align: center;
color: #687c9e;
font-size: 14px;
}
}
}
}
.right {
margin-top: 3%;
width: 65%;
height: 66vh;
// border: 1px solid #019ade;
display: flex;
flex-wrap: wrap;
// align-items: center;
align-content: center;
justify-content: center;
background-image: url("../../assets/tiyuguan/视频大框.png") ;
background-size:contain;
background-repeat:no-repeat;
.item{
width: 40%;
height: 40%;
margin-top: 5px;
background-image: url("../../assets/tiyuguan/视频小框.png") ;
background-size:contain;
background-repeat:no-repeat;
}
.item:nth-child(2),.item:nth-child(4){
margin-right: 60px;
}
}
.charts {
width: 225px;
height: 150px;
}
.charts1 {
width: 550px;
height: 250px;
}
}
</style>

723
src/components/tiyuchang/tiyuchang.vue
View File

@ -1,184 +1,177 @@
<template>
<div class="hello">
<div class="main">
<div class="left">
<div class="tiyuBla">
<div style="position: absolute;right: 28%;top: 52%;">体育场</div>
</div>
<div class="hello">
<div class="main">
<div class="left">
<div class="tiyuBla">
<div style="position: absolute; right: 28%; top: 52%">体育场</div>
</div>
<div class="tongji">
<canvas id="etELhoiEDSDBklnwaLybhInLlmnhnHuv" :width="cWidth1" :height="cHeight1" class="charts1" @click="tap1"/>
</div>
<div class="tongji">
<!-- <canvas
id="etELhoiEDSDBklnwaLybhInLlmnhnHuv"
:width="cWidth1"
:height="cHeight1"
class="charts1"
@click="tap1"
/> -->
<canvas
id="etELhoiEDSDBklnwaLybhInLlmnhnHuv1"
:width="cWidth1"
:height="cHeight1"
class="charts1"
@click="tap1"
/>
</div>
<div class="bfb">
<div class="renshu">进馆人数</div>
<div class="bfb">
<div class="renshu"><span><img src="../../assets/tiyuguan/人流.png"></span>进馆人数</div>
<div class="num">24,352,345</div>
<div class="num">24,352,345</div>
<!-- <div class="cntTxt">
<!-- <div class="cntTxt">
<div style="font-size: 30px;font-weight: bold;color: white;">75%</div>
<div style="color: #0082FF;font-size: 14px;">人流饱和</div>
</div> -->
<div class="cntTxt">
<canvas id="PvqalmgjxGnTCXyTJMOKLkntpbgRzGND" :width="cWidth" :height="cHeight" class="charts" @click="tap"/>
</div>
<div class="rsType">
<div class="typeItem">
<div>安静</div>
<img style="width: 45%;height: 40%;margin-top: 10%;" src="../../assets/tiyuguan/安静.png" />
</div>
<div class="typeItem">
<div>舒适</div>
<img style="width: 45%;height: 40%;margin-top: 10%;" src="../../assets/tiyuguan/舒适.png" />
</div>
<div class="typeItem">
<div>拥挤</div>
<img style="width: 45%;height: 40%;margin-top: 10%;" src="../../assets/tiyuguan/拥挤.png" />
</div>
</div>
</div>
</div>
<div class="cntTxt">
<canvas
id="PvqalmgjxGnTCXyTJMOKLkntpbgRzGND"
:width="cWidth"
:height="cHeight"
class="charts"
@click="tap"
/>
</div>
<div class="right">
<div style="width: 45%;height: 45%;border: 1px solid #019ADE;"></div>
<div style="width: 45%;height: 45%;border: 1px solid #019ADE;"></div>
<div style="width: 45%;height: 45%;border: 1px solid #019ADE;"></div>
<div style="width: 45%;height: 45%;border: 1px solid #019ADE;"></div>
</div>
<div class="rsType">
<div class="typeItem">
<div>安静</div>
<img
style="width: 45%; height: 40%; margin-top: 10%"
src="../../assets/tiyuguan/安静.png"
/>
</div>
<div class="typeItem">
<div>舒适</div>
<img
style="width: 45%; height: 40%; margin-top: 10%"
src="../../assets/tiyuguan/舒适.png"
/>
</div>
<div class="typeItem">
<div>拥挤</div>
<img
style="width: 45%; height: 40%; margin-top: 10%"
src="../../assets/tiyuguan/拥挤.png"
/>
</div>
</div>
</div>
</div>
<div class="right">
<div class="item" ></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</template>
</div>
</div>
</template>
<script>
import uCharts from '../../utils/u-charts';
function getH5Offset(e) {
e.mp = {
changedTouches: []
import uCharts from "../../utils/u-charts";
function getH5Offset(e) {
e.mp = {
changedTouches: [],
};
e.mp.changedTouches.push({
x: e.offsetX,
y: e.offsetY,
});
return e;
}
var uChartsInstance = {};
export default {
data() {
return {
cWidth: 225,
cHeight: 150,
cWidth1: 550,
cHeight1: 250,
};
e.mp.changedTouches.push({
x: e.offsetX,
y: e.offsetY
});
return e;
}
var uChartsInstance = {};
export default {
data() {
return {
cWidth: 225,
cHeight: 150,
cWidth1: 550,
cHeight1: 250
};
},
mounted() {
this.getServerData();
this.getServerData1()
},
methods: {
getServerData1() {
},
mounted() {
this.getServerData();
this.getServerData1();
},
methods: {
getServerData1() {
//模拟从服务器获取数据时的延时
setTimeout(() => {
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
let res = {
categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
series: [
{
name: "成交量A",
linearColor: [
[0, "#1890FF"],
[0.25, "#00B5FF"],
[0.5, "#00D1ED"],
[0.75, "#00E6BB"],
[1, "#90F489"],
],
data: [15, 45, 15, 45, 15, 45],
},
{
name: "成交量B",
linearColor: [
[0, "#91CB74"],
[0.25, "#2BDCA8"],
[0.5, "#2AE3A0"],
[0.75, "#C4D06E"],
[1, "#F2D375"],
],
data: [55, 85, 55, 85, 55, 85],
},
{
name: "成交量C",
linearColor: [
[0, "#FAC858"],
[0.33, "#FFC371"],
[0.66, "#FFC2B2"],
[1, "#FA7D8D"],
],
data: [95, 125, 95, 125, 95, 125],
},
],
};
let res1 = {
categories: ["2018","2019","2020","2021","2022","2023"],
series: [
{
name: "成交量A",
linearColor: [
[
0,
"#1890FF"
],
[
0.25,
"#00B5FF"
],
[
0.5,
"#00D1ED"
],
[
0.75,
"#00E6BB"
],
[
1,
"#90F489"
]
],
data: [15,45,15,45,15,45]
name: "山峰图",
index: 1,
type: "column",
data: [40,{"value":30,"color":"#f04864"},55,110,24,58]
},
{
name: "成交量B",
linearColor: [
[
0,
"#91CB74"
],
[
0.25,
"#2BDCA8"
],
[
0.5,
"#2AE3A0"
],
[
0.75,
"#C4D06E"
],
[
1,
"#F2D375"
]
],
data: [55,85,55,85,55,85]
},
{
name: "成交量C",
linearColor: [
[
0,
"#FAC858"
],
[
0.33,
"#FFC371"
],
[
0.66,
"#FFC2B2"
],
[
1,
"#FA7D8D"
]
],
data: [95,125,95,125,95,125]
name: "曲线",
type: "line",
style: "curve",
color: "#1890ff",
disableLegend: true,
data: [40,30,55,110,24,58]
}
]
};
this.drawCharts1('etELhoiEDSDBklnwaLybhInLlmnhnHuv', res);
// this.drawCharts1("etELhoiEDSDBklnwaLybhInLlmnhnHuv", res);
this.drawCharts2("etELhoiEDSDBklnwaLybhInLlmnhnHuv1", res1);
}, 50);
},
drawCharts1(id,data){
drawCharts1(id, data) {
const ctx = document.getElementById(id).getContext("2d");
uChartsInstance[id] = new uCharts({
type: "line",
@ -189,14 +182,24 @@
series: data.series,
animation: true,
background: "#FFFFFF",
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
padding: [15,10,0,15],
color: [
"#1890FF",
"#91CB74",
"#FAC858",
"#EE6666",
"#73C0DE",
"#3CA272",
"#FC8452",
"#9A60B4",
"#ea7ccc",
],
padding: [15, 10, 0, 15],
dataLabel: false,
dataPointShape: false,
enableScroll: false,
legend: {},
xAxis: {
disableGrid: true
disableGrid: true,
},
yAxis: {
gridType: "dash",
@ -204,186 +207,276 @@
data: [
{
min: 0,
max: 150
}
]
max: 150,
},
],
},
extra: {
line: {
type: "curve",
width: 2,
activeType: "hollow",
linearType: "custom",
},
},
});
},
drawCharts2(id, data) {
const ctx = document.getElementById(id).getContext("2d");
uChartsInstance[id] = new uCharts({
type: "mix",
context: ctx,
width: this.cWidth1,
height: this.cHeight1,
categories: data.categories,
series: data.series,
animation: true,
background: "#FFFFFF",
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
padding: [15,15,0,15],
enableScroll: false,
legend: {},
xAxis: {
disableGrid: true,
},
yAxis: {
disabled: false,
disableGrid: false,
splitNumber: 5,
gridType: "dash",
dashLength: 4,
gridColor: "#CCCCCC",
padding: 10,
showTitle: false,
data: [
{
position: "left",
title: "",
min: 0,
max: 200,
},
{
axisLine:false,
position: "right",
title: "",
min: 0,
max: 200,
},
// {
// position: "right",
// min: 0,
// max: 200,
// title: "柱状图",
// textAlign: "left"
// },
// {
// position: "right",
// min: 0,
// max: 200,
// title: "点",
// textAlign: "left"
// }
]
},
extra: {
mount: {
type: "triangle",
widthRatio: 1,
borderWidth: 2,
linearType: "custom"
},
mix: {
column: {
width: 20
}
}
}
});
},
getServerData() {
//模拟从服务器获取数据时的延时
setTimeout(() => {
//模拟服务器返回数据
let res = {
series: [
{
name: "一班",
data: 0.75
}
]
};
this.drawCharts('PvqalmgjxGnTCXyTJMOKLkntpbgRzGND', res);
}, 50);
},
drawCharts(id,data){
const ctx = document.getElementById(id).getContext("2d");
uChartsInstance[id] = new uCharts({
type: "arcbar",
context: ctx,
width: this.cWidth,
height: this.cHeight,
series: data.series,
animation: true,
background: "#FFFFFF",
color: ["#FFFF00"],
padding: undefined,
title: {
name: "75%",
fontSize: 30,
color: "#fff",
fontWeight: "bold"
},
subtitle: {
name: "人流饱和",
fontSize: 12,
color: "#0082FF"
getServerData() {
//模拟从服务器获取数据时的延时
setTimeout(() => {
//模拟服务器返回数据
let res = {
series: [
{
name: "一班",
data: 0.75,
},
],
};
this.drawCharts("PvqalmgjxGnTCXyTJMOKLkntpbgRzGND", res);
}, 50);
},
drawCharts(id, data) {
const ctx = document.getElementById(id).getContext("2d");
uChartsInstance[id] = new uCharts({
type: "arcbar",
context: ctx,
width: this.cWidth,
height: this.cHeight,
series: data.series,
animation: true,
background: "#FFFFFF",
color: ["#FFFF00"],
padding: undefined,
title: {
name: "75%",
fontSize: 30,
color: "#fff",
fontWeight: "bold",
},
subtitle: {
name: "人流饱和",
fontSize: 12,
color: "#0082FF",
},
extra: {
arcbar: {
type: "circle",
width: 10,
backgroundColor: "#070A24",
startAngle: 1.5,
endAngle: 0.25,
gap: 2,
},
extra: {
arcbar: {
type: "circle",
width: 10,
backgroundColor: "#070A24",
startAngle: 1.5,
endAngle: 0.25,
gap: 2,
}
}
});
},
tap(e){
uChartsInstance[e.target.id].touchLegend(getH5Offset(e));
uChartsInstance[e.target.id].showToolTip(getH5Offset(e));
},
tap1(e){
uChartsInstance[e.target.id].touchLegend(getH5Offset(e));
uChartsInstance[e.target.id].showToolTip(getH5Offset(e));
}
}
};
</script>
},
});
},
tap(e) {
uChartsInstance[e.target.id].touchLegend(getH5Offset(e));
uChartsInstance[e.target.id].showToolTip(getH5Offset(e));
},
tap1(e) {
uChartsInstance[e.target.id].touchLegend(getH5Offset(e));
uChartsInstance[e.target.id].showToolTip(getH5Offset(e));
},
},
};
</script>
<style lang="less" scoped>
.main{
display: flex;
justify-content: space-between;
.left{
width: 30%;
height: 75vh;
// border: 1px solid red;
margin-left: 2%;
margin-top: -4%;
.tiyuBla{
width: 100%;
height: 40%;
background-image: url('../../assets/tiyuguan/进馆人流标题.png');
background-repeat: no-repeat;
background-size: 100% 100%;
color: white;
font-size: 38px;
font-weight: bold;
position: relative;
}
.main {
display: flex;
justify-content: space-between;
.left {
width: 30%;
height: 75vh;
// border: 1px solid red;
margin-left: 2%;
margin-top: -4%;
.tiyuBla {
width: 100%;
height: 40%;
background-image: url("../../assets/tiyuguan/进馆人流标题.png");
background-repeat: no-repeat;
background-size: 100% 100%;
color: white;
font-size: 38px;
font-weight: bold;
position: relative;
}
.tongji{
width: 100%;
height: 35%;
border: 1px solid #019ADE;
}
.tongji {
width: 100%;
height: 35%;
border: 1px solid #019ade;
}
.bfb{
width: 100%;
height: 25%;
background-image: url('../../assets/tiyuguan/人流密集度.png');
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
.renshu{
position: absolute;
top: 30%;
left: 10%;
color: #8199BD;
font-weight: bold;
font-size: 14px;
}
.num{
color: white;
font-weight: bold;
font-size: 20px;
position: absolute;
top: 45%;
left: 6%;
}
.cntTxt{
width: 20%;
height: 60%;
// border: 1px solid red;
position: absolute;
top: -5%;
left: 30.5%;
text-align: center;
padding-top: 2.5%;
}
.rsType{
width: 30%;
height: 35%;
// border: 1px solid red;
position: absolute;
top: 30%;
right: 4%;
display: flex;
justify-content: space-between;
.typeItem{
width: 30%;
height: 95%;
text-align: center;
color: #687C9E;
font-size: 14px;
}
}
.bfb {
width: 100%;
height: 25%;
background-image: url("../../assets/tiyuguan/人流饱和度.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
.renshu {
span{
margin-right: 5px;
img{
width: 10px;
height: 12px;
}
}
}
.right{
margin-top: 3%;
margin-right: 2%;
width: 63%;
height: 66vh;
border: 1px solid #019ADE;
position: absolute;
top: 30%;
left: 10%;
color: #8199bd;
font-weight: bold;
font-size: 14px;
}
.num {
color: white;
font-weight: bold;
font-size: 20px;
position: absolute;
top: 45%;
left: 6%;
}
.cntTxt {
width: 20%;
height: 60%;
// border: 1px solid red;
position: absolute;
top: -5%;
left: 30.5%;
text-align: center;
padding-top: 2.5%;
}
.rsType {
width: 30%;
height: 35%;
// border: 1px solid red;
position: absolute;
top: 30%;
right: 4%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
.charts{
width: 225px;
height: 150px;
justify-content: space-between;
.typeItem {
width: 30%;
height: 95%;
text-align: center;
color: #687c9e;
font-size: 14px;
}
}
}
.charts1{
width: 550px;
height: 250px;
}
.right {
margin-top: 3%;
width: 65%;
height: 66vh;
// border: 1px solid #019ade;
display: flex;
flex-wrap: wrap;
// align-items: center;
align-content: center;
justify-content: center;
background-image: url("../../assets/tiyuguan/视频大框.png") ;
background-size:contain;
background-repeat:no-repeat;
.item{
width: 40%;
height: 40%;
margin-top: 5px;
background-image: url("../../assets/tiyuguan/视频小框.png") ;
background-size:contain;
background-repeat:no-repeat;
}
.item:nth-child(2),.item:nth-child(4){
margin-right: 60px;
}
</style>
}
.charts {
width: 225px;
height: 150px;
}
.charts1 {
width: 550px;
height: 250px;
}
}
</style>

831
src/components/zongLan/zongLan.vue
View File

@ -1,387 +1,516 @@
<template>
<div class="hello">
<div class="content">
<div class="hello">
<div class="content">
<div class="qushi">
<div class="keliu">
<div class="keliuTxt">客流趋势</div>
<div class="keliuBtn">
<div
v-for="(item, index) in keliuList"
:key="index"
class="btnItem"
@click="clickQushi(item.unit)"
:class="item.unit == selectVal1 ? 'btnItemS' : 'btnItemD'"
>
<div class="txt">{{ item.unit }}</div>
</div>
</div>
</div>
<div class="tongjitu"></div>
<div class="qushi">
<div class="keliu">
<div class="keliuTxt">客流趋势</div>
<div class="keliuBtn">
<div v-for="(item, index) in keliuList" :key="index" class="btnItem" @click="clickQushi(item.unit)" :class="item.unit == selectVal1 ? 'btnItemS' : 'btnItemD'">
<div class="txt">{{ item.unit }}</div>
</div>
<div class="qushiBaifb">
<div class="baifbLeft">
<div class="baiFbitem">
<div style="font-size: 14px">体育场</div>
<div
style="
color: white;
font-size: 18px;
font-weight: bold;
margin-left: 10%;
"
>
20%
</div>
<img
style="width: 10%; height: 60%"
src="../../assets/index/体育场图例.png"
/>
</div>
<div class="tongjitu">
<div class="baiFbitem">
<div style="font-size: 14px">体育馆</div>
<div
style="
color: white;
font-size: 18px;
font-weight: bold;
margin-left: 10%;
"
>
12%
</div>
<img
style="width: 10%; height: 60%"
src="../../assets/index/体育馆图例.png"
/>
</div>
<div class="qushiBaifb">
<div class="baifbLeft">
<div class="baiFbitem">
<div style="font-size: 14px;">体育场</div>
<div style="color: white;font-size: 18px;font-weight: bold;margin-left: 10%;">20%</div>
<img style="width: 10%;height: 60%;" src="../../assets/index/体育场图例.png" />
</div>
<div class="baiFbitem">
<div style="font-size: 14px;">体育馆</div>
<div style="color: white;font-size: 18px;font-weight: bold;margin-left: 10%;">12%</div>
<img style="width: 10%;height: 60%;" src="../../assets/index/体育馆图例.png" />
</div>
<div class="baiFbitem">
<div style="font-size: 14px;">游泳场馆</div>
<div style="color: white;font-size: 18px;font-weight: bold;">12%</div>
<img style="width: 10%;height: 60%;" src="../../assets/index/体育馆图例.png" />
</div>
</div>
<div class="baiFbRight">
<div class="baiFbitem">
<img style="width: 10%;height: 60%;" src="../../assets/index/体育场图例.png" />
<div style="color: white;font-size: 18px;font-weight: bold;margin-right: 10%;">20%</div>
<div style="font-size: 14px;">图书馆</div>
</div>
<div class="baiFbitem">
<img style="width: 10%;height: 60%;" src="../../assets/index/体育馆图例.png" />
<div style="color: white;font-size: 18px;font-weight: bold;margin-right: 10%;">12%</div>
<div style="font-size: 14px;">文化馆</div>
</div>
<div class="baiFbitem">
<img style="width: 10%;height: 60%;" src="../../assets/index/体育馆图例.png" />
<div style="color: white;font-size: 18px;font-weight: bold;margin-right: 10%;">12%</div>
<div style="font-size: 14px;">博物馆</div>
</div>
</div>
<div class="baiFbitem">
<div style="font-size: 14px">游泳场馆</div>
<div style="color: white; font-size: 18px; font-weight: bold">
12%
</div>
<img
style="width: 10%; height: 60%"
src="../../assets/index/体育馆图例.png"
/>
</div>
<div class="keliu keliuTu1">
<div class="keliuTxt">今日各场馆人数趋势</div>
</div>
<div class="baiFbRight">
<div class="baiFbitem">
<img
style="width: 10%; height: 60%"
src="../../assets/index/体育场图例.png"
/>
<div
style="
color: white;
font-size: 18px;
font-weight: bold;
margin-right: 10%;
"
>
20%
</div>
<div style="font-size: 14px">图书馆</div>
</div>
<div class="baiFbitem">
<img
style="width: 10%; height: 60%"
src="../../assets/index/体育馆图例.png"
/>
<div
style="
color: white;
font-size: 18px;
font-weight: bold;
margin-right: 10%;
"
>
12%
</div>
<div style="font-size: 14px">文化馆</div>
</div>
<div class="baiFbitem">
<img
style="width: 10%; height: 60%"
src="../../assets/index/体育馆图例.png"
/>
<div
style="
color: white;
font-size: 18px;
font-weight: bold;
margin-right: 10%;
"
>
12%
</div>
<div style="font-size: 14px">博物馆</div>
</div>
</div>
</div>
<div class="keliu keliuTu1">
<div class="keliuTxt">今日各场馆人数趋势</div>
</div>
</div>
<div class="middle">
<div
style="
position: absolute;
color: white;
top: 11%;
left: 18%;
font-weight: bold;
"
>
345,235
</div>
<div
style="
position: absolute;
color: white;
top: 11%;
left: 43.5%;
font-weight: bold;
"
>
2,345,235
</div>
<div
style="
position: absolute;
color: white;
top: 11%;
left: 71%;
font-weight: bold;
"
>
2,345万
</div>
<div class="middle">
<div style="position: absolute;color: white;top: 11%;left: 18%;font-weight: bold;">345,235</div>
<div style="position: absolute;color: white;top: 11%;left: 43.5%;font-weight: bold;">2,345,235</div>
<div style="position: absolute;color: white;top: 11%;left: 71%;font-weight: bold;">2,345万</div>
<img src="../../assets/index/主体.png" class="aimImg" style="width: 70%;height: 50%;position: absolute;left: 15%;top: 29%;" />
<img
src="../../assets/index/主体.png"
class="aimImg"
style="
width: 70%;
height: 50%;
position: absolute;
left: 15%;
top: 29%;
"
/>
<div
style="
position: absolute;
color: white;
left: 42%;
bottom: 15.5%;
font-weight: bold;
"
>
年度进馆人数
</div>
<div
style="
position: absolute;
color: white;
left: 39%;
bottom: 8%;
font-weight: bold;
font-size: 24px;
"
>
33,532,890
</div>
</div>
<div class="renshu">
<div class="keliu">
<div class="keliuTxt">各场馆实施实时进馆人数</div>
<!-- <div>
<canvas
id="etELhoiEDSDBklnwaLybhInLlmnhnHuv"
:width="cWidth"
:height="cHeight"
class="charts"
@click="tap"
/>
</div> -->
</div>
<div class="renshuItme">
<div style="margin-right: 2%" class="renshuChild">
<div class="title">体育场</div>
<div class="dangq">当前人数</div>
<div style="position: absolute;color: white;left: 42%;bottom: 15.5%;font-weight: bold;">年度进馆人数</div>
<div style="position: absolute;color: white;left: 39%;bottom: 8%;font-weight: bold;font-size: 24px;">33,532,890</div>
<div class="number">4,738</div>
<div class="bfb">40%</div>
</div>
<div class="renshuChild">
<div class="title">图书馆</div>
<div class="dangq">当前人数</div>
<div class="renshu">
<div class="keliu">
<div class="keliuTxt">各场馆实施实时进馆人数</div>
</div>
<div class="renshuItme">
<div style="margin-right: 2%;" class="renshuChild">
<div class="title">体育场</div>
<div class="dangq">当前人数</div>
<div class="number">4,738</div>
<div class="bfb">40%</div>
</div>
<div class="renshuChild">
<div class="title">图书馆</div>
<div class="dangq">当前人数</div>
<div class="number">34,738</div>
<div class="bfb">50%</div>
</div>
<div style="margin-right: 2%;" class="renshuChild">
<div class="title">体育馆</div>
<div class="dangq">当前人数</div>
<div class="number">899,738</div>
<div class="bfb">80%</div>
</div>
<div class="renshuChild">
<div class="title">文化馆</div>
<div class="dangq">当前人数</div>
<div class="number">240</div>
<div class="bfb">25%</div>
</div>
<div style="margin-right: 2%;" class="renshuChild">
<div class="title">游泳场馆</div>
<div class="dangq">当前人数</div>
<div class="number">33,738</div>
<div class="bfb">75%</div>
</div>
<div class="renshuChild">
<div class="title">博物馆</div>
<div class="dangq">当前人数</div>
<div class="number">4,738</div>
<div class="bfb">40%</div>
</div>
</div>
<div class="number">34,738</div>
<div class="bfb">50%</div>
</div>
</div>
<div style="margin-right: 2%" class="renshuChild">
<div class="title">体育馆</div>
<div class="dangq">当前人数</div>
<div class="number">899,738</div>
<div class="bfb">80%</div>
</div>
<div class="renshuChild">
<div class="title">文化馆</div>
<div class="dangq">当前人数</div>
<div class="number">240</div>
<div class="bfb">25%</div>
</div>
<div style="margin-right: 2%" class="renshuChild">
<div class="title">游泳场馆</div>
<div class="dangq">当前人数</div>
<div class="number">33,738</div>
<div class="bfb">75%</div>
</div>
<div class="renshuChild">
<div class="title">博物馆</div>
<div class="dangq">当前人数</div>
<div class="number">4,738</div>
<div class="bfb">40%</div>
</div>
</div>
</div>
</template>
</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Welcome to Your Vue.js App',
selectVal: 1,
keliuList: [
{
unit: '年'
},
{
unit: '月'
},
{
unit: '日'
}
],
selectVal1: '年'
}
var uChartsInstance = {};
export default {
data() {
return {
msg: "Welcome to Your Vue.js App",
selectVal: 1,
keliuList: [
{
unit: "年",
},
{
unit: "月",
},
{
unit: "日",
},
],
selectVal1: "年",
};
},
methods: {
clickItme(val) {
this.selectVal = val;
},
methods: {
clickItme(val){
this.selectVal = val
},
clickQushi(val){
this.selectVal1 = val
}
}
}
</script>
clickQushi(val) {
this.selectVal1 = val;
},
},
};
</script>
<style lang="less" scoped>
.content{
height: auto;
width: 100%;
margin-top: -3%;
.content {
height: auto;
width: 100%;
margin-top: -3%;
display: flex;
justify-content: space-between;
// border: 1px solid red;
.qushi {
width: 32%;
// border: 1px solid red;
margin-left: 1%;
.keliu {
width: 100%;
height: 8vh;
background-image: url(../../assets/index/左1标题.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
.keliuTxt {
position: absolute;
left: 28%;
top: 25%;
color: white;
font-size: 18px;
color: #b5b7c5;
font-weight: bold;
}
.keliuBtn {
width: 20%;
height: 50%;
// border: 1px solid red;
position: absolute;
right: 0;
bottom: 15%;
display: flex;
justify-content: space-between;
// border: 1px solid red;
.qushi{
width: 32%;
// border: 1px solid red;
margin-left: 1%;
.keliu{
width: 100%;
height: 8vh;
background-image: url(../../assets/index/左1标题.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
.keliuTxt{
position: absolute;
left: 28%;
top: 25%;
color: white;
font-size: 18px;
color: #B5B7C5;
font-weight: bold;
}
.keliuBtn{
width: 20%;
height: 50%;
// border: 1px solid red;
position: absolute;
right: 0;
bottom: 15%;
display: flex;
justify-content: space-between;
// align-items: center;
.btnItemD{
color: #006BFF;
background-image: url('../../assets/index/年月日1.png');
}
.btnItemS{
color: white;
background-image: url('../../assets/index/年月日2.png');
}
.btnItem{
cursor:pointer;
width: 30%;
height: 95%;
background-repeat: no-repeat;
background-size: 100% 100%;
text-align: center;
line-height: 200%;
display: flex;
flex-direction: column;
justify-content: center;
}
}
}
.keliuTu1{
background-image: url('../../assets/index/左2标题.png');
}
.tongjitu{
width: 100%;
height: 16vh;
// border: 1px solid red;
}
.qushiBaifb{
width: 100%;
height: 30vh;
// border: 1px solid red;
background-image: url('../../assets/index/左1-2背景.png');
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
.baifbLeft{
width: 25%;
height: 30%;
// border: 1px solid red;
.baiFbitem{
width: 100%;
height: 30%;
color: #0096FF;
// border: 1px solid red;
display: flex;
align-items: center;
justify-content: space-between;
}
}
.baiFbRight{
width: 25%;
height: 30%;
// border: 1px solid red;
.baiFbitem{
width: 100%;
height: 30%;
color: #0096FF;
// border: 1px solid red;
display: flex;
align-items: center;
justify-content: space-between;
}
}
}
// align-items: center;
.btnItemD {
color: #006bff;
background-image: url("../../assets/index/年月日1.png");
}
.middle{
.btnItemS {
color: white;
background-image: url("../../assets/index/年月日2.png");
}
.btnItem {
cursor: pointer;
width: 30%;
height: 70vh;
background-image: url('../../assets/index/中间数据.png');
height: 95%;
background-repeat: no-repeat;
background-size: 100% 100%;
margin-top: 4%;
position: relative;
.aimImg{
animation: firstdiv 2s linear 2s infinite alternate;
}
@keyframes firstdiv{
0%{
opacity: 1;
margin-top: 0%;
}
25%{
opacity: 0.7;
margin-top: 3%;
}
50%{
opacity: 0.5;
margin-top: 5%;
}
75%{
opacity: 0.7;
margin-top: 3%;
}
100%{
opacity: 1;
margin-top: 0%;
}
}
text-align: center;
line-height: 200%;
display: flex;
flex-direction: column;
justify-content: center;
}
.renshu{
width: 32%;
// height: 50vh;
margin-right: 1%;
}
}
.keliuTu1 {
background-image: url("../../assets/index/左2标题.png");
}
.tongjitu {
width: 100%;
height: 16vh;
// border: 1px solid red;
}
.qushiBaifb {
width: 100%;
height: 30vh;
// border: 1px solid red;
background-image: url("../../assets/index/左1-2背景.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
.baifbLeft {
width: 25%;
height: 30%;
// border: 1px solid red;
.baiFbitem {
width: 100%;
height: 30%;
color: #0096ff;
// border: 1px solid red;
.keliu{
width: 100%;
height: 8vh;
background-image: url(../../assets/index/右1标题.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
.keliuTxt{
position: absolute;
right: 28%;
top: 25%;
color: white;
font-size: 18px;
color: #B5B7C5;
font-weight: bold;
}
}
.renshuItme{
width: 100%;
height: auto;
display: flex;
flex-wrap: wrap;
.renshuChild{
width: 45%;
height: 23vh;
background-image: url('../../assets/index/右1数据.png');
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 2%;
position: relative;
.title{
color: #0095FF;
font-weight: bold;
position: absolute;
top: 19%;
right: 10%;
font-size: 14px;
}
.dangq{
position: absolute;
top: 31.5%;
left: 20%;
color: white;
font-weight: bold;
font-size: 14px;
}
.number{
color: white;
position: absolute;
font-size: 22px;
font-weight: bold;
bottom: 18%;
left: 10%;
}
.bfb{
position: absolute;
bottom: 18%;
right: 15%;
color: #00D7FF;
font-weight: bold;
}
}
}
display: flex;
align-items: center;
justify-content: space-between;
}
}
.baiFbRight {
width: 25%;
height: 30%;
// border: 1px solid red;
.baiFbitem {
width: 100%;
height: 30%;
color: #0096ff;
// border: 1px solid red;
display: flex;
align-items: center;
justify-content: space-between;
}
}
}
}
.middle {
width: 30%;
height: 70vh;
background-image: url("../../assets/index/中间数据.png");
background-repeat: no-repeat;
background-size: 100% 100%;
margin-top: 4%;
position: relative;
.aimImg {
animation: firstdiv 2s linear 2s infinite alternate;
}
@keyframes firstdiv {
0% {
opacity: 1;
margin-top: 0%;
}
25% {
opacity: 0.7;
margin-top: 3%;
}
50% {
opacity: 0.5;
margin-top: 5%;
}
75% {
opacity: 0.7;
margin-top: 3%;
}
100% {
opacity: 1;
margin-top: 0%;
}
}
}
.renshu {
width: 32%;
// height: 50vh;
margin-right: 1%;
// border: 1px solid red;
.keliu {
width: 100%;
height: 8vh;
background-image: url(../../assets/index/右1标题.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
.keliuTxt {
position: absolute;
right: 28%;
top: 25%;
color: white;
font-size: 18px;
color: #b5b7c5;
font-weight: bold;
}
}
.renshuItme {
width: 100%;
height: auto;
display: flex;
flex-wrap: wrap;
.renshuChild {
width: 45%;
height: 23vh;
background-image: url("../../assets/index/右1数据.png");
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 2%;
position: relative;
.title {
color: #0095ff;
font-weight: bold;
position: absolute;
top: 19%;
right: 10%;
font-size: 14px;
}
.dangq {
position: absolute;
top: 31.5%;
left: 20%;
color: white;
font-weight: bold;
font-size: 14px;
}
.number {
color: white;
position: absolute;
font-size: 22px;
font-weight: bold;
bottom: 18%;
left: 10%;
}
.bfb {
position: absolute;
bottom: 18%;
right: 15%;
color: #00d7ff;
font-weight: bold;
}
}
</style>
}
}
}
</style>

16
src/router/index.js
View File

@ -4,6 +4,8 @@ import HelloWorld from '@/components/HelloWorld'
import index from '@/components/index'
import zongLan from '@/components/zongLan/zongLan'
import tiyuchang from '@/components/tiyuchang/tiyuchang'
import stadium from '@/components/stadium/stadium'
import library from '@/components/library/index'
Vue.use(Router)
@ -13,7 +15,7 @@ export default new Router({
path: '/',
name: 'index',
component: index,
children:[
children: [
{
path: '/zongLan/zongLan',
name: "zongLan",
@ -23,6 +25,16 @@ export default new Router({
path: '/tiyuchang/tiyuchang',
name: "tiyuchang",
component: tiyuchang
},
{
path: '/stadium/stadium',
name: "stadium",
component: stadium
},
{
path: '/library/library',
name: "library",
component: library
}
]
},
@ -31,6 +43,6 @@ export default new Router({
name: 'HelloWorld',
component: HelloWorld
}
]
})

Write Preview
Loading…
Cancel
Save