update
This commit is contained in:
parent
d39becc206
commit
09c304fa7a
@ -2,7 +2,7 @@
|
||||
* @Author: cclu 1106109051@qq.com
|
||||
* @Date: 2024-11-18 11:54:00
|
||||
* @LastEditors: cclu 1106109051@qq.com
|
||||
* @LastEditTime: 2024-11-26 16:56:07
|
||||
* @LastEditTime: 2024-11-29 11:57:57
|
||||
* @FilePath: \aiRobot\eslint.config.js
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
@ -20,14 +20,9 @@ module.exports = {
|
||||
ecmaVersion: 2020,
|
||||
},
|
||||
rules: {
|
||||
// 自定义规则
|
||||
"no-nested-ternary": 1,
|
||||
"no-use-before-define": 1,
|
||||
"no-param-reassign": 0,
|
||||
"no-plusplus": 0,
|
||||
"eqeqeq": 0,
|
||||
"no-useless-escape": 0,
|
||||
"prefer-destructuring": 0,
|
||||
"no-lonely-if": 0
|
||||
'vue/max-attributes-per-line': ['error', {
|
||||
'singleline': 3
|
||||
}],
|
||||
'@typescript-eslint/no-explicit-any': 'off',
|
||||
},
|
||||
};
|
||||
@ -31,7 +31,7 @@
|
||||
.dialogBox{
|
||||
padding: 12px;
|
||||
color: #fff;
|
||||
width: 650px;
|
||||
width: 90%;
|
||||
max-height: calc(100vh - 140px);
|
||||
white-space: pre-wrap;
|
||||
background: rgba(56, 56, 56, 0.51);
|
||||
@ -116,6 +116,14 @@
|
||||
color: #98aac9!important;
|
||||
font-weight: bold;
|
||||
}
|
||||
.style4{
|
||||
display: block;
|
||||
text-indent: 2rem;
|
||||
}
|
||||
.style5{
|
||||
display: block;
|
||||
text-indent: 4rem;
|
||||
}
|
||||
.operateBox{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@ -247,6 +255,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.loadingBox{
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
.userIcon{
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
|
||||
@ -60,6 +60,12 @@ const printingLoading = ref<boolean>(false);
|
||||
const printingLoadingText = ref<string>("");
|
||||
// 是否展开底部的选择标签
|
||||
const bottomSelect = ref<boolean>(false);
|
||||
// 判断是否进入了巡检
|
||||
const duringInspection = ref<boolean>(false);
|
||||
// 巡检的索引
|
||||
const inspectionIndex = ref<number>(0);
|
||||
// 输入框的实例对象
|
||||
const inputRef = ref<any>();
|
||||
|
||||
onMounted(() => {
|
||||
// 默认在初始显示的
|
||||
@ -74,7 +80,7 @@ const handleGetShowDailogBox = async () => {
|
||||
await nextTick(() => {
|
||||
showDialogBox.value = true;
|
||||
});
|
||||
|
||||
inputRef.value?.focus();
|
||||
console.log("dialogueList", dialogueList);
|
||||
// 给每个带有isVHtml 的对话框 赋值上对应的VHtml
|
||||
const allBoxes = document.querySelectorAll(".dialogueTextBox-text");
|
||||
@ -95,11 +101,15 @@ const handleGetShowDailogBox = async () => {
|
||||
};
|
||||
dialogueList.push(obj);
|
||||
showDialogBox.value = true;
|
||||
|
||||
setTimeout(() => {
|
||||
dialogueList[0].text = "猜你想了解：";
|
||||
dialogueList[0].isOver = true;
|
||||
isNewDialogLoading.value = false;
|
||||
nextTick(() => {
|
||||
// 聚焦
|
||||
console.log("inputRef.value", inputRef.value);
|
||||
inputRef.value?.focus();
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
};
|
||||
@ -151,6 +161,27 @@ const handleAddDialogList = (text: string) => {
|
||||
handleScrollToBottom();
|
||||
isNewDialogLoading.value = true;
|
||||
};
|
||||
// 只添加人的问题
|
||||
const handleAddUserDialog = (text: string) => {
|
||||
let userObj: any = {
|
||||
type: 2,
|
||||
text: text,
|
||||
isFirst: false,
|
||||
};
|
||||
dialogueList.push(userObj);
|
||||
handleScrollToBottom();
|
||||
};
|
||||
// 只添加机器人的回话
|
||||
const handleAddRobotDialog = () => {
|
||||
let robotObj: any = {
|
||||
type: 1,
|
||||
text: "",
|
||||
isFirst: false,
|
||||
};
|
||||
dialogueList.push(robotObj);
|
||||
handleScrollToBottom();
|
||||
isNewDialogLoading.value = true;
|
||||
};
|
||||
// 给最后一个对话框赋值上结果 且关闭加载效果
|
||||
const handleLastUpdate = (str: any) => {
|
||||
dialogueList[dialogueList.length - 1].text = str;
|
||||
@ -928,6 +959,111 @@ const handleGetResFieldRes = (obj: any, config: any) => {
|
||||
return str;
|
||||
};
|
||||
|
||||
// 给巡检添加自定义文字输出的方法
|
||||
const handleInspectionDialogueBox = async (detail: any, otherObj?: any) => {
|
||||
// 要输出的文字内容
|
||||
let str: string = `${
|
||||
props.currentServerPartDetail.SERVERPART_NAME
|
||||
}：<span class="style4">天气情况：${
|
||||
props.currentServerPartDetail.weatherModel
|
||||
? `<span class="style5">${"今天"}(${moment().format("YYYY-MM-DD")})${
|
||||
detail.weatherModel.DAY_WEATHER
|
||||
}转${detail.weatherModel.NIGHT_WEATHER}，气温${
|
||||
detail.weatherModel.NIGHT_AIR_TEMPERATURE
|
||||
}℃~${
|
||||
detail.weatherModel.DAY_AIR_TEMPERATURE
|
||||
}℃</span><span class="style5">${"明天"}(${moment()
|
||||
.add(1, "d")
|
||||
.format("YYYY-MM-DD")})${detail.tmwWeatherModel.DAY_WEATHER}转${
|
||||
detail.tmwWeatherModel.NIGHT_WEATHER
|
||||
}，气温${detail.tmwWeatherModel.NIGHT_AIR_TEMPERATURE}℃~${
|
||||
detail.tmwWeatherModel.DAY_AIR_TEMPERATURE
|
||||
}℃</span>`
|
||||
: "暂无天气数据"
|
||||
}</span><span class="style4">实时路况(${moment().format(
|
||||
"MM月DD日 HH时mm分"
|
||||
)})：<span class="style5">${
|
||||
detail?.roadConditions
|
||||
? `${
|
||||
detail?.roadConditions?.EXPRESSWAY_NAME
|
||||
? detail?.roadConditions?.EXPRESSWAY_NAME + "："
|
||||
: ""
|
||||
}${detail?.roadConditions?.evaluation.status_desc || ""}`
|
||||
: "暂无实况车流数据"
|
||||
} </span></span><span class="style4">车辆归属地情况：${
|
||||
detail?.provinceListTooltip && detail?.provinceListTooltip.length > 0
|
||||
? `${detail?.provinceListTooltip
|
||||
.map((item: any) => {
|
||||
return `<span class="style5">${moment(
|
||||
moment().startOf("year")
|
||||
).format("YYYY年MM月")}至${moment().format("YYYY年MM月")}${
|
||||
detail?.SERVERPART_NAME || ""
|
||||
}总入区车流：${formatNumber(item.TotalCount || 0)}</span>${
|
||||
item.children && item.children.length > 0
|
||||
? item.children
|
||||
.map((subItem: any) => {
|
||||
return `<span class="style5">${
|
||||
subItem.ProvinceOrCityName
|
||||
}：占比：${formatNumber(
|
||||
(subItem.TotalCount / item.TotalCount) * 100
|
||||
)}%，Top3：${
|
||||
subItem.children && subItem.children.length > 0
|
||||
? subItem.children
|
||||
.map((thirdItem: any) => {
|
||||
return thirdItem.ProvinceOrCityName !== "其他"
|
||||
? `${thirdItem.ProvinceOrCityName}、`
|
||||
: "";
|
||||
})
|
||||
.join("")
|
||||
: ""
|
||||
}</span>`;
|
||||
})
|
||||
.join("")
|
||||
: ""
|
||||
}`;
|
||||
})
|
||||
.join("")}`
|
||||
: "暂无车辆归属地数据"
|
||||
}</span>${
|
||||
otherObj
|
||||
? `${
|
||||
otherObj?.businessText
|
||||
? `<span class="style4">经营数据：${otherObj?.businessText}</span>`
|
||||
: ""
|
||||
}${
|
||||
otherObj?.merchantText
|
||||
? `<span class="style4">在营商家：${otherObj?.merchantText}</span>`
|
||||
: ""
|
||||
}`
|
||||
: ""
|
||||
}`;
|
||||
// 解除对话框的加载效果
|
||||
isNewDialogLoading.value = false;
|
||||
// 拿到最后一个对话框的数据
|
||||
let obj: any = JSON.parse(
|
||||
JSON.stringify(dialogueList[dialogueList.length - 1])
|
||||
);
|
||||
// 给对话框赋值上要打印的内容
|
||||
obj.VHtml = str;
|
||||
// 让对话框知道 这个文字是要打印的
|
||||
dialogueList[dialogueList.length - 1] = {
|
||||
...obj,
|
||||
isVHtml: true,
|
||||
};
|
||||
await nextTick();
|
||||
|
||||
// 文字通过打字机效果实现
|
||||
const allBoxes = document.querySelectorAll(".dialogueTextBox-text");
|
||||
const lastBox: any = allBoxes[allBoxes.length - 1];
|
||||
if (lastBox) {
|
||||
const lastContent = str;
|
||||
isPrinting.value = true;
|
||||
await handlePrintWord(lastBox, lastContent);
|
||||
}
|
||||
|
||||
dialogueList[dialogueList.length - 1].isOver = true;
|
||||
};
|
||||
|
||||
// 配置对话框表格的样式
|
||||
const handleConfigItemTable = async (
|
||||
tableData: any,
|
||||
@ -969,7 +1105,7 @@ const handleConfigItemTable = async (
|
||||
|
||||
// 文字通过打字机效果实现
|
||||
const allBoxes = document.querySelectorAll(".dialogueTextBox-text");
|
||||
const lastBox = allBoxes[allBoxes.length - 1];
|
||||
const lastBox: any = allBoxes[allBoxes.length - 1];
|
||||
if (lastBox) {
|
||||
const lastContent = str;
|
||||
isPrinting.value = true;
|
||||
@ -1072,10 +1208,6 @@ const handleConfigItemTable = async (
|
||||
isNewDialogLoading.value = false;
|
||||
}
|
||||
|
||||
console.log(
|
||||
"configObjconfigObjconfigObjconfigObjconfigObjconfigObjconfigObj",
|
||||
configObj
|
||||
);
|
||||
// 是否出现 图表输出 导出为PDF “查看更多”功能
|
||||
|
||||
// else {
|
||||
@ -1105,6 +1237,40 @@ const handleScrollToBottom = () => {
|
||||
}, 100);
|
||||
};
|
||||
|
||||
// 给巡检拿到对话框标签里面的问题的回答 输出为纯文字
|
||||
const handleInspectionQuestions = async (text: string) => {
|
||||
const req: any = {
|
||||
Sentence: text,
|
||||
ProvinceCode: "340000",
|
||||
DialogCode: thisQuestionId.value || "",
|
||||
};
|
||||
const data = await handleTranslateSentence(req);
|
||||
let configDetail: any;
|
||||
let res: any;
|
||||
const configList: any = await handleGetANALYSISRULEList({
|
||||
searchParameter: {
|
||||
ANALYSISRULE_IDS: data?.AnalysisRuleId,
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
sortstr: "RULE_PRIORITY asc",
|
||||
PageIndex: 1,
|
||||
pagesize: 999999,
|
||||
});
|
||||
// 请求列表的时候 已经根据优先级排序 第一个就是优先级最高的 直接取值就可以
|
||||
if (configList && configList.length > 0) {
|
||||
configDetail = configList[0];
|
||||
}
|
||||
console.log("configDetail", configDetail);
|
||||
// 如果拿到值就根据配置去调用接口 拿到数据 输出数据
|
||||
if (configDetail) {
|
||||
const tableData = await handleAnalyzeConfig(configDetail, data);
|
||||
console.log("tableData3", tableData);
|
||||
res = tableData;
|
||||
}
|
||||
return res;
|
||||
};
|
||||
|
||||
// 调用回答问题的接口
|
||||
const handleAnswerQuestions = async () => {
|
||||
const req: any = {
|
||||
@ -1118,7 +1284,7 @@ const handleAnswerQuestions = async () => {
|
||||
console.log("data", data);
|
||||
|
||||
let searchRes: string = "";
|
||||
|
||||
let returnData: any;
|
||||
if (data.ServerpartId) {
|
||||
if (data.ShowMapPoint) {
|
||||
// 全部服务区圆点变灰色
|
||||
@ -1152,6 +1318,14 @@ const handleAnswerQuestions = async () => {
|
||||
if (data?.RevenueAnalysis) {
|
||||
//再判断这次查询是否有文字结果返回 如果有的话 再进行判断 是要根据语义 调用接口 还是 直接输出这段文字
|
||||
if (data?.AnalysisRuleId) {
|
||||
// 文字通过打字机效果实现
|
||||
const allBoxes = document.querySelectorAll(".dialogueTextBox-text");
|
||||
const lastBox: any = allBoxes[allBoxes.length - 1];
|
||||
if (lastBox) {
|
||||
const lastContent = `<span class="style4">为您查找相关数据</span>`;
|
||||
isPrinting.value = true;
|
||||
await handlePrintWord(lastBox, lastContent);
|
||||
}
|
||||
// 去拿到这个id的配置明细
|
||||
// 添加判断 可能会有多个id 单个id的时候 直接调用详情接口拿到数据 多个id去请求列表接口 拿到优先级高的 直接给configDetail赋值
|
||||
let configDetail: any;
|
||||
@ -1179,6 +1353,7 @@ const handleAnswerQuestions = async () => {
|
||||
if (configDetail) {
|
||||
const tableData = await handleAnalyzeConfig(configDetail, data);
|
||||
console.log("tableData2", tableData);
|
||||
returnData = tableData;
|
||||
// 如果拿到值了 就去配这个对话框显示表格的样式
|
||||
if (tableData) {
|
||||
await handleConfigItemTable(tableData, configDetail, data);
|
||||
@ -1191,6 +1366,14 @@ const handleAnswerQuestions = async () => {
|
||||
} else {
|
||||
// 直接搜基础信息 因为没有服务区的输出 即使有配置id也不会去请求 这里判断一下 如果有配置id 还是按照配置id去调用
|
||||
if (data?.AnalysisRuleId) {
|
||||
// 文字通过打字机效果实现
|
||||
const allBoxes = document.querySelectorAll(".dialogueTextBox-text");
|
||||
const lastBox: any = allBoxes[allBoxes.length - 1];
|
||||
if (lastBox) {
|
||||
const lastContent = `<span class="style4">为您查找相关数据</span>`;
|
||||
isPrinting.value = true;
|
||||
await handlePrintWord(lastBox, lastContent);
|
||||
}
|
||||
// 去拿到这个id的配置明细
|
||||
// 添加判断 可能会有多个id 单个id的时候 直接调用详情接口拿到数据 多个id去请求列表接口 拿到优先级高的 直接给configDetail赋值
|
||||
let configDetail: any;
|
||||
@ -1310,20 +1493,42 @@ const handleAnswerQuestions = async () => {
|
||||
} else {
|
||||
thisQuestionId.value = logData?.DIALOG_CODE;
|
||||
}
|
||||
return returnData;
|
||||
};
|
||||
|
||||
// 提问的方法
|
||||
const handleSubmit = async () => {
|
||||
// 无论怎么样都 都隐藏悬浮框
|
||||
emit("handleHiddenSuspended");
|
||||
if (searchText.value) {
|
||||
// 先添加对话内容
|
||||
handleAddDialogList(searchText.value);
|
||||
// 调用回答问题的接口
|
||||
await handleAnswerQuestions();
|
||||
// 判断一下输入框的文字 是不是巡检的 不是的走语义
|
||||
if (searchText.value === "开启巡检" || searchText.value === "开始巡检") {
|
||||
handleAddDialogList(searchText.value);
|
||||
inspectionIndex.value = 0;
|
||||
servicepartInspection(0, true);
|
||||
} else if (searchText.value === "继续巡检") {
|
||||
handleAddDialogList(searchText.value);
|
||||
servicepartInspection(inspectionIndex.value, true);
|
||||
} else {
|
||||
// 先添加对话内容
|
||||
handleAddDialogList(searchText.value);
|
||||
// 调用回答问题的接口
|
||||
await handleAnswerQuestions();
|
||||
inputRef.value?.focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 点击标签调用的方法
|
||||
const handleClickTab = async (value: number) => {
|
||||
// 判断现在是不是在打印 在打印的话就不能执行
|
||||
if (isPrinting.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 无论怎么样都 都隐藏悬浮框
|
||||
emit("handleHiddenSuspended");
|
||||
|
||||
selectTab.value = value;
|
||||
if (value === 0) return;
|
||||
|
||||
@ -1437,7 +1642,7 @@ const handleServerpartBasicInfo = async (config: any) => {
|
||||
await nextTick();
|
||||
|
||||
const allBoxes = document.querySelectorAll(".dialogueTextBox-text");
|
||||
const lastBox = allBoxes[allBoxes.length - 1];
|
||||
const lastBox: any = allBoxes[allBoxes.length - 1];
|
||||
if (lastBox) {
|
||||
const lastContent = data.ServerpartInfo.SERVERPART_INFO || "";
|
||||
isPrinting.value = true;
|
||||
@ -1537,6 +1742,9 @@ const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
|
||||
// 停止打印机事件
|
||||
const handleStopPrint = () => {
|
||||
isPrinting.value = false;
|
||||
if (duringInspection.value) {
|
||||
closeInspection();
|
||||
}
|
||||
};
|
||||
|
||||
// 显示数据图表
|
||||
@ -1559,16 +1767,19 @@ const emit = defineEmits<{
|
||||
(e: "handleLightServerpart", infoList: any): void; // 高亮查到的图层
|
||||
(e: "handleEnterySearch"): void; // 全部服务区圆点置灰
|
||||
(e: "handleWarningMap", warningData: any): void; // 全部服务区圆点置灰
|
||||
(e: "handleAreaInspection", index: number): void; // 全部服务区圆点置灰
|
||||
(e: "handleHiddenSuspended"): void; // 隐藏掉悬浮框
|
||||
}>();
|
||||
|
||||
// 监听当前选择的服务区
|
||||
watch(
|
||||
() => props.currentServerPartDetail,
|
||||
(newVal, oldVal) => {
|
||||
console.log("new", newVal);
|
||||
console.log("old", oldVal);
|
||||
if (newVal) {
|
||||
if (selectTab.value !== 0) {
|
||||
// 不在巡检状态
|
||||
if (selectTab.value !== 0 && !duringInspection.value) {
|
||||
console.log("new", newVal);
|
||||
console.log("old", oldVal);
|
||||
handleClickTab(selectTab.value);
|
||||
}
|
||||
}
|
||||
@ -1716,12 +1927,14 @@ const handleSelectWarning = async (value: number) => {
|
||||
if (obj) {
|
||||
for (let key in obj) {
|
||||
let itemStr: string = `
|
||||
${descObjRef.value[key]}：${objShopName[key]},共${obj[key].length}条；`;
|
||||
${descObjRef.value[key]}：${objShopName[key]},共${obj[key].length}条;`;
|
||||
str += itemStr;
|
||||
}
|
||||
}
|
||||
result = `${props?.currentServerPartDetail.SERVERPART_NAME}预警类型，存在：${str}
|
||||
的情况，您可以鼠标移动到具体服务区查看情况。`;
|
||||
的情况，您可以鼠标移动到具体服务区查看情况。`;
|
||||
} else {
|
||||
result = `${props?.currentServerPartDetail.SERVERPART_NAME}暂无预警数据`;
|
||||
}
|
||||
} else {
|
||||
let serverpartId: any = [];
|
||||
@ -1753,7 +1966,7 @@ const handleSelectWarning = async (value: number) => {
|
||||
await nextTick();
|
||||
|
||||
const allBoxes = document.querySelectorAll(".dialogueTextBox-text");
|
||||
const lastBox = allBoxes[allBoxes.length - 1];
|
||||
const lastBox: any = allBoxes[allBoxes.length - 1];
|
||||
if (lastBox) {
|
||||
const lastContent = result || "";
|
||||
isPrinting.value = true;
|
||||
@ -1771,6 +1984,54 @@ const handleSelectWarning = async (value: number) => {
|
||||
emit("handleWarningMap", warningData);
|
||||
};
|
||||
|
||||
// 服务区巡检
|
||||
const servicepartInspection = (index?: number, inInput?: boolean) => {
|
||||
searchText.value = "";
|
||||
if (inInput) {
|
||||
} else {
|
||||
// 第一次由手动调用
|
||||
if (inspectionIndex.value === 0) {
|
||||
// 用户提问 机器人回答的加载框添加
|
||||
handleAddDialogList("服务区巡检");
|
||||
} else {
|
||||
// 只给机器人加回答对话框
|
||||
handleAddRobotDialog();
|
||||
}
|
||||
}
|
||||
|
||||
// 进入巡检
|
||||
duringInspection.value = true;
|
||||
emit("handleAreaInspection", inspectionIndex.value);
|
||||
};
|
||||
// 关闭巡检 且 直接暂停打印
|
||||
const handleCloseInspection = () => {
|
||||
duringInspection.value = false;
|
||||
isPrinting.value = false;
|
||||
};
|
||||
// 关闭巡检
|
||||
const closeInspection = () => {
|
||||
duringInspection.value = false;
|
||||
// inspectionIndex.value = 0;
|
||||
};
|
||||
|
||||
// 监听对话框记录
|
||||
watch(
|
||||
() => dialogueList,
|
||||
(newVal, oldVal) => {
|
||||
console.log("new", newVal);
|
||||
console.log("old", oldVal);
|
||||
// 当只有在巡检中 且检测到对话框列表发生变化时 进入
|
||||
if (newVal && newVal.length > 0 && duringInspection.value) {
|
||||
let lastObj: any = dialogueList[dialogueList.length - 1];
|
||||
if (lastObj.isOver) {
|
||||
inspectionIndex.value += 1;
|
||||
servicepartInspection(inspectionIndex.value);
|
||||
}
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
// 底部tab的显示
|
||||
const handleShowTabList = () => {
|
||||
bottomSelect.value = !bottomSelect.value;
|
||||
@ -1787,7 +2048,11 @@ defineExpose({
|
||||
descListRef,
|
||||
handleClickTab,
|
||||
selectTab,
|
||||
handleSelectWarning
|
||||
handleSelectWarning,
|
||||
handleInspectionDialogueBox,
|
||||
closeInspection,
|
||||
duringInspection,
|
||||
handleInspectionQuestions,
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1818,13 +2083,17 @@ defineExpose({
|
||||
class="robotIcon"
|
||||
src="@/assets/ai/profileIcon.png"
|
||||
/>
|
||||
<div
|
||||
class="dialogueTextBox"
|
||||
v-loading="isNewDialogLoading && index === dialogueList.length - 1"
|
||||
>
|
||||
<div class="dialogueTextBox">
|
||||
<div class="dialogueTextBox-text">
|
||||
{{ item.text || "" }}
|
||||
</div>
|
||||
<div
|
||||
class="loadingBox"
|
||||
v-if="isNewDialogLoading && index === dialogueList.length - 1"
|
||||
v-loading="
|
||||
isNewDialogLoading && index === dialogueList.length - 1
|
||||
"
|
||||
></div>
|
||||
|
||||
<div
|
||||
v-if="item.isFirst && item.isOver"
|
||||
@ -1843,6 +2112,20 @@ defineExpose({
|
||||
>
|
||||
{{ item.label || "" }}
|
||||
</div>
|
||||
<div
|
||||
v-if="!duringInspection"
|
||||
class="clickItem"
|
||||
@click="servicepartInspection(inspectionIndex)"
|
||||
>
|
||||
{{ inspectionIndex > 0 ? "继续巡检" : "服务区巡检" }}
|
||||
</div>
|
||||
<div
|
||||
v-if="duringInspection"
|
||||
class="clickItem"
|
||||
@click="handleCloseInspection()"
|
||||
>
|
||||
{{ "暂停巡检" }}
|
||||
</div>
|
||||
<img
|
||||
class="clearClick"
|
||||
src="@/assets/ai/clearIcon.png"
|
||||
@ -1975,6 +2258,7 @@ defineExpose({
|
||||
<!-- 输入框 -->
|
||||
<div class="inputBox">
|
||||
<el-input
|
||||
ref="inputRef"
|
||||
class="searchText"
|
||||
placeholder="Hi,您好！请输入您想了解的服务区..."
|
||||
v-model="searchText"
|
||||
@ -2017,6 +2301,20 @@ defineExpose({
|
||||
>
|
||||
{{ item.label || "" }}
|
||||
</div>
|
||||
<div
|
||||
v-if="!duringInspection"
|
||||
class="filterItem"
|
||||
@click="servicepartInspection(inspectionIndex)"
|
||||
>
|
||||
{{ inspectionIndex > 0 ? "继续巡检" : "服务区巡检" }}
|
||||
</div>
|
||||
<div
|
||||
v-if="duringInspection"
|
||||
class="filterItem"
|
||||
@click="handleCloseInspection()"
|
||||
>
|
||||
{{ "暂停巡检" }}
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
class="filterIcon"
|
||||
|
||||
43
src/components/map/component/rightDetail.less
Normal file
43
src/components/map/component/rightDetail.less
Normal file
@ -0,0 +1,43 @@
|
||||
.rightDetailBox{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
.tabTop{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.tabBox{
|
||||
width: calc(100% - 56px);
|
||||
}
|
||||
.noTab{
|
||||
.noTabIcon{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.closeIcon{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
.detailContent{
|
||||
|
||||
}
|
||||
|
||||
.el-tabs{
|
||||
box-sizing: border-box;
|
||||
padding-top: 8px;
|
||||
.el-tabs__header{
|
||||
.el-tabs__item{
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
.is-active{
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
98
src/components/map/component/rightDetail.vue
Normal file
98
src/components/map/component/rightDetail.vue
Normal file
@ -0,0 +1,98 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, watch } from "vue";
|
||||
import "./rightDetail.less";
|
||||
import { handleGetBrandReceivables } from "../service";
|
||||
|
||||
// 选择的标签
|
||||
let selectTab = ref<number>(0);
|
||||
// 标签列表
|
||||
let tabList: any = [
|
||||
{ label: "基础信息", value: 1 },
|
||||
{ label: "在营项目", value: 2 },
|
||||
];
|
||||
// 在营项目列表
|
||||
let onlineProjectList = reactive<any>([]);
|
||||
|
||||
// tab标签的点击事件
|
||||
const handleClickTab = (tabs: any, event: any) => {
|
||||
selectTab.value = tabs.props.name;
|
||||
};
|
||||
|
||||
// tab清空选择
|
||||
const handleNoSelectTab = () => {
|
||||
selectTab.value = 0;
|
||||
};
|
||||
|
||||
// 隐藏整个右侧详情
|
||||
const handleHideDetail = () => {
|
||||
emit("handleCloseRightDetail");
|
||||
};
|
||||
|
||||
// 拿到该服务区的经营项目列表
|
||||
const handleGetBusinessProjectList = async () => {
|
||||
let req: any = {
|
||||
ServerpartId: props.currentServerPartDetail.SERVERPART_ID,
|
||||
ShowProjectSplit: false,
|
||||
};
|
||||
const data = await handleGetBrandReceivables(req);
|
||||
console.log("data", data);
|
||||
onlineProjectList = data;
|
||||
};
|
||||
|
||||
// 传入的数据
|
||||
const props = defineProps<{
|
||||
currentServerPartDetail: any;
|
||||
}>();
|
||||
|
||||
// 监听传入的选中服务区
|
||||
watch(
|
||||
() => props.currentServerPartDetail,
|
||||
(newVal, oldVal) => {
|
||||
console.log("newVal", newVal);
|
||||
console.log("oldVal", oldVal);
|
||||
if (newVal) {
|
||||
handleGetBusinessProjectList();
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
// 传入的方法
|
||||
const emit = defineEmits<{
|
||||
(e: "handleCloseRightDetail"): void; // 关闭整个
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="rightDetailBox">
|
||||
<div class="tabTop">
|
||||
<div class="tabBox">
|
||||
<el-tabs v-model="selectTab" @tab-click="handleClickTab">
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in tabList"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:name="item.value"
|
||||
></el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<div class="noTab">
|
||||
<img
|
||||
class="noTabIcon"
|
||||
src="@/assets/ai/clearIcon.png"
|
||||
@click="handleNoSelectTab()"
|
||||
/>
|
||||
</div>
|
||||
<img
|
||||
class="closeIcon"
|
||||
src="@/assets/ai/dropDown.png"
|
||||
@click="handleHideDetail()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="detailContent">
|
||||
<div class="projectList"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -84,6 +84,20 @@
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.el-popover{
|
||||
background-color: #000!important;
|
||||
.el-popover__title{
|
||||
color: #fff!important;
|
||||
}
|
||||
.el-popper__arrow::before{
|
||||
background-color: #000!important;
|
||||
}
|
||||
.is-light{
|
||||
border-color: #000!important;
|
||||
}
|
||||
}
|
||||
@ -62,12 +62,39 @@ const showFilterList = () => {
|
||||
};
|
||||
// 列表的展开点击事件
|
||||
const handleClickFilter = (value: string) => {
|
||||
emit("handleHiddenSuspended");
|
||||
if (value === "7") {
|
||||
selectFilterList.value = "";
|
||||
filterList.forEach((item: any) => {
|
||||
item.isSelect = false;
|
||||
});
|
||||
emit("handleDeleteSelect");
|
||||
} else {
|
||||
// 经营业态 和 预警类型只能同时存在一个
|
||||
if (value === "5") {
|
||||
if (selectFilterList.value) {
|
||||
// selectFilterList.value已经有点击了 预警类型 那么要去掉6
|
||||
if (selectFilterList.value.indexOf("6") !== -1) {
|
||||
selectFilterList.value = selectFilterList.value.replace("6", "");
|
||||
nextTick(() => {
|
||||
filterList.filter((item: any) => item.value === "6")[0].isSelect =
|
||||
false;
|
||||
});
|
||||
}
|
||||
}
|
||||
} else if (value === "6") {
|
||||
if (selectFilterList.value) {
|
||||
// selectFilterList.value已经有点击了 经营业态 那么要去掉5
|
||||
if (selectFilterList.value.indexOf("5") !== -1) {
|
||||
selectFilterList.value = selectFilterList.value.replace("5", "");
|
||||
nextTick(() => {
|
||||
filterList.filter((item: any) => item.value === "5")[0].isSelect =
|
||||
false;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 经营业态的查询需要加上经营业态
|
||||
if (
|
||||
value === "5" &&
|
||||
@ -80,6 +107,7 @@ const handleClickFilter = (value: string) => {
|
||||
handleShowMoreFormBox();
|
||||
return;
|
||||
}
|
||||
|
||||
// 车辆归属地的查询需要有选中的服务区
|
||||
if (value === "4" && !props.currentServerPartDetail) {
|
||||
ElMessage({
|
||||
@ -88,6 +116,7 @@ const handleClickFilter = (value: string) => {
|
||||
});
|
||||
return;
|
||||
}
|
||||
console.log("selectFilterList.value", selectFilterList.value);
|
||||
|
||||
if (selectFilterList.value) {
|
||||
if (selectFilterList.value.indexOf(value) === -1) {
|
||||
@ -177,6 +206,8 @@ onMounted(() => {
|
||||
// 传入的方法
|
||||
const emit = defineEmits<{
|
||||
(e: "handleChangeMapShow", nowSelect: any): void; // 根据selectFilterList.value的选中 来对地图进行不同的操作
|
||||
(e: "handleDeleteSelect"): void; // 清除选中的效果
|
||||
(e: "handleHiddenSuspended"): void; // 悬浮框的清除方法
|
||||
}>();
|
||||
|
||||
// 传入的数据
|
||||
@ -187,6 +218,7 @@ const props = defineProps<{
|
||||
watch(
|
||||
() => selectFilterList.value,
|
||||
(newVal, oldVal) => {
|
||||
console.log("newVal", newVal);
|
||||
emit("handleChangeMapShow", newVal);
|
||||
},
|
||||
{ deep: true }
|
||||
@ -237,6 +269,12 @@ defineExpose({
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div style="width: 100%; display: flex; justify-content: flex-end">
|
||||
<el-button type="primary" @click="handleClickFilter('5')"
|
||||
>查询</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
class="closeIcon"
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
}
|
||||
|
||||
.RobotBox{
|
||||
width: 600px;
|
||||
width: 40%;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
@ -27,5 +27,13 @@
|
||||
right: 16px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.serverpartDetail{
|
||||
width: 25%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
}
|
||||
@ -20,6 +20,8 @@ import RobotDialogueBox from "./component/RobotDialogueBox.vue";
|
||||
// @ts-ignore
|
||||
import RightSearchBox from "./component/RightSearchBox.vue";
|
||||
// @ts-ignore
|
||||
import RightDetail from "./component/rightDetail.vue";
|
||||
// @ts-ignore
|
||||
import detailText from "./component/detailText";
|
||||
import { nextTick } from "process";
|
||||
import moment from "moment";
|
||||
@ -35,6 +37,8 @@ const scene = ref<any>();
|
||||
const RobotDialogueBoxRef = ref();
|
||||
// 右侧的选择实例
|
||||
const RightSearchBoxRef = ref();
|
||||
// 右侧详情抽屉
|
||||
const RightDetailRef = ref();
|
||||
// 悬浮框实例
|
||||
const hoverPoint = ref<any>();
|
||||
// 所有服务区的数据
|
||||
@ -51,6 +55,8 @@ let searchSelectServerPartId = reactive<any>([]);
|
||||
let nowSelectId = ref<string>("");
|
||||
// 全部服务区的id集合
|
||||
let allServerPartIdList = reactive<any>([]);
|
||||
// 是否显示右侧的服务区详情
|
||||
let showRightDetail = ref<boolean>(true);
|
||||
|
||||
onMounted(async () => {
|
||||
scene.value = new Scene({
|
||||
@ -315,6 +321,8 @@ const handleClickPointLayer = async (detail: any) => {
|
||||
// 查看右边选中了哪些 调用在新的上面
|
||||
let nowSelect: string = RightSearchBoxRef.value.selectFilterList;
|
||||
await handleChangeMapShow(nowSelect);
|
||||
// 右侧的详情抽屉
|
||||
showRightDetail.value = true;
|
||||
|
||||
// // 对话框上方是否选中了
|
||||
// let selectTab: any = RobotDialogueBoxRef.value.selectTab;
|
||||
@ -347,6 +355,12 @@ const handleAddSelect = (detail: any) => {
|
||||
scene.value.addLayer(lightPointLayer);
|
||||
};
|
||||
|
||||
// 点击垃圾桶 清除选中效果
|
||||
const handleDeleteSelect = () => {
|
||||
handleDeleteLayer("lightPointLayer");
|
||||
currentServerPartDetail.value = undefined;
|
||||
};
|
||||
|
||||
// 取消服务区选中等效果的实现方法
|
||||
const handleChangeToDefault = () => {
|
||||
// 清除当前选中的服务区值
|
||||
@ -1149,11 +1163,14 @@ const handleGetBusinessFormat = async () => {
|
||||
|
||||
// 预警类型
|
||||
const handleWarningData = async () => {
|
||||
if (currentServerPartDetail) {
|
||||
RobotDialogueBoxRef.value.handleSelectWarning()
|
||||
} else {
|
||||
await RobotDialogueBoxRef.value.handleSetWarningData();
|
||||
}
|
||||
console.log("currentServerPartDetail", currentServerPartDetail);
|
||||
nextTick(() => {
|
||||
if (currentServerPartDetail.value) {
|
||||
RobotDialogueBoxRef.value.handleSelectWarning();
|
||||
} else {
|
||||
RobotDialogueBoxRef.value.handleSetWarningData();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 对预警类型的地图进行操作
|
||||
@ -1325,6 +1342,71 @@ const handleChangeMapShow = async (nowSelect: string) => {
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 服务区巡检的实际方法
|
||||
const handleAreaInspection = async (i: number) => {
|
||||
if (i < defaultServerPartList.length) {
|
||||
// i 为当前执行到第几项的索引
|
||||
currentServerPartDetail.value = defaultServerPartList[i];
|
||||
// 先给上一次的图层 添加清除
|
||||
handleDeleteNoDefault("");
|
||||
// 每次巡检前 把 悬浮框先给隐藏起来
|
||||
hoverPoint.value.style.display = "none";
|
||||
// 给当前索引的服务区 加上选中的效果
|
||||
handleAddSelect(currentServerPartDetail.value);
|
||||
console.log(i, currentServerPartDetail.value);
|
||||
// 图层样式添加
|
||||
await handleChangeMapShow("1,2,4");
|
||||
// 拿到 经营数据 在营商家
|
||||
let answerData: any =
|
||||
await RobotDialogueBoxRef.value.handleInspectionQuestions(
|
||||
`${currentServerPartDetail.value.SERVERPART_NAME}经营数据`
|
||||
);
|
||||
let merchantData: any =
|
||||
await RobotDialogueBoxRef.value.handleInspectionQuestions(
|
||||
`${currentServerPartDetail.value.SERVERPART_NAME}在营商家`
|
||||
);
|
||||
console.log("answerData3213123", answerData);
|
||||
|
||||
// 其他要显示的文字
|
||||
let otherObj: any = {
|
||||
businessText: answerData,
|
||||
merchantText: merchantData,
|
||||
};
|
||||
|
||||
nextTick(async () => {
|
||||
currentServerPartDetail.value = defaultServerPartList[i];
|
||||
let nowDetail: any = JSON.parse(JSON.stringify(defaultServerPartList[i]));
|
||||
// 对话框样式内容添加
|
||||
RobotDialogueBoxRef.value.handleInspectionDialogueBox(
|
||||
nowDetail,
|
||||
otherObj
|
||||
);
|
||||
});
|
||||
} else {
|
||||
RobotDialogueBoxRef.value.closeInspection();
|
||||
}
|
||||
|
||||
// for (let i = 0; i < defaultServerPartList.length; i++) {
|
||||
// const loadingInstance = ElLoading.service({
|
||||
// fullscreen: true,
|
||||
// background: "#00000080",
|
||||
// text: "数据加载中...",
|
||||
// });
|
||||
|
||||
// loadingInstance.close();
|
||||
// }
|
||||
};
|
||||
|
||||
// 隐藏悬浮框
|
||||
const handleHiddenSuspended = () => {
|
||||
hoverPoint.value.style.display = "none";
|
||||
};
|
||||
|
||||
// 关闭右侧服务区详情
|
||||
const handleCloseRightDetail = () => {
|
||||
showRightDetail.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -1335,17 +1417,31 @@ const handleChangeMapShow = async (nowSelect: string) => {
|
||||
@handleLightServerpart="handleLightServerpart"
|
||||
@handleEnterySearch="handleEnterySearch"
|
||||
@handleWarningMap="handleWarningMap"
|
||||
@handleAreaInspection="handleAreaInspection"
|
||||
@handleHiddenSuspended="handleHiddenSuspended"
|
||||
:currentServerPartDetail="currentServerPartDetail"
|
||||
:allServerPartIdList="allServerPartIdList"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rightSearchBox">
|
||||
<div
|
||||
class="rightSearchBox"
|
||||
:style="{ right: showRightDetail ? 'calc(25% + 8px)' : '16px' }"
|
||||
>
|
||||
<RightSearchBox
|
||||
ref="RightSearchBoxRef"
|
||||
@handleChangeMapShow="handleChangeMapShow"
|
||||
@handleDeleteSelect="handleDeleteSelect"
|
||||
@handleHiddenSuspended="handleHiddenSuspended"
|
||||
:currentServerPartDetail="currentServerPartDetail"
|
||||
/>
|
||||
</div>
|
||||
<div class="serverpartDetail" v-if="showRightDetail">
|
||||
<RightDetail
|
||||
ref="RightDetailRef"
|
||||
:currentServerPartDetail="currentServerPartDetail"
|
||||
@handleCloseRightDetail="handleCloseRightDetail"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -135,4 +135,13 @@ export async function handleGetPeriodWarningList(params: any) {
|
||||
return data
|
||||
}
|
||||
return wrapTreeNode(data.Result_Data.List);
|
||||
}
|
||||
}
|
||||
|
||||
// 经营项目列表
|
||||
export async function handleGetBrandReceivables(params: any) {
|
||||
const data: any = await request.get('/BusinessProject/GetBrandReceivables', params)
|
||||
if (data.Result_Code !== 100) {
|
||||
return data
|
||||
}
|
||||
return data.Result_Data.List;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user