12 changed files with 2503 additions and 671 deletions
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 138 KiB |
|
After Width: | Height: | Size: 165 KiB |
|
After Width: | Height: | Size: 38 KiB |
@ -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> |
||||
@ -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> |
||||
@ -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> |
||||
@ -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> |
||||
@ -1,387 +1,516 @@ |
|||||
<template> |
<template> |
||||
<div class="hello"> |
<div class="hello"> |
||||
|
<div class="content"> |
||||
|
<div class="qushi"> |
||||
<div class="content"> |
<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="qushiBaifb"> |
||||
<div class="keliu"> |
<div class="baifbLeft"> |
||||
<div class="keliuTxt">客流趋势</div> |
<div class="baiFbitem"> |
||||
<div class="keliuBtn"> |
<div style="font-size: 14px">体育场</div> |
||||
<div v-for="(item, index) in keliuList" :key="index" class="btnItem" @click="clickQushi(item.unit)" :class="item.unit == selectVal1 ? 'btnItemS' : 'btnItemD'"> |
<div |
||||
<div class="txt">{{ item.unit }}</div> |
style=" |
||||
</div> |
color: white; |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
margin-left: 10%; |
||||
|
" |
||||
|
> |
||||
|
20% |
||||
</div> |
</div> |
||||
|
<img |
||||
|
style="width: 10%; height: 60%" |
||||
|
src="../../assets/index/体育场图例.png" |
||||
|
/> |
||||
</div> |
</div> |
||||
|
<div class="baiFbitem"> |
||||
<div class="tongjitu"> |
<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> |
||||
|
<div class="baiFbitem"> |
||||
<div class="qushiBaifb"> |
<div style="font-size: 14px">游泳场馆</div> |
||||
<div class="baifbLeft"> |
<div style="color: white; font-size: 18px; font-weight: bold"> |
||||
<div class="baiFbitem"> |
12% |
||||
<div style="font-size: 14px;">体育场</div> |
</div> |
||||
<div style="color: white;font-size: 18px;font-weight: bold;margin-left: 10%;">20%</div> |
<img |
||||
<img style="width: 10%;height: 60%;" src="../../assets/index/体育场图例.png" /> |
style="width: 10%; height: 60%" |
||||
</div> |
src="../../assets/index/体育馆图例.png" |
||||
<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> |
</div> |
||||
|
</div> |
||||
|
<div class="baiFbRight"> |
||||
<div class="keliu keliuTu1"> |
<div class="baiFbitem"> |
||||
<div class="keliuTxt">今日各场馆人数趋势</div> |
<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> |
||||
|
</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"> |
<img |
||||
<div style="position: absolute;color: white;top: 11%;left: 18%;font-weight: bold;">345,235</div> |
src="../../assets/index/主体.png" |
||||
<div style="position: absolute;color: white;top: 11%;left: 43.5%;font-weight: bold;">2,345,235</div> |
class="aimImg" |
||||
<div style="position: absolute;color: white;top: 11%;left: 71%;font-weight: bold;">2,345万</div> |
style=" |
||||
|
width: 70%; |
||||
<img src="../../assets/index/主体.png" class="aimImg" style="width: 70%;height: 50%;position: absolute;left: 15%;top: 29%;" /> |
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 class="number">4,738</div> |
||||
<div style="position: absolute;color: white;left: 39%;bottom: 8%;font-weight: bold;font-size: 24px;">33,532,890</div> |
<div class="bfb">40%</div> |
||||
</div> |
</div> |
||||
|
<div class="renshuChild"> |
||||
|
<div class="title">图书馆</div> |
||||
|
<div class="dangq">当前人数</div> |
||||
|
|
||||
<div class="renshu"> |
<div class="number">34,738</div> |
||||
<div class="keliu"> |
<div class="bfb">50%</div> |
||||
<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> |
</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> |
</div> |
||||
</template> |
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
<script> |
<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: { |
clickQushi(val) { |
||||
clickItme(val){ |
this.selectVal1 = val; |
||||
this.selectVal = val |
}, |
||||
}, |
}, |
||||
clickQushi(val){ |
}; |
||||
this.selectVal1 = val |
</script> |
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="less" scoped> |
<style lang="less" scoped> |
||||
.content{ |
.content { |
||||
height: auto; |
height: auto; |
||||
width: 100%; |
width: 100%; |
||||
margin-top: -3%; |
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; |
display: flex; |
||||
justify-content: space-between; |
justify-content: space-between; |
||||
// border: 1px solid red; |
// align-items: center; |
||||
.qushi{ |
.btnItemD { |
||||
width: 32%; |
color: #006bff; |
||||
// border: 1px solid red; |
background-image: url("../../assets/index/年月日1.png"); |
||||
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; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
} |
||||
|
.btnItemS { |
||||
.middle{ |
color: white; |
||||
|
background-image: url("../../assets/index/年月日2.png"); |
||||
|
} |
||||
|
.btnItem { |
||||
|
cursor: pointer; |
||||
width: 30%; |
width: 30%; |
||||
height: 70vh; |
height: 95%; |
||||
background-image: url('../../assets/index/中间数据.png'); |
|
||||
background-repeat: no-repeat; |
background-repeat: no-repeat; |
||||
background-size: 100% 100%; |
background-size: 100% 100%; |
||||
margin-top: 4%; |
text-align: center; |
||||
position: relative; |
line-height: 200%; |
||||
.aimImg{ |
display: flex; |
||||
animation: firstdiv 2s linear 2s infinite alternate; |
flex-direction: column; |
||||
} |
justify-content: center; |
||||
@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%; |
.keliuTu1 { |
||||
// height: 50vh; |
background-image: url("../../assets/index/左2标题.png"); |
||||
margin-right: 1%; |
} |
||||
|
.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; |
// border: 1px solid red; |
||||
.keliu{ |
display: flex; |
||||
width: 100%; |
align-items: center; |
||||
height: 8vh; |
justify-content: space-between; |
||||
background-image: url(../../assets/index/右1标题.png); |
} |
||||
background-repeat: no-repeat; |
} |
||||
background-size: 100% 100%; |
.baiFbRight { |
||||
position: relative; |
width: 25%; |
||||
.keliuTxt{ |
height: 30%; |
||||
position: absolute; |
// border: 1px solid red; |
||||
right: 28%; |
.baiFbitem { |
||||
top: 25%; |
width: 100%; |
||||
color: white; |
height: 30%; |
||||
font-size: 18px; |
color: #0096ff; |
||||
color: #B5B7C5; |
// border: 1px solid red; |
||||
font-weight: bold; |
display: flex; |
||||
} |
align-items: center; |
||||
} |
justify-content: space-between; |
||||
|
} |
||||
.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; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
|
.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> |
||||
|
|
||||
Loading…
Reference in new issue