From c6a1639116dccfd6ac7114490de0ffda71b1f6e4 Mon Sep 17 00:00:00 2001 From: luyisha Date: Fri, 28 Jul 2023 17:11:02 +0800 Subject: [PATCH] 2 --- src/App.vue | 8 +- src/api/home.js | 11 +- src/views/cultrue/index.vue | 254 ++++++++++++++++++------ src/views/index.vue | 375 +++++++++++++++++++++++++----------- src/views/ty/index.vue | 81 ++++++-- 5 files changed, 534 insertions(+), 195 deletions(-) diff --git a/src/App.vue b/src/App.vue index d61d9cd..3d02118 100644 --- a/src/App.vue +++ b/src/App.vue @@ -127,8 +127,8 @@ body { } #app { - // height: 100vh; - height: 13.5rem; + height: 100vh; + // height: 13.5rem; } // 基类 @@ -163,9 +163,9 @@ body { } .topTitle { - margin-top: 1%; + margin-top: 0.56rem; color: #00c6ff; - font-size: 14px; + font-size: 0.21rem; font-weight: bold; } } diff --git a/src/api/home.js b/src/api/home.js index 9d33361..779acd3 100644 --- a/src/api/home.js +++ b/src/api/home.js @@ -11,7 +11,8 @@ const api={ tyg_klqs:'/pass.passcc/allGroupTimeNum', zonglan_data:'/pass.passcc/allGroupNum', // 借阅办证的信息 - librurl:'/library.pass/getLibraryService' + librurl:'/library.pass/getLibraryService', + getID:'/pass.passcc/getGroupData' } // 获取群组 @@ -104,3 +105,11 @@ export function libbrow(params) { params, }) } + +export function getID(param) { + return request({ + url: api.getID, + method: 'post', + param, + }) +} \ No newline at end of file diff --git a/src/views/cultrue/index.vue b/src/views/cultrue/index.vue index d67d39b..a631b5d 100644 --- a/src/views/cultrue/index.vue +++ b/src/views/cultrue/index.vue @@ -38,7 +38,7 @@ 本年进馆人数 - +
24小时总服务人次趋势 @@ -47,6 +47,7 @@
+
24小时服务人次
@@ -99,7 +100,8 @@ export default { whg_num:5160, // tsg_num:8662, - + data24h: [], + data24hX: [], }; }, mounted() { @@ -113,7 +115,8 @@ export default { } }, 200); // 博物馆人数 - this.bwugrs() + this.bwugrs(); + this.getData24h(); this.cultrue_bar1(); this.cultrue_bar2(); @@ -131,11 +134,23 @@ export default { }, methods: { cultrue_bar1() { + let that = this; var chartDom = document.getElementById("dinschart"); // 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', '22:00']; + var xData = that.data24hX; - // var data = [10000, 20000, 10000, 20000, 10000, 20000, 25000, 50000, 30000, 13000, 15000, 11000, 12000] + var data = that.data24h; + let max=data[0]; + for (let i = 0; i < data.length; i++) { + if (data[i]>max) { + max = data[i]; + } + } + let dataLenArr = [], dataBGArr = []; + data.map(item=>{ + dataLenArr.push(0);// 获取和数据一样长度的图形数组 + dataBGArr.push(max);// 数组最大值做背景柱形 + }) // var data = [Math.random() * 300] var option = { tooltip: { @@ -158,9 +173,7 @@ export default { containLabel: true }, xAxis: [{ - data: [ - '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', - ], + data: xData, axisLine: { lineStyle: { color: '#0095FF', @@ -231,17 +244,7 @@ export default { ) } }, - data: [ - 14000, - 11000, - 10000, - 9000, - 8000, - 7000, - 5000, - 4000, - 3000, - ], + data: data, zlevel: 11 }, { @@ -250,7 +253,7 @@ export default { stack: 1, xAxisIndex: 0, symbolOffset: [0, 0], //相对于原本位置的偏移量 - data: [0, 0, 0, 0, 0, 0, 0, 0, 0], + data: dataLenArr, itemStyle: { normal: { color: '#fff' @@ -265,7 +268,7 @@ export default { type: 'bar', barWidth: '10%', barGap: '-100%', - data: [15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000], + data: dataBGArr, itemStyle: { normal: { color: '#004298', @@ -278,11 +281,50 @@ export default { }, ] } - - // 加延时器使图像绘制获取元素宽高最新的值 + function run(myChart){ + that.getData24h(); + var data = that.data24h; + let max=data[0]; + for (let i = 0; i < data.length; i++) { + if (data[i]>max) { + max = data[i]; + } + } + let dataLenArr = [], dataBGArr = []; + data.map(item=>{ + dataLenArr.push(0);// 获取和数据一样长度的底部图形数组； + dataBGArr.push(max);// 数组最大值做背景柱形 + }) + myChart.setOption({ + animation: true, + xAxis: { + data: xData + }, + series: [{ + type: 'bar', + data: data, + }, + { + type: 'scatter', + data: dataLenArr + }, + { + name: '背景', + type: 'bar', + data: dataBGArr + }, + ] + }); + } + // 加延时器使图像绘制获取元素宽高最新的值2 setTimeout(() => { var myChart = echarts.init(chartDom); option && myChart.setOption(option); + setInterval(function () { + myChart.clear(); + option && myChart.setOption(option); + run(myChart); + }, 3000); }, 200); }, cultrue_bar2() { @@ -460,18 +502,28 @@ 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); }, - //图书股统计图 + //图书馆统计图 cultrue_bar3() { // 获取图书馆的借阅信息 homeApi.libbrow().then(res=>{ - // console.log(res) + // console.log(res, '----') }); var chartDom = document.getElementById("tsgchart"); @@ -737,9 +789,23 @@ export default { } }] }; + function run(myChart){ + // 获取新数据-处理 + myChart.setOption({ + series: [ + {data: getSymbolData(data)}, + {data: data,} + ] + }); + } 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) { @@ -809,6 +875,44 @@ export default { const str = arr.reverse().join('') // 返回这个字符串 return str + }, + // 不知道是什么 + getAAAA(){ + let that = this; + homeApi.getID().then(res=>{ + // console.log(res, '====='); + let id = res.data.data[1].groupId; + homeApi.homeBarData({groupsId:id}).then(res=>{ + // console.log(res.data.data, '=====') + + const tmpdata = res.data.data.allTimeData; + let datas = [] + Object.values(tmpdata).forEach((value) => { + datas.push(value.num) + }); + that.data24h = datas; + that.data24hX = res.data.data.allTimeData; + }); + }); + + }, + // 24小时趋势 + getData24h(){ + let that = this; + homeApi.allGcgNumDatas().then(res=>{ + console.log(res, '====='); + let id = res.data.data[1].groupId; + // console.log(res.data.data, '=====') + return; + const tmpdata = res.data.data.allTimeData; + let datas = [] + Object.values(tmpdata).forEach((value) => { + datas.push(value.num) + }); + that.data24h = datas; + that.data24hX = res.data.data.allTimeData; + }); + } }, }; @@ -840,6 +944,7 @@ export default { float: left; color: #fff; margin-top: calc(-3.86rem + 2.16rem); + // clear: both; } .leftbox .lb_wht { @@ -847,6 +952,7 @@ export default { background-size: 100% 100%; background-repeat: no-repeat; background-position: 0 0; + width: 5.65rem; height: 3.86rem; position: relative; margin-left: -0.4rem; @@ -861,6 +967,7 @@ export default { position: absolute; top: 2rem; right: 0.94rem; + font-weight: bold; } .leftbox .lb_wht .wh_small { @@ -883,11 +990,11 @@ export default { .inszone .institle { color: #00c6ff; - padding-left: 0.5rem; + padding-left: 0.4rem; line-height: 0.38rem; height: 0.38rem; display: block; - font-size: 16px; + font-size: 0.22rem; } .inszone .insval { @@ -920,13 +1027,12 @@ export default { .inszone .insval .insv { height: 0.48rem; line-height: 0.48rem; - font-size: 22px; - margin-top: -0.3rem; + font-size: 0.3rem; + margin-top: -0.35rem; } .inszone .insval .inst { - color: #6a6c7c; - font-size: 12px; + font-size: 0.19rem; height: 0.12rem; line-height: 0.12rem; } @@ -944,12 +1050,12 @@ export default { height: 0.68rem; line-height: 0.48rem; color: #fff; - font-size: 0.186rem; + font-size: 0.31rem; background-image: url('../../assets/wh/dins_title_bg.png'); background-size: 100% 100%; background-position: 0 0; background-repeat: no-repeat; - padding-left: 0.66rem; + padding-left: 0.7rem; } /* 中间部位 */ @@ -958,18 +1064,56 @@ export default { width: 11.5rem; height: 8.94rem; float: left; + // background-image: url('../../assets/wh/center_bg.png'); + // background-repeat: no-repeat; + // background-position: 0 0; + // background-size: 100% 100%; + position: relative; +} +@keyframes animationB { + 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; + } +} +.center .bg{ + width: 11.5rem; + height: 8.94rem; + position: absolute; + top: 0px; + left: 0px; background-image: url('../../assets/wh/center_bg.png'); background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%; + z-index: 1; + animation: animationB 2s ease-out infinite; } - .center .ctop { margin-top: 0.3rem; line-height: 0.4rem; color: #fff; - font-size: 0.4rem; + font-size: 0.41rem; text-align: center; + position: absolute; + width: 100%; + z-index: 2; } /* 中间中部 */ @@ -977,6 +1121,10 @@ export default { padding-top: 4rem; width: 100%; height: 12vh; + position: absolute; + top: 0.6rem; + width: 100%; + z-index: 3; } .center .cmid .cmdiv { // padding-top: 3vh; @@ -1011,33 +1159,18 @@ export default { padding-right: 2rem; } -.center .cmid .cmdiv:nth-child(1) .cmdval { - // padding-left: 12%; -} - -.center .cmid .cmdiv:nth-child(1) .cmdt { - // margin-left: 15%; -} .center .cmid .cmdiv:nth-child(2) { padding-left: 2rem; } -.center .cmid .cmdiv:nth-child(2) .cmdval { - // text-align: center; - // padding-right: 30% !important; - // margin-right: 16%; -} - -.center .cmid .cmdiv:nth-child(2) .cmdt { - /* padding-right:30% !important; */ - // margin-right: 25%; - // margin-left: 40%; -} - /* 中间底部 */ .center .cbuttom { margin-top: 1.3rem; text-align: center; + position: absolute; + top: 6.5rem; + width: 100%; + z-index: 3; } .center .cbuttom span { @@ -1078,30 +1211,30 @@ export default { .rightbox .pcgrliu .pcg_title { display: block; height: 0.76rem; - line-height: 0.48rem; + line-height: 0.55rem; background: url('../../assets/wh/r_t_bg_1.png') no-repeat; background-size: 100% 100%; background-position: 0 center; padding-left: 0.68rem; color: #fff; - font-size: 16px; + font-size: 0.31rem; } .rightbox .tsgrliu { - margin-top: 0.45rem; + margin-top: 1.15rem; height: 26vh; } .rightbox .tsgrliu .tsg_title { display: block; height: 0.76rem; - line-height: 0.48rem; + line-height: 0.55rem; background: url('../../assets/wh/r_t_bg_2.png') no-repeat; background-size: 100% 100%; background-position: 0 center; padding-left: 0.68rem; color: #fff; - font-size: 16px; + font-size: 0.31rem; } @@ -1117,6 +1250,7 @@ export default { overflow: visible !important; margin: 0px 0.57rem 0px 0.57rem !important; box-sizing: border-box !important; + transform-origin: center top !important; } } #cultrue{ diff --git a/src/views/index.vue b/src/views/index.vue index 6b21123..c68e5c1 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -2,7 +2,7 @@
-
+
总服务人次趋势 @@ -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{