图片路径

index.html

@@ -5,8 +5,8 @@
   <meta charset="UTF-8" />
   <link rel="icon" href="/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <script src="/src/assets/js/leaderline.js"></script>
-  <script src="/src/config.js"></script>
+  <script src="/js/leaderline.js"></script>
+  <script src="/config.js"></script>
   <title>元宇宙 App</title>
   <style>
     * {

src/config.js

@@ -1,7 +1,5 @@
 window.g = {
     // 获取数据请求地址
     BASE_API: "http://192.168.4.219:12397/ioc-server",
-
-
-
+    UE_IP: "http://127.0.0.1:80"
 };

src/components/UeVideo.vue

@@ -23,7 +23,7 @@ export default {
 
       videoInstance = initLoad({
         context,
-        serverUrl: "http://127.0.0.1:80",
+        serverUrl: window.g.UE_IP,
         autoConnection: false,
         showPlayOverlay: true,
         qualityControl: true,

src/components/home.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="container">
         <div class="header">
-            <img src="../assets/img/head.png" alt="" />
+            <img :src="headImg" alt="" />
         </div>
         <el-container>
             <left></left>
@@ -41,7 +41,7 @@ import { videoPlay } from "vue3-video-play";
 import CircleProgress from './CircleProgress.vue';
 import Left from './left.vue'
 import Right from './right.vue'
-import LeaderLine from "../assets/js/leaderline.js"
+import LeaderLine from "../../public/js/leaderline.js"
 import { getClassDetail } from '../request/api.js'
 export default ({
     name: 'Histogram',
@@ -76,46 +76,7 @@ export default ({
             ], //显示所有按钮,
         });
         // 物联设备类型统计
-        const interDevice = ref(
-            [
-                // {
-                //     number: 98,
-                //     color: "#63ABFF",
-                //     icon: 'r1',
-                //     text: "显示系统"
-                // },
-                // {
-                //     number: 185,
-                //     color: "#63FFC7",
-                //     icon: 'r2',
-                //     text: "控制设备"
-                // },
-                // {
-                //     number: 58,
-                //     color: "#918EFF",
-                //     icon: 'r3',
-                //     text: "音频设备"
-                // },
-                // {
-                //     number: 68,
-                //     color: "#00C8E3",
-                //     icon: 'r4',
-                //     text: "录播设备"
-                // },
-                // {
-                //     number: 189,
-                //     color: "#FFBB54",
-                //     icon: 'r5',
-                //     text: "环境设备"
-                // },
-                // {
-                //     number: 98,
-                //     color: "#00CF78",
-                //     icon: 'r6',
-                //     text: "安全管理"
-                // },
-
-            ])
+        const interDevice = ref([])
         // 位置弹框
         let centerDialogVisible = ref(false)
         // 获取点击点数据
@@ -251,146 +212,23 @@ export default ({
             }
 
 
-
-            // linedomRef.value.style.top = json.y + "px";
-            // linedomRef.value.style.left = json.x + "px";
-
-
-            // console.log("看一下---小圆点的值--top", linedomRef.value.style.top)
-            // console.log("看一下---小圆点的值--left", linedomRef.value.style.left)
-
-            // // 弹出框位置
-
-            // popoverRef.value.style.display = "block"
-            // switch (json.direction) {
-            //     case "Left":
-            //         popoverRef.value.style.top = json.y - 30 + 'px'
-            //         popoverRef.value.style.left = json.x - 320 + 'px'
-            //         break;
-            //     case "Up":
-            //         popoverRef.value.style.top = (json.y - 350) + 'px'
-            //         popoverRef.value.style.left = (json.x - 120) + 'px'
-            //         break;
-            //     case "Right":
-            //         popoverRef.value.style.top = (Number(json.y)) + 'px'
-            //         popoverRef.value.style.left = Number(json.x) + 100 + 'px'
-
-            //         break;
-            //     case "Down":
-            //         popoverRef.value.style.top = (Number(json.y) + 100) + 'px'
-            //         popoverRef.value.style.left = Number(json.x) + 'px'
-            //         break;
-            //     default:
-            //         popoverRef.value.style.top = json.y - 60 + 'px'
-            //         popoverRef.value.style.left = json.x + 'px'
-
-            //         break;
-            // }
-            // if (lineContainer.value) {
-            //     lineContainer.value.remove()
-            // }
-            // setTimeout(() => {
-            //     lineContainer.value = new LeaderLine(linedomRef.value, popoverRef.value, lineStyleOption.value)
-            //     lineContainer.value.show('draw', {
-            //         duration: 1000, //持续时长
-            //         timing: 'ease-in' // 动画函数
-            //     })
-            //     lineContainer.value.endPlugOutline = true;
-            //     lineContainer.value.startPlugOutline = true;
-            //     lineContainer.value.position();
-            // }, 3000);
-
+        }
+        const getWindowInfo = function () {
+            console.log("监听一下窗口是不是改了", lineContainer);
+            setTimeout(() => {
+                if (lineContainer) {
+                    console.log("怎么没有变黄啊");
+                    lineContainer.value.position();
+                }
+            }, 0);
 
         }
         onMounted(() => {
-            // window.addEventListener('mousedown', mouseClick);
-
-            // 监听一下页面点击情况
-            // addResponseEventListener("open", (data) => {
-            //     if (data) {
-            //         let json = eval("(" + data + ")");//转对象
-            //         clickData.value = json;
-            //         console.log("clickData---点击的数据", json)
-            //         // console.log("看一下", linedomRef.value.style.top, json, "json")
-            //         visible.value = true
-            //         linedomRef.value.style.top = json.y + "px";
-            //         linedomRef.value.style.left = json.x + "px";
-
-            //         // let dot = {
-            //         //     x: json.x,
-            //         //     y: json.y - 80
-            //         // }
-            //         console.log("看一下---小圆点的值--top", linedomRef.value.style.top)
-            //         console.log("看一下---小圆点的值--left", linedomRef.value.style.left)
-
-            //         // 弹出框位置
-            //         // popoverRef.value.style.display = "block"
-            //         // popoverRef.value.style.top = json.y - 60 + 'px'
-            //         // popoverRef.value.style.left = json.x + 'px'
-            //         popoverRef.value.style.display = "block"
-            //         // alert(json.x, json.y)
-            //         switch (json.direction) {
-            //             case "Left":
-            //                 // mousemoveHandler(json.x - 380, dot.y)
-            //                 popoverRef.value.style.top = json.y - 60 + 'px'
-            //                 popoverRef.value.style.left = json.x - 380 + 'px'
-
-            //                 break;
-            //             case "Up":
-            //                 // console.log("在最上面", json.x, json.x - 100);
-            //                 // mousemoveHandler(dot.x - 80, dot.y - 200);
-            //                 popoverRef.value.style.top = (json.y - 350) + 'px'
-            //                 popoverRef.value.style.left = (json.x - 120) + 'px'
-
-            //                 break;
-            //             case "Right":
-            //                 console.log("没有走到这里来吗", 12312);
-            //                 popoverRef.value.style.top = (Number(json.y)) + 'px'
-            //                 popoverRef.value.style.left = Number(json.x) + 100 + 'px'
-
-            //                 // mousemoveHandler(Number(json.x) + 30, Number(json.y) - 80)
-            //                 break;
-            //             case "Down":
-            //                 popoverRef.value.style.top = (Number(json.y) + 100) + 'px'
-            //                 popoverRef.value.style.left = Number(json.x) + 'px'
-            //                 break;
-            //             default:
-            //                 popoverRef.value.style.top = json.y - 60 + 'px'
-            //                 popoverRef.value.style.left = json.x + 'px'
-
-            //                 break;
-            //         }
-            //         if (lineContainer.value) {
-            //             lineContainer.value.remove()
-            //         }
-            //         setTimeout(() => {
-            //             lineContainer.value = new LeaderLine(linedomRef.value, popoverRef.value, lineStyleOption.value)
-            //             lineContainer.value.show('draw', {
-            //                 duration: 1000, //持续时长
-            //                 timing: 'ease-in' // 动画函数
-            //             })
-            //             lineContainer.value.endPlugOutline = true;
-            //             lineContainer.value.startPlugOutline = true;
-            //             lineContainer.value.position();
-            //         }, 0);
-
-
-
-            //     }
-            // })
-
-            addResponseEventListener("End", handleResponseFunction)
-            // addResponseEventListener("End", (data) => {
-            //     let json = eval("(" + data + ")");
-            //     // clickData.value = json;
-            //     // classDevice()
-            //     // // classDevice()
-            //     console.log("移动结束", 123123, data)
-
-            // })
+            addResponseEventListener("End", handleResponseFunction);
+            window.addEventListener('resize', getWindowInfo);
 
         })
-
+        const headImg = ref('./img/head.png')
         return {
             centerDialogVisible,
             interDevice,
@@ -406,6 +244,7 @@ export default ({
             lineContainer,
             classDeviceInfo,
             mouseClick,
+            headImg
         }
     },
 })

src/components/left.vue

@@ -26,7 +26,9 @@
             <div class="content">
                 <div class="count" v-for="(item, index) in classCount" :key="index">
                     <CircleProgress :target-value="item.number" :color="item.color" text-position="bottom">
-                        <img :src="'src/assets/img/' + item.imgnumber + '.png'" alt="">
+                        <img :src="leftimg + item.imgnumber + '.png'" alt="">
+
+                        <!-- <img :src="'src/assets/img/' + item.imgnumber + '.png'" alt=""> -->
                     </CircleProgress>
                     <div class="text">{{ item.text }}</div>
                 </div>
@@ -334,6 +336,7 @@ export default ({
                 }
             }
         }
+        const leftimg = ref("./img/")
         return {
             popoverVisible,
             classCount,
@@ -346,7 +349,8 @@ export default ({
             popoverRef,
             classRoomCount,
             triggerRef,
-            classInfo
+            classInfo,
+            leftimg
         }
     },
 })

src/components/right.vue

@@ -7,20 +7,20 @@
             <div class="content">
                 <div class="logo">
                     <span>{{ equipmentTotal.total }}</span>
-                    <img class="animate" src="../assets/img/d1_1.png" alt="">
-                    <img src="../assets/img/d1_2.png" alt="">
+                    <img class="animate" :src="d1img" alt="">
+                    <img :src="d12img" alt="">
                     <span><b>总数</b>(个)</span>
                 </div>
                 <div class="list">
                     <div class="item_r">
-                        <img src="../assets/img/d2.png" alt="">
+                        <img :src="d2img" alt="">
                         <div class="percent">
                             在线&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ equipmentTotal.online }}
                             <span>(个)</span>
                         </div>
                     </div>
                     <div class="item_r">
