feat: “智能聊天机器人”

src/main.js

@@ -4,7 +4,7 @@ import {
   AddressList, Field, CellGroup, Cell, SwipeCell, Icon, Stepper, Card, Checkbox, CheckboxGroup, Button, Swipe, SwipeItem,
   PullRefresh, List, Tab, Tabs, SubmitBar, Toast, Skeleton, RadioGroup, Radio, NoticeBar, ActionSheet, Cascader, Col, Row,
   Slider, DatePicker, Switch, Calendar, Picker, Uploader, Tag, DropdownMenu, DropdownItem, Notify, ConfigProvider, NavBar,
-  Area, Popover, Collapse, CollapseItem, PickerGroup, TimePicker, BackTop, Progress, Tabbar, TabbarItem, Search
+  Area, Popover, Collapse, CollapseItem, PickerGroup, TimePicker, BackTop, Progress, Tabbar, TabbarItem, Search, FloatingBubble
 } from 'vant';
 import { Image as VanImage } from 'vant';
 import App from './App.vue'
@@ -91,6 +91,7 @@ app.use(ActionBarButton)
   .use(Tabbar)
   .use(TabbarItem)
   .use(Search)
+  .use(FloatingBubble)
 
 app.use(router)
 app.use(store)

src/views/device/paramsSet/index.vue

@@ -6,7 +6,7 @@
       <div class="wrap2 flex-col van-hairline--bottom">
         <div class="outer1 flex-row justify-between">
           <div class="block1 flex-col"></div>
-          <span class="txt2">{{$t('device.equipmentName')}}：{{deviceDetal ? deviceDetal.name : ''}}</span>
+          <span class="txt2">{{ $t('device.equipmentName') }}：{{ deviceDetal ? deviceDetal.name : '' }}</span>
         </div>
       </div>
       <!-- <div class="list van-hairline--bottom" @click="pushPage('0')">
@@ -23,28 +23,28 @@
       <div class="list van-hairline--bottom" @click="pushPage('0')">
         <div class="title">
           <img class="icon" src='../../../assets/device/currency1.png' />
-          <span class="word3">{{$t('device.generalParameterConfiguration')}}</span>
+          <span class="word3">{{ $t('device.generalParameterConfiguration') }}</span>
         </div>
         <div class="outer2 flex-col"></div>
       </div>
       <div class="list van-hairline--bottom" @click="pushPage('1')">
         <div class="title">
           <img class="icon" src='../../../assets/device/advanced.png' />
-          <span class="word3">{{$t('device.advancedParameterConfiguration')}}</span>
+          <span class="word3">{{ $t('device.advancedParameterConfiguration') }}</span>
         </div>
         <div class="outer2 flex-col"></div>
       </div>
       <div class="list van-hairline--bottom" @click="pushPage('2')">
         <div class="title">
           <img class="icon" src='../../../assets/device/debug.png' />
-          <span class="word3">{{$t('device.debuggingParameterConfiguration')}}</span>
+          <span class="word3">{{ $t('device.debuggingParameterConfiguration') }}</span>
         </div>
         <div class="outer2 flex-col"></div>
       </div>
       <div class="list van-hairline--bottom" @click="pushPage('3')">
         <div class="title">
           <img class="icon" src='../../../assets/device/humanness.png' />
-          <span class="word3">{{$t('device.humidityParameterConfiguration')}}</span>
+          <span class="word3">{{ $t('device.humidityParameterConfiguration') }}</span>
         </div>
         <div class="outer2 flex-col"></div>
       </div>
@@ -57,7 +57,7 @@ import sHeader from "@/components/SimpleHeader";
 import { useRoute, useRouter } from 'vue-router';
 import { getDeviceDetal } from '@/service/device'
 import { showFailToast } from 'vant';
