|
@@ -0,0 +1,529 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+ <head>
|
|
|
+ <meta charset="utf-8" />
|
|
|
+ <title></title>
|
|
|
+ <link href="css/style.css" rel="stylesheet" />
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div id="app">
|
|
|
+ <div class="top">
|
|
|
+ <div class="flex">
|
|
|
+ <div class="f tti" :class="{active:now==0}" @click="tab(0)">游前数据</div>
|
|
|
+ <div class="f">
|
|
|
+ <div class="logo">
|
|
|
+ <img class="u4" src="img/u4.svg" />
|
|
|
+ <div class="uti">谢通门县旅游数据平台</div>
|
|
|
+ <img class="u5" src="img/u5.svg" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="f tti" :class="{active:now==1}" @click="tab(1)">游中数据</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content" v-if="now==0">
|
|
|
+ <div class="s33">
|
|
|
+ <div class="icon">
|
|
|
+ <img src="img/u110.svg" class="tb">
|
|
|
+ <div class="btw">客流量</div>
|
|
|
+ </div>
|
|
|
+ <div class="cons">
|
|
|
+ <div id="kll" style="width:105%;height:300px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="s33">
|
|
|
+ <div class="icon">
|
|
|
+ <img src="img/u110.svg" class="tb">
|
|
|
+ <div class="btw">景区展示</div>
|
|
|
+ </div>
|
|
|
+ <div class="cons">
|
|
|
+ <iframe src="rl.html" style="height: 280px;"></iframe>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="s33">
|
|
|
+ <div class="icon">
|
|
|
+ <img src="img/u119.svg" class="tb">
|
|
|
+ <div class="btw">交通信息</div>
|
|
|
+ </div>
|
|
|
+ <div class="cons">
|
|
|
+ <div id="jtxx" style="width:105%;height:300px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="s33">
|
|
|
+ <div class="icon">
|
|
|
+ <img src="img/u113.svg" class="tb">
|
|
|
+ <div class="btw">经营状况</div>
|
|
|
+ </div>
|
|
|
+ <div class="cons">
|
|
|
+ <div id="jyzk" style="width:105%;height:300px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="s33">
|
|
|
+ <div class="icon">
|
|
|
+ <img src="img/u118.svg" class="tb">
|
|
|
+ <div class="btw">游客画像</div>
|
|
|
+ </div>
|
|
|
+ <div class="cons">
|
|
|
+ <div id="ykhx" style="width:105%;height:300px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="s33">
|
|
|
+ <div class="icon">
|
|
|
+ <img src="img/u334.svg" class="tb">
|
|
|
+ <div class="btw">舆情评价</div>
|
|
|
+ </div>
|
|
|
+ <div class="cons">
|
|
|
+ <canvas id="canvas" width="400px" height="300px"></canvas>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content" v-else>
|
|
|
+ <div class="s33">
|
|
|
+ <div class="icon">
|
|
|
+ <img src="img/u676.svg" class="tb">
|
|
|
+ <div class="btw">酒店预定数据</div>
|
|
|
+ </div>
|
|
|
+ <div class="cons">
|
|
|
+ <div id="jd" style="width:105%;height: 270px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="s33">
|
|
|
+ <div class="icon">
|
|
|
+ <img src="img/u652.svg" class="tb">
|
|
|
+ <div class="btw">酒店信息概况</div>
|
|
|
+ </div>
|
|
|
+ <div class="cons">
|
|
|
+ <iframe src="jd.html"></iframe>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="s33">
|
|
|
+ <div class="icon">
|
|
|
+ <img src="img/u674.svg" class="tb">
|
|
|
+ <div class="btw">天气</div>
|
|
|
+ </div>
|
|
|
+ <div class="cons">
|
|
|
+ <div class="flex">
|
|
|
+ <div class="f rq">2021年10月11日 星期一</div>
|
|
|
+ <div class="f rq">21:45:13</div>
|
|
|
+ </div>
|
|
|
+ <div class="flex tqt">
|
|
|
+ <div class="f">
|
|
|
+ <img class="tqw" src="img/u789.svg" />
|
|
|
+ <div class="tq1">风向:</div>
|
|
|
+ <div class="tq2">南风</div>
|
|
|
+ </div>
|
|
|
+ <div class="f">
|
|
|
+ <img class="tqw" src="img/u785.svg" />
|
|
|
+ <div class="tq1">含氧量:</div>
|
|
|
+ <div class="tq2 tty">60%</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex tqt">
|
|
|
+ <div class="f">
|
|
|
+ <img class="tqw" src="img/u555.svg" />
|
|
|
+ <div class="tq1">整体:</div>
|
|
|
+ <div class="tq2">多云转晴</div>
|
|
|
+ </div>
|
|
|
+ <div class="f">
|
|
|
+ <img class="tqw" src="img/u788.svg" />
|
|
|
+ <div class="tq1">粉尘指标:</div>
|
|
|
+ <div class="tq2 tty">10%</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex tqt">
|
|
|
+ <div class="f">
|
|
|
+ <img class="tqw" src="img/u787.svg" />
|
|
|
+ <div class="tq1">温度:</div>
|
|
|
+ <div class="tq2">27℃-30℃</div>
|
|
|
+ </div>
|
|
|
+ <div class="f">
|
|
|
+ <img class="tqw" src="img/u786.svg" />
|
|
|
+ <div class="tq1">PM2.5:</div>
|
|
|
+ <div class="tq2 tty">55</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex tqt">
|
|
|
+ <div class="f">
|
|
|
+ <img class="tqw" src="img/u556.svg" />
|
|
|
+ <div class="tq1">湿度:</div>
|
|
|
+ <div class="tq2">40%</div>
|
|
|
+ </div>
|
|
|
+ <div class="f">
|
|
|
+ <img class="tqw" src="img/u784.svg" />
|
|
|
+ <div class="tq1">当前风速:</div>
|
|
|
+ <div class="tq2 tty">4级</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="s45">
|
|
|
+ <div class="icon">
|
|
|
+ <img src="img/u675.svg" class="tb">
|
|
|
+ <div class="btw">停车场数据</div>
|
|
|
+ </div>
|
|
|
+ <div class="cons">
|
|
|
+ <div class="flex">
|
|
|
+ <div class="f" style="text-align: center;margin-top: 10px; ">
|
|
|
+ <span class="tag">2</span>
|
|
|
+ <span class="tag">3</span>
|
|
|
+ <span class="tag">4</span>
|
|
|
+ <span class="tag">5</span>
|
|
|
+ <span class="tags">次</span>
|
|
|
+ <div class="car">
|
|
|
+ <img src="img/u573.svg" />
|
|
|
+ <img src="img/u573.svg" />
|
|
|
+ <img src="img/u573.svg" />
|
|
|
+ <img src="img/u570.svg" />
|
|
|
+ <img src="img/u570.svg" />
|
|
|
+ <img src="img/u570.svg" />
|
|
|
+ </div>
|
|
|
+ <div class="flex">
|
|
|
+ <div class="f num">
|
|
|
+ <div>123</div>
|
|
|
+ <div>入场车辆</div>
|
|
|
+ </div>
|
|
|
+ <div class="f num ss" style="background-color: #2b2957;">
|
|
|
+ <div>45</div>
|
|
|
+ <div>出场车辆</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="f">
|
|
|
+ <div id="tcc" style="width:105%;height:300px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="s45">
|
|
|
+ <div class="icon">
|
|
|
+ <img src="img/u780.svg" class="tb">
|
|
|
+ <div class="btw">视频监控</div>
|
|
|
+ </div>
|
|
|
+ <div class="cons">
|
|
|
+ <div class="video">
|
|
|
+ <div class="v" style="border: 0px;">
|
|
|
+ <iframe src="https://stlab.gxqrjf.com:20443/liveplayer/" allowfullscreen="true"
|
|
|
+ style="width: 100%;"></iframe>
|
|
|
+ </div>
|
|
|
+ <div class="v pad">摄像头离线</div>
|
|
|
+ <div class="v pad">摄像头离线</div>
|
|
|
+ </div>
|
|
|
+ <div class="video">
|
|
|
+ <div class="v pad">摄像头离线</div>
|
|
|
+ <div class="v pad">摄像头离线</div>
|
|
|
+ <div class="v pad">摄像头离线</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <script src="js/vue.min.js"></script>
|
|
|
+ <script src="js/echarts.min.js"></script>
|
|
|
+ <script src="js/jquery.min.js"></script>
|
|
|
+ <script src="js/wordcloud2.js"></script>
|
|
|
+ <script>
|
|
|
+ let vm = new Vue({
|
|
|
+ el: "#app",
|
|
|
+ data: {
|
|
|
+ item: {},
|
|
|
+ now: 0
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.tab();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ tab(now = 0) {
|
|
|
+ this.now = now;
|
|
|
+ if (this.now == 0) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.kll();
|
|
|
+ this.jtxx();
|
|
|
+ this.jyzk();
|
|
|
+ this.ykhx();
|
|
|
+ this.yq();
|
|
|
+ }, 300);
|
|
|
+ }
|
|
|
+ if (this.now == 1) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.jd();
|
|
|
+ this.tcc();
|
|
|
+ }, 300);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //客流量
|
|
|
+ kll() {
|
|
|
+ let option = {
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'],
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffff',
|
|
|
+ fontSize: 14, //字体大小
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffff',
|
|
|
+ fontSize: 14, //字体大小
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
|
+ type: 'line',
|
|
|
+ areaStyle: {}
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ echarts.init(document.getElementById('kll')).setOption(option);
|
|
|
+ },
|
|
|
+ //交通信息
|
|
|
+ jtxx() {
|
|
|
+ let option = {
|
|
|
+ tooltip: {},
|
|
|
+ legend: {
|
|
|
+ data: ['飞机', '汽车', '火车'],
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffff' //字体颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'],
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffff',
|
|
|
+ fontSize: 14, //字体大小
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffff',
|
|
|
+ fontSize: 14, //字体大小
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: '飞机',
|
|
|
+ type: 'bar',
|
|
|
+ data: [5, 20, 36, 10, 10, 20, 13]
|
|
|
+ }, {
|
|
|
+ name: '汽车',
|
|
|
+ type: 'bar',
|
|
|
+ data: [5, 20, 36, 10, 10, 20, 13]
|
|
|
+ }, {
|
|
|
+ name: '火车',
|
|
|
+ type: 'bar',
|
|
|
+ data: [5, 30, 36, 10, 10, 20, 13]
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ echarts.init(document.getElementById('jtxx')).setOption(option);
|
|
|
+ },
|
|
|
+ //经营状况
|
|
|
+ jyzk() {
|
|
|
+ let option = {
|
|
|
+ tooltip: {},
|
|
|
+ legend: {
|
|
|
+ data: ['飞机'],
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffff' //字体颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: ['店铺1', '店铺2', '店铺3', '店铺4', '店铺5'],
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffff',
|
|
|
+ fontSize: 14, //字体大小
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffff',
|
|
|
+ fontSize: 14, //字体大小
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: '飞机',
|
|
|
+ type: 'bar',
|
|
|
+ data: [5, 20, 36, 10, 10]
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ echarts.init(document.getElementById('jyzk')).setOption(option);
|
|
|
+ },
|
|
|
+ //游客画像
|
|
|
+ ykhx() {
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: '统计人数',
|
|
|
+ type: 'pie',
|
|
|
+ radius: '65%',
|
|
|
+ data: [{
|
|
|
+ value: 1048,
|
|
|
+ name: '老年人数'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 735,
|
|
|
+ name: '中年人数'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 580,
|
|
|
+ name: '青年人数'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ label: {
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffff',
|
|
|
+ fontSize: 15,
|
|
|
+ fontWeight: 'bolder'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ echarts.init(document.getElementById('ykhx')).setOption(option);
|
|
|
+ },
|
|
|
+ //酒店预定数据
|
|
|
+ jd() {
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ label: {
|
|
|
+ backgroundColor: '#6a7985'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '-3%',
|
|
|
+ left: '3%',
|
|
|
+ right: '7%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: [{
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffff',
|
|
|
+ fontSize: 14, //字体大小
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ yAxis: [{
|
|
|
+ type: 'value',
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffff',
|
|
|
+ fontSize: 14, //字体大小
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ series: [{
|
|
|
+ name: 'Email',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ areaStyle: {},
|
|
|
+ data: [120, 132, 101, 134, 90, 230, 210]
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ name: 'Union Ads',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ areaStyle: {},
|
|
|
+ data: [220, 182, 191, 234, 290, 330, 310]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'Video Ads',
|
|
|
+ type: 'line',
|
|
|
+ stack: 'Total',
|
|
|
+ areaStyle: {},
|
|
|
+ data: [150, 232, 201, 154, 190, 330, 410]
|
|
|
+ }
|
|
|
+
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ echarts.init(document.getElementById('jd')).setOption(option);
|
|
|
+ },
|
|
|
+ //停车场数据
|
|
|
+ tcc() {
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: '统计车辆',
|
|
|
+ type: 'pie',
|
|
|
+ radius: '65%',
|
|
|
+ data: [{
|
|
|
+ value: 1048,
|
|
|
+ name: '外地车辆'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 735,
|
|
|
+ name: '本地车辆'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ label: {
|
|
|
+ textStyle: {
|
|
|
+ color: '#ffffff',
|
|
|
+ fontSize: 17,
|
|
|
+ fontWeight: 'bolder'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ echarts.init(document.getElementById('tcc')).setOption(option);
|
|
|
+ },
|
|
|
+ //舆情评价
|
|
|
+ yq() {
|
|
|
+ let options = eval({
|
|
|
+ "list": [
|
|
|
+ ['服务好', 15],
|
|
|
+ ['开心', 9],
|
|
|
+ ['晴空万里 ', 7],
|
|
|
+ ['会再来', 6],
|
|
|
+ ['好玩', 4],
|
|
|
+ ['热情', 5],
|
|
|
+ ['山明水秀', 4],
|
|
|
+ ['喜欢', 3],
|
|
|
+ ['干净整洁', 3],
|
|
|
+ ['门票价格低', 3],
|
|
|
+ ['环境优美', 3]
|
|
|
+ ],
|
|
|
+ "gridSize": 13, // size of the grid in pixels
|
|
|
+ "weightFactor": 10, // number to multiply for size of each word in the list
|
|
|
+ "fontWeight": 'normal', // 'normal', 'bold' or a callback
|
|
|
+ "fontFamily": 'Times, serif', // font to use
|
|
|
+ "color": 'random-light',
|
|
|
+ "backgroundColor": '#f0f8ff00'
|
|
|
+ });
|
|
|
+ var canvas = document.getElementById('canvas');
|
|
|
+ //调用WordCloud
|
|
|
+ WordCloud(canvas, options);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|