Skip to content

G
gassafety
Commit e63c5879 authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

socket完成

parent e65747c5
Hide whitespace changes
Inline Side-by-side
Showing with 209 additions and 126 deletions
gassafety-web/.env.development
View file @ e63c5879
......@@ -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
View file @ e63c5879
......@@ -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
View file @ e63c5879
......@@ -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
View file @ e63c5879
......@@ -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
View file @ e63c5879
......@@ -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
View file @ e63c5879
'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: "./" //到根目录下
};
});
}
}
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment