1.0
This commit is contained in:
parent
093c6192bf
commit
5079c10678
|
@ -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
Binary file not shown.
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
After Width: | Height: | Size: 2.7 MiB |
|
@ -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>
|
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
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
216
src/App.vue
216
src/App.vue
|
@ -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);
|
||||
//base64数据放formData里面
|
||||
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>
|
Binary file not shown.
After Width: | Height: | Size: 2.7 MiB |
File diff suppressed because it is too large
Load Diff
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
Loading…
Reference in New Issue