This commit is contained in:
xbx 2024-07-04 13:22:02 +08:00
parent 093c6192bf
commit 5079c10678
20 changed files with 293 additions and 1775 deletions

View File

@ -0,0 +1 @@
.img_bg_camera[data-v-0eb681c3]{background-image:url(/img/back.1aefb1ad.png);background-size:100% 100%;height:700px;width:100%;margin:0 auto;text-align:center}.contain[data-v-0eb681c3]{height:80%;width:80%;opacity:.9}

File diff suppressed because one or more lines are too long

BIN
dist2/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

Binary file not shown.

BIN
dist2/img/back.1aefb1ad.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 MiB

1
dist2/index.html Normal file
View File

@ -0,0 +1 @@
<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>XXX系统</title><script defer="defer" src="/js/chunk-vendors.868bc94b.js"></script><script defer="defer" src="/js/app.0b64eabd.js"></script><link href="/css/chunk-vendors.10dd4e95.css" rel="stylesheet"><link href="/css/app.adda1b76.css" rel="stylesheet"></head><body><div id="app"></div></body></html>

2
dist2/js/app.0b64eabd.js Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

106
package-lock.json generated
View File

@ -8,6 +8,7 @@
"name": "my-vue-project",
"version": "0.1.0",
"dependencies": {
"axios": "^1.7.2",
"core-js": "^3.8.3",
"echarts": "^5.5.0",
"element-ui": "^2.15.14",
@ -3532,6 +3533,11 @@
"babel-runtime": "6.x"
}
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"node_modules/at-least-node": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@ -3564,6 +3570,16 @@
"postcss": "^8.1.0"
}
},
"node_modules/axios": {
"version": "1.7.2",
"resolved": "https://registry.npmmirror.com/axios/-/axios-1.7.2.tgz",
"integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
"dependencies": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/babel-helper-vue-jsx-merge-props": {
"version": "2.0.3",
"resolved": "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
@ -4191,6 +4207,17 @@
"integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
"dev": true
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/commander": {
"version": "8.3.0",
"resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz",
@ -4933,6 +4960,14 @@
"node": ">= 0.4"
}
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/depd": {
"version": "2.0.0",
"resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
@ -6180,7 +6215,6 @@
"version": "1.15.6",
"resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.6.tgz",
"integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
"dev": true,
"engines": {
"node": ">=4.0"
},
@ -6190,6 +6224,19 @@
}
}
},
"node_modules/form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/forwarded": {
"version": "0.2.0",
"resolved": "https://registry.npmmirror.com/forwarded/-/forwarded-0.2.0.tgz",
@ -7699,7 +7746,6 @@
"version": "1.52.0",
"resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"devOptional": true,
"engines": {
"node": ">= 0.6"
}
@ -7708,7 +7754,6 @@
"version": "2.1.35",
"resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"devOptional": true,
"dependencies": {
"mime-db": "1.52.0"
},
@ -9163,6 +9208,11 @@
"node": ">= 0.10"
}
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"node_modules/prr": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",
@ -14157,6 +14207,11 @@
"babel-runtime": "6.x"
}
},
"asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"at-least-node": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@ -14177,6 +14232,16 @@
"postcss-value-parser": "^4.2.0"
}
},
"axios": {
"version": "1.7.2",
"resolved": "https://registry.npmmirror.com/axios/-/axios-1.7.2.tgz",
"integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
"requires": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"babel-helper-vue-jsx-merge-props": {
"version": "2.0.3",
"resolved": "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
@ -14701,6 +14766,14 @@
"integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
"dev": true
},
"combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"requires": {
"delayed-stream": "~1.0.0"
}
},
"commander": {
"version": "8.3.0",
"resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz",
@ -15271,6 +15344,11 @@
"object-keys": "^1.1.1"
}
},
"delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
},
"depd": {
"version": "2.0.0",
"resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
@ -16280,8 +16358,17 @@
"follow-redirects": {
"version": "1.15.6",
"resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.6.tgz",
"integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
"dev": true
"integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA=="
},
"form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"requires": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
}
},
"forwarded": {
"version": "0.2.0",
@ -17469,14 +17556,12 @@
"mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"devOptional": true
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
},
"mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"devOptional": true,
"requires": {
"mime-db": "1.52.0"
}
@ -18550,6 +18635,11 @@
}
}
},
"proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"prr": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",

