socket完成

gassafety-web/.env.development

@@ -4,5 +4,6 @@ ENV = 'development'
 # 燃气安全管理系统/开发环境
 VUE_APP_BASE_API = '/dev-api'
 
+
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

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

@@ -2,8 +2,7 @@
   <el-dialog
     :title="title"
     :visible.sync="dialogVisible"
-    :before-close="handleClose"
-  >
+    :before-close="handleClose">
     <el-row>
       <el-form ref="form" :model="form" :rules="rules" label-width="135px">
         <el-row>
@@ -25,19 +24,13 @@
         <el-row>
           <el-col :span="11">
             <el-form-item label="设备名称" prop="deviceName">
-              <el-input
-                v-model="form.deviceName"
-                placeholder="请输入设备名称"
-              />
+              <el-input v-model="form.deviceName" placeholder="请输入设备名称" />
             </el-form-item>
           </el-col>
 
           <el-col :span="11">
             <el-form-item label="设备型号" prop="deviceModel">
-              <el-input
-                v-model="form.deviceModel"
-                placeholder="请输入设备型号"
-              />
+              <el-input v-model="form.deviceModel" placeholder="请输入设备型号" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -56,7 +49,7 @@
 
         <el-col :span="22">
           <el-form-item label="经纬度坐标" prop="">
-            <el-card shadow="newver" class="box-card">
+            <el-card class="box-card">
               <div v-text="`[[${form.longitude},${form.latitude}]]`"></div>
             </el-card>
           </el-form-item>
@@ -146,7 +139,35 @@ export default {
       dialogVisible: false,
       fileList: [],
       // 表单校验
-      rules: {},
+      rules: {
+        pipeCode: [
+          { required: true, message: "请选择所属管道", trigger: "blur" },
+          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        deviceName: [
+          { required: true, message: "请输入设备名称", trigger: "blur" },
+        ],
+        deviceModel: [
+          { required: true, message: "请输入设备型号", trigger: "blur" },
+        ],
+        deviceAddr: [
+          { required: true, message: "请输入所在地址", trigger: "blur" },
+        ],
+        iotNo: [
+          { required: true, message: "请输入物联网编号", trigger: "blur" },
+        ],
+        linkman: [{ required: true, message: "请输入联系人", trigger: "blur" }],
+        phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
+        iconUrl: [{ required: true, message: "请上传图片", trigger: "change" }],
+        installationTime: [
+          {
+            // type: "date",
+            required: true,
+            message: "请选择日期",
+            trigger: "change",
+          },
+        ],
+      },
       map: null,
       obj: null,
       gaoMap: null,
@@ -202,19 +223,19 @@ export default {
       this.form.url = "";
       this.fileArr = [];
     },
-    getPipeInfos(){
+    getPipeInfos() {
       pipeAllInfoList({}).then((response) => {
         this.pipeList = response.data;
       });
-    }
+    },
   },
-  watch:{
-    dialogVisible(val){
-      if(val){
+  watch: {
+    dialogVisible(val) {
+      if (val) {
         this.getPipeInfos();
       }
-    }
-  }
+    },
+  },
 };
 </script>
 

gassafety-web/src/utils/gaodeMap.js

@@ -2,6 +2,7 @@
 import regulatorBox from "../components/PopWindow/regulatorBox.vue";
 import valveWell from "../components/PopWindow/valveWell.vue";
 import flowMeter from "../components/PopWindow/flowMeter.vue";
+import pressureGage from "../components/PopWindow/pressureGage.vue";
 import pipelineView from "../components/PopWindow/pipelineView.vue";
 import lineInfoWindow from "../components/PopWindow/lineInfoWindow.vue";
 import { delDeviceInfo } from "@/api/device/deviceInfo";
@@ -816,7 +817,7 @@ class gaodeMap {
         });
       }
       case DEVICE_TYPE.PRESSUREGAGE: {
-        return createPop(flowMeter, {
+        return createPop(pressureGage, {
           title: val+ "压力表"
         });
       }

gassafety-web/src/utils/gaodeMapView.js

@@ -328,7 +328,12 @@ class gaodeMap {
 
     function infoOpen(e) {
       if (e.target.getExtData().alarmState == 1) {
-        that.markerType = e.target.getExtData().deviceType;
+        if(e.target.getExtData().deviceType==4){
+          that.markerType = "7";
+        }else if(e.target.getExtData().deviceType<=3){
+          that.markerType = +e.target.getExtData().deviceType+1+"";
+        }
+        console.log("that.markerType",that.markerType  )
         // 警告状态这样就要换infowindow
         e.target.content = that.getMarketContent(
           e.target.getExtData(),
@@ -336,11 +341,17 @@ class gaodeMap {
         );
       } else {
         // 初始化为1的时候是没有的，所以需要判断一下
-        that.markerType =
-          e.target.getExtData().deviceType + "" == 1
-            ? "2"
-            : e.target.getExtData().deviceType + "";
-        console.log(typeof e.target.getExtData().deviceType);
+        // that.markerType =
+        //   e.target.getExtData().deviceType + "" == 1
+        //     ? "2"
+        //     : e.target.getExtData().deviceType + "";
+        // 上图状态跟后台状态不统一，所以需要判断一下
+        if(e.target.getExtData().deviceType==4){
+          that.markerType = "7";
+        }else if(e.target.getExtData().deviceType<=3){
+          that.markerType = +e.target.getExtData().deviceType+1+"";
+        }
+        console.log("that.markerType")
         e.target.content = that.getMarketContent(
           e.target.getExtData(),
           markerInfoWindow
@@ -474,6 +485,7 @@ class gaodeMap {
    * @param marker
    */
   setMarkerIcon(marker) {
+    console.log(this.markerType)
     switch (this.markerType) {
       case DEVICE_TYPE.REGEULATORBOX: {
         let icon = new AMap.Icon({
@@ -763,6 +775,7 @@ class gaodeMap {
         // const
       });
       polyline.on("mouseout", e => {
+        // console.log("polyline.getExtData().lineData.alarmState",polyline.getExtData().lineData.alarmState)
         if (polyline.getExtData().lineData.alarmState == 1) return;
         polyline.setOptions({ strokeColor: "#F7FE38" });
         // infoWindow.close();

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

@@ -307,9 +307,9 @@ export default {
     getSelectAlarmDevice() {
       selectAlarmDevice().then((res) => {
         if (res.length > 0) {
-          console.log("报警设备", res);
-          this.statusChange(res);
         }
+        console.log("报警设备", res);
+        this.statusChange(res);
       });
     },
     // 遍历设备改变状态 polyLines markers
@@ -327,24 +327,33 @@ export default {
         polyLineArr.forEach((item) => {
           // 获取循报警设备的id
           const { deviceId, alarmType, alarmValue, endTime } = item;
+          console.log("endTime", endTime);
           // 获取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();
+          let options = polyline.getExtData();
           // 增加一个报警状态
           // 如果有endtime说明状态已经不是报警状态了，要归位，所有东西都要变回来
           if (endTime) {
+            polyline.setOptions({ strokeColor: "#F7FE38" });
             options.lineData.alarmState = 0;
+            // 报警类型
+            options.lineData.alarmType = null;
+            // 报警信息
+            options.lineData.alarmValue = null;
+            console.log("管道回复");
           } else {
+            polyline.setOptions({ strokeColor: "#ff0000" });
             options.lineData.alarmState = 1;
+            // 报警类型
+            options.lineData.alarmType = alarmType;
+            // 报警信息
+            options.lineData.alarmValue = alarmValue;
+
+            console.log("管道报警");
           }
-          // 报警类型
-          options.lineData.alarmType = alarmType;
-          // 报警信息
-          options.lineData.alarmValue = alarmValue;
           polyline.setExtData(options);
         });
       }
@@ -354,6 +363,7 @@ export default {
         deviceArr.forEach((item) => {
           // 获取循报警设备的id
           const { deviceId, alarmType, alarmValue, endTime } = item;
+          console.log("endTime", endTime);
           // 获取polyLine
           const device = this.gaoMap.markers.filter((item) => {
             const id = item.getExtData().deviceId;
@@ -365,57 +375,82 @@ export default {
           // 增加一个报警状态
           // 如果有endtime说明状态已经不是报警状态了，要归位，所有东西都要变回来
           if (endTime) {
-            options.lineData.alarmState = 0;
+            console.log("设备恢复");
+            options.alarmState = 0;
+            // 报警类型
+            options.alarmType = null;
+            // 报警信息
+            options.alarmValue = null;
           } else {
-            options.lineData.alarmState = 1;
+            console.log("设备报警");
+            options.alarmState = 1;
+            // 报警类型
+            options.alarmType = alarmType;
+            // 报警信息
+            options.alarmValue = alarmValue;
           }
-          // 报警类型
-          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`)
-            );
+            // 如果有endtime说明已经维护好了
+            if (endTime) {
+              this.gaoMap.changeMarkIcon(
+                device,
+                require(`@/assets/images/liuliangji.png`)
+              );
+            } else {
+              this.gaoMap.changeMarkIcon(
+                device,
+                require(`@/assets/images/lljWran.png`)
+              );
+            }
           } else if (device.getExtData().deviceType == 4) {
-            this.gaoMap.changeMarkIcon(
-              device,
-              require(`@/assets/images/ylbWran.png`)
-            );
+            if (endTime) {
+              this.gaoMap.changeMarkIcon(
+                device,
+                require(`@/assets/images/yalibiao.png`)
+              );
+            } else {
+              this.gaoMap.changeMarkIcon(
+                device,
+                require(`@/assets/images/ylbWran.png`)
+              );
+            }
           }
         });
       }
+      if (this.ws) return;
       this.socket();
     },
     socket() {
-      this.ws = new WebSocket("ws://36.148.23.59:8901/gassafety/websocketServer");
+      console.log("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.send("WebSockets!=========================");
       };
       this.ws.onmessage = (evt) => {
-        console.log("Received Message: " + evt.data);
+        console.log("推送", evt);
+
+        // console.log("Received Message: " + evt.data);
         // ws.close();
-        this.statusChange([evt.data]);
+        const obj = JSON.parse(evt.data);
+        this.statusChange([obj]);
       };
       this.ws.onclose = () => {
         console.log("ws协议关闭");
       };
-      // this.ws.onclose = function (evt) {
-      //   console.log("Connection closed.");
-      // };
+      this.ws.onclose = function (evt) {
+        console.log("关闭");
+      };
     },
 
     // 选择新建项目哪个
@@ -625,7 +660,10 @@ export default {
     console.log("移除window事件");
     window.removeEventListener("click", this.barClose);
     // 关闭scoket
-    this.ws.close();
+    if (this.ws) {
+      this.ws.close();
+      this.ws=null;
+    }
   },
 };
 </script>

gassafety-web/vue.config.js

-'use strict'
-const path = require('path')
-const defaultSettings = require('./src/settings.js')
+"use strict";
+const path = require("path");
+const defaultSettings = require("./src/settings.js");
 
 function resolve(dir) {
-  return path.join(__dirname, dir)
+  return path.join(__dirname, dir);
 }
 
-const name = defaultSettings.title || '燃气安全管理系统' // 标题
+const name = defaultSettings.title || "燃气安全管理系统"; // 标题
 
-const port = process.env.port || process.env.npm_config_port || 80 // 端口
+const port = process.env.port || process.env.npm_config_port || 80; // 端口
 
 // vue.config.js 配置说明
 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
@@ -18,27 +18,38 @@ module.exports = {
   // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
   publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
   // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
-  outputDir: 'dist',
+  outputDir: "dist",
   // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
-  assetsDir: 'static',
+  assetsDir: "static",
   // 是否开启eslint保存检测，有效值：ture | false | 'error'
-  lintOnSave: process.env.NODE_ENV === 'development',
+  lintOnSave: process.env.NODE_ENV === "development",
   // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
   productionSourceMap: false,
   // webpack-dev-server 相关配置
   devServer: {
-    host: '0.0.0.0',
+    host: "0.0.0.0",
     port: port,
     open: true,
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
+        // target: `http://36.148.23.59:8901/gassafety`,
         target: `http://36.148.23.59:8901/gassafety`,
         changeOrigin: true,
         pathRewrite: {
-          ['^' + process.env.VUE_APP_BASE_API]: ''
+          ["^" + process.env.VUE_APP_BASE_API]: ""
         }
-      }
+      },
+      // "/websocket": {
+      //   target: "ws://192.168.2.23:8903/gassafety/websocketServer",
+      //   ws: true,
+      //   changeOrigin: true,
+      //   logLevel: "debug",
+      //   secure: false,
+      //   pathRewrite: {
+      //     "^/websocket": ""
+      //   }
+      // }
     },
     disableHostCheck: true
   },
@@ -46,76 +57,74 @@ module.exports = {
     name: name,
     resolve: {
       alias: {
-        '@': resolve('src'),
-        'utils' : resolve('src/utils')
+        "@": resolve("src"),
+        utils: resolve("src/utils")
       }
     },
     externals: {
-      'AMap': 'AMap'
+      AMap: "AMap"
     }
   },
   chainWebpack(config) {
-    config.plugins.delete('preload') // TODO: need test
-    config.plugins.delete('prefetch') // TODO: need test
+    config.plugins.delete("preload"); // TODO: need test
+    config.plugins.delete("prefetch"); // TODO: need test
 
     // set svg-sprite-loader
     config.module
-      .rule('svg')
-      .exclude.add(resolve('src/assets/icons'))
-      .end()
+      .rule("svg")
+      .exclude.add(resolve("src/assets/icons"))
+      .end();
     config.module
-      .rule('icons')
+      .rule("icons")
       .test(/\.svg$/)
-      .include.add(resolve('src/assets/icons'))
+      .include.add(resolve("src/assets/icons"))
       .end()
-      .use('svg-sprite-loader')
-      .loader('svg-sprite-loader')
+      .use("svg-sprite-loader")
+      .loader("svg-sprite-loader")
       .options({
-        symbolId: 'icon-[name]'
+        symbolId: "icon-[name]"
       })
-      .end()
+      .end();
 
-    config
-      .when(process.env.NODE_ENV !== 'development',
-        config => {
-          config
-            .plugin('ScriptExtHtmlWebpackPlugin')
-            .after('html')
-            .use('script-ext-html-webpack-plugin', [{
-            // `runtime` must same as runtimeChunk name. default is `runtime`
-              inline: /runtime\..*\.js$/
-            }])
-            .end()
-          config
-            .optimization.splitChunks({
-              chunks: 'all',
-              cacheGroups: {
-                libs: {
-                  name: 'chunk-libs',
-                  test: /[\\/]node_modules[\\/]/,
-                  priority: 10,
-                  chunks: 'initial' // only package third parties that are initially dependent
-                },
-                elementUI: {
-                  name: 'chunk-elementUI', // split elementUI into a single package
-                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
-                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
-                },
-                commons: {
-                  name: 'chunk-commons',
-                  test: resolve('src/components'), // can customize your rules
-                  minChunks: 3, //  minimum common number
-                  priority: 5,
-                  reuseExistingChunk: true
-                }
-              }
-            })
-          config.optimization.runtimeChunk('single'),
+    config.when(process.env.NODE_ENV !== "development", config => {
+      config
+        .plugin("ScriptExtHtmlWebpackPlugin")
+        .after("html")
+        .use("script-ext-html-webpack-plugin", [
           {
-             from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件
-             to: './', //到根目录下
+            // `runtime` must same as runtimeChunk name. default is `runtime`
+            inline: /runtime\..*\.js$/
+          }
+        ])
+        .end();
+      config.optimization.splitChunks({
+        chunks: "all",
+        cacheGroups: {
+          libs: {
+            name: "chunk-libs",
+            test: /[\\/]node_modules[\\/]/,
+            priority: 10,
+            chunks: "initial" // only package third parties that are initially dependent
+          },
+          elementUI: {
+            name: "chunk-elementUI", // split elementUI into a single package
+            priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
+            test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
+          },
+          commons: {
+            name: "chunk-commons",
+            test: resolve("src/components"), // can customize your rules
+            minChunks: 3, //  minimum common number
+            priority: 5,
+            reuseExistingChunk: true
           }
         }
-      )
+      });
+      config.optimization.runtimeChunk("single"),
+        {
+          from: path.resolve(__dirname, "./public/robots.txt"), //防爬虫文件
+          to: "./" //到根目录下
+        };
+    });
   }
-}
+};