-                        <img src="../assets/img/d3.png" alt="">
+                        <img :src="d3img" alt="">
                         <div class="percent">
                             离线&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{ equipmentTotal.underline }}
                             <span>(个)</span>
@@ -37,7 +37,8 @@
             <div class="contentwrap">
                 <div class="count" v-for="(item, index) in interDevice" :key="index">
                     <CircleProgress :target-value="item.number" :color="item.color" text-position="top">
-                        <img :src="'src/assets/img/' + item.icon + '.png'" alt="">
+                        <img :src="deviceImg + item.icon + '.png'" alt="">
+                        <!-- <img :src="'src/assets/img/' + item.icon + '.png'" alt=""> -->
                     </CircleProgress>
                     <div class="text">{{ item.text }}</div>
                 </div>
@@ -55,7 +56,8 @@
                         <div class="interactclass">
                             <div class="room" v-for="(item, index) in item.activeMonitor.array" :key="index">
                                 <span>{{ item.title }}</span>
-                                <img :src="'src/assets/img/' + 'rb2' + '.png'" alt="" @click="lookVideo(item.src)">
+                                <img :src="deviceImg + 'rb2.png'" alt="" @click="lookVideo(item.src)">
+                                <!-- <img :src="'src/assets/img/' + 'rb2' + '.png'" alt="" @click="lookVideo(item.src)"> -->
                             </div>
                         </div>
 
