update

eslint.config.js

@@ -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: {
-    // 自定义规则
+    'vue/max-attributes-per-line': ['error', {
-    "no-nested-ternary": 1,
+      'singleline': 3
-    "no-use-before-define": 1,
+    }],
-    "no-param-reassign": 0,
+    '@typescript-eslint/no-explicit-any': 'off',
-    "no-plusplus": 0,
-    "eqeqeq": 0,
-    "no-useless-escape": 0,
-    "prefer-destructuring": 0,
-    "no-lonely-if": 0
   },
 };

src/components/map/component/RobotDialogueBox.less

@@ -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;

src/components/map/component/RobotDialogueBox.vue

@@ -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) {
+    // 判断一下输入框的文字 是不是巡检的 不是的走语义
+    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) => {
+    if (newVal) {
+      // 不在巡检状态
+      if (selectTab.value !== 0 && !duringInspection.value) {
         console.log("new", newVal);
         console.log("old", oldVal);
-    if (newVal) {
-      if (selectTab.value !== 0) {
         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
+          <div class="dialogueTextBox">
-            class="dialogueTextBox"
-            v-loading="isNewDialogLoading && index === dialogueList.length - 1"
-          >
             <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"

src/components/map/component/rightDetail.less

@@ -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;
+            }
+        }
+    }
+}

src/components/map/component/rightDetail.vue

@@ -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>

src/components/map/component/rightSearchBox.less

@@ -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;
+    }
 }

src/components/map/component/rightSearchBox.vue

@@ -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"

src/components/map/index.less

@@ -14,7 +14,7 @@
     }
 
     .RobotBox{
-        width: 600px;
+        width: 40%;
         position: absolute;
         top: 16px;
         left: 16px;
@@ -28,4 +28,12 @@
         z-index: 10;
     }
 
+    .serverpartDetail{
+        width: 25%;
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 10;
+    }
+   
 }

src/components/map/index.vue

@@ -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) {
+  console.log("currentServerPartDetail", currentServerPartDetail);
-     RobotDialogueBoxRef.value.handleSelectWarning()
+  nextTick(() => {
+    if (currentServerPartDetail.value) {
+      RobotDialogueBoxRef.value.handleSelectWarning();
     } else {
-    await RobotDialogueBoxRef.value.handleSetWarningData();
+      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>

src/components/map/service.ts

@@ -136,3 +136,12 @@ export async function handleGetPeriodWarningList(params: any) {
     }
     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;
+}