View File

@ -8,6 +8,7 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^1.7.2",
"core-js": "^3.8.3",
"echarts": "^5.5.0",
"element-ui": "^2.15.14",

View File

@ -1,75 +1,183 @@
<template>
<div class="peripheral">
<el-row class="card">
<el-col :span="4" style="height: 100%;padding: 6px">
<el-card style="height: 100%;">
<MenuList @change="switchMenu"></MenuList>
<div class="img_bg_camera">
<!-- 透明度 -->
<video id="videoCamera" autoplay hidden></video>
<canvas style="display:none; " id="canvasCamera" width="250" height="250"></canvas>
<div style="display: flex; justify-content: center; align-items: center; height: 102vh;">
<el-card class="contain" style="display: flex; justify-content: center; align-items: center;">
<p>标题</p>
<el-card style="width: 1100px; height: 450px;">
<!-- 返回的内容展示 -->
<div style="height: 400px; overflow-y: auto;">
<div style="display: flex; align-items: flex-start; justify-content: flex-start;">
<el-tag style="font-size: 14px; font-weight: bold;">分析结果</el-tag>
</div>
<div v-for="apiMessage in AiMessage" :key="apiMessage">
<el-card style="margin: 10px;">
<p>{{ apiMessage }}</p>
</el-card>
</div>
</div>
</el-card>
</el-col>
<el-col :span="20" style="height: 100%;padding: 6px">
<el-card style="height: 100%;" :body-style="{ height: '95%', width: '100%' }">
<component :is="currentComponent" style="height: 95%;"></component>
</el-card>
</el-col>
</el-row>
<el-button style="margin-top: 10px;" type="success" @click="setImage()">开启识别</el-button>
<el-button style="margin-top: 10px;" type="warning" @click="stopImageCapture()">停止识别</el-button>
</el-card>
</div>
</div>
</template>
<script>
import MenuList from './page/menuList.vue'
import PageOne from './page/PageOne.vue';
import PageTwo from './page/PageTwo.vue';
import PageThree from './page/PageThree.vue';
import PageFour from './page/PageFour.vue';
import axios from 'axios';
export default {
components: {
MenuList
},
data() {
return {
menuList: [
{
path: 'PageOne',
component: PageOne
},
{
path: 'PageTwo',
component: PageTwo
},
{
path: 'PageThree',
component: PageThree
},
{
path: 'PageFour',
component: PageFour
}
imgif: false,
videoWidth: 250,
videoHeight: 250,
imgSrc: '',
thisCancas: null,
thisContext: null,
thisVideo: null,
imga: '',
intervalId: null,//
AiMessage: [
],
currentComponent: PageOne
}
},
created() {
},
methods: {
switchMenu(data) {
this.currentComponent = this.menuList.find(item => item.path === data).component;
}
}
getCompetence() {
this.thisCancas = document.getElementById('canvasCamera');
this.thisContext = this.thisCancas.getContext('2d');
this.thisVideo = document.getElementById('videoCamera');
// navigator.mediaDevices
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
console.error('浏览器不支持 mediaDevices API');
return;
}
const constraints = {
audio: false,
video: {
width: this.videoWidth,
height: this.videoHeight,
transform: 'scaleX(-1)'
}
};
navigator.mediaDevices.getUserMedia(constraints).then(stream => {
// 使
this.thisVideo.srcObject = stream;
this.thisVideo.onloadedmetadata = () => {
this.thisVideo.play();
};
console.log("打开摄像头");
}).catch(err => {
console.error('获取媒体输入失败', err);
});
},
//
sendImageToServer(imgData) {
axios.post('http://124.71.135.249:8081/apiSend', {
image: imgData
}).then(response => {
if (response.data.msg === "ok") {
this.$message({
message: '图像识别成功!',
type: 'success'
});
console.log(response.data.choices[0].message.content, "返回的数据");
this.AiMessage.push(response.data.choices[0].message.content)
console.log(this.AiMessage);
}
}).catch(error => {
console.error('发送图片时出错', error);
});
},
setImage() {
console.log("开始拍照")
this.$message({
message: '开始识别',
type: 'success'
});
this.imgif = true;
var _this = this;
//
if (this.intervalId) {
clearInterval(this.intervalId);
}
//
this.intervalId = setInterval(function () {
// canvas
_this.thisContext.drawImage(_this.thisVideo, 0, 0, 250, 250);
console.log(_this.thisContext);
// base64
var image = _this.thisCancas.toDataURL('image/png');
_this.imgSrc = image;
window.sessionStorage.setItem("img", _this.imgSrc);
_this.sendImageToServer(_this.imgSrc);
console.log(_this.imgSrc, "图片显示");
}, 5000); // 5000 = 5
},
//
stopImageCapture() {
if (this.intervalId) {
this.$message({
message: '停止识别',
type: 'warning'
});
clearInterval(this.intervalId);
console.log("停止拍照");
}
},
//
openFullScreen1() {
this.thisVideo.srcObject.getTracks()[0].stop(),//
setTimeout(() => {
// var file = this.imga.substr(22)
this.imga = window.sessionStorage.getItem("img")
var file = this.imga
console.log(file);
//base64formData
var formData = new FormData(); //*
formData.append("multipartFile", file); //*
// formData.append("password", this.ruleForm.password); //*
// formData.append("username", this.ruleForm.name); //*
console.log(formData, 'formData');
//axios
// this.$http.post('url', formData).then(res => {
// console.log(res);
// })
}, 2000);
},
},
mounted() {
this.getCompetence();
},
}
</script>
<style lang="less" scoped>
.peripheral {
position: absolute;
top: 0;
left: 0;
height: 100%;
//
.img_bg_camera {
background-image: url(./image/back.png);
background-size: 100% 100%;
height: 700px;
width: 100%;
background-color: rgb(239, 239, 239);
margin: 0 auto;
text-align: center;
}
.card {
height: 100%;
padding: 10px;
}
.contain {
height: 80%;
width: 80%;
opacity: 0.9;
}
</style>

BIN
src/image/back.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 MiB

File diff suppressed because it is too large Load Diff

View File

@ -1,257 +0,0 @@
<template>
<div class="card">
<!-- <el-row style="height: 100%;">
<el-col :span="12" style="height: 100%;">
<div id="chart1" style="height: 100%;"></div>
</el-col>
<el-col :span="12" style="height: 100%;">
<div id="chart2" style="height: 100%;"></div>
</el-col>
</el-row> -->
<div id="chart1" style="height: 50%;"></div>
<div id="chart2" style="height: 50%;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data() {
return {
}
},
created() {
this.$nextTick(() => {
this.NBchart1();
this.NBchart2();
})
},
methods: {
NBchart1() {
var chartDom = document.getElementById('chart1');
var myChart = echarts.init(chartDom);
var option;
let data = [
{ hour: 0, count: 146309 },
{ hour: 1, count: 138889 },
{ hour: 2, count: 128847 },
{ hour: 3, count: 120973 },
{ hour: 4, count: 112576 },
{ hour: 5, count: 104372 },
{ hour: 6, count: 99483 },
{ hour: 7, count: 103561 },
{ hour: 8, count: 107022 },
{ hour: 9, count: 113571 },
{ hour: 10, count: 119230 },
{ hour: 11, count: 122001 },
{ hour: 12, count: 124386 },
{ hour: 13, count: 125616 },
{ hour: 14, count: 124979 },
{ hour: 15, count: 126296 },
{ hour: 16, count: 133374 },
{ hour: 17, count: 141045 },
{ hour: 18, count: 145971 },
{ hour: 19, count: 152993 },
{ hour: 20, count: 158624 },
{ hour: 21, count: 162193 },
{ hour: 22, count: 158135 },
{ hour: 23, count: 146495 }
];
option = {
title: {
text: '每小时新增用户数量'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: data.map(item => item.hour)
},
yAxis: {
type: 'value'
},
series: [
{
data: data.map(item => item.count),
type: 'line',
smooth: true
}
]
};
option && myChart.setOption(option);
},
NBchart2() {
var chartDom = document.getElementById('chart2');
var myChart = echarts.init(chartDom);
var option;
// 线
//
let data1 = [
{ day: '2023/1/26', count: 9405 },
{ day: '2023/3/16 ', count: 9405 },
{ day: '2023/3/12 ', count: 12164 },
{ day: '2023/3/15 ', count: 8981 },
{ day: '2023/3/7 ', count: 9693 },
{ day: '2023/3/21 ', count: 10706 },
{ day: '2023/3/9 ', count: 16507 },
{ day: '2023/3/19 ', count: 10871 },
{ day: '2023/3/11 ', count: 14919 },
{ day: '2023/3/17 ', count: 10170 },
{ day: '2023/3/20 ', count: 9581 },
{ day: '2023/3/22 ', count: 8967 },
{ day: '2023/3/18 ', count: 10607 },
{ day: '2023/3/14 ', count: 10105 },
{ day: '2023/3/13 ', count: 19523 },
{ day: '2023/3/10 ', count: 34936 },
{ day: '2023/3/8 ', count: 9940 },
{ day: '2023/2/27 ', count: 7971 },
{ day: '2023/2/23 ', count: 8456 },
{ day: '2023/2/2 ', count: 9661 },
{ day: '2023/1/26 ', count: 43444 },
{ day: '2023/2/7 ', count: 9194 },
{ day: '2023/1/28 ', count: 49089 },
{ day: '2023/2/26 ', count: 10287 },
{ day: '2023/2/17 ', count: 8982 },
{ day: '2023/2/6 ', count: 9026 },
{ day: '2023/3/5 ', count: 10929 },
{ day: '2023/2/15 ', count: 21703 },
{ day: '2023/2/9 ', count: 9842 },
{ day: '2023/2/16 ', count: 18849 },
{ day: '2023/2/5 ', count: 9370 },
{ day: '2023/3/3 ', count: 10823 },
{ day: '2023/2/18 ', count: 15192 },
{ day: '2023/2/22 ', count: 9195 },
{ day: '2023/2/3 ', count: 8699 },
{ day: '2023/2/10 ', count: 12165 },
{ day: '2023/3/6 ', count: 10030 },
{ day: '2023/2/12 ', count: 12002 },
{ day: '2023/2/28 ', count: 8498 },
{ day: '2023/2/1 ', count: 9217 },
{ day: '2023/1/27 ', count: 42097 },
{ day: '2023/2/19 ', count: 60733 },
{ day: '2023/3/1 ', count: 7999 },
{ day: '2023/2/25 ', count: 10880 },
{ day: '2023/2/11 ', count: 12160 },
{ day: '2023/1/31 ', count: 25495 },
{ day: '2023/3/2 ', count: 8922 },
{ day: '2023/2/21 ', count: 8878 },
{ day: '2023/1/29 ', count: 38196 },
{ day: '2023/2/14 ', count: 11203 },
{ day: '2023/2/20 ', count: 54872 },
{ day: '2023/1/30 ', count: 26505 },
{ day: '2023/3/4 ', count: 12309 },
{ day: '2023/2/24 ', count: 8848 },
{ day: '2023/2/13 ', count: 11808 },
{ day: '2023/2/4 ', count: 9911 },
{ day: '2023/2/8 ', count: 9926 },
]
let data2 = [
{ day: '2023/1/26 ', count: 70250 },
{ day: '2023/1/27 ', count: 70417 },
{ day: '2023/1/28 ', count: 79227 },
{ day: '2023/1/29 ', count: 63803 },
{ day: '2023/1/30 ', count: 50201 },
{ day: '2023/1/31 ', count: 56522 },
{ day: '2023/2/1 ', count: 83245 },
{ day: '2023/2/2 ', count: 60173 },
{ day: '2023/2/3 ', count: 51659 },
{ day: '2023/2/4 ', count: 60421 },
{ day: '2023/2/5 ', count: 60998 },
{ day: '2023/2/6 ', count: 57203 },
{ day: '2023/2/7 ', count: 71576 },
{ day: '2023/2/8 ', count: 72402 },
{ day: '2023/2/9 ', count: 50143 },
{ day: '2023/2/10 ', count: 53521 },
{ day: '2023/2/11 ', count: 54014 },
{ day: '2023/2/12 ', count: 52231 },
{ day: '2023/2/13 ', count: 50638 },
{ day: '2023/2/14 ', count: 54419 },
{ day: '2023/2/15 ', count: 78707 },
{ day: '2023/2/16 ', count: 56355 },
{ day: '2023/2/17 ', count: 44477 },
{ day: '2023/2/18 ', count: 59447 },
{ day: '2023/2/19 ', count: 117311 },
{ day: '2023/2/20 ', count: 92860 },
{ day: '2023/2/21 ', count: 43720 },
{ day: '2023/2/22 ', count: 42110 },
{ day: '2023/2/23 ', count: 44635 },
{ day: '2023/2/24 ', count: 45648 },
{ day: '2023/2/25 ', count: 49835 },
{ day: '2023/2/26 ', count: 42647 },
{ day: '2023/2/27 ', count: 39140 },
{ day: '2023/2/28 ', count: 42928 },
{ day: '2023/3/1 ', count: 36226 },
{ day: '2023/3/2 ', count: 42775 },
{ day: '2023/3/3 ', count: 48970 },
{ day: '2023/3/4 ', count: 50989 },
{ day: '2023/3/5 ', count: 44726 },
{ day: '2023/3/6 ', count: 41438 },
{ day: '2023/3/7 ', count: 42050 },
{ day: '2023/3/8 ', count: 39826 },
{ day: '2023/3/9 ', count: 62117 },
{ day: '2023/3/10 ', count: 114035 },
{ day: '2023/3/11 ', count: 59038 },
{ day: '2023/3/12 ', count: 45172 },
{ day: '2023/3/13 ', count: 63141 },
{ day: '2023/3/14 ', count: 44502 },
{ day: '2023/3/15 ', count: 42782 },
{ day: '2023/3/16 ', count: 51064 },
{ day: '2023/3/17 ', count: 47506 },
{ day: '2023/3/18 ', count: 44449 },
{ day: '2023/3/19 ', count: 43487 },
{ day: '2023/3/20 ', count: 40666 },
{ day: '2023/3/21 ', count: 46736 },
{ day: '2023/3/22 ', count: 42363 },
]
// data
data1.sort((a, b) => new Date(a.day) - new Date(b.day));
data2.sort((a, b) => new Date(a.day) - new Date(b.day));
option = {
title: {
text: '每日新增用户和流失用户数量'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: data1.map(item => item.day)
},
legend: {
data: ['流失用户', '新增用户']
},
yAxis: {
type: 'value'
},
series: [
{
data: data1.map(item => item.count),
type: 'line',
smooth: true,
name: '流失用户'
},
{
data: data2.map(item => item.count),
type: 'line',
smooth: true,
name: '新增用户'
}
]
};
option && myChart.setOption(option);
}
}
}
</script>
<style lang="less" scoped>
.card {
height: 100%;
padding: 10px;
}
</style>

