Skip to content

A
AI推理平台
Commit f787c894 authored by lei's avatar lei
Browse files
Options

fix:监听数据chart图字段，audio问题，视频下拉框默认第一个等

parent 4731f9ca
Show whitespace changes
Inline Side-by-side
Showing with 135 additions and 127 deletions
.env.prod
View file @ f787c894
# backend service base url, prod environment
VITE_SERVICE_BASE_URL=https://mock.apifox.cn/m1/3109515-0-default
# VITE_SERVICE_BASE_URL=https://192.168.5.223:
VITE_VIDEO_URL=ws://192.168.5.223:9999
VITE_SERVICE_URL=https://192.168.5.223:9996
VITE_WEBSOCKET_URL=ws://192.168.5.223:9999
# other backend service base url, prod environment
VITE_OTHER_SERVICE_BASE_URL= `{
"demo": "http://10.0.20.81:9529"
"demo": "http://192.168.5.223:9999"
}`
.gitignore
View file @ f787c894
......@@ -33,3 +33,4 @@ package-lock.json
yarn.lock
.VSCodeCounter
*.zip
src/views/_builtin/demo/index.vue
View file @ f787c894
......@@ -102,7 +102,7 @@
<!-- 管理后台 -->
<div class="header-wrap">
<i class="tracking-in-contract">智慧矿山AI推理平台</i>
<i class="tracking-in-contract">弘基智能AI预警平台</i>
</div>
<NModal v-model:show="videoModal">
......@@ -131,13 +131,13 @@
<img src="../../../assets/jiankong1.png"
style="height: 80px; display: inline-block; border-radius: 50%; width: 80px; box-shadow: 0 0 10px rgba(0,0,0,.3);" />
<br />
<i>在线监控: {{ form[0] || 0 }} 个 </i>
<i>在线监控: {{ form.online || 0 }} 个 </i>
</div>
<div>
<img src="../../../assets/jiankong2.png"
style="height: 80px; display: inline-block; border-radius: 50%; width: 80px; box-shadow: 0 0 10px rgba(0,0,0,.3);" />
<br />
<i>离线监控: {{ form[1] || 0 }} 个 </i>
<i>离线监控: {{ form.offline || 0 }} 个 </i>
</div>
</div>
</div>
......@@ -219,7 +219,7 @@
<NSelect :style="{
'--n-border': 'none !important',
'--n-color': '#0E4AB3 !important',
}" size="small" @update:value="val => switchVideoPalyer(val)" placeholder="监控源"
}" size="small" v-model="cId" @update:value="val => switchVideoPalyer(val)" placeholder="监控源"
label-field="cameraName" value-field="id" :options="cameraList"></NSelect>
</div>
</div>
......@@ -554,9 +554,9 @@ const switchVideoPalyer = (id: string) => {
console.log("11111111111111111 ======================================= id", id, camera?.cameraAddress);
if (!camera?.cameraAddress?.includes(`rtsp://`)) {
return message.error('摄像头流地址格式有误!');
}
// if (!camera?.cameraAddress?.includes(`rtsp://`) && !camera?.cameraAddress?.includes(`.m3u8`)) {
// return message.error('摄像头流地址格式有误!');
// }
cName.value = camera.cameraName;
......@@ -589,9 +589,9 @@ const switchVideoPalyer01 = (id: string) => {
console.log("11111111111111111 ======================================= id", id, camera?.cameraAddress);
if (!camera?.cameraAddress?.includes(`rtsp://`)) {
return message.error('摄像头流地址格式有误!');
}
// if (!camera?.cameraAddress?.includes(`rtsp://`) && !camera?.cameraAddress?.includes(`.m3u8`)) {
// return message.error('摄像头流地址格式有误!');
// }
cName.value = camera.cameraName;
......@@ -693,13 +693,19 @@ const getCameraList = async () => {
});
};
const form = ref([]);
// 初始化响应式对象
const form = ref({});
const getLogData = async () => {
await api_pointsCount().then(res => {
if (res.data.code === 200) {
res.data.data.forEach(item => {
form.value.push(item.count)
if(item.status === 0){
form.value.online = item.count
}else{
form.value.offline = item.count
}
// form.value.push(item.count)
})
};
})
......
src/views/home/index.vue
View file @ f787c894
......@@ -18,14 +18,6 @@ import JSMpeg from '@cycjimmy/jsmpeg-player';
import fullScreen from '@/utils/full'
// import { wx } from '@/index.vue'
// 服务器IP地址
// const serviceUrl = 'ws://192.168.1.140:9999';
// ws://192.168.1.221:9999
// const serviceUrl = 'ws://192.168.1.199:9999';
// const serviceUrl = 'ws://192.168.1.221:9999';
// const apiUrl = 'http://192.168.1.120:9995';
// const webSocketUrl = 'ws://192.168.1.120:9995';
const serviceUrl = import.meta.env.VITE_VIDEO_URL;
const apiUrl = import.meta.env.VITE_SERVICE_URL;
......@@ -80,7 +72,10 @@ const getCameraList = async () => {
await api_getCameraList(params).then(res => {
if (res.data.code === 200) {
cameraList.value = res.data.data.records;
cameraList.value.length > 0 && switchVideoPalyer(cameraList.value[0].id);
if (cameraList.value.length > 0) {
cId.value = cameraList.value[0].id; // 设置默认选中ID
switchVideoPalyer(cameraList.value[0].id);
}
}
});
};
......@@ -89,21 +84,15 @@ const htmlStr = ref('');
const audioId = ref('');
const playAudio = async (id: string) => {
/**
* 1. 接口形式并非准确的资源形式形式
* 2. 模板的形式， 特殊处理
* 3. 动态js网络链接不上
*/
htmlStr.value = `<audio ref="audioE" id="aWrap" controls>
<source id="audio" src="${apiUrl}/v1/play/${id}" type="audio/mpeg"></source>
</audio>`;
nextTick(() => {
let a = document.getElementById('aWrap');
a?.play();
});
// 创建新的音频元素并播放
const audio = new Audio(`${apiUrl}/v1/play/${id}`);
audio.play();
// 保留原始逻辑备用
// htmlStr.value = `<audio id="aWrap" controls autoplay>
// <source src="${apiUrl}/v1/play/${id}" type="audio/mpeg">
// </audio>`;
// nextTick(() => document.getElementById('aWrap')?.play());
};
const cId = ref('');
......@@ -114,9 +103,9 @@ const switchVideoPalyer = (id: string) => {
console.log("======================================= id", id, camera?.cameraAddress);
if (!camera?.cameraAddress?.includes('rtsp://')) {
return message.error('摄像头流地址格式有误!');
}
// if (!camera?.cameraAddress?.includes('rtsp://')) {
// return message.error('摄像头流地址格式有误!');
// }
cName.value = camera.cameraName;
......@@ -239,7 +228,14 @@ const devData = ref({});
const getCardData = async () => {
await api_pointsCount().then(res => {
if (res.data.code === 200) {
devData.value = res.data.data;
// devData.value = res.data.data;
(res.data.data).forEach(item => {
if(item.status === 0){
devData.value.online = item.count
}else{
devData.value.offline = item.count
}
})
};
})
};
......@@ -303,7 +299,7 @@ onMounted(() => {
window.$notification?.create({
duration: 5000,
title: () => <div>
<NSpace justify='space-between'>
<NSpace justify='space-between' >
<NSpace align='center' >
{
data.algorithmGrade === 0 ? (
......@@ -469,7 +465,7 @@ onMounted(() => {
</NModal>
<!-- =================================== 弹窗 | E -->
<div style="border: 1px solid red; position: fixed; top: -1000px" v-html="htmlStr"></div>
<!-- <div style="border: 1px solid red; position: fixed; top: -1000px" v-html="htmlStr"></div> -->
<NSpace vertical :size="16">
<NModal v-model:show="showTipModal">
......@@ -525,7 +521,7 @@ onMounted(() => {
<div style="height: 100px; display: flex; justify-content: space-between; align-items: center;">
<div style="flex: 1; text-align: center;">
<div style="display: inline-block; font-size: 40px; font-weight: 500;">
{{ devData[0]?.count || 0 }}
{{ devData.online || 0 }}
</div>
<br />
<div style="display: inline-block;margin-top: 10px; margin-bottom: 20px;">
......@@ -534,7 +530,7 @@ onMounted(() => {
</div>
<div style="flex: 1; text-align: center;">
<div style="display: inline-block;font-size: 40px; font-weight: 500;">
{{ devData[1]?.count || 0 }}
{{ devData.offline || 0 }}
</div>
<br />
<div style="display: inline-block; margin-top: 10px; margin-bottom: 20px;">
......@@ -562,7 +558,7 @@ onMounted(() => {
<template #header-extra>
<div style="width: 200px;">
<NSelect @update:value="val => switchVideoPalyer(val)" placeholder="请选择" label-field="cameraName"
<NSelect v-model:value="cId" @update:value="val => switchVideoPalyer(val)" placeholder="请选择" label-field="cameraName"
value-field="id" :options="cameraList"></NSelect>
</div>
</template>
......
src/views/home/modules/pie-chart-pro.vue
View file @ f787c894
<script setup lang="ts">
import { watch, onMounted } from 'vue';
import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import { useEcharts } from '@/hooks/common/echarts';
import { api_pointsCount, api_taskCount } from '@/api/index.ts'
import { watch, onMounted } from "vue";
import { $t } from "@/locales";
import { useAppStore } from "@/store/modules/app";
import { useEcharts } from "@/hooks/common/echarts";
import { api_pointsCount, api_taskCount } from "@/api/index.ts";
defineOptions({
name: 'PieChart'
name: "PieChart",
});
const getCardData = async () => {
await api_taskCount().then(res => {
await api_taskCount().then((res) => {
if (res.data.code === 200) {
updateOptions(opts => {
updateOptions((opts) => {
opts.series[0].data = [
{ name: `已启动 ${res.data.data[0].count} 个`, value: res.data.data[0].count },
{ name: `已停用 ${res.data.data[1].count} 个`, value: res.data.data[1].count },
{
name: `已启动 ${res.data.data[1].count} 个`,
value: res.data.data[1].count,
},
{
name: `已停用 ${res.data.data[0].count} 个`,
value: res.data.data[0].count,
},
];
return opts;
});
};
})
}
});
};
const appStore = useAppStore();
const { domRef, updateOptions } = useEcharts(() => ({
tooltip: {
trigger: 'item'
trigger: "item",
},
legend: {
bottom: '-1%',
left: 'left',
bottom: "-1%",
left: "left",
itemStyle: {
borderWidth: 0,
},
textStyle: {
color: 'white' // 设置图例字体颜色为白色
}
color: "white", // 设置图例字体颜色为白色
},
},
series: [
{
color: ['#184ff0', '#f8f8f9c9'],
name: '启动状态',
type: 'pie',
center: ['50%', '50%'],
color: ["#184ff0", "#f8f8f9c9"],
name: "启动状态",
type: "pie",
center: ["50%", "50%"],
// selectedMode: 'single',
itemStyle: {
// borderRadius: 10,
borderColor: '#fff',
borderWidth: 1
borderColor: "#fff",
borderWidth: 1,
},
// label: {
// show: false,
......@@ -59,26 +64,26 @@ const { domRef, updateOptions } = useEcharts(() => ({
emphasis: {
label: {
show: true,
fontSize: '12'
}
fontSize: "12",
},
},
labelLine: {
show: true
show: true,
},
data: [] as { name: string; value: number }[]
}
]
data: [] as { name: string; value: number }[],
},
],
}));
async function mockData() {
await new Promise(resolve => {
await new Promise((resolve) => {
setTimeout(resolve, 1000);
});
updateOptions(opts => {
updateOptions((opts) => {
opts.series[0].data = [
{ name: '已启动 16 个', value: 20 },
{ name: '已停用 4 个', value: 10 },
{ name: "已启动 16 个", value: 20 },
{ name: "已停用 4 个", value: 10 },
];
return opts;
......@@ -92,10 +97,10 @@ function updateLocale() {
opts.series[0].name = originOpts.series[0].name;
opts.series[0].data = [
{ name: $t('page.home.study'), value: 20 },
{ name: $t('page.home.entertainment'), value: 10 },
{ name: $t('page.home.work'), value: 40 },
{ name: $t('page.home.rest'), value: 30 }
{ name: $t("page.home.study"), value: 20 },
{ name: $t("page.home.entertainment"), value: 10 },
{ name: $t("page.home.work"), value: 40 },
{ name: $t("page.home.rest"), value: 30 },
];
return opts;
......@@ -109,13 +114,13 @@ function updateLocale() {
onMounted(() => {
getCardData();
})
});
watch(
() => appStore.locale,
() => {
updateLocale();
}
},
);
// init
......@@ -137,8 +142,8 @@ watch(
}
.text-focus-in {
-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
-webkit-animation: text-focus-in 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
animation: text-focus-in 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
/* ----------------------------------------------
......
src/views/home/modules/ring-chart.vue
View file @ f787c894
<script setup lang="ts">
import { computed, ref, onMounted, watch } from 'vue';
import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import { useEcharts } from '@/hooks/common/echarts';
import { api_pointsCount, api_taskCount } from '@/api/index.ts'
import { computed, ref, onMounted, watch } from "vue";
import { $t } from "@/locales";
import { useAppStore } from "@/store/modules/app";
import { useEcharts } from "@/hooks/common/echarts";
import { api_pointsCount, api_taskCount } from "@/api/index.ts";
defineOptions({
name: 'PieChart'
name: "PieChart",
});
const appStore = useAppStore();
const { domRef, updateOptions } = useEcharts(() => ({
tooltip: {
trigger: 'item'
trigger: "item",
},
legend: {
// type: 'scroll',
// orient: 'vertical',
// right: 10,
// top: 20,
......@@ -25,41 +24,41 @@ const { domRef, updateOptions } = useEcharts(() => ({
},
series: [
{
color: ['#1872F0', '#f8f8f9'],
name: '任务分析状态',
type: 'pie',
radius: ['40%', '70%'],
color: ["#1872F0", "#f8f8f9"],
name: "任务分析状态",
type: "pie",
radius: ["40%", "70%"],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
fontWeight: "bold",
},
},
labelLine: {
show: false
show: false,
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
]
}
]
{ value: 1048, name: "Search Engine" },
{ value: 735, name: "Direct" },
],
},
],
}));
async function mockData() {
await new Promise(resolve => {
await new Promise((resolve) => {
setTimeout(resolve, 1000);
});
updateOptions(opts => {
updateOptions((opts) => {
opts.series[0].data = [
{ name: `已启动`, value: 20 },
{ name: `已停用`, value: 30 }
{ name: `已停用`, value: 20 },
{ name: `已启动`, value: 30 },
];
return opts;
});
......@@ -72,10 +71,10 @@ function updateLocale() {
opts.series[0].name = originOpts.series[0].name;
opts.series[0].data = [
{ name: $t('page.home.study'), value: 20 },
{ name: $t('page.home.entertainment'), value: 10 },
{ name: $t('page.home.work'), value: 40 },
{ name: $t('page.home.rest'), value: 30 }
{ name: $t("page.home.study"), value: 20 },
{ name: $t("page.home.entertainment"), value: 10 },
{ name: $t("page.home.work"), value: 40 },
{ name: $t("page.home.rest"), value: 30 },
];
return opts;
......@@ -110,25 +109,24 @@ const getCardData = async () => {
// };
// })
await api_taskCount().then(res => {
await api_taskCount().then((res) => {
if (res.data.code === 200) {
updateOptions(opts => {
updateOptions((opts) => {
opts.series[0].data = [
{ name: `已启动`, value: res.data.data[0].count },
{ name: `已停用`, value: res.data.data[1].count },
{ name: `已启动`, value: res.data.data[1].count },
{ name: `已停用`, value: res.data.data[0].count },
];
return opts;
});
};
}
});
}
};
watch(
() => appStore.locale,
() => {
updateLocale();
}
},
);
onMounted(() => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment