ws

gassafety-web/src/api/dataMonitoring/deviceAlarm.js

@@ -59,6 +59,6 @@ export function selectAlarmDevice() {
   return request({
     url: '/dataMonitoring/deviceAlarm/selectAlarmDevice',
     method: 'get',
-    params: query
+    // params: query
   })
 }

gassafety-web/src/components/PopWindow/flowMeter.vue

@@ -118,8 +118,8 @@
     </el-row>
 
     <span slot="footer" class="dialog-footer">
-      <el-button @click="dialogVisible = false">取 消</el-button>
       <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
     </span>
   </el-dialog>
 </template>

gassafety-web/src/components/PopWindow/pipelineView.vue

@@ -10,7 +10,6 @@
         ref="editForm"
         :model="editForm"
         label-width="135px"
-
       >
         <el-col>
           <el-form-item v-show="false" label="管道id" prop="pipeId">
@@ -144,10 +143,10 @@
     </el-row>
 
     <span slot="footer" class="dialog-footer">
-      <el-button @click="dialogVisible = false">取 消</el-button>
       <el-button :loading="okLoading" type="primary" @click="ok"
         >确 定</el-button
       >
+      <el-button @click="dialogVisible = false">取 消</el-button>
     </span>
   </el-dialog>
 </template>
@@ -224,14 +223,14 @@ export default {
       },
     };
   },
