Skip to content

M
mmc-stl-vue2
提交 4b0a5f81 作者: 温凯
操作

feat(ai): 新增AI配置获取功能并优化AI识别列表展示

上级 688cbd12
正在显示 包含 418 行增加 和 64 行删除
src/components/MMCFlightControlCenter/api/modules/ai.js
import axios from "axios";
import request from "../request";
// const gddaiapi = 'https://hawk.mmcuav.cn/gddaiapi';
export default class AI_API {
// 获取当前的ai配置
static getAiconfig(data) {
return request({
url: `/admin-api/system/ai-config/getconfig`,
method: "post",
data,
});
}
// 人脸
static face(data){
// return axios.post("http://api.user.mmcuav.cn/aidemo/facedetect", data); // 百度的ai
return axios.post("https://hawk.mmcuav.cn/faceaiapi/detect/imageface", data);
static face(data) {
return axios.post(
"https://hawk.mmcuav.cn/faceaiapi/detect/imageface",
data
);
}
// 车牌
static plate(data) {
return axios.post("/gddaiapi/api/inflet/v1/tasks/e01d1d01-52e2-4883-a5de-0ae268764db0/predict", data); // 共达地
// return axios.post("https://hawk.mmcuav.cn/plateaiapi/detect/image", data); // 自研
return axios.post(
"/gddaiapi/api/inflet/v1/tasks/e01d1d01-52e2-4883-a5de-0ae268764db0/predict",
data
); // 共达地
}
// 人流
static crowd(data){
return axios.post("/gddaiapi/api/inflet/v1/tasks/18493235-4dd0-4f54-ab55-c1856ca7e3a5/predict", data);
static crowd(data) {
return axios.post(
"/gddaiapi/api/inflet/v1/tasks/18493235-4dd0-4f54-ab55-c1856ca7e3a5/predict",
data
);
}
// 烟雾
static smoke(data){
return axios.post("/gddaiapi/api/inflet/v1/tasks/fca2eb65-8b99-4109-9f9e-a9f7fd06ac1f/predict", data);
static smoke(data) {
return axios.post(
"/gddaiapi/api/inflet/v1/tasks/fca2eb65-8b99-4109-9f9e-a9f7fd06ac1f/predict",
data
);
}
// 漏油识别
static oilLeak(data){
static oilLeak(data) {
return axios.post("https://hawk.mmcuav.cn/oilaiapi/detect/image", data);
}
// 裸土识别
static bareSoil(data){
return axios.post("/gddaiapi/api/inflet/v1/tasks/05a9d657-8339-4575-bced-04b60b74c690/predict", data);
static bareSoil(data) {
return axios.post(
"/gddaiapi/api/inflet/v1/tasks/05a9d657-8339-4575-bced-04b60b74c690/predict",
data
);
}
// 其余ai
static kbtAi(data) {
return axios.post("https://hawk.mmcuav.cn/detect/image", data);
}
}
\ No newline at end of file
}
src/components/MMCFlightControlCenter/api/request.js
......@@ -30,7 +30,6 @@ $axios.interceptors.request.use(
config.headers["terminal"] = 2; // 1 为管理后台 2 为前端项目
config.headers["p-id"] = projectId;
console.log(config, store.state, "token信息验证");
return config;
},
(error) => {
......@@ -75,7 +74,7 @@ $axios.interceptors.response.use(
isRefreshToken = false;
if (data.code === 0) {
const token = data.token;
console.log("store", store);
window.$mmc_stl.app.$store.commit(
"MMCFlightControlCenter/setState",
{
......
src/components/MMCFlightControlCenter/components/uavApplications/components/controlPanel/components/controlRight/components/viewLib/index.vue
......@@ -17,9 +17,9 @@
>
<el-option
v-for="item in aiTypeList"
:key="item.id"
:label="item.value"
:value="item.id"
:key="item.typeId"
:label="item.title"
:value="item.typeId"
></el-option>
</el-select>
<el-checkbox
......@@ -262,39 +262,118 @@ export default {
isIndeterminate: false,
selectAll: false, //全选
viewLibTab: 0, // 视图库tab索引, 0: 视图, 1: 机载
aiType: 0, // 图片类型
aiType: 1, // 图片类型
aiTypeList: [
// 普通图片或ai图片选项
{
id: 0,
value: "全部",
typeId: 1,
title: "人车识别",
},
{
id: 1,
value: "人脸识别",
typeId: 2,
title: "烟火识别",
},
{
id: 8,
// id: 2,
value: "车牌识别",
typeId: 4,
title: "行人识别",
},
{
id: 3,
value: "人流识别",
typeId: 5,
title: "机动车识别",
},
{
id: 4,
value: "烟雾识别",
typeId: 6,
title: "两轮车识别",
},
{
id: 5,
value: "漏油识别",
typeId: 7,
title: "三轮车识别",
},
{
id: 6,
value: "裸土识别",
typeId: 8,
title: "挖掘机识别",
},
], //视图库类型
{
typeId: 9,
title: "车牌识别",
},
{
typeId: 10,
title: "人脸识别",
},
{
typeId: 11,
title: "口罩识别",
},
{
typeId: 14,
title: "烟雾识别",
},
{
typeId: 15,
title: "火焰识别",
},
{
typeId: 17,
title: "占道经营",
},
{
typeId: 22,
title: "船舶识别",
},
{
typeId: 23,
title: "漏油识别",
},
{
typeId: 24,
title: "头盔识别",
},
{
typeId: 25,
title: "管线识别",
},
{
typeId: 26,
title: "路面裂缝",
},
{
typeId: 27,
title: "顶棚违建",
},
{
typeId: 28,
title: "门牌广告",
},
{
typeId: 29,
title: "井盖识别",
},
{
typeId: 30,
title: "搅拌车识别",
},
{
typeId: 31,
title: "油罐车识别",
},
{
typeId: 32,
title: "渣土车识别",
},
{
typeId: 33,
title: "排气口识别",
},
{
typeId: 34,
title: "人流识别",
},
{
title: "裸土识别",
typeId: 35,
},
],
//视图库类型
fileType: "图片", //视图文件类型 0：图片；1：视频
photoList: [], //资源列表对应的对象
photoListDate: null, //某日期的所有资源
......
src/components/MMCFlightControlCenter/components/uavApplications/components/player/components/aiList/index.vue
......@@ -5,21 +5,26 @@
<img src="./assets/images/car1.png" @click="aiVisible = !aiVisible" />
<div class="ai-list" v-show="aiVisible">
<el-tooltip
v-for="(item,index) in aiIdentifyList"
v-for="(item, index) in aiIdentifyList"
:key="index"
:content="item.title"
placement="bottom"
>
<div class="ai-item" @click="onAiIdentify(item.type)">
<img class="img_src" :src="item.img" />
<img class="img_src" crossorigin="anonymous" :src="item.img" />
</div>
</el-tooltip>
</div>
</div>
</el-tooltip>
<el-dialog :title="`${aiTitle}结果`" :visible.sync="aiResultShow" append-to-body width="700px">
<div style="text-align: center;">
<img style="width: 100%;" :src="aiResultImg" />
<el-dialog
:title="`${aiTitle}结果`"
:visible.sync="aiResultShow"
append-to-body
width="700px"
>
<div style="text-align: center">
<img style="width: 100%" crossorigin="anonymous" :src="aiResultImg" />
</div>
</el-dialog>
</div>
......@@ -46,44 +51,234 @@ export default {
data() {
return {
aiVisible: false,
aiIdentifyList: [
aiIdentifyList: [],
deAiIdentifyList: [
{
title: "人脸识别",
type: "face",
typeId: 1,
img: require("./assets/images/人脸识别.svg"),
type: "kbtAi",
img: "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/ai/person_car.png",
title: "人车识别",
},
{
typeId: 2,
type: "kbtAi",
img: "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/ai/fire.png",
title: "烟火识别",
},
{
typeId: 4,
type: "kbtAi",
img: "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/ai/person.png",
title: "行人识别",
},
{
typeId: 5,
type: "kbtAi",
img: "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/ai/car.png",
title: "机动车识别",
},
{
typeId: 6,
type: "kbtAi",
img: "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/ai/motor_bicycle.png",
title: "两轮车识别",
},
{
typeId: 7,
type: "kbtAi",
img: "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/ai/tricycle.png",
title: "三轮车识别",
},
{
typeId: 8,
type: "kbtAi",
img: "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/ai/excavator.png",
title: "挖掘机识别",
},
{
typeId: 9,
type: "kbtAi",
img: "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/ai/plate.png",
title: "车牌识别",
type: "plate",
typeId: 8,
img: require("./assets/images/车牌识别.svg"),
},
{
title: "人流识别",
type: "crowd",
typeId: 3,
img: require("./assets/images/人流识别.svg"),
typeId: 10,
type: "face",
img: "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/ai/face.png",
title: "人脸识别",
},
{
title: "烟雾识别",
typeId: 11,
type: "kbtAi",
img: "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/ai/mask.png",
title: "口罩识别",
},
{
typeId: 14,
type: "smoke",
typeId: 7,
img: require("./assets/images/烟雾识别.svg"),
img: "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/ai/smoke.png",
title: "烟雾识别",
},
{
title: "漏油识别",
typeId: 15,
type: "kbtAi",
img: "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/ai/fire.png",
title: "火焰识别",
},
{
typeId: 17,
type: "kbtAi",
img: "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/ai/zhandao.png",
title: "占道经营",
},
{
type: "kbtAi",
typeId: 22,
img: "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/ai/boat.png",
title: "船舶识别",
},
{
typeId: 23,
type: "oilLeak",
typeId: 5,
img: require("./assets/images/漏油识别.svg"),
img: "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/ai/oilspill.png",
title: "漏油识别",
},
{
typeId: 24,
type: "kbtAi",
img: "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/ai/helmet.png",
title: "头盔识别",
},
{
typeId: 25,
type: "kbtAi",
img: "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/ai/guanxian.png",
title: "管线识别",
},
{
typeId: 26,
type: "kbtAi",
img: "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/ai/lumianliefeng.png",
title: "路面裂缝",
},
{
typeId: 27,
type: "kbtAi",
img: "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/ai/dingpeng.png",
title: "顶棚违建",
},
{
typeId: 28,
type: "kbtAi",
img: "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/ai/guanggaopai.png",
title: "门牌广告",
},
{
typeId: 29,
type: "kbtAi",
img: "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/ai/jinggai.png",
title: "井盖识别",
},
{
typeId: 30,
type: "kbtAi",
img: "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/ai/jiaobanche.png",
title: "搅拌车识别",
},
{
typeId: 31,
type: "kbtAi",
img: "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/ai/youguanche.png",
title: "油罐车识别",
},
{
typeId: 32,
type: "kbtAi",
img: "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/ai/zhatuche.png",
title: "渣土车识别",
},
{
typeId: 33,
type: "kbtAi",
img: "https://mmc-crm.oss-cn-shenzhen.aliyuncs.com/prod/tmj-icon/ai/paiwukou.png",
title: "排气口识别",
type: "kbtAi",
},
{
typeId: 34,
img: require("./assets/images/人流识别.svg"),
title: "人流识别",
type: "kbtAi",
},
{
title: "裸土识别",
type: "bareSoil",
typeId: 6,
typeId: 35,
img: require("./assets/images/裸土识别.svg"),
},
],
// aiIdentifyList: [
// {
// title: "人脸识别",
// type: "face",
// typeId: 1,
// img: require("./assets/images/人脸识别.svg"),
// },
// {
// title: "车牌识别",
// type: "plate",
// typeId: 8,
// img: require("./assets/images/车牌识别.svg"),
// },
// {
// title: "人流识别",
// type: "crowd",
// typeId: 3,
// img: require("./assets/images/人流识别.svg"),
// },
// {
// title: "烟雾识别",
// type: "smoke",
// typeId: 7,
// img: require("./assets/images/烟雾识别.svg"),
// },
// {
// title: "漏油识别",
// type: "oilLeak",
// typeId: 5,
// img: require("./assets/images/漏油识别.svg"),
// },
// {
// title: "裸土识别",
// type: "bareSoil",
// typeId: 6,
// img: require("./assets/images/裸土识别.svg"),
// },
// ],
aiResultShow: false, //ai识别结果展示
aiTitle: "",
aiResultImg: "", //ai结果图
......@@ -91,9 +286,43 @@ export default {
},
computed: {
...mapState("MMCFlightControlCenter", ["cesiumViewer", "baseUrl"]),
...mapState("MMCFlightControlCenter/uav", ["uav"]),
...mapState("MMCFlightControlCenter/uav", ["uav", "userInfo"]),
},
mounted() {
this.getAiconfig();
},
methods: {
async getAiconfig() {
let formData = new FormData();
console.log(this.$store.state.MMCFlightControlCenter, "userInfo");
let { TenantId, projectId } = this.$store.state.MMCFlightControlCenter;
// formData.append("projectId", projectId);
// formData.append("tenantId", TenantId);
let res = await AI_API["getAiconfig"]({
tenantId: TenantId,
projectId: projectId,
});
if (res.data.configInfo) {
const configInfo = Object.entries(res.data.configInfo).map(
([key, value]) => ({
key,
...value,
})
);
let configInfoData = configInfo.filter((item) => item.status == 0);
// 使用 Set 存储数据1中的所有 title，提高查找效率
const titleSet = new Set(
configInfoData.map((item) => item.detectorType)
);
console.log(titleSet, "titleSet");
// 遍历数据2，检查每个 name 是否在 titleSet 中存在
const matchedData = this.deAiIdentifyList.filter((dataItem) =>
titleSet.has(dataItem.typeId)
);
this.aiIdentifyList = matchedData;
}
},
/**
* ai识别事件
*/
......@@ -200,7 +429,28 @@ export default {
}
}
break;
case "kbtAi":
{
let formData = new FormData();
formData.append("image", blob, `下载.jpeg`);
formData.append("iscount", 1);
let res = await AI_API[type](formData);
results =
res?.data?.data?.data?.map((item) => {
return {
x: item.bbox[0],
y: item.bbox[1],
width: item.bbox[2] - item.bbox[0],
height: item.bbox[3] - item.bbox[1],
label: item.label_cn,
prob: item.bbox.conf,
};
}) || [];
if (results.length > 0) {
isSuccess = true;
}
}
break;
// 共达地通用数据结构
default:
{
......@@ -371,11 +621,13 @@ export default {
position: absolute;
left: -124px;
top: 0;
width: 111px;
width: 123px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
overflow-y: auto;
max-height: 142px;
gap: 4px;
.ai-item {
cursor: pointer;
width: 35px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论