+
总服务人次趋势
@@ -39,6 +39,8 @@
+
+
@@ -100,7 +102,7 @@
- {{ item.groupName }}
+ {{ item.groupName||'\\' }}
当前人数
{{ item.allEnter }}
@@ -114,34 +116,6 @@
当前人数
4,738
50%
-
-
-
- 体育馆
- 当前人数
- 4,738
- 80%
-
-
-
- 文化馆
- 当前人数
- 4,738
- 25%
-
-
-
- 游泳场馆
- 当前人数
- 4,738
- 90%
-
-
-
- 博物馆
- 当前人数
- 4,738
- 75%
-->
@@ -172,9 +146,12 @@ export default {
year_num: 0,
klqsXDatas: [],
klqsDatas: [],
+ dataP: [],//左侧饼图
ssjgNumDatas: [],
+ rsqsXData: [],
rsqsDatas: [],
rsqs_datas: {},
+ rsqsDataName: [],
rsqsData_z: [],
proportionData: [],
proportionData_z: [],
@@ -197,10 +174,12 @@ export default {
this.getStat();
this.getHomeBarData();
this.getInfoDatas();
- this.getGcgNumDatas()
+ this.getGcgNumDatas();
+
setTimeout(() => {
this.home_bar();
this.line_zone();
+ this.index_pie1();
}, 300)
// 首页线图
@@ -292,7 +271,7 @@ export default {
this.btgetdata3()
},
- // 透明背景柱状统计图
+ // 透明背景柱状统计图--总服务人次趋势
home_bar() {
let that = this;
var chartDom = document.getElementById("homebar");
@@ -488,7 +467,7 @@ export default {
};
option && myChart.setOption(option);
- function run() {
+ function run(myChart) {
that.getHomeBarData();
console.log('重新绘制');
that.klqsDatas = that.klqsDatas.sort(function(a,b){
@@ -534,17 +513,18 @@ export default {
});
}
setInterval(function () {
- run();
+ myChart.clear();
+ option && myChart.setOption(option);
+ run(myChart);
}, 3000);
},
- // 今日各场馆进馆人数趋势
+ // 今日各场馆服务人次趋势
line_zone() {
var chartDom = document.getElementById("kl-line");
- var myChart = echarts.init(chartDom);
var option;
- var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '20:00', '21:00'];
+ var xData = this.rsqsXData;
var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
var name = []
// var data = [
@@ -557,9 +537,9 @@ export default {
var data = this.rsqsData_z
var series = [];
- for (var i = 0; i < 6; i++) {
+ for (var i = 0; i < data.length; i++) {
series.push({
- name: name[i],
+ name: this.rsqsDataName[i],
type: "line",
symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
@@ -705,8 +685,21 @@ export default {
},
series: series,
}
-
- option && myChart.setOption(option);
+ function run(myChart){
+ // 获取新数据-处理
+ myChart.setOption({
+ series: series
+ });
+ }
+ setTimeout(()=>{
+ var myChart = echarts.init(chartDom);
+ option && myChart.setOption(option);
+ setInterval(function () {
+ myChart.clear();
+ option && myChart.setOption(option);
+ run(myChart);
+ }, 3000);
+ }, 200)
},
addNumber(start, end, id) {
@@ -754,13 +747,19 @@ export default {
});
that.klqsDatas = datas
- that.klqsXDatas = dkeys
-
- // groupsData.forEach((item) => {
- // that.proportionData.push(item.proportion)
- // that.groupNameData.push(item.groupName)
- // })
+ that.klqsXDatas = dkeys;
+
+ that.proportionData = [];that.groupNameData=[];that.dataP=[];
+ groupsData.forEach((item) => {
+ that.proportionData.push(item.proportion)
+ that.groupNameData.push(item.groupName);
+ that.dataP.push({
+ name:item.groupName,
+ value:item.proportion.split('%')[0]
+ })
+ })
+ console.log(groupsData, 'groupsData', that.dataP);
});
},
@@ -769,10 +768,10 @@ export default {
getInfoDatas() {
let that = this
homeApi.allInfoDatas().then(res => {
- return;//Cannot read properties of undefined (reading 'returnData')
+ // return;//Cannot read properties of undefined (reading 'returnData')
that.ssjgNumDatas = res.data.returnData
-
- ssjgNumDatas.forEach(item => {
+ console.log(that.ssjgNumDatas, 'that.ssjgNumDatas')
+ that.ssjgNumDatas.forEach(item => {
let proportion = parseInt(item.proportion)
if (proportion >= 80 && proportion <= 90) {
this.$refs.proportionbox.addClass('rbrate2')
@@ -792,19 +791,174 @@ export default {
homeApi.allGcgNumDatas().then(res => {
const tmpdata = res.data.data
tmpdata.forEach((item) => {
+ this.rsqsDataName.push(item.groupName);
that.rsqsDatas.push(item.list)
})
-
+
+ this.rsqsXData = res.data.data[0].list.dkeys;
this.rsqsDatas.forEach((item) => {
let rsqsData = []
- Object.values(item).forEach((value) => {
- rsqsData.push(value)
+ Object.getOwnPropertyNames(item).forEach((value) => {
+
+ if(value=='dkeys'){
+
+ }
+ if(value=='dvalue'){
+ // console.log(item, value, '-----')
+ // rsqsData.push(item[value])
+ rsqsData = item[value];
+ }
});
that.rsqsData_z.push(rsqsData)
})
-
+ // console.log(this.rsqsData_z, 'rsqsData_z')
});
- }
+ },
+ index_pie1(){
+ let that = this;
+ // var dataP = [
+ // {name: '体育场',value: 5,},
+ // {name: '体育馆',value: 20,},
+ // {name: '游泳场馆',value: 13,},
+ // {name: '图书馆',value: 12,},
+ // {name: '文化馆',value: 25,},
+ // {name: '博物馆',value: 12,},
+ // // {name: '',value: 13,}
+ // ];
+ var dataP = that.dataP;
+ function hexToRgba(hex, opacity) {
+ return (
+ 'rgba(' +
+ parseInt('0x' + hex.slice(1, 3)) +
+ ',' +
+ parseInt('0x' + hex.slice(3, 5)) +
+ ',' +
+ parseInt('0x' + hex.slice(5, 7)) +
+ ',' +
+ opacity +
+ ')'
+ );
+ }
+ let color = ['#00d2ff', '#22e5d1', '#f4d64e', '#0072ff','#00d2ff', '#22e5d1', '#f4d64e', '#0072ff'];
+ let color1=[], color2=[], color3=[];
+ // 设置每层圆环颜色和添加间隔的透明色
+ color.forEach((item) => {
+ color1.push(item, 'transparent');
+ color2.push(hexToRgba(item, 0.4), 'transparent');
+ color3.push(hexToRgba(item, 0.7), 'transparent');
+ });
+ let data1 = [];
+ let sum = 0;
+ // 根据总值设置间隔值大小
+ dataP.forEach((item) => {
+ sum += Number(item.value);
+ });
+ // 给每个数据后添加特定的透明的数据形成间隔
+ dataP.forEach((item, index) => {
+ if (item.value !== 0) {
+ data1.push(item, {
+ name: '',
+ value: sum / 70,
+ labelLine: {
+ show: false,
+ lineStyle: {
+ color: 'transparent',
+ },
+ },
+ itemStyle: {
+ color: 'transparent',
+ },
+ });
+ }
+ });
+ var option = {
+ tooltip: {
+ formatter: (params) => {
+ if (params.name !== '') {
+ return params.name + ' : ' + params.value + '\n' + '%';
+ }
+ },
+ },
+ grid: {
+ top: 0,
+ bottom: 0,
+ left: 0,
+ right: 0,
+ containLabel: true,
+ },
+ series: [
+ {
+ type: 'pie',
+ radius: ['90%', '80%'],
+ center: ['50%', '50%'],
+ hoverAnimation: false,
+ startAngle: 90,
+ selectedMode: 'single',
+ selectedOffset: 0,
+ itemStyle: {
+ normal: {
+ color: (params) => {
+ // console.log('params', params)
+ return color2[params.dataIndex];
+ },
+ },
+ },
+ label: {
+ show: false,
+ formatter: '{b}' + ' ' + '{c}',
+ },
+ data: data1,
+ z: 666,
+ },
+ {
+ type: 'pie',
+ radius: ['90%', '100%'],
+ center: ['50%', '50%'],
+ hoverAnimation: false,
+ startAngle: 90,
+ selectedMode: 'single',
+ selectedOffset: 0,
+ itemStyle: {
+ normal: {
+ color: (params) => {
+ return color3[params.dataIndex];
+ },
+ },
+ },
+ label: {
+ show: false,
+ formatter: '{b}' + ' ' + '{c}',
+ },
+ data: data1,
+ z: 666,
+ },
+ ],
+ }
+
+ function run(myChart){
+ // 获取新数据-处理
+ myChart.setOption({
+ series: [{
+ data: data1,
+ },
+ {
+ data: data1,
+ }
+ ]
+ });
+ }
+ // 加延时器使图像绘制获取元素宽高最新的值
+ setTimeout(()=>{
+ var pieDom1 = document.getElementById("indexPie1");
+ var myChart = echarts.init(pieDom1);
+ option && myChart.setOption(option);
+ setInterval(function () {
+ myChart.clear();
+ option && myChart.setOption(option);
+ run(myChart);
+ }, 3000);
+ }, 200)
+ },
},
};
@@ -828,7 +982,7 @@ export default {
float: left;
}
-.leftbox {
+.indexleftbox {
width: 7.48rem;
float: left;
display: flex;
@@ -837,33 +991,33 @@ export default {
margin-top: calc(-1.04rem + 0.16rem);
}
-.leftbox .keliu {
+.indexleftbox .keliu {
background-image: url("../assets/index/left_t1_bg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: 0 0;
width: 100%;
height: 7vh;
- color: #b5b7c5;
+ color: #FFF;
}
/* 客流趋势 */
-.leftbox .kliu_title {
- line-height: 0.88rem;
- font-size: 20px;
+.indexleftbox .kliu_title {
+ line-height: 0.58rem;
+ font-size: 0.31rem;
padding-left: 2rem;
display: block;
float: left;
}
-.leftbox .kliu_st {
+.indexleftbox .kliu_st {
float: right;
line-height: 0.88rem;
font-size: 0.26rem;
padding-top: 0.18rem;
}
-.leftbox .kliu_st span {
+.indexleftbox .kliu_st span {
display: block;
background: url("../assets/index/sel_zone_bg.png") no-repeat 0 0;
background-position: 0 0;
@@ -877,19 +1031,19 @@ export default {
cursor: pointer;
}
-.leftbox .kliu_st .spactive {
+.indexleftbox .kliu_st .spactive {
background-image: url("../assets/index/sel_zone_active_bg.png");
}
/* 统计图 */
-.leftbox .tongjitu {
+.indexleftbox .tongjitu {
margin-top: 0.2rem;
width: 7.03rem;
height: 2.3rem;
}
/* 场馆流量预警 */
-.leftbox .cgflow {
+.indexleftbox .cgflow {
margin-top: 0.3rem;
background-image: url("../assets/index/left_t3_bg.png");
background-size: 100% 100%;
@@ -903,34 +1057,31 @@ export default {
}
/* 场馆左侧 */
-.leftbox .cgflow_leftbox {
- /* padding:66px 0 0 6%;
- float: left; */
- /* width: 30%; */
- margin-left: 10px;
+.indexleftbox .cgflow_leftbox {
+ width: 2rem;
}
-.leftbox .cgflow_rightbox {
- /* width: 30%; */
+.indexleftbox .cgflow_rightbox {
+ width: 2rem;
text-align: right;
}
-.leftbox .cgflow .cgfitem {
+.indexleftbox .cgflow .cgfitem {
width: 100%;
height: 0.46rem;
display: flex;
justify-content: space-between;
}
-.leftbox .cgflow .cgflow_leftbox .cgfitem:nth-child(3) .cgtitle {
+.indexleftbox .cgflow .cgflow_leftbox .cgfitem:nth-child(3) .cgtitle {
margin-right: 5px;
}
-.leftbox .cgflow .cgflow_leftbox .cgfitem:nth-child(3) .cgval {
+.indexleftbox .cgflow .cgflow_leftbox .cgfitem:nth-child(3) .cgval {
margin-right: 10px;
}
-.leftbox .cgflow .cgfitem span {
+.indexleftbox .cgflow .cgfitem span {
/* display: block;
margin-left: 12px;
float: left;
@@ -940,18 +1091,18 @@ export default {
}
-.leftbox .cgflow .cgfitem .cgtitle {
+.indexleftbox .cgflow .cgfitem .cgtitle {
color: #0096ff;
font-size: 16px;
}
-.leftbox .cgflow .cgfitem .cgval {
+.indexleftbox .cgflow .cgfitem .cgval {
color: white;
font-weight: 700;
font-size: 18px;
}
-.leftbox .cgflow .cgfitem .cgimg img {
+.indexleftbox .cgflow .cgfitem .cgimg img {
width: 26px;
height: 26px;
overflow: hidden;
@@ -960,27 +1111,30 @@ export default {
}
/* 场馆左侧 */
-.leftbox .cgflow .leftbox .cgflow_rightbox {
+.indexleftbox .cgflow .indexleftbox .cgflow_rightbox {
padding: 66px 0 0 12%;
float: right;
width: 30%;
margin-left: 4%;
}
-
+#indexPie1{
+ width: 2.32rem;
+ height: 2.32rem;
+}
/* 各场馆人流趋势 */
-.leftbox .gcgqs {
+.indexleftbox .gcgqs {
// float: left;
width: 100%;
height: 30vh;
}
-.leftbox .gcgqs .gcg_title {
+.indexleftbox .gcgqs .gcg_title {
background-image: url('../assets/index/left_t2_bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
height: 0.99rem;
- font-size: 20px;
- line-height: 0.88rem;
+ font-size: 0.31rem;
+ line-height: 0.78rem;
padding-left: 2rem;
color: #fff;
}
@@ -1019,14 +1173,14 @@ export default {
right: 1.03rem;
}
.centerbox .jgval {
- font-size: 0.3rem;
+ font-size: 0.34rem;
display: block;
line-height: 0.28rem;
margin-bottom: 0.18rem;
}
.centerbox .jgdesc {
- font-size: 0.18rem;
+ font-size: 0.2rem;
}
@keyframes tygpicmove {
@@ -1100,9 +1254,9 @@ export default {
background-size: 100%;
background-repeat: no-repeat;
height: 0.97rem;
- line-height: 0.86rem;
+ line-height: 0.76rem;
font-weight: 600;
- font-size: 20px;
+ font-size: 0.31rem;
text-align: right;
padding-right: 2.1rem;
color: #b5b7c5;
@@ -1110,20 +1264,22 @@ export default {
.rbox .rbox_con {
width: 100%;
- margin-top: 12px;
+ margin-top: 0.36rem;
+ display: flex;
+ flex-wrap: wrap;
}
.rbox .rbox_con .rbitem {
background-image: url('../assets/index/rb_data_bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
- height: 2.4rem;
- width: 46%;
- margin-left: 0.28rem;
- float: left;
- margin-top: 0.46rem;
+ height: 3rem;
+ width: 3.51rem;
+ margin-right: 0.08rem;
+ margin-bottom: 0.23rem;
padding-top: 0.2rem;
position: relative;
+ box-sizing: border-box;
}
.rbox .rbox_con .rbitem span {
@@ -1131,44 +1287,44 @@ export default {
}
.rbox .rbox_con .rbitem .rbcgname {
- margin-top: 0.28rem;
+ margin-top: 0.37rem;
color: #0096ff;
text-align: right;
padding-right: 0.28rem;
-
+ font-size: 0.21rem;
}
.rbox .rbox_con .rbitem .rbtitle {
text-align: left;
padding-left: 0.66rem;
- padding-top: 0.17rem;
+ padding-top: 0.1rem;
+ font-size: 0.24rem;
}
.rbox .rbox_con .rbitem .rbval {
- font-size: 25px;
+ font-size: 0.38rem;
font-weight: 600;
width: 60%;
height: 118px;
- text-align: center;
- /* line-height: 118px; */
- line-height: 160px;
+ padding-left: 0.4rem;
+ line-height: 1.9rem;
}
.rbox .rbox_con .rbitem .rbrate {
- width: 32%;
+ width: 0.92rem;
/* float: left; */
- height: 82px;
+ height: 0.92rem;
text-align: center;
- line-height: 82px;
+ line-height: 0.9rem;
position: absolute;
- bottom: 8px;
- right: 15px;
+ bottom: 0.25rem;
+ right: 0.29rem;
color: #00D8FF;
background-image: url(../assets/index/安静.png);
background-size: 100% 100%;
background-position: 100% 100%;
background-repeat: no-repeat;
-
+ font-size: 0.19rem;
}
.rbox .rbox_con .rbitem .rbrate2 {
@@ -1204,6 +1360,7 @@ export default {
// margin: 0px 0.29rem 0px 0.15rem !important;
margin: 0px !important;
box-sizing: border-box !important;
+ transform-origin: center top !important;
}
#index{
// transform: scale(1.25);
diff --git a/src/views/ty/index.vue b/src/views/ty/index.vue
index 88b1f5d..cf8212e 100644
--- a/src/views/ty/index.vue
+++ b/src/views/ty/index.vue
@@ -5,7 +5,7 @@
-
体育
+
体育
24小时进馆人数
-
+
21312
体育场
@@ -102,7 +102,7 @@
- 25%
+ 25%
@@ -235,7 +235,9 @@ export default {
this.$nextTick( ()=>{
- this.ty_bar1()
+ setTimeout(() => {
+ this.ty_bar1()
+ }, 200);
// this.ty_bar2()
this.ty_bar3()
this.ty_pie1()
@@ -305,6 +307,7 @@ export default {
})
var option = {
+ animation: true,
tooltip: {
trigger: 'axis',
axisPointer: {
@@ -321,7 +324,7 @@ export default {
},
xAxis: [{
// data: that.daData.dkeys,
- data: xData,
+ data: that.daData.dkeys,
axisLine: {
lineStyle: {
color: '#0095FF',
@@ -426,9 +429,9 @@ export default {
function run(myChart){
that.getStat();
// console.log('乱序重新绘制', that.daData.dkeys, that.data24h, data24h);
- data24h = data24h.sort(function(a,b){
- return Math.random() - 0.5;
- });
+ // data24h = data24h.sort(function(a,b){
+ // return Math.random() - 0.5;
+ // });
let max=data24h[0];
for (let i = 0; i < data24h.length; i++) {
if (data24h[i]>max) {
@@ -441,6 +444,7 @@ export default {
dataBGArr.push(max);// 数组最大值做背景柱形
})
myChart.setOption({
+ animation: true,
xAxis: {
data: that.daData.dkeys
},
@@ -460,11 +464,13 @@ export default {
]
});
}
- // 加延时器使图像绘制获取元素宽高最新的值
+ // 加延时器使图像绘制获取元素宽高最新的值2
setTimeout(()=>{
var myChart = echarts.init(this.$refs.dinschart);
option && myChart.setOption(option);
setInterval(function () {
+ myChart.clear();
+ option && myChart.setOption(option);
run(myChart);
}, 3000);
}, 200)
@@ -828,10 +834,20 @@ export default {
},
series: series,
}
-
+ function run(myChart){
+ // 获取新数据-处理
+ myChart.setOption({
+ series: series
+ });
+ }
setTimeout(()=>{
var myChart = echarts.init(chartDom);
option && myChart.setOption(option);
+ setInterval(function () {
+ myChart.clear();
+ option && myChart.setOption(option);
+ run(myChart);
+ }, 3000);
}, 200)
},
ty_pie1(){
@@ -957,7 +973,7 @@ export default {
}
function run(myChart){
- that.getStat();
+ // that.getStat();
// console.log('乱序重新绘制', that.daData.dkeys, that.data24h, data24h);
data24h = data24h.sort(function(a,b){
return Math.random() - 0.5;
@@ -1653,7 +1669,6 @@ export default {
background-size: 100% 100%;
color: white;
font-size: 0.56rem;
- font-weight: bold;
position: relative;
margin-left: -0.4rem;
@@ -1680,7 +1695,7 @@ export default {
.institle {
color: #00c6ff;
- padding-left: 0.9rem;
+ padding-left: 0.45rem;
line-height: 0.38rem;
height: 0.38rem;
display: block;
@@ -1745,12 +1760,12 @@ export default {
height: 0.76rem;
line-height: 0.58rem;
color: #fff;
- font-size: 0.2rem;
+ font-size: 0.31rem;
background-image: url('../../assets/ty/l_t_bg.png');
background-size: 100% 100%;
background-position: 0 0;
background-repeat: no-repeat;
- padding-left: 0.96rem;
+ padding-left: 0.66rem;
}
.dins_chart{
margin-top: 0.2rem;
@@ -1864,6 +1879,7 @@ export default {
background-size: 100% 100%;
background-repeat: no-repeat;
margin: 1rem 0.15rem auto 0.49rem;
+ animation: animationA 2s ease-out infinite;
}
.c_r{
width: 2.46rem;
@@ -1984,13 +2000,13 @@ export default {
.pcg_title {
display: block;
height: 0.76rem;
- line-height: 0.58rem;
+ line-height: 0.55rem;
background: url('../../assets/ty/r_t_bg_1.png') no-repeat;
background-size: 100% 100%;
background-position: 0 center;
- padding-left: 0.98rem;
+ padding-left: 0.68rem;
color: #fff;
- font-size: 16px;
+ font-size: 0.31rem;
// display: flex;
// align-items: center;
// justify-content: space-between;
@@ -2022,13 +2038,13 @@ export default {
.pcg_title2 {
display: block;
height: 0.76rem;
- line-height: 0.58rem;
+ line-height: 0.55rem;
background: url('../../assets/ty/r_t_bg_2.png') no-repeat;
background-size: 100% 100%;
background-position: 0 center;
- padding-left: 0.98rem;
+ padding-left: 0.68rem;
color: #fff;
- font-size: 16px;
+ font-size: 0.31rem;
margin-top: 0.19rem;
}
}
@@ -2046,6 +2062,28 @@ export default {
}
}
+@keyframes animationA {
+ 0%{
+ transform: translateY(-10px);
+ opacity: 0.6;
+ }
+ 25%{
+ transform: translateY(0px);
+ opacity: 1;
+ }
+ 50%{
+ transform: translateY(10px);
+ opacity: 0.6;
+ }
+ 75%{
+ transform: translateY(0px);
+ opacity: 1;
+ }
+ 100%{
+ transform: translateY(-10px);
+ opacity: 0.6;
+ }
+}
.screen-box{
overflow: visible !important;
/deep/ .screen-wrapper{
@@ -2054,6 +2092,7 @@ export default {
overflow: visible !important;
margin: 0px 0.57rem 0px 0.57rem !important;
box-sizing: border-box !important;
+ transform-origin: center top !important;
}
}
#ty{