View File

@ -1,131 +0,0 @@
<template>
<div class="card">
<el-row style="height: 100%;">
<el-col :span="12" style="height: 100%;">
<div id="chart1" style="height: 100%;"></div>
</el-col>
<el-col :span="12" style="height: 100%;">
<div id="chart2" style="height: 100%;"></div>
</el-col>
</el-row>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data() {
return {
}
},
created() {
this.$nextTick(() => {
this.NBchart1();
this.NBchart2();
})
},
methods: {
NBchart1() {
var chartDom = document.getElementById('chart1');
var myChart = echarts.init(chartDom);
var option;
let data = [
{ type: 'PVP', battingAverage: 0.452397912, payingUserBattingAverage: 0.746663671, nonPayingUserBattingAverage: 0.39396634 },
{ type: 'PVE', battingAverage: 0.901009265, payingUserBattingAverage: 0.913388548, nonPayingUserBattingAverage: 0.897998177 },
];
option = {
title: {
text: '玩家游戏胜率'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['平均胜率', '付费用户胜率', '非付费用户胜率']
},
xAxis: {
type: 'category',
data: data.map(item => item.type)
},
yAxis: {
type: 'value'
},
series: [
{
name: '平均胜率',
data: data.map(item => item.battingAverage),
type: 'bar'
},
{
name: '付费用户胜率',
data: data.map(item => item.payingUserBattingAverage),
type: 'bar'
},
{
name: '非付费用户胜率',
data: data.map(item => item.nonPayingUserBattingAverage),
type: 'bar'
}
]
};
option && myChart.setOption(option);
},
NBchart2() {
var chartDom = document.getElementById('chart2');
var myChart = echarts.init(chartDom);
var option;
let data = [
{ type: 'PVP', averageGames: 2.232661767, payingUserAverageGames: 30.62432598, nonPayingUserAverageGames: 1.885549415 },
{ type: 'PVE', averageGames: 3.164516107, payingUserAverageGames: 51.26015353, nonPayingUserAverageGames: 2.576505848 },
];
option = {
title: {
text: '玩家游戏场次'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['平均场次', '付费用户平均场次', '非付费用户平均场次']
},
xAxis: {
type: 'category',
data: data.map(item => item.type)
},
yAxis: {
type: 'value'
},
series: [
{
name: '平均场次',
data: data.map(item => item.averageGames),
type: 'bar'
},
{
name: '付费用户平均场次',
data: data.map(item => item.payingUserAverageGames),
type: 'bar'
},
{
name: '非付费用户平均场次',
data: data.map(item => item.nonPayingUserAverageGames),
type: 'bar'
}
]
};
option && myChart.setOption(option);
}
}
}
</script>
<style lang="less" scoped>
.card {
height: 100%;
padding: 10px;
}
</style>