@@ -63,7 +65,9 @@
                         <div class="interactclass">
                             <div class="room" v-for="(item, index) in item.activeMonitor.array" :key="index">
                                 <span>{{ item.title }}</span>
-                                <img :src="'src/assets/img/' + 'rb2' + '.png'" alt="" @click="lookVideo(item.src)">
+                                <img :src="deviceImg + 'rb2.png'" alt="" @click="lookVideo(item.src)">
+
+                                <!-- <img :src="'src/assets/img/' + 'rb2' + '.png'" alt="" @click="lookVideo(item.src)"> -->
                             </div>
                         </div>
                     </el-carousel-item>
@@ -87,6 +91,7 @@ import { videoPlay } from "vue3-video-play";
 import CircleProgress from './CircleProgress.vue';
 import { getDevice } from '../request/api';
 
+
 export default ({
     name: 'Histogram',
     components: { videoPlay, ElCarousel, ElCarouselItem, CircleProgress },
@@ -228,8 +233,13 @@ export default ({
 
         onMounted(() => {
             getDeviceData()
-
         })
+        const d1img = ref('./img/d1_1.png');
+        const d12img = ref('./img/d1_2.png');
+        const d2img = ref('./img/d2.png');
+        const d3img = ref('./img/d3.png')
+        const deviceImg = ref('./img/')
+
         return {
             interDevice,
             videoData,
@@ -237,7 +247,12 @@ export default ({
             videoDialog,
             lookVideo,
             carouselData,
-            equipmentTotal
+            equipmentTotal,
+            d1img,
+            d12img,
+            d2img,
+            d3img,
+            deviceImg
         }
     },
 })