修改首页

public/common.js

@@ -0,0 +1,13 @@
+var wsCallFuns = []
+window.WSObj={
+    //注册ws接受数据的回调处理方法
+    regWsCall:function(regname, callback){      
+        wsCallFuns.push({'regname':regname,'func':callback})
+    },
+    reciveData:function(data) {
+        // console.log('reciveData WS:', data)
+        wsCallFuns.map(item => {
+            if (item['func'] !=null ) item['func'](data)
+        })
+    }
+}

public/index.html

@@ -6,6 +6,7 @@
     <meta name="renderer" content="webkit">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <script src="/common.js"></script>
     <title><%= webpackConfig.name %></title>
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
 	  <style>

src/api/system/index.js

@@ -21,4 +21,3 @@ export function indexInfo(query) {
     params: query
   })
 }
-// sqxhrmvfnPaA2yS0gmceKfCrL8T3hhIV

src/components/ImageUpload/index.vue

@@ -135,7 +135,7 @@ export default {
       }
 
       if (!isImg) {
-        this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
+        this.$.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
         return false;
       }
       if (this.fileSize) {

src/main.js

@@ -19,6 +19,10 @@ import './permission' // permission control
 import { getDicts } from "@/api/system/dict/data";
 import { getConfigKey } from "@/api/system/config";
 import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
+// 引入公用函数
+//import common from '@/utils/common'
+//Vue.prototype.common = common
+
 // 分页组件
 import Pagination from "@/components/Pagination";
 // 自定义表格工具组件

src/store/index.js

@@ -7,11 +7,12 @@ import tagsView from './modules/tagsView'
 import permission from './modules/permission'
 import settings from './modules/settings'
 import getters from './getters'
-
+import websocket from './modules/websocket'
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
   modules: {
+    websocket,
     app,
     dict,
     user,

src/store/modules/websocket.js

@@ -0,0 +1,22 @@
+
+import { websocket } from '@/utils/websocket'
+import store from '@/store'
+const state = {
+    lastDataSocket: '',
+}
+const mutations = {
+    setLastData(state, payload) {
+        // console.log('payload', payload)
+        state.lastDataSocket = payload
+        //console.log('state.lastDataSocket', state.lastDataSocket)
+    }
+}
+const actions = {
+
+}
+export default {
+    namespaced: true,
+    state,
+    mutations,
+    actions
+}

src/utils/websocket.js

@@ -0,0 +1,59 @@
+import { Message } from 'element-ui'
+export function initWebSocket() {
+    if (!window.WebSocket) {
+        return  Message.error("您的浏览器不支持WebSocket");
+      }
+    let websocketUrl = `${window.location.origin.replace("http", "ws")}${process.env.VUE_APP_BASE_API}/websocket/message`;
+    // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
+    let webSock = new WebSocket(websocketUrl);
+  //连接建立时触发
+    webSock.onopen = function() {
+    //   console.log("WebSocket连接成功");
+      // 传递参数，不需要传参就不传
+      webSocketSend(webSock);
+    };
+    //通信发生错误时触发
+    webSock.onerror = function(error) {
+    //   console.log("报错信息", error);
+    };
+     //客户端接收服务端数据时触发
+    webSock.onmessage = function(event) {
+        // event = {data: `{"illegal": "Y","lat": "30.659","lng": "104.069","name": "很好的名字","time": "2023-07-05 17:27:24","type": "WIFI"}`}
+      
+        if (event == null || event==='undefined' || event.data == null || event.data == 'undefined' ) return
+        // 判断数据是否是json string
+        if (event.data.substr(0,1) !== '{') return
+      // 接收数据
+      //   console.log("WebSocket接受数据",event);
+      // 将接收的数据转为JSON格式
+      var jsonObj = JSON.parse(event.data);
+      if (jsonObj == null ) return
+      window.WSObj.reciveData(jsonObj)
+    };
+  
+    webSock.onclose = function(event) {
+    //   console.log("断开连接", event);
+    //   reconnect(webSock);
+    };
+  
+    return webSock;
+  }
+  
+  export function webSocketSend(webSock, data) {
+    // 发送数据
+    webSock.send(data);
+  }
+  
+  export function reconnect(webSock) {
+    let lockReconnect = false;
+  
+    if (lockReconnect) return;
+  
+    lockReconnect = true;
+  
+    setTimeout(function() {
+      initWebSocket();
+      lockReconnect = false;
+      // _this.isOne = 1;
+    }, 2000);
+  }

src/views/biz/ws/index.vue

@@ -16,44 +16,51 @@
 </template>
 
 <script>
-  export default {
-    name: "wsInfo",
-    data() {
-      return {
-        url: window.location.origin.replace("http", "ws") + process.env.VUE_APP_BASE_API + "/websocket/message",
-        message: "",
-        text_content: "",
-        ws: null,
+import { initWebSocket } from "@/utils/websocket";
+export default {
+  name: "wsInfo",
+  data() {
+    return {
+      url:
+        window.location.origin.replace("http", "ws") +
+        process.env.VUE_APP_BASE_API +
+        "/websocket/message",
+      message: "",
+      text_content: "",
+      ws: null,
+    };
+  },
+  methods: {
+ 
+    join() {
+      const wsuri = this.url;
+      this.ws = new WebSocket(wsuri);
+      const self = this;
+      this.ws.onopen = function (event) {
+        self.text_content = self.text_content + "已经打开连接!" + "\n";
       };
+      this.ws.onmessage = function (event) {
+        self.text_content = event.data + "\n";
+      };
+      this.ws.onclose = function (event) {
+        self.text_content = self.text_content + "已经关闭连接!" + "\n";
+      };
+    },
+    exit() {
+      if (this.ws) {
+        this.ws.close();
+        this.ws = null;
+      }
     },
-    methods: {
-      join() {
-        const wsuri = this.url;
-        this.ws = new WebSocket(wsuri);
-        const self = this;
-        this.ws.onopen = function(event) {
-          self.text_content = self.text_content + "已经打开连接!" + "\n";
-        };
-        this.ws.onmessage = function(event) {
-          self.text_content = event.data + "\n";
-        };
-        this.ws.onclose = function(event) {
-          self.text_content = self.text_content + "已经关闭连接!" + "\n";
-        };
-      },
-      exit() {
-        if (this.ws) {
-          this.ws.close();
-          this.ws = null;
-        }
-      },
-      send() {
-        if (this.ws) {
-          this.ws.send(this.message);
-        } else {
-          alert("未连接到服务器");
-        }
-      },
+    send() {
+      if (this.ws) {
+        this.ws.send(this.message);
+      } else {
+        alert("未连接到服务器");
+      }
     },
-  };
-</script>
+  },
+};
+</script>
+
+

src/views/index.vue

@@ -69,7 +69,6 @@
         <!-- ../assets/images/org-icon.png -->
         <!-- mapStyle="mapStyle" 地图样式 anchor="BMAP ANCHOR TOP RIGHT" 比例尺-->
         <baidu-map
-          ak=""
           :center="center"
           :zoom="zoom"
           :scroll-wheel-zoom="true"
@@ -83,25 +82,24 @@
           <!-- 点位 -->
           <bm-marker
             @mouseover="infoWindowOpen(marker)"
-            @click="infoWindowOpen(marker)"
             v-for="(marker, index) of topData.info"
             :key="index"
-            :position="{ lng: 104.069, lat:30.659}"
+            :position="{ lng: marker.lng, lat: marker.lat }"
             :icon="{
               url: require('@/assets/images/org-icon.png'),
-              size: { width: 150, height: 157 },
+              size: { width: 20, height: 20 },
             }"
-            @mouseout="infoWindowClose"
+            @mouseout="infoWindowClose(marker)"
           >
-            <!-- 弹框 selectedMarker == marker || -->
+            <!-- 弹框 -->
             <bm-info-window
-              :style="{ top: '-180px', left: '0' }"
-              :show="show"
+              :show="marker.show"
+              :position="{ lng: marker.lng, lat: marker.lat }"
               @close="infoWindowClose"
               @open="infoWindowOpen(marker)"
-              @mouseout="infoWindowClose"
+              @mouseout="infoWindowClose(marker)"
             >
-              <div class="tankuang">
+              <div class="tankuang" v-if="!dianShow.type">
                 <div class="poptop" @click="goBluetooth">
                   <div style="display: flex">
                     <div class="pop-left">
@@ -139,6 +137,12 @@
                   </div>
                 </div>
               </div>
+              <div v-else class="tankuang">
+                  <div><span class="dian-show">当前位置有恶意:</span>{{ dianShow.type }}</div>
+                  <div><span class="dian-show">名称：</span>  {{ dianShow.name }}</div>
+                  <div><span class="dian-show">恶意类型：</span>  {{ dianShow.keyword }}</div>
+                  <div>{{ dianShow.time }}</div>
+              </div>
             </bm-info-window>
           </bm-marker>
           <!-- 选择时间 -->
@@ -174,16 +178,55 @@
               <div
                 class="cont"
                 @click="lookPosition(items)"
-                v-for="(items, indexs) in realTimeData"
+                v-for="(items, indexs) in realTimeDataY"
+                :key="indexs"
+                style="float: left"
+              >
+                <span class="positions" style="float: left; width: 50px"
+                  ><img src="../assets/images/MapPin.png" alt="" /><span
+                    >位置</span
+                  ></span
+                >
+                <span
+                  class="realname"
+                  style="float: left; width: 50px; text-align: center"
+                  >{{ items.type }}</span
+                >
+                <span style="float: left; width: 100px; text-align: left">{{
+                  items.name
+                }}</span>
+                <span
+                  class="illegal"
+                  style="float: left; width: 180px; text-align: left"
+                  >{{ items.keyword }}</span
+                >
+              </div>
+            </div>
+          </div>
+          <div class="real-signal real-signal-n">
+            <div>
+              <div class="title">上报动态</div>
+              <div
+                class="cont"
+                @click="lookPosition(items)"
+                v-for="(items, indexs) in realTimeDataN"
                 :key="indexs"
               >
-                <span class="positions"
+                <span class="positions" style="float: left; width: 100px"
                   ><img src="../assets/images/MapPin.png" alt="" /><span
                     >位置</span
                   ></span
                 >
-                <span class="realname">{{ items.type }}</span>
-                <span class="illegal">{{ items.state }}</span>
+                <span
+                  class="realname"
+                  style="float: left; width: 100px; text-align: center"
+                  >{{ items.type }}</span
+                >
+                <span
+                  class="realname"
+                  style="float: left; width: 200px; text-align: center"
+                  >{{ items.name }}</span
+                >
               </div>
             </div>
           </div>
@@ -204,7 +247,7 @@ import storeChart from "./dashboard/storeChart";
 import twinChart from "./dashboard/twinChart";
 import MyPopup from "./components/MyPopup.vue";
 import BmMarkers from "vue-baidu-map/components/overlays/Marker.vue";
-import { listData } from "@/api/system/dict/data";
+import { initWebSocket } from "@/utils/websocket";
 export default {
   name: "Dict",
   dicts: ["index_filter"],
@@ -218,7 +261,8 @@ export default {
     return {
       selectedValue: "1",
       drillDate: [], //自定义时间
-      realTimeData: [], //实时数据
+      realTimeDataY: [], //恶意动态
+      realTimeDataN: [], //恶意动态
       show: false,
       //=======地图
       center: { lng: 104.064856, lat: 30.658876 }, // 成都的经纬度
@@ -231,6 +275,7 @@ export default {
       wheight: 0,
       start: "",
       end: "",
+      dianShow: {},
     };
   },
   created() {
@@ -241,33 +286,74 @@ export default {
     // 头部数据
     this.getInfo();
     //实时信号
-    this.realTimeInfo();
+    // this.realTimeInfo();
     setInterval(() => {
       this.getInfo();
     }, 5 * 60 * 1000);
-    setInterval(() => {
-      this.realTimeInfo();
-      this.show = true;
-    }, 1 * 60 * 1000);
+    // setInterval(() => {s
+    //   this.realTimeInfo();
+    //   this.show = true;
+    // }, 1 * 60 * 1000);
+    initWebSocket();
+    var _this = this;
+    this.$nextTick(() => {
+      window.WSObj.regWsCall("getxy", function (data) {
+        if (data.illegal == "Y") {
+          _this.realTimeDataY.unshift(data);
+          _this.$modal.msgError("发现一条恶意信息");
+        } else if (data.illegal == "N") {
+          _this.realTimeDataN.unshift(data);
+        }
+        console.log("firstfirstfirstfirst", _this.realTimeDataY);
+        _this.$forceUpdate();
+      });
+    });
   },
+  mounted() {},
   methods: {
     //实时数据
-    realTimeInfo() {
-      realTimeInfo().then((res) => {
-        this.realTimeData = res;
-        this.$forceUpdate();
-      });
-    },
+    // realTimeInfo() {
+    //   realTimeInfo().then((res) => {
+    //     this.realTimeData = res;
+    //     // this.$forceUpdate();
+    //   });
+    // },
     lookPosition(items) {
+      this.dianShow=items
+      console.log('itemssssssssss', items)
+      if (items.lat == null || items.lng == null) {
+        this.$message.error("坐标错误！");
+        return;
+      }
+      console.log("center", this.center);
+      // this.realTimeInfo();
+      let addMark = true;
       //查看位置
+      this.center = { lng: 104.064856, lat: 30.658876 };
       this.$nextTick(() => {
-        this.center = { lng: 104.064856, lat: 30.658876 };
-        this.$nextTick(() => {
-          this.center = { lng: items.lng, lat: items.lat };
-        });
+        this.center = { lng: items.lng, lat: items.lat };
+      });
+      this.topData.info.forEach((item) => {
+        if (
+          item.lat == items.lat &&
+          item.lng == items.lng &&
+          item.identify != 1
+        ) {
+          console.log(item, "sdfsf", this.center);
+          item.show = true;
+          addMark = false;
+        }
+      });
+      // if (addMark) {
+      // this.topData.info = this.topData.info.filter((i) => i.identify != 1);
+      this.topData.info.push({
+        show: true,
+        lat: items.lat,
+        lng: items.lng,
+        identify: 1,
       });
-      this.show = true;
-      console.log("this.center", this.center);
+      console.log("this.topData.info", this.topData.info);
+      // }
     },
     //选择周，天。。。
     choiceTime(selectedValue) {
@@ -286,14 +372,16 @@ export default {
       this.getInfo();
     },
     //关闭点位
-    infoWindowClose() {
-      this.selectedMarker = null;
-      this.show = false;
+    infoWindowClose(marker) {
+      this.topData.info = this.topData.info.filter((i) => i.identify != 1);
+      marker.show = false;
+      this.dianShow={}
+      this.$forceUpdate();
     },
-    //点击得到点位信息
+    //鼠标移动到点位上显示点位信息
     infoWindowOpen(marker) {
-      this.selectedMarker = marker;
-      this.show = true;
+      marker.show = true;
+      this.$forceUpdate();
     },
     goDevice() {
       //去设备
@@ -321,7 +409,7 @@ export default {
         end: this.end,
       }).then((response) => {
         this.topData = response;
-        this.$modal.msgSuccess("加载成功");
+        this.topData.info.map((i) => (i.show = false));
         console.log("response", response);
       });
     },
@@ -578,10 +666,11 @@ export default {
   color: #459def !important;
 }
 //实时信号
-.real-signal {
-  height: 360px;
+.real-signal,
+.real-signal-n {
+  height: 252px;
   overflow-y: auto;
-  width: 258px;
+  width: 400px;
   right: 24px;
   top: 24px;
   position: absolute;
@@ -616,8 +705,11 @@ export default {
           border-bottom: 1px solid #459def;
         }
       }
+      // .realtype {
+      // text-align: left;
+      // }
       // .realname{
-
+      //   //  width: 30px;
       // }
       .illegal {
         color: #ff3e01;
@@ -625,4 +717,11 @@ export default {
     }
   }
 }
+.real-signal-n {
+  right: 24px;
+  top: 300px;
+}
+.dian-show{
+  width: 150px;
+}
 </style>

vue.config.js

@@ -36,7 +36,7 @@ module.exports = {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
         // target:`http://8.142.173.95:19527`,
-        target:`http://192.168.1.21:8080`,
+        target:`http://192.168.1.21:18080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''