-import {styleUrl} from "../../../common/js/utils";
+import { styleUrl } from "../../../common/js/utils";
 
 export default {
   components: { sHeader },
@@ -74,13 +74,13 @@ export default {
     });
     // 获取设备列表数据
     const getDeviceDetalFun = async () => {
-      const { data } = await getDeviceDetal({id : deviceId});
+      const { data } = await getDeviceDetal({ id: deviceId });
       if (data.code === '00000') {
         deviceDetal.value = data.data;
       } else { showFailToast(data.message); }
     }
     const pushPage = (number) => {
-      router.push({ path: 'paramsSetInfo', query: { type: number, deviceId: route.query.deviceId }})
+      router.push({ path: 'paramsSetInfo', query: { type: number, deviceId: route.query.deviceId } })
     }
     return {
       deviceDetal,

src/views/home/index.vue

@@ -123,10 +123,24 @@
     <van-dialog v-model:show="showAlarm" :title="$t('home.alarmTitle')" @confirm="confirmAlarm">
       <div style="max-height: 30vh; overflow-y: auto;">
         <div v-for="(item, index) in alarmList" :key="index" style="padding: 2px 5px;">
-          <van-cell :title="$t('home.alarmDevice') + (item.name ? item.name : item.clientId.slice(-6)) + $t('home.alarmContent') + item.alarmContent" />
+          <van-cell
+            :title="$t('home.alarmDevice') + (item.name ? item.name : item.clientId.slice(-6)) + $t('home.alarmContent') + item.alarmContent" />
         </div>
       </div>
     </van-dialog>
+    <template v-if="isShowRobot">
+      <van-floating-bubble v-model:offset="offset" axis="xy" :icon="robotIcon" magnetic="x"
+        @offset-change="onOffsetChange" @click="onClickBot">
+      </van-floating-bubble>
+
+      <van-popup v-model:show="popupVisible" closeable close-icon="close" position="bottom" :style="{ height: '90%' }" round 
+        @click="onClose"  >
+        <!--    @click-overlay="onClickOverlay" @click-close-icon="onClickCloseIcon" -->
+        <iframe :src="aiUrl" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
+          style="width: 100%; height: 100%;"></iframe>
+      </van-popup>
+    </template>
+
   </div>
 </template>
 
@@ -151,6 +165,8 @@ import {
 import dateUtil from "../../utils/dateUtil";
 import { useI18n } from "vue-i18n";
 import { showToast } from "vant";
+import RobotIcon from '@/assets/home/robot.png';
+// import { getLocal } from "@/common/js/utils";
 
 export default {
   name: "home",
@@ -161,8 +177,11 @@ export default {
     typeSelectList,
     kDialog,
     kNoData,
+    // [Popup.name]: Popup,
   },
   setup() {
+    // 是否显示机器人
+    const isShowRobot = ref(false);
     // 设备状况
     const equipStatus = ref({});
     // 获取设备情况
@@ -432,6 +451,10 @@ export default {
           alarmList.value = data.data;
         }
       }
+
+      if (localStorage.getItem('curLang') == 'zh') { // 机器人仅在中文环境下使用
+        isShowRobot.value = true;
+      }
     });
 
     const confirmAlarm = () => {
@@ -607,6 +630,39 @@ export default {
       return require(`../../assets/home/${url}.png`);
     };
 
+    // const aiDialog = showDialog();
+    const offset = ref({ x: Math.floor(window.innerWidth * 0.8), y: Math.floor(window.innerHeight * 0.7) });
+
+    const popupVisible = ref(false);
+    // const token = getLocal("token");
+    // const openid = "f45sdFu2eXPtjeyzhUmcJ9wZiOSfPr";
+    // const avatar = "用户头像";
+
+    // 构建带有动态 token 和 openid 的 AI URL
+    // const aiUrl = `https://chatbot.weixin.qq.com/webapp/auth/${token.value}?openid=${userName.value}&nickname=${userName.value}&avatar=${userName.value}&robotName=${"显示在页面顶部的title信息"}`;
+
+    // const aiUrl = "https://chatbot.weixin.qq.com/webapp/f45sdFu2eXPtjeyzhUmcJ9wZiOSfPr?robotName=Ritchie"; // 微信对话
+    const aiUrl = "https://chatbot.aliyuncs.com/intl/index.htm?locale=zh-CN&from=0x0R41zuRE"; // 阿里云智能对话机器人
+
+    // AI小助手
+    const onClickBot = () => {
+      popupVisible.value = true;
+    }
+
+    const onOffsetChange = (offset) => {
+      offset.value = offset;
+    }
+
+    const onClose = () => {
+      popupVisible.value = false;
+    }
+    // const onClickOverlay = () => {
+    //   popupVisible.value = false;
+    // };
+    // const onClickCloseIcon = () => {
+    //   popupVisible.value = false;
+    // };
+
     return {
       userName,
       update,
@@ -634,7 +690,17 @@ export default {
       pic1,
       showAlarm,
       alarmList,
-      confirmAlarm
+      confirmAlarm,
+      onOffsetChange,
+      robotIcon: RobotIcon,
+      aiUrl,
+      popupVisible,
+      // onClickOverlay,
+      // onClickCloseIcon,
+      onClose,
+      onClickBot,
+      offset,
+      isShowRobot,
     };
   },