weiweiw
/
Bonus-AI-LargeScreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

组件化复用代码

This commit is contained in:
chengwenyou 2024-08-01 11:16:43 +08:00
parent 8f0d83ed17
commit eb66083c2c
10 changed files with 589 additions and 621 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/api/largeScreen/largeScreen.js Normal file
View File

@ -0,0 +1,24 @@
import request from '@/utils/request'
import { getToken } from '@/utils/auth'
import { parseStrEmpty } from '@/utils/bonus.js'
// largeScreen界面获得在线人数和实时在线人数
export function getOnlineNum(serviceid) {
return request({
url: '/ai/report/getResult/' + parseStrEmpty(serviceid),
method: 'get',
headers: {
Authorization: 'Bearer ' + getToken(),
},
})
}
export function getAlgoAppOverview(serviceid) {
return request({
url: '/ai/report/getResult/' + parseStrEmpty(serviceid),
method: 'get',
headers: {
Authorization: 'Bearer ' + getToken(),
},
})
}

207
src/assets/styles/largeScreen.css
View File

@ -16,7 +16,7 @@ body {
/* 设置mainContent的宽度，层级和显示方式 */
.mainContentc {
.mainContentLC {
display: flex;
width: 116rem;
height: 51rem;
@ -24,7 +24,7 @@ body {
}
/* 设置boxLevelOne的高度，左边距和右边距 */
.boxLevelOnec {
.boxLevelOneLC {
display: flex;
margin-right: .75rem;
flex-direction: column;
@ -74,42 +74,8 @@ body {
margin-bottom: 1rem;
}
/* 中间部分第二个盒子 */
.boxMidTwoc {
border-radius: .5rem;
/* 边框圆角 */
margin-bottom: 1rem;
/* 下外边距 */
margin-left: 1rem;
/* 左外边距 */
margin-right: 1rem;
/* 右外边距 */
flex: 8;
/* 盒子flex属性 */
height: 15rem;
/* 盒子高度 */
border: 1px solid rgba(0, 255, 255, .3);
/* 边框颜色 */
/* background-color: aqua; */
}
/* 三级标题 */
.boxMidLevelThreec {
position: absolute;
/* 定位 */
color: #ffffff;
/* 文字颜色 */
padding-left: 1.5rem;
/* 内边距 */
padding-top: 0.5rem;
/* 内边距 */
font-size: 1rem;
/* 文字大小 */
letter-spacing: 0.2rem;
/* 文字间距 */
opacity: .8;
}
@ -145,19 +111,6 @@ body {
}
/* 视频介绍 */
.introVideoBoxc {
margin-left: 1.5625rem;
/* 左外边距 */
margin-right: 1.5625rem;
/* 右外边距 */
background-color: RGBA(10, 77, 123, 0.5);
/* 背景颜色 */
margin-top: 2.5rem;
/* 上外边距 */
margin-bottom: 1.2rem;
/* 下外边距 */
}
/* 视频 */
videoc {
@ -171,165 +124,9 @@ videoc {
/* 宽度 */
}
/* 视频图标 */
.introVideoIconc {
height: 1.2rem;
/* 高度 */
padding-left: .2rem;
/* 内边距 */
padding-top: .1rem;
/* 内边距 */
opacity: .4;
/* 透明度 */
}
/* 视频内容 */
.introVideoContentc {
margin-left: 1.2rem;
/* 左外边距 */
}
/* 设置介绍视频标题样式 */
.introVideoTitlec {
font-size: 1rem;
/* 设置字体大小 */
margin-left: 0.5rem;
/* // 设置左边距 */
letter-spacing: 0.3rem;
/* // 设置字符间距 */
/* font-weight: bolder; */
/* // 设置字体加粗 */
color: rgba(132, 195, 254, 1);
opacity: .9;
/* // 设置字体颜色 */
}
/* 设置介绍视频文本样式 */
.introVideoTextc {
font-size: .9rem;
/* // 设置字体大小 */
padding-top: .5rem;
/* // 设置内边距上 */
padding-bottom: 1.125rem;
/* // 设置内边距下 */
font-weight: 400;
opacity: .9;
/* // 设置字体粗细 */
}
/* 设置boxTwoRightContent样式 */
/* 设置midIconMain样式 */
.midIconMainc {
color: #ffffff;
/* // 设置字体颜色 */
/* 控制中间icon下的默认字体 */
display: flex;
/* // 设置显示方式 */
margin-top: 2.5rem;
/* // 设置外边距上 */
height: 9rem;
/* // 设置高度 */
width: 100%;
/* // 设置宽度 */
}
/* 设置midIcon样式 */
.midIconc {
flex: 1;
/* // 设置伸缩比例 */
padding-left: 1rem;
/* // 设置左边距 */
padding-top: 1.5rem;
/* // 设置内边距上 */
/* background-color: rgb(2, 19, 19); // 设置背景颜色 */
height: 7.5rem;
/* // 设置高度 */
}
/* 设置midIconLinkPic的样式，上边距为-2rem，左边距为0.8rem，高度为8rem */
.midIconLinkPicc {
margin-top: -2rem;
margin-left: 0.8rem;
height: 8rem;
}
/* 设置midText的样式，左边距为1rem，字体大小为1.2rem，透明度为0.5 */
.midTextc {
margin-left: 1rem;
font-size: 1.2rem;
opacity: .5;
}
/* 设置midTextSec的样式，左边距为0.5rem */
.midTextSecc {
margin-left: 0.5rem
}
/* 设置midTextTrd的样式，左边距为0 */
.midTextTrdc {
margin-left: 0;
}
/* 设置midTextFth的样式，左边距为-0.3rem */
.midTextFthc {
margin-left: -0.3rem;
}
/* 设置midTextFith的样式，左边距为1.5rem */
.midTextFithc {
margin-left: 1.5rem;
}
/* 设置midTextSth的样式，左边距为0.7rem */
.midTextSthc {
margin-left: 0.7rem;
}
/* 设置midTextSevth的样式，左边距为1.8rem */
.midTextSevthc {
margin-left: 1.8rem;
}
/* 中间样式 */
.hatInsertc {
margin-left: 2.5rem;
font-size: 0.8rem;
}
.hatInsertc .bigTextc {
font-size: 1.9rem;
}
.hatInsertc .smallTextc {
font-size: 1rem;
margin-left: 0.4rem;
}
/* 中间样式结束 */
.boxTwoRightBoxc {
height: 90%;
width: 100%;
}
/* .buttomPieImg{
height: 1.5rem;
margin-left: 1.5rem;
margin-top: 1.5rem;
} */
.bottomborderc {

52
src/views/Text/textrecognition.vue
View File

@ -1,44 +1,32 @@
<template>
<div class="main">
<largeScreenHeader></largeScreenHeader>
<div class="mainContent">
<div class="boxLevelOne3 midBoxLevelOne3">
<boxHeader :boxHeaderText="'OCR识别应用'"></boxHeader>
<checkChangeUrl :thisUrlPage="'3'"></checkChangeUrl>
<!-- flex:1.6 folderPicDom -->
<div class="folderPicDom">
<img src="../../assets/images/folderPic.png" alt="errorImgBlackHeart" class="folderPic">
<div class="folderPicText">请上传jpg、png文件
<button class="folderPicButton" @click="handup">识别</button>
</div>
</div>
<div class="recoTextDom">
<div class="recoTextIconDom">
<div class="recoTextTitle">识别结果</div>
<div class="recoTextIcon">
<img class="recoResut" src="../../assets/images/recoResut.png" alt="errorcompany">
<img class="recoResut" src="../../assets/images/recoResut.png" alt="errorcompany">
</div>
</div>
<div class="recoText"></div>
</div>
</div>
<div class="boxLevelOne3 rightBoxLevelOne3">
<div class="boxLevelTwo boxLevelTwoFst">
<boxHeader :boxHeaderText="'服务调用统计'"></boxHeader>
<div class="myEcharts" ref="myEcharts">
</div>
</div>
<div class="boxLevelTwo boxLevelTwoSnd">
@ -78,33 +66,29 @@ import boxHeader from '@/views/components/boxHeader.vue'
import checkChangeUrl from '@/views/components/checkChangeUrl.vue'
export default {
components:{
largeScreenHeader,
boxHeader,
checkChangeUrl
},
components: {
largeScreenHeader,
boxHeader,
checkChangeUrl
},
mounted() {
this.updateDateTime();
this.echartsInit();
// this.fetchImage();
// this.initChartOne();
},
methods: {
backToHome() {
this.$router.beforeEach((to, from, next) => {
if (from.path === '/largeScreen') {
// 清除缓存的操作
// 可以使用 localStorage.clear() 或其他方法清除缓存
localStorage.clear();
}
next();
});
this.$router.beforeEach((to, from, next) => {
if (from.path === '/largeScreen') {
// 清除缓存的操作
// 可以使用 localStorage.clear() 或其他方法清除缓存
localStorage.clear();
}
next();
});
// 跳转到主页
this.$router.push('/largeScreen');
},
// 跳转到主页
this.$router.push('/largeScreen');
},
handup() {
alert(1)
},

55
src/views/largeScreen/introVideo.vue Normal file
View File

@ -0,0 +1,55 @@
<template>
<div class="introVideoBox">
<video controls poster="" width="100%" height="100%">
<source src="" type="video/mp4">
不好意思，视频走丢了
</video>
<div class="introVideoContentLC">
<img src="../../assets/icons/svg/introVideoIcon.png" alt="error" class="introVideoIconLC">
<span class="introVideoTitleLC">AI平台简介</span>
<div class="introVideoTextLC">数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展</div>
</div>
</div>
</template>
<script>
export default {
name: 'introVideo'
}
</script>
<style>
.introVideoBox {
margin-left: 1.5625rem;
margin-right: 1.5625rem;
background-color: RGBA(10, 77, 123, 0.5);
margin-top: 0.5rem;
margin-bottom: 1.2rem;
}
.introVideoContentLC {
margin-left: 1.2rem;
}
.introVideoIconLC {
height: 1.2rem;
padding-left: .2rem;
padding-top: .1rem;
opacity: .4;
}
.introVideoTitleLC {
font-size: 1rem;
margin-left: 0.5rem;
letter-spacing: 0.3rem;
color: rgba(132, 195, 254, 1);
opacity: .9;
}
.introVideoTextLC {
font-size: .9rem;
padding-top: .5rem;
padding-bottom: 1.125rem;
font-weight: 400;
opacity: .9;
}
</style>

365
src/views/largeScreen/largeScreen.vue
View File

@ -1,22 +1,11 @@
<template>
<div class="main">
<largeScreenHeader></largeScreenHeader>
<div class="mainContentc">
<div class="boxLevelOnec boxLeftLevelOnec">
<div class="mainContentLC">
<div class="boxLevelOneLC boxLeftLevelOnec">
<div class="boxLeftTwoLC boxLeftTwoFstc">
<boxHeader :boxHeaderText="'平台简介'"></boxHeader>
<div class="introVideoBoxc">
<video controls poster="" width="100%" height="100%">
<source src="" type="video/mp4">
不好意思，视频走丢了
</video>
<div class="introVideoContentc">
<img src="../../assets/icons/svg/introVideoIcon.png" alt="error" class="introVideoIconc">
<span class="introVideoTitlec">AI平台简介</span>
<div class="introVideoTextc">数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展示数据展</div>
</div>
</div>
<introVideo></introVideo>
</div>
<div class="boxLeftTwoLC">
@ -25,137 +14,21 @@
</div>
</div>
<div class="boxLevelOnec boxMidLevelOnec">
<!-- 下方第一层dom -->
<div class="boxLevelOneLC boxMidLevelOnec">
<boxHeader :boxHeaderText="'算法应用概览'"></boxHeader>
<div class="boxMidTwoc">
<div class="boxMidLevelThreec">违章智能识别</div>
<div class="midIconMainc">
<div class="midIconc">
<a href="javascript:;" class="midIconLinkc">
<img src="../../assets/images/midOneIcon.png" alt="error" class="midIconLinkPicc"
@click="goToVideo"></a>
<div class="midTextc">安全帽识别</div>
<div class="hatInsertc"><span class="bigTextc">{{ hatNum }}</span><span class="smallTextc">(次)</span>
</div>
</div>
<div class="midIconc">
<a href="javascript:;" class="midIconLinkc">
<img src="../../assets/images/midTwoIcon.png" alt="error" class="midIconLinkPicc"
@click="goToVideo"></a>
<div class="midTextc midTextSecc">安全带识别</div>
<div class="hatInsertc"><span class="bigTextc">{{ seatBeltNum }}</span><span class="smallTextc">(次)</span>
</div>
</div>
<div class="midIconc ">
<a href="javascript:;" class="midIconLinkc">
<img src="../../assets/images/midThreeIcon.png" alt="error" class="midIconLinkPicc"
@click="goToVideo"></a>
<div class="midTextc midTextTrdc">电子围栏识别</div>
<div class="hatInsertc"><span class="bigTextc">{{ electFenceNum }}</span><span
class="smallTextc">(次)</span>
</div>
</div>
<div class="midIconc">
<a href="javascript:;" class="midIconLinkc">
<img src="../../assets/images/midFourIcon.png" alt="error" class="midIconLinkPicc"
@click="goToVideo"></a>
<div class="midTextc midTextFthc">更多场景扩展中</div>
</div>
</div>
</div>
<!-- 中上dom -->
<div class="boxMidTwoc">
<div class="boxMidLevelThreec">OCR识别</div>
<div class="midIconMainc">
<div class="midIconc">
<a href="javascript:;" class="midIconLinkc">
<img src="../../assets/images/midFiveIcon.png" alt="error" class="midIconLinkPicc"
@click="goToViolation"></a>
<div class="midTextc midTextFithc">发票识别 </div>
<div class="hatInsertc"><span class="bigTextc">{{ InvoiceNum }}</span><span class="smallTextc">(次)</span>
</div>
</div>
<div class="midIconc">
<a href="javascript:;" class="midIconLinkc">
<img src="../../assets/images/midSixIcon.png" alt="error" class="midIconLinkPicc"
@click="goToUpdateIDCard"></a>
<div class="midTextc midTextSthc">身份证识别</div>
<div class="hatInsertc"><span class="bigTextc">{{ idCardNum }}</span><span class="smallTextc">(次)</span>
</div>
</div>
<div class="midIconc ">
<a href="javascript:;" class="midIconLinkc">
<img src="../../assets/images/midSevenIcon.png" alt="error" class="midIconLinkPicc"
@click="goToText"></a>
<div class="midTextc midTextSevthc">文本识别</div>
<div class="hatInsertc"><span class="bigTextc">{{ textRecognitionNum }}</span>
<span class="smallTextc">(次)</span>
</div>
</div>
<div class="midIconc">
<a href="javascript:;" class="midIconLinkc">
<img src="../../assets/images/midFourIcon.png" alt="error" class="midIconLinkPicc"
@click="showPopup"></a>
<div class="midTextc midTextFthc">更多场景扩展中</div>
</div>
</div>
</div>
<div class="boxMidTwoc">
<div class="boxMidLevelThreec">其他拓展服务</div>
<div class="midIconMainc">
<div class="midIconc">
<a href="javascript:;" class="midIconLinkc">
<img src="../../assets/images/midEightIcon.png" alt="error" class="midIconLinkPicc"
@click="goToAskRequest"></a>
<div class="midTextc">大模型问答 </div>
<div class="hatInsertc"><span class="bigTextc">{{ largeModelNum }}</span><span
class="smallTextc">(次)</span>
</div>
</div>
<div class="midIconc">
<a href="javascript:;" class="midIconLinkc">
<img src="../../assets/images/midNineIcon.png" alt="error" class="midIconLinkPicc"
@click="goToUpdateFace"></a>
<div class="midTextc midTextFithc">人脸识别</div>
<div class="hatInsertc"><span class="bigTextc">{{ faceRecognitionNum }}</span><span
class="smallTextc">(次)</span>
</div>
</div>
<div class="midIconc">
<a href="javascript:;" class="midIconLinkc">
<img src="../../assets/images/midFourIcon.png" alt="error" class="midIconLinkPicc"
@click="showPopup"></a>
<div class="midTextc midTextFthc">更多场景扩展中</div>
</div>
<div class="midIconc ">
<div class="hatInsertc"><span class="bigTextc"></span><span class="smallTextc"></span>
<!-- 撑起整个盒子 -->
</div>
</div>
</div>
</div>
<routeIcon></routeIcon>
</div>
<div class="boxLevelOnec boxRightLevelOnec">
<!-- 下方第一层dom -->
<div class="boxLevelOneLC boxRightLevelOnec">
<div class="boxRightTwoc boxRightTwoFstc">
<boxHeader :boxHeaderText="'月度访问统计'"></boxHeader>
<div class="boxTwoRightBoxc" ref="boxTwoRightBox">
<onlineCount></onlineCount>
</div>
<rectAccessCountByMonth></rectAccessCountByMonth>
</div>
<div class="boxRightTwoc ">
<boxHeader :boxHeaderText="'阅读访问统计'"></boxHeader>
<onlineCount></onlineCount>
</div>
</div>
</div>
@ -167,236 +40,36 @@
</template>
<script>
import * as echarts from 'echarts';
import largeScreenHeader from '@/components/LargeScreen'
import boxHeader from '@/views/components/boxHeader.vue'
import pie3D from '@/views/largeScreen/pie3D.vue'
import onlineCount from '@/views/largeScreen/onlineCount.vue';
import introVideo from '@/views/largeScreen/introVideo.vue';
import routeIcon from '@/views/largeScreen//routeIcon.vue';
import rectAccessCountByMonth from '@/views/largeScreen/rectAccessCountByMonth.vue';
export default {
components: {
largeScreenHeader,
boxHeader,
pie3D,
onlineCount
onlineCount,
introVideo,
routeIcon,
rectAccessCountByMonth
},
mounted() {
this.InsertNum();
this.updateDateTime();
this.echartsInit()
},
methods: {
goToAskRequest() {
this.$router.beforeEach((to, from, next) => {
if (from.path === '/askRequest') {
// 清除缓存的操作
// 可以使用 localStorage.clear() 或其他方法清除缓存
localStorage.clear();
}
next();
});
// 跳转到主页
this.$router.push('/askRequest');
},
goToUpdateFace() {
this.$router.beforeEach((to, from, next) => {
if (from.path === '/updateFace') {
// 清除缓存的操作
// 可以使用 localStorage.clear() 或其他方法清除缓存
localStorage.clear();
}
next();
});
// 跳转到主页
this.$router.push('/updateFace');
},
showPopup() {
this.isPopupVisible = true;
},
hidePopup() {
this.isPopupVisible = false;
},
goToText() {
this.$router.beforeEach((to, from, next) => {
if (from.path === '/Text') {
// 清除缓存的操作
// 可以使用 localStorage.clear() 或其他方法清除缓存
localStorage.clear();
}
next();
});
// 跳转到主页
this.$router.push('/Text');
},
goToUpdateIDCard() {
this.$router.beforeEach((to, from, next) => {
if (from.path === '/updateIDCard') {
// 清除缓存的操作
// 可以使用 localStorage.clear() 或其他方法清除缓存
localStorage.clear();
}
next();
});
// 跳转到主页
this.$router.push('/updateIDCard');
},
goToViolation() {
this.$router.beforeEach((to, from, next) => {
if (from.path === '/Violation') {
// 清除缓存的操作
// 可以使用 localStorage.clear() 或其他方法清除缓存
localStorage.clear();
}
next();
});
// 跳转到主页
this.$router.push('/Violation');
},
goToVideo() {
this.$router.beforeEach((to, from, next) => {
if (from.path === '/Video') {
// 清除缓存的操作
// 可以使用 localStorage.clear() 或其他方法清除缓存
localStorage.clear();
}
next();
});
// 跳转到主页
this.$router.push('/Video');
},
InsertNum() {
this.hatNum = 3,
this.seatBeltNum = 3,
this.electFenceNum = 3,
this.InvoiceNum = 3,
this.idCardNum = 32,
this.textRecognitionNum = 32,
this.largeModelNum = 39,
this.faceRecognitionNum = 20,
this.computeOnlineNum = 90543,
this.realOnlineNum = 10057876
},
updateDateTime() {
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1;
const day = now.getDate();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const dayOfWeek = now.toLocaleString('zh-CN', { weekday: 'long' });
this.currentDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
this.currentTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
this.dayOfWeek = dayOfWeek;
},
echartsInit() {
this.myRectangleEchart = echarts.init(this.$refs.boxTwoRightBox);
let rightYData = this.rightYData;
// let rightXData = ['1', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
let sum = rightYData.reduce((acc, curr) => acc + curr, 0);
let average = sum / rightYData.length;
this.myRectangleEchart.setOption({
tooltip: {
trigger: 'item',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'category',
data: this.rightXData,
axisLabel: {
interval: 0, // 强制显示所有标签
// rotate: 45 // 旋转角度，可根据需要调整
},
axisPointer: {
type: 'shadow' // 在 x 轴每个单位下方显示阴影
}
},
yAxis: {
name: '单位',
type: 'value',
interval: 1000,
nameTextStyle: {
color: 'rgba(255, 255, 255, 0.5)',
fontSize: 20,
},
axisLabel: {
show: true,
color: 'rgba(255,255,255,0.5)', // 刻度标签颜色
fontSize: 12, // 刻度标签字号
fontFamily: 'Arial', // 刻度标签字体
fontWeight: 'bold', // 刻度标签字重
// formatter: function (value, index) {
// // 自定义刻度标签的显示格式，可以根据需要进行调整
// // return value + ' kg'; // 示例：在刻度值后面添加单位
// }
},
splitLine: {
show: true, // 是否显示 y 轴刻度线
lineStyle: {
color: 'rgba(255,255,255,0.2)', // 刻度线颜色
width: 1, // 刻度线宽度
type: 'solid' // 刻度线类型，可选值有：'solid', 'dashed', 'dotted'
}
}
},
series: [
{
name: '单位',
data: rightYData,
type: 'bar',
showBackground: true,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(255, 255, 255, 1)' }, // 渐变起始颜色
{ offset: 0.2, color: 'rgba(0, 150, 255, .85)' }, // 中间颜色
{ offset: 1, color: 'rgba(59, 225, 255, 0.7)' } // 渐变结束颜色
]),
barWidth: '45%',
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
},
itemStyle: {
barBorderRadius: [8, 8, 0, 0] // 设置柱子顶部左右两个角为圆角
},
markLine: {
data: [
{ yAxis: average, name: '平均值' } // 添加平均值线
]
}
}
]
})
},
},
data() {
return {
isPopupVisible: false,
currentDate: '',
currentTime: '',
dayOfWeek: '',//如果要星期的话可以直接用，此处为中文的星期
hatNum: '',
seatBeltNum: '',
electFenceNum: '',
InvoiceNum: '',
idCardNum: '',
textRecognitionNum: '',
largeModelNum: '',
faceRecognitionNum: '',
realOnlineNum: '',
computeOnlineNum: '',
rightYData: [5000, 6000, 8000, 3000, 7500, 6040, 9000, 4005, 6006, 5006, 4003, 8008],
rightXData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

61
src/views/largeScreen/onlineCount.vue
View File

@ -5,27 +5,56 @@
实时在线人数
</div>
<img class="largeScreenOnlineCountBackImg" src="../../assets/images/upBorder.png" alt="error">
<div class="boxLevelFourRightc boxLevelFourRightFstc">{{ realOnlineNum }} </div>
<div class="largeScreenOnlineNum largeScreenOnlineNumFst">{{ realOnlineNum }} </div>
</div>
<div class="largeScreenOnlineBox2">
<div class="largeScreenOnlineCount ">
当前统计在线人数
</div>
<img class="bottomborderc" src="../../assets/images/bottomBorder.png" alt="error">
<div class="boxLevelFourRightc boxLevelFourRightSecc">{{ computeOnlineNum }}</div>
<img class="largeScreenOnlineCountBackImg" src="../../assets/images/bottomBorder.png" alt="error">
<div class="largeScreenOnlineNum largeScreenOnlineNumSec">{{ computeOnlineNum }}</div>
</div>
</div>
</template>
<script>
import { getOnlineNum } from "@/api/largeScreen/largeScreen.js"
export default {
name: 'onlineCount',
data() {
return {
realOnlineNum: 0,
computeOnlineNum: 0
computeOnlineNum: 0,
largeScreenOnlineReflesh:''
}
},
created() {
this.largeScreenOnlineReflesh = setInterval(() => {
this.getOnlineNumLC();
}, 1 * 60 * 1000); // 5分钟 = 5 * 60 * 1000 毫秒
},
methods: {
getOnlineNumLC() {
getOnlineNum.then(res => {
if (res.code == 200) {
this.realOnlineNum = res.data.data.realOnlineNum
this.computeOnlineNum = res.data.data.computeOnlineNum
}else{
this.$message({
message: '请检查网络情况',
type: 'error'
});
}
}).catch(error => {
this.$message({
message: '系统失败，请联系管理员',
type: 'error'
});
});
}
}
}
</script>
@ -33,15 +62,12 @@ export default {
<style scoped>
.largeScreenOnlineBox {
display: flex;
height: 15rem;
width: 15rem;
flex-direction: column;
/* justify-content: space-between; */
}
.largeScreenOnlineBox2 {
width: 100%;
height: 50%;
position: relative;
}
@ -54,37 +80,32 @@ export default {
.largeScreenOnlineCountBackImg {
position: absolute;
bottom: 14rem;
bottom: 0.5rem;
left: 2rem;
opacity: .7;
}
/* 设置boxLevelFourRight的宽度为90%，边框半径为.6rem，字体大小为3rem，边框为透明度为0.7的白色，左边距为5%，上边距为2%，高度为7rem，z-index为1，颜色为白色，文本居中，相对定位 */
.boxLevelFourRightc {
.largeScreenOnlineNum {
width: 90%;
border-radius: .6rem;
font-size: 3rem;
/* border: .1rem solid rgba(255, 255, 255, .7); */
margin-left: 5%;
margin-top: 2%;
height: 7rem;
z-index: 1;
color: #fff;
text-align: center;
padding-top: 1.5rem;
position: relative;
letter-spacing: 0.1rem;
/* 文字间距 */
font-family: DIN-Bold;
/* 字体 */
/* border-image: linear-gradient(to right, transparent 0, rgb(0, 0, 0) 5px, transparent 100%) 1; */
/* background-color: rgb(150, 155, 17); */
}
.boxLevelFourRightFstc {
.largeScreenOnlineNumFst {
color: RGBA(103, 239, 255, 1);
}
.boxLevelFourRightSecc {
.largeScreenOnlineNumSec {
color: RGBA(101, 251, 181, 1);
}
</style>

112
src/views/largeScreen/rectAccessCountByMonth.vue Normal file
View File

@ -0,0 +1,112 @@
<template>
<div class="boxTwoRightBoxLC" ref="boxTwoRightBoxLC">
</div>
</template>
<script>
import { init, graphic } from 'echarts'
export default {
name: 'rectAccessCountByMonth',
data() {
return {
myRectangleEchartLC: '',
rightXDataLC: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
rightYDataLC: [1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000, 11000, 12000],
}
},
mounted() {
this.echartsInit();
},
methods: {
echartsInit() {
this.myRectangleEchartLC = init(this.$refs.boxTwoRightBoxLC);
let rightYData = this.rightYDataLC;
let sum = rightYData.reduce((acc, curr) => acc + curr, 0);
let average = sum / rightYData.length;
this.myRectangleEchartLC.setOption({
tooltip: {
trigger: 'item',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'category',
data: this.rightXDataLC,
axisLabel: {
interval: 0, // 强制显示所有标签
// rotate: 45 // 旋转角度，可根据需要调整
},
axisPointer: {
type: 'shadow' // 在 x 轴每个单位下方显示阴影
}
},
yAxis: {
name: '单位',
type: 'value',
interval: 1000,
nameTextStyle: {
color: 'rgba(255, 255, 255, 0.5)',
fontSize: 20,
},
axisLabel: {
show: true,
color: 'rgba(255,255,255,0.5)', // 刻度标签颜色
fontSize: 12, // 刻度标签字号
fontFamily: 'Arial', // 刻度标签字体
fontWeight: 'bold', // 刻度标签字重
// formatter: function (value, index) {
// // 自定义刻度标签的显示格式，可以根据需要进行调整
// // return value + ' kg'; // 示例：在刻度值后面添加单位
// }
},
splitLine: {
show: true, // 是否显示 y 轴刻度线
lineStyle: {
color: 'rgba(255,255,255,0.2)', // 刻度线颜色
width: 1, // 刻度线宽度
type: 'solid' // 刻度线类型，可选值有：'solid', 'dashed', 'dotted'
}
}
},
series: [
{
name: '单位',
data: rightYData,
type: 'bar',
showBackground: true,
color: new graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(255, 255, 255, 1)' }, // 渐变起始颜色
{ offset: 0.2, color: 'rgba(0, 150, 255, .85)' }, // 中间颜色
{ offset: 1, color: 'rgba(59, 225, 255, 0.7)' } // 渐变结束颜色
]),
barWidth: '45%',
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
},
itemStyle: {
barBorderRadius: [8, 8, 0, 0] // 设置柱子顶部左右两个角为圆角
},
markLine: {
data: [
{ yAxis: average, name: '平均值' } // 添加平均值线
]
}
}
]
})
},
}
}
</script>
<style>
.boxTwoRightBoxLC {
height: 90%;
width: 100%;
}
</style>

316
src/views/largeScreen/routeIcon.vue Normal file
View File

@ -0,0 +1,316 @@
<template>
<div class="route-icon">
<div class="boxMidTwoc">
<div class="boxMidLevelThreec">违章智能识别</div>
<div class="midIconMainc">
<div class="midIconc">
<a href="javascript:;" class="midIconLinkc">
<img src="../../assets/images/midOneIcon.png" alt="error" class="midIconLinkPicc"
@click="goToVideo"></a>
<div class="midTextc">安全帽识别</div>
<div class="hatInsertc"><span class="bigTextc">{{ hatNum }}</span><span
class="smallTextc">(次)</span>
</div>
</div>
<div class="midIconc">
<a href="javascript:;" class="midIconLinkc">
<img src="../../assets/images/midTwoIcon.png" alt="error" class="midIconLinkPicc"
@click="goToVideo"></a>
<div class="midTextc midTextSecc">安全带识别</div>
<div class="hatInsertc"><span class="bigTextc">{{ seatBeltNum }}</span><span
class="smallTextc">(次)</span>
</div>
</div>
<div class="midIconc ">
<a href="javascript:;" class="midIconLinkc">
<img src="../../assets/images/midThreeIcon.png" alt="error" class="midIconLinkPicc"
@click="goToVideo"></a>
<div class="midTextc midTextTrdc">电子围栏识别</div>
<div class="hatInsertc"><span class="bigTextc">{{ electFenceNum }}</span><span
class="smallTextc">(次)</span>
</div>
</div>
<div class="midIconc">
<a href="javascript:;" class="midIconLinkc">
<img src="../../assets/images/midFourIcon.png" alt="error" class="midIconLinkPicc"
@click="goToVideo"></a>
<div class="midTextc midTextFthc">更多场景扩展中</div>
</div>
</div>
</div>
<div class="boxMidTwoc">
<div class="boxMidLevelThreec">OCR识别</div>
<div class="midIconMainc">
<div class="midIconc">
<a href="javascript:;" class="midIconLinkc">
<img src="../../assets/images/midFiveIcon.png" alt="error" class="midIconLinkPicc"
@click="goToViolation"></a>
<div class="midTextc midTextFithc">发票识别 </div>
<div class="hatInsertc"><span class="bigTextc">{{ InvoiceNum }}</span><span
class="smallTextc">(次)</span>
</div>
</div>
<div class="midIconc">
<a href="javascript:;" class="midIconLinkc">
<img src="../../assets/images/midSixIcon.png" alt="error" class="midIconLinkPicc"
@click="goToUpdateIDCard"></a>
<div class="midTextc midTextSthc">身份证识别</div>
<div class="hatInsertc"><span class="bigTextc">{{ idCardNum }}</span><span
class="smallTextc">(次)</span>
</div>
</div>
<div class="midIconc ">
<a href="javascript:;" class="midIconLinkc">
<img src="../../assets/images/midSevenIcon.png" alt="error" class="midIconLinkPicc"
@click="goToText"></a>
<div class="midTextc midTextSevthc">文本识别</div>
<div class="hatInsertc"><span class="bigTextc">{{ textRecognitionNum }}</span>
<span class="smallTextc">(次)</span>
</div>
</div>
<div class="midIconc">
<a href="javascript:;" class="midIconLinkc">
<img src="../../assets/images/midFourIcon.png" alt="error" class="midIconLinkPicc"
@click="showPopup"></a>
<div class="midTextc midTextFthc">更多场景扩展中</div>
</div>
</div>
</div>
<div class="boxMidTwoc">
<div class="boxMidLevelThreec">其他拓展服务</div>
<div class="midIconMainc">
<div class="midIconc">
<a href="javascript:;" class="midIconLinkc">
<img src="../../assets/images/midEightIcon.png" alt="error" class="midIconLinkPicc"
@click="goToAskRequest"></a>
<div class="midTextc">大模型问答 </div>
<div class="hatInsertc"><span class="bigTextc">{{ largeModelNum }}</span><span
class="smallTextc">(次)</span>
</div>
</div>
<div class="midIconc">
<a href="javascript:;" class="midIconLinkc">
<img src="../../assets/images/midNineIcon.png" alt="error" class="midIconLinkPicc"
@click="goToUpdateFace"></a>
<div class="midTextc midTextFithc">人脸识别</div>
<div class="hatInsertc"><span class="bigTextc">{{ faceRecognitionNum }}</span><span
class="smallTextc">(次)</span>
</div>
</div>
<div class="midIconc">
<a href="javascript:;" class="midIconLinkc">
<img src="../../assets/images/midFourIcon.png" alt="error" class="midIconLinkPicc"
@click="showPopup"></a>
<div class="midTextc midTextFthc">更多场景扩展中</div>
</div>
<div class="midIconc ">
<div class="hatInsertc"><span class="bigTextc"></span><span class="smallTextc"></span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { getAlgoAppOverview } from '@/api/largeScreen/largeScreen.js'
export default {
name: 'routeIcon',
data() {
return {
hatNum: 0,
seatBeltNum: 0,
electFenceNum: 0,
InvoiceNum: 0,
idCardNum: 0,
textRecognitionNum: 0,
largeModelNum: 0,
faceRecognitionNum: 0,
routeIconNum: ''
}
},
// created() {
// this.routeIconNum = setInterval(() => {
// this.getAlgoAppOverviewLC();
// }, 1000);
// },
methods: {
getAlgoAppOverviewLC() {
getAlgoAppOverview(4).then(res => {
try {
if (res.code == 200) {
this.hatNum = res.data.hatNum;
this.seatBeltNum = res.data.seatBeltNum;
this.electFenceNum = res.data.electFenceNum;
this.InvoiceNum = res.data.InvoiceNum;
this.idCardNum = res.data.idCardNum;
this.textRecognitionNum = res.data.textRecognitionNum;
this.largeModelNum = res.data.largeModelNum;
this.faceRecognitionNum = res.data.faceRecognitionNum;
}
} catch (error) {
this.$modal.msgError("算法应用次数获取失败，请刷新页面或者请求管理员");
this.$modal.closeLoading();
}
}).catch(error => {
this.$modal.msgError("算法应用次数获取失败，请刷新页面或者请求管理员");
this.$modal.closeLoading();
});
},
goToAskRequest() {
this.$router.beforeEach((to, from, next) => {
if (from.path === '/askRequest') {
localStorage.clear();
}
next();
});
this.$router.push('/askRequest');
},
goToUpdateFace() {
this.$router.beforeEach((to, from, next) => {
if (from.path === '/updateFace') {
localStorage.clear();
}
next();
});
this.$router.push('/updateFace');
},
showPopup() {
this.isPopupVisible = true;
},
hidePopup() {
this.isPopupVisible = false;
},
goToText() {
this.$router.beforeEach((to, from, next) => {
if (from.path === '/Text') {
localStorage.clear();
}
next();
});
this.$router.push('/Text');
},
goToUpdateIDCard() {
this.$router.beforeEach((to, from, next) => {
if (from.path === '/updateIDCard') {
localStorage.clear();
}
next();
});
this.$router.push('/updateIDCard');
},
goToViolation() {
this.$router.beforeEach((to, from, next) => {
if (from.path === '/Violation') {
localStorage.clear();
}
next();
});
this.$router.push('/Violation');
},
goToVideo() {
this.$router.beforeEach((to, from, next) => {
if (from.path === '/Video') {
localStorage.clear();
}
next();
});
this.$router.push('/Video');
},
}
}
</script>
<style scoped>
.boxMidTwoc {
border-radius: .5rem;
margin-bottom: 1rem;
margin-left: 1rem;
margin-right: 1rem;
flex: 8;
height: 15rem;
border: 1px solid rgba(0, 255, 255, .3);
}
.boxMidLevelThreec {
position: absolute;
color: #ffffff;
padding-left: 1.5rem;
padding-top: 0.5rem;
font-size: 1rem;
letter-spacing: 0.2rem;
opacity: .8;
}
.midIconMainc {
color: #ffffff;
display: flex;
margin-top: 2.5rem;
height: 9rem;
width: 100%;
}
.midIconc {
flex: 1;
padding-left: 1rem;
padding-top: 1.5rem;
height: 7.5rem;
}
.midIconLinkPicc {
margin-top: -2rem;
margin-left: 0.8rem;
height: 8rem;
}
.midTextc {
margin-left: 1rem;
font-size: 1.2rem;
opacity: .5;
}
.hatInsertc {
margin-left: 2.5rem;
font-size: 0.8rem;
}
.hatInsertc .bigTextc {
font-size: 1.9rem;
}
.hatInsertc .smallTextc {
font-size: 1rem;
margin-left: 0.4rem;
}
.midTextSecc {
margin-left: 0.5rem
}
.midTextTrdc {
margin-left: 0;
}
.midTextFthc {
margin-left: -0.3rem;
}
.midTextFithc {
margin-left: 1.5rem;
}
.midTextSthc {
margin-left: 0.7rem;
}
.midTextSevthc {
margin-left: 1.8rem;
}
</style>

9
src/views/updateIDCard/listIDResultShow.vue
View File

@ -30,8 +30,7 @@
</template>
<script>
import { getListIDSearchData } from "@/api/updateIDCard/updateIDCard.js";
import { getListIDSearchData } from '@/api/updateIDCard/updateIDCard.js'
export default {
data() {
return {
@ -47,16 +46,13 @@ export default {
created() {
this.interval_IDPie = setInterval(() => {
this.getListSearchData();
}, 1 * 60 * 1000); // 5分钟 = 5 * 60 * 1000 毫秒
}, 1 * 60 * 1000); // 1分钟 = 1 * 60 * 1000 毫秒
},
methods: {
updateScrollHeightResult() {
// 假设每行高度为2rem
const rowHeight = 2 ;
const tableHeight = this.recognition.length * rowHeight;
// console.log('tableHeight'+tableHeight);
console.log(this.recognition.length);
if(this.recognition.length<=7){
this.num = 0
}else{
@ -74,7 +70,6 @@ export default {
},
getListSearchData() {
getListIDSearchData(1).then(res => {
try {
if (res.code == 200) {
// let data = res.data; // 假设从后端获取的数据在 res.data 中

9
src/views/updateIDCard/listSevericeResWatch.vue
View File

@ -33,7 +33,6 @@ export default {
num: '',
ServerResult: [],
ServerResult_tmp: {}, // 临时存储单个数据的对象
maxRecognitionCount: 30 // 最多展示30条数据
}
},
mounted() {
@ -50,19 +49,14 @@ export default {
},
methods: {
updateScrollHeightWatch() {
// 假设每行高度为2rem
const rowHeight = 2 ;
const tableHeight = this.ServerResult.length * rowHeight;
// console.log('tableHeight'+tableHeight);
console.log(this.ServerResult.length);
if(this.ServerResult.length<=7){
this.num = 0
}else{
this.num = 10 * tableHeight ;
}
const style = document.querySelector('style');
style.textContent = this.keyframesWatch();
},
@ -75,12 +69,9 @@ export default {
},
getListWatchData() {
getListIDWatchData(1).then(res => {
try {
if (res.code == 200) {
// let data = res.data; // 假设从后端获取的数据在 res.data 中
for (const data of res.data) {
// 将值逐个赋给ServerResult_tmp对象的对应属性
this.ServerResult_tmp.ip = data.invokeIp;
this.ServerResult_tmp.returnTime = data.updateTime;
this.ServerResult_tmp.responseTime = data.responseLong + 'ms';