-  computed:{
-    myTitle(){
-      if(this.editForm.pipeId){
-        return `修改管道信息`
-      }else{
-        return `新增管道信息`
+  computed: {
+    myTitle() {
+      if (this.editForm.pipeId) {
+        return `修改管道信息`;
+      } else {
+        return `新增管道信息`;
       }
-    }
+    },
   },
   created() {
     console.log("lineData", this.lineData, this.lnglatsArr, this.pipeLength);
@@ -241,7 +240,7 @@ export default {
       // 如果是新建的里面天蝎过东西就存档
       console.log("内部lineDate", this.target.getExtData());
       const { lineData } = this.target.getExtData();
-      console.log(lineData)
+      console.log(lineData);
       if (lineData) {
         this.editForm = { ...lineData };
       }

gassafety-web/src/components/PopWindow/pressureGage.vue

@@ -118,8 +118,8 @@
       </el-form>
     </el-row>
     <span slot="footer" class="dialog-footer">
-      <el-button @click="dialogVisible = false">取 消</el-button>
       <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
     </span>
   </el-dialog>
 </template>

gassafety-web/src/components/PopWindow/regulatorBox.vue

@@ -111,8 +111,8 @@
       </el-form>
     </el-row>
     <span slot="footer" class="dialog-footer">
-      <el-button @click="dialogVisible = false">取 消</el-button>
       <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
     </span>
   </el-dialog>
 </template>

gassafety-web/src/components/PopWindow/valveWell.vue

@@ -110,8 +110,8 @@
       </el-form>
     </el-row>
     <span slot="footer" class="dialog-footer">
-      <el-button @click="dialogVisible = false">取 消</el-button>
       <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
     </span>
   </el-dialog>
 </template>

gassafety-web/src/components/PopWindowGis/lineInfoWindowWarn.vue

@@ -77,8 +77,8 @@
     <!-- 报警状态 -->
     <div class="warn-wrapper" v-if="true">
       <div class="warn-content">
-        <div>报警状态：<span>报警</span></div>
-        <div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
+        <div>报警状态：<span>报警({{alarmType}})</span></div>
+        <div>详细信息：<span>{{alarmValue?alarmValue:"-"}}</span></div>
       </div>
       <div class="btn">
         <el-button class="elbtn" type="primary">设备详情</el-button>
@@ -95,6 +95,11 @@ export default {
   props: {
     obj: { typs: Object },
   },
+  data(){
+    return {
+
+    }
+  },
   created() {
     console.log("created", this.obj);
   },
@@ -103,6 +108,12 @@ export default {
     bigImageArr() {
       return [this.obj.iconUrl];
     },
+    alarmType(){
+      return this.obj.polyline.getExtData().lineData.alarmType;
+    },
+    alarmValue(){
+      return this.obj.polyline.getExtData().lineData.alarmValue;
+    }
   },
   methods: {
     moment,

gassafety-web/src/components/PopWindowGis/markerInfoWindowWarn.vue

@@ -63,13 +63,13 @@
 
     <!-- 报警状态 -->
     <div class="warn-wrapper" v-if="true">
-      <!-- <div class="warn-content">
-        <div>报警状态：<span>报警</span></div>
-        <div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
-      </div> -->
+      <div class="warn-content">
+        <div>报警状态：<span>报警({{data.alarmType}})</span></div>
+        <div>详细信息：<span>{{data.alarmValue?data.alarmValue :"-"}}</span></div>
+      </div>
       <div class="btn">
         <el-button class="elbtn" type="primary">设备详情</el-button>
-        <el-button class="elbtn" type="primary">生成工单</el-button>
+        <el-button v-if="title=='压力表'|| title=='流量计' " class="elbtn" type="primary">生成工单</el-button>
       </div>
     </div>
   </div>

gassafety-web/src/components/PopWindowGis/workerManInfowindow.vue

 <template>
   <div class="wrapper">
-    <span class="left">{{data.userName}}:</span>
-    <span class="right">{{data.createTime}}</span>
+    <span class="left">姓名: {{ data.userName }}</span>
+    <span class="right">时间: {{ data.createTime }}</span>
   </div>
 </template>
 
 <script>
 export default {
-  props:{
-    data:{
-      type:Object
-    }
+  props: {
+    data: {
+      type: Object,
+    },
+  },
+  created() {
+    console.log("data", this.data);
   },
-  created(){
-    console.log("data",this.data)
-  }
-
 };
 </script>
 
 <style  lang="scss" scoped>
-.wrapper{
-  width: 166px;
+.wrapper {
+  // width: 166px;
   height: 54px;
-  background: #0D4F88;
+  background: #0d4f88;
   font-size: 14px;
-  color:#fff;
+  color: #fff;
   box-sizing: border-box;
-  padding:7px 0px 7px 8px;
-  box-shadow: 0 0 20px -5px #0D4F88;
+  padding: 7px 7px 7px 8px;
+  box-shadow: 0 0 20px -5px #0d4f88;
   border-radius: 4px;
-  span{
+  span {
     word-break: break-all;
-    display: inline-block;
-    vertical-align: top;
-    &.right{
-      width:90px;
-      padding-left:4px;
-    }
+    display: block;
+    // vertical-align: top;
+    // &.right {
+    //   width: 90px;
+    //   padding-left: 4px;
+    // }
   }
 }
 </style>
\ No newline at end of file

gassafety-web/src/components/PopWindowGis/workerManView.vue

@@ -62,10 +62,10 @@
     </el-form>
 
     <span slot="footer" class="dialog-footer">
-      <el-button @click="dialogVisible = false">取 消</el-button>
       <el-button :loading="okLoading" type="primary" @click="ok"
         >确 定
       </el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
     </span>
   </el-dialog>
 </template>

gassafety-web/src/store/modules/app.js

@@ -26,7 +26,6 @@ const mutations = {
   },
   TOGGLE_DEVICE: (state, device) => {
     state.device = device
-    console.log(123)
   },
   SET_SIZE: (state, size) => {
     state.size = size

gassafety-web/src/utils/gaodeMapView.js

@@ -47,7 +47,7 @@ class gaodeMap {
   myMap = null;
   showInfoWindow = null;
   // 工人轨迹用的窗口
-  markerPassedPolylineInfoWindow=null;
+  markerPassedPolylineInfoWindow = null;
 
   //构造函数中设置中央点默认值
   constructor(center) {
@@ -216,6 +216,7 @@ class gaodeMap {
       //   // e.target.content = this.getMarketContent(data);
       // });
       marker.on("mouseover", e => {
+        that.markerType = markerType;
         e.target.content = this.getMarketContent(data);
         infoWindow.setContent(e.target.content);
         infoWindow.open(map, e.target.getPosition());
@@ -244,10 +245,11 @@ class gaodeMap {
       DEVICE_TYPE.INSPECTOR != markerType &&
       DEVICE_TYPE.SMALLINSPECTOR != markerType
     ) {
-      marker.content = this.getMarketContent(data);
+      // marker.content = this.getMarketContent(data, markerInfoWindow);
       marker.on("mouseover", infoOpen);
       marker.on("mouseout", infoClose);
       marker.setExtData(data);
+
       that.deviceType = markerType;
       let editWindow = that.createInfowindow("编辑");
       editWindow.fileArr =
@@ -325,7 +327,25 @@ class gaodeMap {
     }
 
     function infoOpen(e) {
-      // 删除克隆出来的线的clonedom
+      if (e.target.getExtData().alarmState == 1) {
+        that.markerType = e.target.getExtData().deviceType;
+        // 警告状态这样就要换infowindow
+        e.target.content = that.getMarketContent(
+          e.target.getExtData(),
+          markerInfoWindowWarn
+        );
+      } else {
+        // 初始化为1的时候是没有的，所以需要判断一下
+        that.markerType =
+          e.target.getExtData().deviceType + "" == 1
+            ? "2"
+            : e.target.getExtData().deviceType + "";
+        console.log(typeof e.target.getExtData().deviceType);
+        e.target.content = that.getMarketContent(
+          e.target.getExtData(),
+          markerInfoWindow
+        );
+      }
 
       let options = map.getStatus();
       options.scrollWheel = false;
@@ -366,8 +386,8 @@ class gaodeMap {
    * @param data
    * @returns {string}
    */
-  getMarketContent(data) {
-    // let markerInfoWindow = markerInfoWindowWarn;
+  getMarketContent(data, markerInfoWindow) {
+    console.log("this.markerType", this.markerType);
     switch (this.markerType) {
       case DEVICE_TYPE.REGEULATORBOX: {
         const dom = createPop(markerInfoWindow, {
@@ -522,7 +542,13 @@ class gaodeMap {
       }
     }
   }
-
+  changeMarkIcon(marker,iconUrl){
+    let icon = new AMap.Icon({
+      opacity: 0.1,
+      image: iconUrl
+    });
+    marker.setIcon(icon);
+  }
   workerManView(options) {
     // const {} =options;
     const notice = createPop(workerManView, {
@@ -576,10 +602,11 @@ class gaodeMap {
       });
 
       // removeLineInfoWindow
-      
+
       marker.passedPolyline.on("mouseover", e => {
         const dom = createPop(removeLineInfoWindow, {
-          map:this,marker
+          map: this,
+          marker
         });
         marker.infoWindow = new AMap.InfoWindow({
           isCustom: true,
@@ -594,7 +621,7 @@ class gaodeMap {
         //   e.stopPropagation();
 
         // })
-        this.markerPassedPolylineInfoWindow = infoWindow;
+        this.markerPassedPolylineInfoWindow = marker.infoWindow;
         console.log(e.lnglat);
       });
 
@@ -670,35 +697,18 @@ class gaodeMap {
 
       this.polyLines.push(polyline);
       // 信息窗体
-      const dom = createPop(lineInfoWindow, {
-        obj: { a: 123, editorPage: true, ...item, polyline }
-      });
-      // console.log("domdomdomdomdom",dom)
-      //console.log("dom", dom.$el);
-      dom.$el.addEventListener("mouseover", () => {
-        let options = this.myMap.getStatus();
-        options.scrollWheel = false;
-        this.myMap.setStatus(options);
-      });
-      dom.$el.addEventListener("mouseout", () => {
-        let options = this.myMap.getStatus();
-        options.scrollWheel = true;
-        this.myMap.setStatus(options);
-      });
-      let infoWindow = new AMap.InfoWindow({
-        isCustom: true,
-        autoMove: false,
-        content: dom.$el,
-        //信息船体偏移量
-        offset: new AMap.Pixel(0, 0),
-        anchor: "left-top"
-      });
-
       this.newLineAddEvent(polyline);
-      polyline.infoWindow = infoWindow;
       //添加事件
       polyline.on("mouseover", e => {
         if (this.lineType == 1) return;
+        // 生成infoWindow
+        let infoWindow;
+        // 警告状态时
+        if (e.target.getExtData().lineData.alarmState == 1) {
+          infoWindow = this.lineMouseOver(polyline, lineInfoWindowWarn, item);
+        } else {
+          infoWindow = this.lineMouseOver(polyline, lineInfoWindow, item);
+        }
         infoWindow.open(map, e.lnglat);
         // 上方导航的高
         const topBar = 81;
@@ -741,24 +751,19 @@ class gaodeMap {
           //console.log("靠下了");
           Y = -infoWindowHeight - 20;
         }
-        polyline.setOptions({ strokeColor: "#FF5A67" });
+        if (polyline.getExtData().lineData.alarmState == 1) {
+          polyline.setOptions({ strokeColor: "#ff0000" });
+        }else{
+          polyline.setOptions({ strokeColor: "#FF5A67" });
+        }
+        console.log ( polyline.getOptions() );
         infoWindow.setOffset(new AMap.Pixel(X, Y));
-        // 这个是为了盖住vue里的东西
-        // polyline.cloneDom = infoWindow.dom.cloneNode(true);
-        // polyline.cloneDom.style.top = infoWindow.dom.offsetTop + 80 + "px";
-        // polyline.cloneDom.style.left = infoWindow.dom.offsetLeft + 100 + "px";
-        // // 先删除之前的，后增加现在的
-        // this.removeCloneDom();
-        // document.body.appendChild(polyline.cloneDom);
-        // infoWindow.close();
-        // this.addCloneDome(polyline, infoWindow);
-        // infoWindow.close();
-        // 检测是否与底部bottondata碰撞
         this.boxCollision(infoWindow.dom);
         this.showInfoWindow = infoWindow;
         // const
       });
       polyline.on("mouseout", e => {
+        if (polyline.getExtData().lineData.alarmState == 1) return;
         polyline.setOptions({ strokeColor: "#F7FE38" });
         // infoWindow.close();
       });
@@ -769,6 +774,31 @@ class gaodeMap {
     // 缩放地图到合适的视野级别
     // map.setFitView();
   }
+  lineMouseOver(polyline, lineInfoWindow, item) {
+    let dom = createPop(lineInfoWindow, {
+      obj: { a: 123, editorPage: true, ...item, polyline }
+    });
+    dom.$el.addEventListener("mouseover", () => {
+      let options = this.myMap.getStatus();
+      options.scrollWheel = false;
+      this.myMap.setStatus(options);
+    });
+    dom.$el.addEventListener("mouseout", () => {
+      let options = this.myMap.getStatus();
+      options.scrollWheel = true;
+      this.myMap.setStatus(options);
+    });
+    let infoWindow = new AMap.InfoWindow({
+      isCustom: true,
+      autoMove: false,
+      content: dom.$el,
+      //信息船体偏移量
+      offset: new AMap.Pixel(0, 0),
+      anchor: "left-top"
+    });
+    polyline.infoWindow = infoWindow;
+    return infoWindow;
+  }
   // 碰撞检测
   boxCollision(infowindowDom) {
     // gis地图页面的bottomdata组件
@@ -828,8 +858,8 @@ class gaodeMap {
     this.markerInfoWindow && this.markerInfoWindow.close();
     this.workerManInfoWindow && this.workerManInfoWindow.close();
     // 工人的轨迹线条用的
-    this.markerPassedPolylineInfoWindow && this.markerPassedPolylineInfoWindow.close();
-
+    this.markerPassedPolylineInfoWindow &&
+      this.markerPassedPolylineInfoWindow.close();
   }
   // 关闭转化到vue的dom
   removeCloneDom() {

gassafety-web/src/views/enterprise/mapView/components/RightBototmData.vue

@@ -4,7 +4,7 @@
       <div class="top">
         <span>设备报警最新记录</span>
         <span @click="repeatClick" class="repeat">刷新</span>
-        <span @click="moreClick" class="more">更多</span>
+        <span @click="moreClick" class="more">更多>></span>
       </div>
 
       <div class="bottom right-bottom-data-left">

gassafety-web/src/views/enterprise/mapView/index.vue

@@ -110,6 +110,7 @@ import gaodeMap, {
   DEVICE_TYPE,
   mapOperateType,
 } from "utils/gaodeMapView.js";
+import { selectAlarmDevice } from "@/api/dataMonitoring/deviceAlarm.js";
 import { getAllDeviceInfo, countDeviceByType } from "@/api/device/deviceInfo";
 import RightBototmData from "./components/RightBototmData.vue";
 import { getInspectorLocations } from "@/api/inspectorLocation/location";
@@ -190,11 +191,29 @@ export default {
       window.addEventListener("mousedown", this.barClose);
       gaoMap.addMouseTool();
       gaoMap.searchTips("tipinput");
-      this.getDeviceInfo();
-      this.getPipeList();
-      // 右下角数据
+      // 获取地图上设备资源
+      this.getResource();
+      // 右下角数据 跟值班人员
       this.rightBottomData();
     },
+    // 获取地图上的资源
+    getResource() {
+      this.getDeviceInfo()
+        .then((res) => {
+          if (res == 200) {
+            console.log(res);
+            return this.getPipeList();
+          }
+        })
+        .then((res) => {
+          if (res == 200) {
+            console.log("管道", res);
+            // 获取报警资源
+            this.getSelectAlarmDevice();
+            // selectAlarmDevice
+          }
+        });
+    },
     // 右下角数据
     async rightBottomData() {
       this.gaoMap.view = this;
@@ -284,6 +303,120 @@ export default {
       this.gaoMap.mapOperateType = "add";
       this.gaoMap.removeMarkerDragg();
     },
+    // 获取报警资源，并且改变图上的状态
+    getSelectAlarmDevice() {
+      selectAlarmDevice().then((res) => {
+        if (res.length > 0) {
+          console.log("报警设备", res);
+          this.statusChange(res);
+        }
+      });
+    },
+    // 遍历设备改变状态 polyLines markers
+    statusChange(list) {
+      // 过滤报警管道
+      const polyLineArr = list.filter((item) => {
+        return item.deviceType == "0";
+      });
+      // 过滤报警的其它设备
+      const deviceArr = list.filter((item) => {
+        return item.deviceType != "0";
+      });
+      // 管道
+      if (polyLineArr.length > 0) {
+        polyLineArr.forEach((item) => {
+          // 获取循报警设备的id
+          const { deviceId, alarmType, alarmValue, endTime } = item;
+          // 获取polyLine
+          const polyline = this.gaoMap.polyLines.filter((item) => {
+            const pipeId = item.getExtData().lineData.pipeId;
+            return deviceId == pipeId;
+          })[0];
+          polyline.setOptions({ strokeColor: "#ff0000" });
+          const options = polyline.getExtData();
+          // 增加一个报警状态
+          // 如果有endtime说明状态已经不是报警状态了，要归位，所有东西都要变回来
+          if (endTime) {
+            options.lineData.alarmState = 0;
+          } else {
+            options.lineData.alarmState = 1;
+          }
+          // 报警类型
+          options.lineData.alarmType = alarmType;
+          // 报警信息
+          options.lineData.alarmValue = alarmValue;
+          polyline.setExtData(options);
+        });
+      }
+
+      // 其他设备
+      if (deviceArr.length > 0) {
+        deviceArr.forEach((item) => {
+          // 获取循报警设备的id
+          const { deviceId, alarmType, alarmValue, endTime } = item;
+          // 获取polyLine
+          const device = this.gaoMap.markers.filter((item) => {
+            const id = item.getExtData().deviceId;
+            return deviceId == id;
+          })[0];
+          const options = device.getExtData();
+          console.log(options);
+
+          // 增加一个报警状态
+          // 如果有endtime说明状态已经不是报警状态了，要归位，所有东西都要变回来
+          if (endTime) {
+            options.lineData.alarmState = 0;
+          } else {
+            options.lineData.alarmState = 1;
+          }
+          // 报警类型
+          options.alarmType = alarmType;
+          // 报警信息
+          options.alarmValue = alarmValue;
+          device.setExtData(options);
+          // const imageName = device.getExtData()
+          // console.log(imageName)
+          console.log(
+            "device.getExtData().deviceType============",
+            device.getExtData().deviceType
+          );
+          // 3是流量计 4是压力表
+          if (device.getExtData().deviceType == 3) {
+            this.gaoMap.changeMarkIcon(
+              device,
+              require(`@/assets/images/lljWran.png`)
+            );
+          } else if (device.getExtData().deviceType == 4) {
+            this.gaoMap.changeMarkIcon(
+              device,
+              require(`@/assets/images/ylbWran.png`)
+            );
+          }
+        });
+      }
+      this.socket();
+    },
+    socket() {
+      this.ws = new WebSocket("ws://36.148.23.59:8901/gassafety/websocketServer");
+      // this.ws = new WebSocket(
+      //   "ws://192.168.2.23:8903/gassafety/websocketServer"
+      // );
+      this.ws.onopen = (evt) => {
+        console.log("WebSockets=======gogogog");
+        this.ws.send("WebSockets!=========================");
+      };
+      this.ws.onmessage = (evt) => {
+        console.log("Received Message: " + evt.data);
+        // ws.close();
+        this.statusChange([evt.data]);
+      };
+      this.ws.onclose = () => {
+        console.log("ws协议关闭");
+      };
+      // this.ws.onclose = function (evt) {
+      //   console.log("Connection closed.");
+      // };
+    },
 
     // 选择新建项目哪个
     createChange(e, item) {
@@ -312,6 +445,7 @@ export default {
       // 清空所有正在编辑状态的线
       this.gaoMap.linePolyEditorAllClose();
     },
+
     // 新建按钮还原
     createReset() {
       this.iconClass = "icon-create";
@@ -374,7 +508,7 @@ export default {
     },
     getDeviceInfo(queryParams) {
       this.loading = true;
-      getAllDeviceInfo(queryParams).then((response) => {
+      return getAllDeviceInfo(queryParams).then((response) => {
         if (response.code == 200) {
           for (var i = 0; i < response.data.length; i++) {
             if ("1" == response.data[i].deviceType) {
@@ -395,14 +529,16 @@ export default {
           }
         }
         this.loading = false;
+        return response.code;
       });
     },
     getPipeList(queryParams) {
-      pipeAllInfoList(queryParams).then((res) => {
+      return pipeAllInfoList(queryParams).then((res) => {
         console.log("管道", res);
         if (res.code == 200) {
           this.gaoMap.addPolyline(res.data);
         }
+        return res.code;
       });
     },
     //值班人员
@@ -488,6 +624,8 @@ export default {
   beforeDestroy() {
     console.log("移除window事件");
     window.removeEventListener("click", this.barClose);
+    // 关闭scoket
+    this.ws.close();
   },
 };
 </script>