diff --git a/src/assets/index/1.png b/src/assets/index/1.png new file mode 100644 index 0000000..fa8db24 Binary files /dev/null and b/src/assets/index/1.png differ diff --git a/src/assets/index/2.png b/src/assets/index/2.png new file mode 100644 index 0000000..c8d8f10 Binary files /dev/null and b/src/assets/index/2.png differ diff --git a/src/assets/index/3.png b/src/assets/index/3.png new file mode 100644 index 0000000..cebb4cd Binary files /dev/null and b/src/assets/index/3.png differ diff --git a/src/assets/index/拥挤.png b/src/assets/index/拥挤.png index e27b607..ea7d0de 100644 Binary files a/src/assets/index/拥挤.png and b/src/assets/index/拥挤.png differ diff --git a/src/assets/index/爆满.png b/src/assets/index/爆满.png new file mode 100644 index 0000000..e81284a Binary files /dev/null and b/src/assets/index/爆满.png differ diff --git a/src/assets/index/舒适.png b/src/assets/index/舒适.png index 5dd4aa0..92a0206 100644 Binary files a/src/assets/index/舒适.png and b/src/assets/index/舒适.png differ diff --git a/src/views/index.vue b/src/views/index.vue index a2da846..f75295a 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -118,12 +118,14 @@ 日累计人数 {{ item.allEnter }} - -
{{ item.proportion }}
-
+
+
+ +
@@ -141,6 +143,11 @@
-->
+
+ 舒适 + 拥挤 + 爆满 +
@@ -153,6 +160,7 @@ import * as echarts from "echarts"; // 引入api import * as homeApi from '@/api/home' let barChart = null, lineChart = null, pieChart = null; +let ws; export default { data() { return { @@ -223,7 +231,7 @@ export default { this.index_pie1(); }, 1000) - this.getsckdata(); + // this.getsckdata(); }, methods: { autoTimer0(){ @@ -735,13 +743,15 @@ export default { that.ssjgNumDatas = res.data.returnData 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') - } - if (proportion > 90) { - this.$refs.proportionbox.addClass('rbrate3') - } + let proportion = parseInt(item.proportion); + + // if (proportion < 50 || proportion == 50) { + // this.$refs.proportionbox.addClass('rbrate2') + // }else if (proportion < 100 || proportion == 100) { + // this.$refs.proportionbox.addClass('rbrate3') + // }else{ + // this.$refs.proportionbox.addClass('rbrate4') + // } }) } }); @@ -920,10 +930,14 @@ export default { getsckdata(){ let that = this; // websocket - const ws = new WebSocket("ws://192.168.66.16/rt"); + ws = new WebSocket("ws://192.168.66.16/zl"); ws.onopen = function() { // console.log("ws connected success!") }; + // 连接关闭时触发 + ws.onclose = function(event) { + console.log('WebSocket连接已关闭'); + }; ws.onmessage = (e)=> { var jstr = JSON.parse(e.data) // console.log("11111", jstr, e); @@ -943,27 +957,56 @@ export default { }) }) // 折线图数据 - that.rsqsDatas = [];that.rsqsDataName = [];that.rsqsData_z = []; - const tmpdata = jstr.toDayGroupsEnterNum; - tmpdata.forEach((item) => { - that.rsqsDataName.push(item.groupName); - that.rsqsDatas.push(item.list) - }) + function handleLine(){ + that.rsqsDatas = [];that.rsqsDataName = [];that.rsqsData_z = []; + const tmpdata = jstr.toDayGroupsEnterNum.data; + tmpdata.forEach((item) => { + that.rsqsDataName.push(item.groupName); + that.rsqsDatas.push(item.list) + }) + + that.rsqsXData = jstr.toDayGroupsEnterNum.data[0].list.dkeys; + that.rsqsDatas.forEach((item) => { + let rsqsData = [] + Object.getOwnPropertyNames(item).forEach((value) => { + + if(value=='dkeys'){} + if(value=='dvalue'){ + rsqsData = item[value]; + } + }); + that.rsqsData_z.push(rsqsData) + }) + } + handleLine(); - that.rsqsXData = jstr.toDayGroupsEnterNum[0].list.dkeys; - that.rsqsDatas.forEach((item) => { - let rsqsData = [] - Object.getOwnPropertyNames(item).forEach((value) => { - - if(value=='dkeys'){} - if(value=='dvalue'){ - rsqsData = item[value]; - } + // 柱形数据 + function handleBar(){ + const tmpklqsdata1 = jstr.allGroupTimeNumDay.data.data.allTimeData; + const tmpklqsdata2 = jstr.allGroupTimeNumMonth.data.data.allTimeData; + const tmpklqsdata3 = jstr.allGroupTimeNumYear.data.data.allTimeData; + const dkeys1 = jstr.allGroupTimeNumDay.data.data.dkeys; + const dkeys2 = jstr.allGroupTimeNumMonth.data.data.dkeys; + const dkeys3 = jstr.allGroupTimeNumYear.data.data.dkeys; + + let datas1 = [], datas2 = [], datas3 = []; + Object.values(tmpklqsdata1).forEach((value) => { + datas1.push(value.num); }); - that.rsqsData_z.push(rsqsData) - }) - // console.log(that.rsqsData_z, 'rsqsData_z') - + Object.values(tmpklqsdata2).forEach((value) => { + datas2.push(value.num); + }); + Object.values(tmpklqsdata3).forEach((value) => { + datas3.push(value.num); + }); + that.klqsDataD = datas1; + that.klqsXDataD = dkeys1; + that.klqsDataM = datas2; + that.klqsXDataM = dkeys2; + that.klqsDataY = datas3; + that.klqsXDataY = dkeys3; + } + handleBar(); }; }, }, @@ -974,6 +1017,7 @@ export default { clearInterval(this.timer2); clearInterval(this.timer3); clearInterval(this.timer4); + // ws.close(); } }; @@ -1335,20 +1379,22 @@ export default { padding-left: 0.4rem; line-height: 1.9rem; } - +.rbox .rbox_con .rbitem .rbrate0{ + width: 1.1rem; + height: 1.1rem; + text-align: right; + position: absolute; + bottom: 0.15rem; + right: 0.2rem; + font-size: 0.22rem; +} .rbox .rbox_con .rbitem .rbrate { width: 0.92rem; - /* float: left; */ height: 0.32rem; text-align: right; position: absolute; bottom: 0.85rem; 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.22rem; } .rbox .rbox_con .rbitem .rbrateBar{ @@ -1371,13 +1417,44 @@ export default { } .rbox .rbox_con .rbitem .rbrate2 { - background-image: url(../assets/index/舒适.png); - + background-image: url(../assets/index/2.png); + background-size: 100% 100%; } .rbox .rbox_con .rbitem .rbrate3 { - background-image: url(../assets/index/拥挤.png); - + background-image: url(../assets/index/3.png); + background-size: 100% 100%; +} +.rbox .rbox_con .rbitem .rbrate4 { + background-image: url(../assets/index/1.png); + background-size: 100% 100%; +} +.rbox .rbox_label{ + /* width: 100%; */ + display: flex; + justify-content: end; + align-items: center; + font-size: 0.22rem; + color: #aaa; + margin-right: 0.3rem; +} +.rbox .rbox_label span{ + display: inline-block; + width: 0.35rem; + height: 0.35rem; + margin: 0px 0.15rem; +} +.rbox .rbox_label span:nth-of-type(1){ + background: url(../assets/index/舒适.png); + background-size: 100% 100%; +} +.rbox .rbox_label span:nth-of-type(2){ + background: url(../assets/index/拥挤.png); + background-size: 100% 100%; +} +.rbox .rbox_label span:nth-of-type(3){ + background: url(../assets/index/爆满.png); + background-size: 100% 100%; } /* 页面背景 */