View File

@ -1,67 +0,0 @@
<template>
<div class="card">
<div id="chart1" style="height: 100%;"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data() {
return {
}
},
created() {
this.$nextTick(() => {
this.NBchart1();
})
},
methods: {
NBchart1() {
var chartDom = document.getElementById('chart1');
var myChart = echarts.init(chartDom);
var option;
let data = [
{ type: '零氪', count: 13.41 },
{ type: '低氪', count: 127.15 },
{ type: '中氪', count: 198.97 },
{ type: '高氪', count: 339.63 },
];
option = {
title: {
text: '不同氪金档位平均在线时长'
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: data.map(item => item.type)
},
yAxis: {
type: 'value'
},
series: [
{
data: data.map(item => item.count),
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
};
option && myChart.setOption(option);
},
}
}
</script>
<style lang="less" scoped>
.card {
height: 100%;
padding: 10px;
}
</style>

View File

@ -1,52 +0,0 @@
<template>
<div>
<div style="text-align: center;padding-bottom: 20px;border-bottom: 1px solid #e1e8f8;">
<div style="font-size: 25px;">
野蛮时代
</div>
<div style="font-size: 20px;">
玩家数据分析系统
</div>
</div>
<el-menu default-active="1" @select="changeMenu">
<el-menu-item index="PageOne">
<i class="el-icon-s-ticket"></i>
<span slot="title">用户变化</span>
</el-menu-item>
<el-menu-item index="PageTwo">
<i class="el-icon-menu"></i>
<span slot="title">用户活跃度</span>
</el-menu-item>
<el-menu-item index="PageThree">
<i class="el-icon-document"></i>
<span slot="title">用户游戏情况</span>
</el-menu-item>
<el-menu-item index="PageFour">
<i class="el-icon-setting"></i>
<span slot="title">未来付费情况预测</span>
</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
}
},
created() {
},
methods: {
changeMenu(key, keyPath) {
console.log(key, keyPath)
this.$emit('change', key)
}
}
}
</script>
<style lang="less" scoped>
.el-menu {
border: 0 !important;
}
</style>