人脸识别与大模型问答
This commit is contained in:
parent
6c8650d220
commit
cc55517bc8
|
|
@ -14,7 +14,7 @@
|
||||||
"clipboard": "2.0.8",
|
"clipboard": "2.0.8",
|
||||||
"core-js": "3.25.3",
|
"core-js": "3.25.3",
|
||||||
"crypto-js": "^4.2.0",
|
"crypto-js": "^4.2.0",
|
||||||
"echarts": "5.4.0",
|
"echarts": "^5.4.0",
|
||||||
"echarts-gl": "^2.0.9",
|
"echarts-gl": "^2.0.9",
|
||||||
"element-ui": "2.15.14",
|
"element-ui": "2.15.14",
|
||||||
"file-saver": "2.0.5",
|
"file-saver": "2.0.5",
|
||||||
|
|
@ -6992,8 +6992,9 @@
|
||||||
},
|
},
|
||||||
"node_modules/echarts": {
|
"node_modules/echarts": {
|
||||||
"version": "5.4.0",
|
"version": "5.4.0",
|
||||||
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.0.tgz",
|
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.0.tgz",
|
||||||
"integrity": "sha512-uPsO9VRUIKAdFOoH3B0aNg7NRVdN7aM39/OjovjO9MwmWsAkfGyeXJhK+dbRi51iDrQWliXV60/XwLA7kg3z0w==",
|
"integrity": "sha512-uPsO9VRUIKAdFOoH3B0aNg7NRVdN7aM39/OjovjO9MwmWsAkfGyeXJhK+dbRi51iDrQWliXV60/XwLA7kg3z0w==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"tslib": "2.3.0",
|
"tslib": "2.3.0",
|
||||||
"zrender": "5.4.0"
|
"zrender": "5.4.0"
|
||||||
|
|
|
||||||
|
|
@ -41,7 +41,7 @@
|
||||||
"clipboard": "2.0.8",
|
"clipboard": "2.0.8",
|
||||||
"core-js": "3.25.3",
|
"core-js": "3.25.3",
|
||||||
"crypto-js": "^4.2.0",
|
"crypto-js": "^4.2.0",
|
||||||
"echarts": "5.4.0",
|
"echarts": "^5.4.0",
|
||||||
"echarts-gl": "^2.0.9",
|
"echarts-gl": "^2.0.9",
|
||||||
"element-ui": "2.15.14",
|
"element-ui": "2.15.14",
|
||||||
"file-saver": "2.0.5",
|
"file-saver": "2.0.5",
|
||||||
|
|
@ -49,7 +49,6 @@
|
||||||
"force": "^0.0.3",
|
"force": "^0.0.3",
|
||||||
"fuse.js": "6.4.3",
|
"fuse.js": "6.4.3",
|
||||||
"highlight.js": "9.18.5",
|
"highlight.js": "9.18.5",
|
||||||
"vue-grid-layout": "^2.4.0",
|
|
||||||
"js-beautify": "1.13.0",
|
"js-beautify": "1.13.0",
|
||||||
"js-cookie": "3.0.1",
|
"js-cookie": "3.0.1",
|
||||||
"jsencrypt": "3.0.0-rc.1",
|
"jsencrypt": "3.0.0-rc.1",
|
||||||
|
|
@ -61,6 +60,7 @@
|
||||||
"vue": "2.6.12",
|
"vue": "2.6.12",
|
||||||
"vue-count-to": "1.0.13",
|
"vue-count-to": "1.0.13",
|
||||||
"vue-cropper": "0.5.5",
|
"vue-cropper": "0.5.5",
|
||||||
|
"vue-grid-layout": "^2.4.0",
|
||||||
"vue-meta": "2.4.0",
|
"vue-meta": "2.4.0",
|
||||||
"vue-router": "3.4.9",
|
"vue-router": "3.4.9",
|
||||||
"vuedraggable": "2.24.3",
|
"vuedraggable": "2.24.3",
|
||||||
|
|
|
||||||
|
|
@ -37,12 +37,12 @@ export const constantRoutes = [
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
component: () => import('@/views/largeScreen/largeScreen'),
|
component: () => import('@/views/home'),
|
||||||
hidden: true
|
hidden: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/index',
|
path: '/index',
|
||||||
component: () => import('@/views/largeScreen/largeScreen'),
|
component: () => import('@/views/home'),
|
||||||
hidden: true
|
hidden: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -115,7 +115,6 @@ service.interceptors.request.use(config => {
|
||||||
|
|
||||||
// 响应拦截器
|
// 响应拦截器
|
||||||
service.interceptors.response.use(res => {
|
service.interceptors.response.use(res => {
|
||||||
console.log(res)
|
|
||||||
if (res.headers.encryptresponse && !res.data.hasOwnProperty('code')) {
|
if (res.headers.encryptresponse && !res.data.hasOwnProperty('code')) {
|
||||||
res.data = JSON.parse(decryptCBC(res.data))
|
res.data = JSON.parse(decryptCBC(res.data))
|
||||||
console.log(res.data)
|
console.log(res.data)
|
||||||
|
|
|
||||||
|
|
@ -26,9 +26,9 @@ export default {
|
||||||
|
|
||||||
.boxHeaderText {
|
.boxHeaderText {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
align-content: center;
|
padding-top: 1.5%;
|
||||||
margin-left: 6%;
|
margin-left: 6%;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
letter-spacing: 0.1rem;
|
letter-spacing: 0.3rem;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,31 +1,421 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="html-container">
|
<div class="body-container">
|
||||||
<largeScreenHeader></largeScreenHeader>
|
<el-menu class="el-menu-demo" mode="horizontal"
|
||||||
<div id="main">
|
style="position: absolute;top:50px;left: 50px; background-color: transparent;width: 50%;font-size: 20px;border-bottom:none">
|
||||||
|
<el-submenu index="1" style="background-color: transparent">
|
||||||
|
<template slot="title">样本库</template>
|
||||||
|
<el-menu-item index="2-1" @click="handleClick('/dataSetCategory');">样本类型管理</el-menu-item>
|
||||||
|
<el-menu-item index="2-2" @click="handleClick('/dataSetFile');">数据集管理</el-menu-item>
|
||||||
|
<!-- <el-menu-item index="2-2" @click="handleClick('/dataSetTask');">标注任务分配</el-menu-item>-->
|
||||||
|
<el-menu-item index="2-2" @click="handleClick('/dataSetLog');">标注日志</el-menu-item>
|
||||||
|
<el-menu-item index="2-3" @click="handleClick('/dataSetModel');">模型管理</el-menu-item>
|
||||||
|
<el-menu-item index="2-3" @click="handleClick('/dataSetAlgorithm');">算法评价</el-menu-item>
|
||||||
|
</el-submenu>
|
||||||
|
</el-menu>
|
||||||
|
<div class="container">
|
||||||
|
<div class="container-left">
|
||||||
|
<div class="left-top">
|
||||||
|
<box-header box-header-text="平台简介"></box-header>
|
||||||
|
<intro-video></intro-video>
|
||||||
|
</div>
|
||||||
|
<div class="left-bottom">
|
||||||
|
<box-header box-header-text="算法使用统计"></box-header>
|
||||||
|
<div class="pie" ref="pie"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container-middle">
|
||||||
|
<div class="box-header">
|
||||||
|
<div class="box-header-text">算法应用概览</div>
|
||||||
|
</div>
|
||||||
|
<route-icon></route-icon>
|
||||||
|
</div>
|
||||||
|
<div class="container-right">
|
||||||
|
<div class="right-top">
|
||||||
|
<box-header box-header-text="月度访问统计"></box-header>
|
||||||
|
<div class="barChart" ref="barChart">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right-bottom">
|
||||||
|
<box-header box-header-text="算法使用统计"></box-header>
|
||||||
|
<online-count></online-count>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import boxHeader from '@/views/components/boxHeader.vue'
|
import BoxHeader from '@/views/components/boxHeader.vue'
|
||||||
import pie3D from '@/views/largeScreen/pie3D.vue'
|
import introVideo from "@/views/largeScreen/introVideo.vue";
|
||||||
import onlineCount from '@/views/largeScreen/onlineCount.vue';
|
import {graphic, init} from "echarts";
|
||||||
import introVideo from '@/views/largeScreen/introVideo.vue';
|
import onlineCount from "@/views/largeScreen/onlineCount.vue";
|
||||||
import routeIcon from '@/views/largeScreen//routeIcon.vue';
|
import routeIcon from "@/views/largeScreen/routeIcon.vue";
|
||||||
import rectAccessCountByMonth from '@/views/largeScreen/rectAccessCountByMonth.vue';
|
|
||||||
import largeScreenHeader from "@/components/LargeScreen/index.vue";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
largeScreenHeader,
|
routeIcon,
|
||||||
boxHeader,
|
|
||||||
pie3D,
|
|
||||||
onlineCount,
|
onlineCount,
|
||||||
introVideo,
|
introVideo,
|
||||||
routeIcon,
|
BoxHeader
|
||||||
rectAccessCountByMonth,
|
},
|
||||||
|
mounted() {
|
||||||
|
// 图表初始化
|
||||||
|
this.pieInit();
|
||||||
|
this.echartsInit();
|
||||||
|
},
|
||||||
|
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],
|
||||||
|
// 配置数据,包含每个扇区的名称、值和颜色
|
||||||
|
optionData: [
|
||||||
|
{
|
||||||
|
name: '身份证识别',
|
||||||
|
value: 823,
|
||||||
|
itemStyle: {
|
||||||
|
color: 'RGBA(153, 242, 248, 1)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '人脸识别',
|
||||||
|
value: 526,
|
||||||
|
itemStyle: {
|
||||||
|
color: 'RGBA(13, 104, 100, 1)',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '安全帽识别',
|
||||||
|
value: 418,
|
||||||
|
itemStyle: {
|
||||||
|
color: 'RGBA(84, 158, 230, 1)'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '大模型问答',
|
||||||
|
value: 578,
|
||||||
|
itemStyle: {
|
||||||
|
color: 'RGBA(134, 157, 233, 1)'
|
||||||
|
},
|
||||||
|
}
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleClick(route) {
|
||||||
|
if (route === 'showPopup') {
|
||||||
|
this.showPopup();
|
||||||
|
} else {
|
||||||
|
this.$router.push(route);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 初始化3D饼状图
|
||||||
|
pieInit() {
|
||||||
|
let myChart = this.$echarts.init(this.$refs.pie);
|
||||||
|
this.option = this.getPie3D(this.optionData, 0.85);
|
||||||
|
myChart.setOption(this.option);
|
||||||
|
},
|
||||||
|
// 生成3D饼图的配置项
|
||||||
|
getPie3D(pieData, internalDiameterRatio) {
|
||||||
|
let series = [];
|
||||||
|
let sumValue = pieData.reduce((acc, cur) => acc + cur.value, 0);
|
||||||
|
let startValue = 0;
|
||||||
|
const k = 1 - internalDiameterRatio;
|
||||||
|
|
||||||
|
// 按值从大到小排序并生成系列项
|
||||||
|
pieData.sort((a, b) => b.value - a.value).forEach((item, i) => {
|
||||||
|
const endValue = startValue + item.value;
|
||||||
|
const seriesItem = {
|
||||||
|
name: item.name || `series${i}`,
|
||||||
|
type: 'surface',
|
||||||
|
parametric: true,
|
||||||
|
wireframe: {show: false},
|
||||||
|
pieData: item,
|
||||||
|
pieStatus: {selected: false, hovered: false, k: k},
|
||||||
|
center: ['60%', '100%'],
|
||||||
|
radius: '60%',
|
||||||
|
itemStyle: item.itemStyle || {}
|
||||||
|
};
|
||||||
|
seriesItem.pieData.startRatio = startValue / sumValue;
|
||||||
|
seriesItem.pieData.endRatio = endValue / sumValue;
|
||||||
|
seriesItem.parametricEquation = this.getParametricEquation(
|
||||||
|
seriesItem.pieData.startRatio,
|
||||||
|
seriesItem.pieData.endRatio,
|
||||||
|
false,
|
||||||
|
false,
|
||||||
|
k,
|
||||||
|
item.value
|
||||||
|
);
|
||||||
|
startValue = endValue;
|
||||||
|
series.push(seriesItem);
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
legend: this.getLegendConfig(pieData),
|
||||||
|
tooltip: this.getTooltipConfig(series),
|
||||||
|
xAxis3D: {min: -1, max: 1},
|
||||||
|
yAxis3D: {min: -1, max: 1},
|
||||||
|
zAxis3D: {min: -1, max: 1},
|
||||||
|
grid3D: this.getGrid3DConfig(series),
|
||||||
|
series: series
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
// 图例配置
|
||||||
|
getLegendConfig(pieData) {
|
||||||
|
return {
|
||||||
|
data: pieData.map(item => ({name: item.name, value: item.value})),
|
||||||
|
orient: 'vertical',
|
||||||
|
right: 0,
|
||||||
|
itemGap: 0,
|
||||||
|
inactiveColor: '#ccc',
|
||||||
|
textStyle: {
|
||||||
|
lineHeight: 20,
|
||||||
|
color: '#A1E2FF',
|
||||||
|
fontSize: '1rem',
|
||||||
|
padding: [30, 60, 10, 20],
|
||||||
|
},
|
||||||
|
itemHeight: 14,
|
||||||
|
itemWidth: 14,
|
||||||
|
show: true,
|
||||||
|
formatter: name => {
|
||||||
|
const target = pieData.find(item => item.name === name).value;
|
||||||
|
return `${name}:\n${target}`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
// 提示框配置
|
||||||
|
getTooltipConfig(series) {
|
||||||
|
return {
|
||||||
|
formatter: params => {
|
||||||
|
if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
|
||||||
|
let bfb = ((series[params.seriesIndex].pieData.endRatio - series[params.seriesIndex].pieData.startRatio) * 100).toFixed(2);
|
||||||
|
return `${params.seriesName}<br/>
|
||||||
|
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>
|
||||||
|
${bfb}%`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
// 3D 网格配置
|
||||||
|
getGrid3DConfig(series) {
|
||||||
|
const boxHeight = this.getHeight3D(series, 1);
|
||||||
|
return {
|
||||||
|
show: false,
|
||||||
|
boxHeight: boxHeight,
|
||||||
|
top: '0%',
|
||||||
|
left: '-20%',
|
||||||
|
viewControl: {
|
||||||
|
alpha: 25,
|
||||||
|
distance: 200,
|
||||||
|
autoRotate: true
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
// 计算3D饼图的高度
|
||||||
|
getHeight3D(series, height) {
|
||||||
|
const maxValue = Math.max(...series.map(item => item.pieData.value));
|
||||||
|
return height * 25 / maxValue;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 生成扇形曲面的参数方程
|
||||||
|
getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
|
||||||
|
const midRatio = (startRatio + endRatio) / 2;
|
||||||
|
const startRadian = startRatio * Math.PI * 2;
|
||||||
|
const endRadian = endRatio * Math.PI * 2;
|
||||||
|
const midRadian = midRatio * Math.PI * 2;
|
||||||
|
const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
|
||||||
|
const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
|
||||||
|
const hoverRate = isHovered ? 1.05 : 1;
|
||||||
|
|
||||||
|
return {
|
||||||
|
u: {min: -Math.PI, max: Math.PI * 3, step: Math.PI / 32},
|
||||||
|
v: {min: 0, max: Math.PI * 2, step: Math.PI / 20},
|
||||||
|
x: (u, v) => {
|
||||||
|
if (u < startRadian) return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
if (u > endRadian) return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
},
|
||||||
|
y: (u, v) => {
|
||||||
|
if (u < startRadian) return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
if (u > endRadian) return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||||
|
},
|
||||||
|
z: (u, v) => (Math.sin(v) > 0 ? 1 * h : -1)
|
||||||
|
};
|
||||||
|
},
|
||||||
|
// 格式化浮点数到两位小数
|
||||||
|
fomatFloat(num, n) {
|
||||||
|
let f = parseFloat(num);
|
||||||
|
if (isNaN(f)) return false;
|
||||||
|
f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n);
|
||||||
|
return f;
|
||||||
|
},
|
||||||
|
// 绑定鼠标事件
|
||||||
|
bindListen(myChart) {
|
||||||
|
// 绑定鼠标事件逻辑,可以根据需求实现
|
||||||
|
},
|
||||||
|
echartsInit() {
|
||||||
|
this.myRectangleEchartLC = init(this.$refs.barChart);
|
||||||
|
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>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
&-left,
|
||||||
|
&-middle,
|
||||||
|
&-right {
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-left {
|
||||||
|
width: 30%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.left-top,
|
||||||
|
.left-bottom {
|
||||||
|
height: 49%;
|
||||||
|
border: 1px solid rgba(204, 252, 253, 0.3);
|
||||||
|
border-radius: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-bottom {
|
||||||
|
.pie {
|
||||||
|
width: 100%;
|
||||||
|
height: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-middle {
|
||||||
|
width: 50%;
|
||||||
|
border: 1px solid rgba(204, 252, 253, 0.3);
|
||||||
|
|
||||||
|
.box-header {
|
||||||
|
width: 100%;
|
||||||
|
height: 5%;
|
||||||
|
background: url("../assets/images/boxLevelTwoHeader.svg") no-repeat center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
.box-header-text {
|
||||||
|
height: 100%;
|
||||||
|
padding-top: 0.8%;
|
||||||
|
margin-left: 6%;
|
||||||
|
color: #FFFFFF;
|
||||||
|
letter-spacing: 0.1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-right {
|
||||||
|
width: 30%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.right-top,
|
||||||
|
.right-bottom {
|
||||||
|
height: 49%;
|
||||||
|
border: 1px solid rgba(204, 252, 253, 0.3);
|
||||||
|
border-radius: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-top {
|
||||||
|
.barChart {
|
||||||
|
width: 100%;
|
||||||
|
height: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,22 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="body-container">
|
<div class="body-container">
|
||||||
<div class="intro-video-box">
|
<div class="container">
|
||||||
<video controls :poster="poster" width="100%" height="50%">
|
<div class="container-top">
|
||||||
<source :src="videoSrc" type="video/mp4"/>
|
<video controls :poster="poster" width="100%" height="100%">
|
||||||
不好意思,视频走丢了
|
<source :src="videoSrc" type="video/mp4"/>
|
||||||
</video>
|
不好意思,视频走丢了
|
||||||
</div>
|
</video>
|
||||||
<div class="intro-video-content">
|
|
||||||
<div class="intro-video-title">
|
|
||||||
<img src="@/assets/icons/svg/introVideoIcon.png" alt="error" class="intro-video-icon"/>
|
|
||||||
<span class="title">AI平台简介</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="intro-video-text">
|
<div class="container-bottom">
|
||||||
安徽博诺思信息科技有限公司是一家与中国科学技术大学、中国科学技术大学先进技术研究院校企共建高新技术企业,落户于中国科学技术大学先进技术研究院,注册资本1515.15万元。专业从事人工智能、大数据分析、物联网技术研究和电力、教育行业的应用系统自主研发、系统集成、安防监控、咨询和技术服务的高新技术企业。
|
<div class="intro-video-title">
|
||||||
公司依托科大先进技术研究院、合肥工业大学、安徽大学等高校和研究院丰富的技术资源和研发成果,凭借先进的经营理念,坚持“求实、创新”的企业精神,本着以质量求生存,以服务树口碑的经营宗旨,不断开拓市场,为客户提供解决方案和应用效果。
|
<img src="@/assets/icons/svg/introVideoIcon.png" alt="error" class="intro-video-icon"/>
|
||||||
公司秉承专业、专注的服务理念、关注客户需求、执着于追求质量与服务的结合、致力于成为软件开发和系统集成行业、物联网技术行业、智能安防行业的中坚力量。我们期待着与您携手共进、同创美好未来。
|
<span class="title">AI平台简介</span>
|
||||||
|
</div>
|
||||||
|
<div class="intro-video-text">
|
||||||
|
安徽博诺思信息科技有限公司是一家与中国科学技术大学、中国科学技术大学先进技术研究院校企共建高新技术企业,落户于中国科学技术大学先进技术研究院,注册资本1515.15万元。专业从事人工智能、大数据分析、物联网技术研究和电力、教育行业的应用系统自主研发、系统集成、安防监控、咨询和技术服务的高新技术企业。
|
||||||
|
公司依托科大先进技术研究院、合肥工业大学、安徽大学等高校和研究院丰富的技术资源和研发成果,凭借先进的经营理念,坚持“求实、创新”的企业精神,本着以质量求生存,以服务树口碑的经营宗旨,不断开拓市场,为客户提供解决方案和应用效果。
|
||||||
|
公司秉承专业、专注的服务理念、关注客户需求、执着于追求质量与服务的结合、致力于成为软件开发和系统集成行业、物联网技术行业、智能安防行业的中坚力量。我们期待着与您携手共进、同创美好未来。
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -26,8 +28,8 @@ export default {
|
||||||
props: {
|
props: {
|
||||||
videoSrc: {
|
videoSrc: {
|
||||||
type: String,
|
type: String,
|
||||||
default:'',
|
default: '',
|
||||||
/* default: () => require('@/assets/video/video.mp4'),*/
|
/* default: () => require('@/assets/video/video.mp4'),*/
|
||||||
},
|
},
|
||||||
poster: {
|
poster: {
|
||||||
type: String,
|
type: String,
|
||||||
|
|
@ -37,42 +39,51 @@ export default {
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style lang="scss" scoped>
|
||||||
.intro-video-box,
|
.container {
|
||||||
.intro-video-content {
|
width: 100%;
|
||||||
background-color: rgba(10, 77, 123, 0.5);
|
height: 100%;
|
||||||
}
|
|
||||||
|
|
||||||
.intro-video-content {
|
&-top {
|
||||||
height: 35%;
|
width: 100%;
|
||||||
padding: 2%;
|
height: 60%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.intro-video-icon {
|
&-bottom {
|
||||||
height: 1.2rem;
|
width: 100%;
|
||||||
padding-left: 0.2rem;
|
height: 40%;
|
||||||
opacity: 0.4;
|
padding: 1%;
|
||||||
}
|
background-color: rgba(10, 77, 123, 0.5);
|
||||||
|
|
||||||
.intro-video-title {
|
.intro-video-title {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
.intro-video-icon {
|
||||||
font-size: 16px;
|
height: 1.2rem;
|
||||||
margin: 1%;
|
padding-left: 0.2rem;
|
||||||
letter-spacing: 1px;
|
opacity: 0.4;
|
||||||
color: rgba(132, 195, 254, 1);
|
}
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro-video-text {
|
.title {
|
||||||
height: 70%;
|
font-size: 16px;
|
||||||
overflow-y: scroll;
|
margin: 1%;
|
||||||
padding: 2%;
|
letter-spacing: 2px;
|
||||||
color: #B3D0E1;
|
color: rgba(132, 195, 254, 1);
|
||||||
font-size: 14px;
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro-video-text {
|
||||||
|
height: 70%;
|
||||||
|
overflow-y: scroll;
|
||||||
|
padding: 2%;
|
||||||
|
color: #B3D0E1;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 隐藏滚动条 */
|
/* 隐藏滚动条 */
|
||||||
|
|
@ -84,4 +95,5 @@ export default {
|
||||||
-ms-overflow-style: none; /* IE 10+ */
|
-ms-overflow-style: none; /* IE 10+ */
|
||||||
scrollbar-width: none; /* Firefox */
|
scrollbar-width: none; /* Firefox */
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,6 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getOnlineNum } from "@/api/largeScreen/largeScreen.js";
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'onlineCount',
|
name: 'onlineCount',
|
||||||
|
|
@ -34,19 +33,6 @@ export default {
|
||||||
clearInterval(this.largeScreenOnlineRefresh);
|
clearInterval(this.largeScreenOnlineRefresh);
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async getOnlineNumLC() {
|
|
||||||
try {
|
|
||||||
const res = await getOnlineNum();
|
|
||||||
if (res.code === 200) {
|
|
||||||
this.realOnlineNum = res.data.data.realOnlineNum;
|
|
||||||
this.computeOnlineNum = res.data.data.computeOnlineNum;
|
|
||||||
} else {
|
|
||||||
this.showMessage('请检查网络情况', 'error');
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
this.showMessage('系统失败,请联系管理员', 'error');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
showMessage(message, type) {
|
showMessage(message, type) {
|
||||||
this.$message({message, type});
|
this.$message({message, type});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -111,21 +111,7 @@ export default {
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
|
||||||
this.getAlgoAppOverviewLC();
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
getAlgoAppOverviewLC() {
|
|
||||||
getAlgoAppOverview(4)
|
|
||||||
.then(res => {
|
|
||||||
if (res.code == 200) {
|
|
||||||
Object.assign(this, res.data);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
this.$modal.msgError("算法应用次数获取失败,请刷新页面或者请求管理员");
|
|
||||||
});
|
|
||||||
},
|
|
||||||
handleClick(route) {
|
handleClick(route) {
|
||||||
if (route === 'showPopup') {
|
if (route === 'showPopup') {
|
||||||
this.showPopup();
|
this.showPopup();
|
||||||
|
|
|
||||||
|
|
@ -307,7 +307,6 @@ export default {
|
||||||
this.loginForm.mobile = this.loginForm.username
|
this.loginForm.mobile = this.loginForm.username
|
||||||
this.$store.dispatch('GetPhoneCode', this.loginForm)
|
this.$store.dispatch('GetPhoneCode', this.loginForm)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
console.log(res)
|
|
||||||
if (res.code === 200) {
|
if (res.code === 200) {
|
||||||
this.loginForm.phoneUuid = res.data
|
this.loginForm.phoneUuid = res.data
|
||||||
this.$message.success('验证码发送成功')
|
this.$message.success('验证码发送成功')
|
||||||
|
|
|
||||||
|
|
@ -117,7 +117,6 @@ export default {
|
||||||
let formData = new FormData();
|
let formData = new FormData();
|
||||||
formData.append('file', file);
|
formData.append('file', file);
|
||||||
recognition(formData).then(res => {
|
recognition(formData).then(res => {
|
||||||
console.log(res)
|
|
||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
let data = res.data;
|
let data = res.data;
|
||||||
this.faceUrl = data.faceAddress;
|
this.faceUrl = data.faceAddress;
|
||||||
|
|
|
||||||
|
|
@ -49,13 +49,9 @@ export default {
|
||||||
getPieData(1).then(res => {
|
getPieData(1).then(res => {
|
||||||
try {
|
try {
|
||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
|
|
||||||
this.pieEntityNameValue.pieright = (res.data.correctNu / res.data.totalNu * 100);
|
this.pieEntityNameValue.pieright = (res.data.correctNu / res.data.totalNu * 100);
|
||||||
|
|
||||||
this.pieEntityNameValue.pieerror = (res.data.incorrectNu / res.data.totalNu * 100);
|
this.pieEntityNameValue.pieerror = (res.data.incorrectNu / res.data.totalNu * 100);
|
||||||
|
|
||||||
this.pieIDResultCount()
|
this.pieIDResultCount()
|
||||||
|
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
this.$modal.msgError("矩形图加载失败,请刷新页面或者请求管理员");
|
this.$modal.msgError("矩形图加载失败,请刷新页面或者请求管理员");
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue