Skip to content

G
gassafety-progress
Commit fac1cbfd authored by 耿迪迪's avatar 耿迪迪
Browse files
Options

Merge branch 'master' of ssh://111.61.77.35:15/gengdidi/gassafety-progress

parents cb8a5f51 41913163
Show whitespace changes
Inline Side-by-side
Showing with 4714 additions and 772 deletions
gassafetyprogress-web/src/assets/iconfont/monitorData/iconfont.css 0 → 100644
View file @ fac1cbfd
@font-face {
font-family: "iconfont"; /* Project id 3276749 */
src: url('iconfont.woff2?t=1648286292510') format('woff2'),
url('iconfont.woff?t=1648286292510') format('woff'),
url('iconfont.ttf?t=1648286292510') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-jt:before {
content: "\e8f1";
}
.icon-tcq:before {
content: "\e622";
}
.icon-ylb:before {
content: "\e623";
}
.icon-llj:before {
content: "\e624";
}
.icon-a:before {
content: "\e61e";
}
.icon-b:before {
content: "\e61f";
}
gassafetyprogress-web/src/assets/styles/all.scss
View file @ fac1cbfd
......@@ -675,3 +675,9 @@
.amap-copyright {
opacity:0;
}
.zzz {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
\ No newline at end of file
gassafetyprogress-web/src/components/emergency/PipeColor.vue
View file @ fac1cbfd
......@@ -128,8 +128,8 @@ export default {
&.active,
&:hover
{
background-color: #053B6A ;
color: #2CD5DB;
background-color: #1890ff ;
color: #ffffff;
}
}
}
......
gassafetyprogress-web/src/components/emergency/Timeline.vue
View file @ fac1cbfd
......@@ -85,7 +85,7 @@
.long-line {
width: 1px;
height: 98px;
background: #ffffff;
background: #000000;
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
opacity: 0.5;
margin-left: 8px;
......@@ -96,7 +96,7 @@
box-sizing: border-box;
margin-left: 20px;
height: 86px;
padding: 0 0 0 20px;
padding: 6px 0 0 20px;
text-align: left;
margin-bottom: 30px;
......@@ -104,20 +104,20 @@
font-size: 15px;
word-break: break-all;
margin-bottom: 16px;
color: #d9d9d9;
color: #000000;
font-weight: 500;
/*display: inline;*/
}
.timeline-date {
font-size: 13px;
color: #dfe4ed;
color: #000000;
font-weight: 500;
margin-bottom: 16px;
}
.timeline-desc {
font-size: 14px;
color: #30b46b;
color: #000000;
}
}
......
gassafetyprogress-web/src/components/emergency/rightBar.vue
View file @ fac1cbfd
......@@ -7,7 +7,7 @@
<span class="dot-inner"></span>
</span>
<span
style="letter-spacing: 3px; color: #cddbe4; cursor: pointer"
style="letter-spacing: 3px; color: #000000; cursor: pointer"
>事件接报列表</span
>
</div>
......@@ -36,11 +36,11 @@
</div>
<div id = "detail" class="show-detail" style="display: none;margin-top: 15px;margin-bottom: 20px;position:fixed;right: 470px;width: 300px;
background: rgba(0, 0, 0, 0.7);top: 110px">
background: #ffffff;top: 110px">
<div class="el-form-div" style="height: 30px;">
<div class="detail-title">{{detailTitle}}</div>
<div style="cursor: pointer;" @click="closeDetail()">
<img style="width: 20px;height: 20px;margin-top: 5px;" src="@/assets/mapImages/closeBtn.png" alt="" />
<img style="width: 20px;height: 20px;margin-top: 5px;" src="@/assets/mapImages/close.png" alt="" />
</div>
</div>
<timeline :timeline-list="handleList"></timeline>
......@@ -569,9 +569,9 @@ export default {
margin-left: 10px;
background-image: linear-gradient(
to left,
#112238,
#fff,
rgb(49 151 195 / 70%) 50%,
#112238
#fff
);
}
.dot {
......@@ -600,7 +600,7 @@ export default {
animation: vabDot 1.2s ease-in-out infinite;
}
.content-div{
color: white;
color: #000000;
font-size: 30;
height: 40px;
line-height: 50px;
......@@ -614,7 +614,7 @@ export default {
}
.button-div{
cursor:pointer;
color: #339CC9;
color: #ffffff;
margin-bottom: 5px;
border-radius: 2px;
width: 100px;
......@@ -625,6 +625,7 @@ export default {
font-size: 15;
margin-left: 10%;
margin-top: 10px;
background: #1c84c6;
}
.title-div{
width: 100%;
......@@ -633,7 +634,7 @@ export default {
border-bottom: 2px solid #1c84c6;
border-top: 1px solid #1c84c6;
height: 30px;
color: white;
color: #000;
line-height: 30px;
}
.test-5::-webkit-scrollbar {
......@@ -670,8 +671,9 @@ export default {
.detail-title{
height: 100%;
width: 270px;
color: white;
color: #000000;
margin-left: 20px;
margin-top: 5px;
}
.massage{
color: #00ffff;
......
gassafetyprogress-web/src/utils/mapClass/mapbigwindow.js 0 → 100644
View file @ fac1cbfd
/*
* @Author: your name
* @Date: 2022-01-11 13:45:12
* @LastEditTime: 2022-03-22 10:35:13
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/utils/mapClass.js
*/
import { pipeColor, svgUrl, svgAlarm } from "@/utils/mapClass/config.js";
// 编辑类
// 在地图上新增的设备可以直接编辑，
// 已经保存完成的设备需要点编辑才可以编辑
export class EditorMap {
// 地图的对象实例
map = null;
// 外部传进来的中心店
center = null;
// 父vue的实例
vue = null;
// 操作 新建，编辑，删除，编辑跟删除只对已经在图上的设备有效 默认值：0， 新建：1，编辑：2, 删除: 3。
// 新建的时候会把未保存的线条清空
control = 0;
// 鼠标事件对象，用来将点跟线上图
mousetool = null;
// 当前正在手动绘制的对象
nowMouseTarget = null;
// 当线mousetool线被按下的时候的flag 当线被按下的时候为true，就不询问是否删除了
mosueToolPolineDownFlag = false;
// 绘制marer的时候的配置，在绘制完挂载事件的时候需要使用
mouseToolMarkerOptions = null;
// 绘制poline的时候的配置，在绘制完挂载事件的时候需要使用
mouseToolPolineOptions = null;
// 存放所有的设备的数组集合，这是一个对象，对象里面是各种设备的数组
allDevice = {};
// 存放所有的管道
pipeArr = {};
// 报警设备的对象
alarmObj = {};
// 当前的infowindow的组件
infowindowComponent = null;
// infowindow本身
infowindow = null;
constructor(contaienr, config = {}, vue) {
this.map = new AMap.Map(contaienr, {
viewMode: "3D",
center: [114.196007, 38.260288],
layers: [AMap.createDefaultLayer()], // layers 字段为空或者不赋值将会自动创建默认底图。
zoom: 14,
...config,
});
const { center } = config;
this.center = center;
this.vue = vue;
this.init();
}
init() {
// 地图事件
this.mapEvent();
// 手动点线上图准备,编辑模式
this.mouseAddDevice();
// this.mouseAddMarker();
// this.mouseAddPipeline();
// 地图边界
this.map.getCity((res) => {
const city = res.district;
this.mapBound(city);
}, this.center);
}
mapBound(city) {
var district = new AMap.DistrictSearch({
extensions: "all", // 返回行政区边界坐标等具体信息
level: "district", // 设置查询行政区级别为 区
});
district.search(city, (status, result) => {
// 获取朝阳区的边界信息
var bounds = result.districtList[0].boundaries;
var polygons = [];
console.log("boundsboundsboundsboundsbounds", bounds);
if (bounds) {
for (var i = 0, l = bounds.length; i < l; i++) {
//生成行政区划polygon
// new AMap.Polygon({
// map: this.map,
// strokeWeight: 2,
// path: bounds[i],
// fillOpacity: 1,
// fillColor: "transparent",
// strokeColor: "#09f",
// });
new AMap.Polyline({
map: this.map,
strokeWeight: 4,
strokeColor: "#09f",
path: bounds[i],
});
// polygons.push(polygon);
}
}
});
}
// map的事件监听
mapEvent() {
this.map.on("click", () => {
// mousetool对象画出的对象的操作
// 如果有手动绘制对象，要手动清楚一下，因为画线的时候不好清除旧线，这其实是用来清楚旧线的
// 当画出来的线被mousedown，不删除，但是mouseToolPipeLineFlag要归位，在移出线的时候统一归位
// 如果对象是marker，直接删除
if (this.nowMouseTarget?.type == "AMap.Marker") {
this.mouseToolDrawClear();
} else {
// 当地图上已经画了线，并且没有点在线上，询问是否删除
if (this.nowMouseTarget && !this.mosueToolPolineDownFlag) {
this.confirm("是否重新绘制管道", { type: "warning" })
.then(() => {
// 删除原来的线
this.mouseToolDrawClear();
// 鼠标事件开启，并且赋值原来的属性，this.mouseToolMarkerOptions是开启绘制的时候记录的
this.mousetool.polyline(this.mouseToolPolineOptions);
})
.catch(() => {});
}
}
});
this.map.on("moveend", () => {
console.log("地图停止移动");
if (this.flag) {
console.log("弹框");
this.flag = false;
}
});
window.panTo = () => {
this.flag = true;
this.map.panTo([116.428285, 39.886129]);
};
}
// 弹框工具
confirm(message, obj) {
return this.vue.$confirm(message, obj);
}
// 改变操作状态
changeControl(num) {
this.control = num;
}
// 点线编辑上图准备
mouseAddDevice() {
this.map.plugin(["AMap.MouseTool"], () => {
this.mousetool = new AMap.MouseTool(this.map);
});
// 挂载绘制结束的事件
this.mouseDrawEvent();
}
// 点或者线上图结束后触发的事件
mouseDrawEvent() {
this.mousetool.on("draw", (e) => {
const target = e.obj;
// console.log([target._position.lng, target._position.lat]);
const { type: targetType } = target;
// 当这个点是marker的时候
if (targetType == "AMap.Marker") {
this.mouseToolMarkerEvent(target);
} else {
// 如果是线,挂上编辑
this.lineEditor(target);
this.mousetool.close();
this.mouseToolPolineEvent(target);
console.log(targetType, "当前对象是管道");
}
this.nowMouseTarget = target;
});
}
// 绘制marker结束后，在marker身上添加的事件
mouseToolMarkerEvent(target) {
// 由于画出来的marker点击会换位置，所以当移入的时候删除绘制事件，移出去在增加绘制事件
target.on("mouseover", (e) => {
// 鼠标事件关闭
this.mousetool.close(false);
});
target.on("mouseout", (e) => {
// 这里不方便获取原来的属性，因为position不好解决，还是设置一个值吧
// 鼠标事件开启，并且赋值原来的属性，this.mouseToolMarkerOptions是开启绘制的时候记录的
this.mousetool.marker(this.mouseToolMarkerOptions);
});
// 点
target.on("click", (e) => {
// 弹框
});
}
// 挂上线以及线的事件
lineEditor(line) {
// line.editor && line.editor.close();
// 当前点击次数，1次为编辑，2次为弹框
line.editorNum = 0;
line.editor = new AMap.PolyEditor(this.map, line);
}
// 绘制管道的时候，挂载的事件
mouseToolPolineEvent(target) {
// 线按下的时候会变成编辑，mousetool事件会清空 移出线的时候 在把polyline事件加上
target.on("mouseover", (e) => {
// 鼠标事件关闭
// this.mousetool.close(false);
});
target.on("mouseout", (e) => {
// 有时候按在线上移动地图，map点击事件中mosueToolPolineDownFlag无法归位，在这里归位
this.mosueToolPolineDownFlag = false;
// 鼠标事件开启，并且赋值原来的属性，this.mouseToolMarkerOptions是开启绘制的时候记录的
// this.mousetool.polyline(this.mouseToolPolineOptions);
});
// 线
target.on("mousedown", (e) => {
const line = e.target;
// mosueTool按下的flag,按在线上，不询问是否删除
this.mosueToolPolineDownFlag = true;
// 按下的时候要关闭事件
this.mousetool.close(false);
// 如果当前状态不是编辑，则进入编辑状态
if (line.editorNum < 1) {
// 打开并且++
line.editor.open();
line.editorNum++;
} else {
// 这里就要弹框了
console.log(line.getPath());
}
});
}
// 设备点击上图开启
mouseAddMarker(markerObj = {}) {
// 清空已经绘制完的对象
this.mousetoolClose(true);
// 记录一下配置项，在挂载点击的时候，需要使用
this.mouseToolMarkerOptions = {
draggable: true,
...markerObj,
};
this.mousetool.marker(this.mouseToolMarkerOptions);
}
// 管线点击上图开启
mouseAddPipeline(pipeObj = {}) {
this.mousetoolClose(true);
// 开始画线
this.mosuetoolPolineFlag = true;
this.mouseToolPolineOptions = {
strokeWeight: 5,
...pipeObj,
};
this.mousetool.polyline(this.mouseToolPolineOptions);
}
// 手动清除map上绘制的对象
mouseToolDrawClear() {
if (this.nowMouseTarget) {
this.map.remove(this.nowMouseTarget);
// 如果有editor,则关闭
this.nowMouseTarget.editor && this.nowMouseTarget.editor.close();
this.nowMouseTarget = null;
}
}
// 关闭点击上图事件 true清除之前绘制的图像，false 仅关闭上图事件
mousetoolClose(boolean) {
// 清空地图上的绘制对象的同时,也要清楚这个nowMouseTarget控制对象
if (this.nowMouseTarget) {
// 如果有editor,则关闭
this.nowMouseTarget.editor && this.nowMouseTarget.editor.close();
this.nowMouseTarget = null;
}
this.mousetool.close(boolean);
}
/**
*
*
*
*
*
*
* 地图上add设备
*
*
* @description:
* @param {*} deviceData marker的数据
* @param {*} compontent marker点击弹出的infowindow的组件
* @return {*}
*/
addDevice(deviceData, compontent) {
const { longitude: lng, latitude: lat, iconType } = deviceData;
const icon = svgUrl[iconType];
console.log("icon", icon);
let device = this.createMarker({
map: this.map,
anchor: "bottom-center",
icon,
position: [lng, lat],
extData: deviceData,
// label:{
// content:123,
// direction:"top",
// }
});
// device.hide();
// 如果没有有这个公司的数组，就创建，有就直接push
if (!Array.isArray(this.allDevice[iconType])) {
this.allDevice[iconType] = [];
}
this.allDevice[iconType].push(device);
// 设备的事件函数
this.deviceEvent(device, compontent);
}
deviceEvent(device, compontent) {
device.on("click", (e) => {
const target = e.target;
// 如果control==0就是默认值，没有使用123功能，就显示infowindow
if (this.control == 0) {
this.markerClick(target, compontent);
} else if (this.control == 2) {
// 2是已经上图的设备拥有的编辑功能
} else if (this.control == 3) {
// 3是删除操作
}
});
device.on("mouseover", (e) => {
const target = e.target;
const data = target.getExtData();
console.log(data);
const name =
data.nickName ||
data.deviceName ||
data.videoName ||
data.stationName ||
data.time;
target.setLabel({ content: name, direction: "top" });
});
device.on("mouseout", (e) => {
const target = e.target;
const data = target.getExtData();
target.setLabel({ content: "" });
});
}
/** 点击marker出现infowindow
* @description:
* @param {*} target 点击的对象
* @param {*} compontent marker点击弹出的infowindow的组件
* @return {*}
*/
markerClick(target, compontent) {
const deviceExtData = target.getExtData();
const { longitude: lng, latitude: lat } = deviceExtData;
// 创建一个可以控制的组件，将其dom插入infowindow
this.infowindowComponent = this.createInfowindowDom(
this.vue,
this,
deviceExtData,
compontent
);
// 没恩么用，控制台测试的时候用着玩的
window.func = () => {
const { longitude: lng, latitude: lat } = target.getExtData();
const cd = {
id: 1,
name: "9",
lng,
lat,
};
this.infowindowComponentChange(cd);
target.setExtData(cd);
};
this.infowindow = new AMap.InfoWindow({
isCustom: true,
content: this.infowindowComponent.$el,
position: [lng, lat],
// anchor: "top-left",
// offset: [20, -45],
anchor: "middle-left",
offset: [20, -10],
});
this.infowindow.open(this.map);
}
// 创建要加入到infowindow里的
createInfowindowDom(vueRoot, mapClass, deviceData, compontent) {
const Component = this.vue.$Vue.extend(compontent, {});
return new Component({
data() {
return {
// 当前vue实例
vueRoot,
// 自己写的map类
mapClass,
// 数据
deviceData,
};
},
}).$mount();
}
// 当前显示的infowindow内部的数据发生变化，一般在socket传回数据的时候使用
infowindowComponentChange(data) {
this.infowindowComponent.deviceData = data;
}
// 创建marker
createMarker(MarkerOptions) {
return new AMap.Marker(MarkerOptions);
}
// 地图上add管道
addPipeLine(objData, component) {
const { path, pipePressure, iconType } = objData;
// 根据压力获取颜色
const color = pipeColor[pipePressure + 1];
const pipe = this.createPipeLine({
path: eval(path),
strokeWeight: 4,
strokeColor: color,
extData: objData,
cursor: "pointer",
});
this.map.add(pipe);
// pipe.hide();
if (!Array.isArray(this.pipeArr[iconType])) {
this.pipeArr[iconType] = [];
}
this.pipeArr[iconType].push(pipe);
// console.log(this.pipeArr);
// this.map.panTo([path[0][0], path[0][1]]);
this.pipeEvent(pipe, component);
}
createPipeLine(pipeLineOptions) {
return new AMap.Polyline(pipeLineOptions);
}
pipeEvent(pipe, compontent) {
pipe.on("mouseover", (e) => {
const target = e.target;
// 获取当前颜色
const options = target.getOptions();
options.strokeColor = "blue";
target.setOptions(options);
});
pipe.on("mouseout", (e) => {
const target = e.target;
// 根据管道压力获取颜色
const { pipePressure } = target.getExtData();
const color = pipeColor[pipePressure + 1];
// 获取当前颜色
const options = target.getOptions();
options.strokeColor = color;
target.setOptions(options);
});
pipe.on("click", (e) => {
const target = e.target;
target.lnglat = e.lnglat;
// 如果control==0就是默认值，没有使用123功能，就显示infowindow
if (this.control == 0) {
this.pipeClick(target, compontent);
} else if (this.control == 2) {
// 2是已经上图的设备拥有的编辑功能
} else if (this.control == 3) {
// 3是删除操作
}
});
}
pipeClick(target, compontent) {
const deviceExtData = target.getExtData();
const { lng, lat } = target.lnglat;
// 创建一个可以控制的组件，将其dom插入infowindow
this.infowindowComponent = this.createInfowindowDom(
this.vue,
this,
deviceExtData,
compontent
);
// 没恩么用，控制台测试的时候用着玩的
// window.func = () => {
// const { lng, lat } = target.getExtData();
// const cd = {
// id: 1,
// name: "9",
// lng,
// lat,
// };
// this.infowindowComponentChange(cd);
// target.setExtData(cd);
// };
this.infowindow = new AMap.InfoWindow({
isCustom: true,
content: this.infowindowComponent.$el,
position: [lng, lat],
// anchor: "top-left",
// offset: [20, -15],
anchor: "middle-left",
offset: [20, 0],
});
this.infowindow.open(this.map);
}
infowindowClose() {
if (!this.infowindow) return;
this.infowindow.close();
}
// 设备以及公司过滤
allfilter(companyArr, typeArr) {
for (let pipeItem in this.pipeArr) {
this.pipeArr[pipeItem].forEach((pipe) => {
const data = pipe.getExtData();
if (companyArr.indexOf(data.companyType + "") >= 0) {
pipe.show();
} else {
pipe.hide();
}
});
}
for (let deviceItem in this.allDevice) {
this.allDevice[deviceItem].forEach((device) => {
const data = device.getExtData();
// 设备过滤受到bigwindow页面的的两种制约，companyArr, typeArr 两个数组制约显示隐藏
// 燃气没有公司，所以没有device.companyType不收到公司的控制
const companyHas = companyArr.indexOf(data.companyType + "") >= 0;
// 设备存在 受到设备按钮限制
const deviceHas = typeArr.indexOf(+data.iconType) >= 0;
// 如果是燃气公司的话，不受按钮限制
const enterprise = data.iconType == 7 || data.iconType == 8;
// 必须设备存在数组里，才会显示设备 !data.companyType代表用户不受公司制约
if (enterprise || (deviceHas && (companyHas || !data.companyType))) {
device.show();
} else {
device.hide();
}
});
}
}
// 普通调用方法
// 设备报警
deviceAlarm(obj) {
// 设备的类型
const { iconType } = obj;
const publicId = obj.userId || obj.deviceId;
// 找到这个设备所属的空间
const device = this.allDevice[iconType].filter(
(item) =>
(item.getExtData().userId || item.getExtData().deviceId) == publicId
)[0];
// 更改的icon
const icon = svgAlarm[iconType];
device.setIcon(icon);
device.setzIndex(13);
// 将旧的值缓存一下
// device.oldData = device.getExtData();
// device.setExtData(obj);
// 可能出现infoWindow数据变化
this.alarmInfowindowChange(obj);
if (!this.alarmObj[iconType]) {
this.alarmObj[iconType] = [];
}
const ind = this.alarmObj[iconType].indexOf(publicId);
if (ind < 0) {
this.alarmObj[iconType].push(publicId);
}
}
// 报警时候，可能发生infowindowComponent存在，也要变化
alarmInfowindowChange(obj) {
if (!this.infowindowComponent) return;
// 如果infowindow是打开的，就改变里面的数据 必须是 调压箱2 阀门3 用户6 才会发生变化电话
const infowindowDeviceType = [2, 3, 6].includes(
this.infowindowComponent.deviceData.iconType
);
// 如果存在userId就用userId，如果存在deviceId就用deviceId
const infowindowDeviceId =
this.infowindowComponent.deviceData.userId ||
this.infowindowComponent.deviceData.deviceId;
// 如果存在userId就用userId，如果存在deviceId就用deviceId
const objId = obj.userId || obj.deviceId;
// 如果两个值匹配,才可以改变infowindow身上的组件
const infowindowComponentHas = infowindowDeviceId == objId;
if (
this.infowindowComponent &&
infowindowDeviceType &&
infowindowComponentHas
) {
// this.infowindowComponentChange(obj);
if (this.infowindowComponent.http) {
this.infowindowComponent.myHttp();
}
}
}
//如果传过来的报警设备中，有不在deviceAlarm中，就是恢复的设备恢复
relieveAlarm(alarmObj) {
// 把报警数组改变结构,如果有userId就是用户，如果有deviceId就是其他设备
const httpObj = {};
alarmObj.forEach((item) => {
const publicId = item.userId || item.deviceId;
if (!Array.isArray(httpObj[item.iconType])) {
httpObj[item.iconType] = [];
}
httpObj[item.iconType].push(publicId);
});
// 循环现有报警设备
for (let iconType in this.alarmObj) {
const arr = this.alarmObj[iconType];
// 循环现有报警设备
for (let i = 0; i < arr.length; i++) {
// 看看现有报警设备中有没有不在 报警数组中的值，有就恢复可能是userId，也可能是deviceId
const publicId = arr[i];
// 看看接口传来的数据中还有没有这些Id，如果没有了，就是修好了
const hasId = httpObj[iconType]?.includes(publicId);
// 如果已经不在报警数组中,就要去大数组中找他,利用userId
// 如果id不存在了，说明不报警了
if (!hasId) {
// 过滤出来这个要恢复的设备
const device = this.allDevice[iconType].filter(
(item) =>
(item.getExtData().userId || item.getExtData().deviceId) ==
publicId
)[0];
// 恢复
const icon = svgUrl[iconType];
device.setIcon(icon);
// 赋值
// const deviceData = { ...device.oldData };
// device.setExtData(deviceData);
// device.oldData = null;
// 如果infowindow是打开的
this.alarmInfowindowChange(device.getExtData());
// 在arr中删掉
arr.splice(i, 1);
// 由于删掉了当前，所以要--恢复位置
i--;
}
}
}
}
// ws协议方法
wsAlarm(obj) {
const { iconType, userId, userStatus } = obj;
const decice = this.allDevice[iconType].filter(
(item) => item.getExtData().userId == userId
)[0];
let icon = null;
// 2报警，1恢复
if (userStatus == 2) {
icon = svgAlarm[iconType];
device.oldData = device.getExtData();
device.setExtData(obj);
} else if (userStatus == 1) {
icon = svgUrl[iconType];
const oldData = device.oldData;
device.setExtData(oldData);
device.oldData = null;
}
decice.setIcon(icon);
}
// 卫星图切换
satellite = null;
changeMap(bool) {
// 卫星,
if (!bool) {
if (this.satellite) return;
this.satellite = new AMap.TileLayer.Satellite();
this.map.addLayer(this.satellite);
} else {
if (this.satellite) {
this.map.removeLayer(this.satellite);
this.satellite = null;
}
}
}
// 轨迹回放
/**
* @description:
* @param {*} vehicleId 设备id
* @param {*} path 轨迹回访率丼
* @return {*}
*/
backTrack(vehicleId, path, times,component) {
this.infowindowClose();
AMap.plugin("AMap.MoveAnimation", () => {
let marker = this.allDevice[9].filter(
(item) => item.getExtData().vehicleId == vehicleId
)[0];
// 绘制轨迹
marker.polyline = new AMap.Polyline({
map: this.map,
path,
showDir: true,
strokeColor: "#28F", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 6, //线宽
// strokeStyle: "solid" //线样式
});
marker.passedPolyline = new AMap.Polyline({
map: this.map,
strokeColor: "#AF5", //线颜色
strokeWeight: 6, //线宽
});
marker.on("moving", (e) => {
marker.passedPolyline.setPath(e.passedPath);
// this.map.setCenter(e.target.getPosition(), true);
// console.log(getPosition());
});
// 每个path的点
// marker.pointArr = [];
// carTarget
//点击的时候，先传进来一个点
const carPathData = { ...marker.getExtData(), time: times[0] };
carPathData.iconType = 14;
this.addDevice(carPathData,component);
// marker.pointArr.push(point);
marker.on("moveend", (e) => {
// this.addDevice(carPathData,carBackComponent);
// 如果不是最后一个点，就创建一个新的worderpoint，如果是就不创建，并且把自身删除
let z = {
longitude: e.pos[0],
latitude: e.pos[1],
iconType: 14,
time: times[e.index],
};
// if (e.index == path.length - 1) {
// point = this.addDevice(z, null);
// } else {
this.addDevice(z,component);
// workPoint.infoWindow.open(map,e.passedPos);
// }
console.log("定点", e);
});
marker.moveAlong(path, {
// 每一段的时长
duration: 8000, //可根据实际采集时间间隔设置
// JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
autoRotation: true,
});
});
}
clearbackTrack(vehicleId) {
// let marker = this.allDevice[9].filter(
// (item) => item.getExtData().vehicleId == vehicleId
// )[0];
this.allDevice["9"]?.forEach((item) => {
if (item) {
// 停止运动
item.stopMove();
// 删除每个点
console.log(item.pointArr);
if (item.polyline) {
this.map.remove(item.polyline);
}
if (item.passedPolyline) {
this.map.remove(item.passedPolyline);
}
this.map.remove(item);
}
});
// 最后把数组清空
this.allDevice["9"] = [];
// 把car的路径点也清空
this.allDevice["14"]?.forEach((iten) => {
this.map.remove(iten);
});
this.allDevice["14"] = [];
this.infowindowClose();
}
}
gassafetyprogress-web/src/utils/mapClass/yjmap.js 0 → 100644
View file @ fac1cbfd
/*
* @Author: your name
* @Date: 2022-01-11 13:45:12
* @LastEditTime: 2022-03-22 10:35:13
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/utils/mapClass.js
*/
import { pipeColor, svgUrl, svgAlarm } from "@/utils/mapClass/config.js";
// 编辑类
// 在地图上新增的设备可以直接编辑，
// 已经保存完成的设备需要点编辑才可以编辑
export class EditorMap {
// 地图的对象实例
map = null;
// 外部传进来的中心店
center = null;
// 父vue的实例
vue = null;
// 操作 新建，编辑，删除，编辑跟删除只对已经在图上的设备有效 默认值：0， 新建：1，编辑：2, 删除: 3。
// 新建的时候会把未保存的线条清空
control = 0;
// 鼠标事件对象，用来将点跟线上图
mousetool = null;
// 当前正在手动绘制的对象
nowMouseTarget = null;
// 当线mousetool线被按下的时候的flag 当线被按下的时候为true，就不询问是否删除了
mosueToolPolineDownFlag = false;
// 绘制marer的时候的配置，在绘制完挂载事件的时候需要使用
mouseToolMarkerOptions = null;
// 绘制poline的时候的配置，在绘制完挂载事件的时候需要使用
mouseToolPolineOptions = null;
// 存放所有的设备的数组集合，这是一个对象，对象里面是各种设备的数组
allDevice = {};
// 存放所有的管道
pipeArr = {};
// 报警设备的对象
alarmObj = {};
// 当前的infowindow的组件
infowindowComponent = null;
// infowindow本身
infowindow = null;
editorObject = {
editorArr: [],
tabAct: '',
toolBoxShow: false,
};
constructor(contaienr, config = {}, vue) {
this.map = new AMap.Map(contaienr, {
viewMode: "3D",
center: [114.196007, 38.260288],
layers: [AMap.createDefaultLayer()], // layers 字段为空或者不赋值将会自动创建默认底图。
zoom: 14,
...config,
});
const { center } = config;
this.center = center;
this.vue = vue;
this.init();
}
init() {
// 地图事件
this.mapEvent();
// // 手动点线上图准备,编辑模式
this.mouseAddDevice();
// this.mouseAddMarker();
// this.mouseAddPipeline();
// 地图边界
this.map.getCity((res) => {
const city = res.district;
this.mapBound(city);
}, this.center);
}
mapBound(city) {
var district = new AMap.DistrictSearch({
extensions: "all", // 返回行政区边界坐标等具体信息
level: "district", // 设置查询行政区级别为 区
});
district.search(city, (status, result) => {
// 获取朝阳区的边界信息
var bounds = result.districtList[0].boundaries;
var polygons = [];
console.log("boundsboundsboundsboundsbounds", bounds);
if (bounds) {
for (var i = 0, l = bounds.length; i < l; i++) {
//生成行政区划polygon
// new AMap.Polygon({
// map: this.map,
// strokeWeight: 2,
// path: bounds[i],
// fillOpacity: 1,
// fillColor: "transparent",
// strokeColor: "#09f",
// });
new AMap.Polyline({
map: this.map,
strokeWeight: 4,
strokeColor: "#09f",
path: bounds[i],
});
// polygons.push(polygon);
}
}
});
}
// map的事件监听
mapEvent() {
// this.map.on("click", () => {
// // mousetool对象画出的对象的操作
// // 如果有手动绘制对象，要手动清楚一下，因为画线的时候不好清除旧线，这其实是用来清楚旧线的
// // 当画出来的线被mousedown，不删除，但是mouseToolPipeLineFlag要归位，在移出线的时候统一归位
// // 如果对象是marker，直接删除
// if (this.nowMouseTarget?.type == "AMap.Marker") {
// //this.mouseToolDrawClear();
// } else {
// // 当地图上已经画了线，并且没有点在线上，询问是否删除
// if (this.nowMouseTarget && !this.mosueToolPolineDownFlag) {
// this.confirm("是否重新绘制管道", { type: "warning" })
// .then(() => {
// // 删除原来的线
// this.mouseToolDrawClear();
// // 鼠标事件开启，并且赋值原来的属性，this.mouseToolMarkerOptions是开启绘制的时候记录的
// this.mousetool.polyline(this.mouseToolPolineOptions);
// })
// .catch(() => {});
// }
// }
// });
this.map.on("moveend", () => {
console.log("地图停止移动");
if (this.flag) {
console.log("弹框");
this.flag = false;
}
});
window.panTo = () => {
this.flag = true;
this.map.panTo([116.428285, 39.886129]);
};
}
// 弹框工具
confirm(message, obj) {
return this.vue.$confirm(message, obj);
}
// 改变操作状态
changeControl(num) {
this.control = num;
}
// 点线编辑上图准备
mouseAddDevice() {
this.map.plugin(["AMap.MouseTool"], () => {
this.mousetool = new AMap.MouseTool(this.map);
//this.map.addControl(new AMap.ToolBar({ position: 'LT', ruler: false, direction: false }));
});
// 挂载绘制结束的事件
//this.mouseDrawEvent();
}
// 点或者线上图结束后触发的事件
mouseDrawEvent() {
this.mousetool.on("draw", (e) => {
const target = e.obj;
// console.log([target._position.lng, target._position.lat]);
const { type: targetType } = target;
// 当这个点是marker的时候
if (targetType == "AMap.Marker") {
this.mouseToolMarkerEvent(target);
} else {
// 如果是线,挂上编辑
this.lineEditor(target);
this.mousetool.close();
this.mouseToolPolineEvent(target);
console.log(targetType, "当前对象是管道");
}
this.nowMouseTarget = target;
});
}
// 绘制marker结束后，在marker身上添加的事件
mouseToolMarkerEvent(target) {
// 由于画出来的marker点击会换位置，所以当移入的时候删除绘制事件，移出去在增加绘制事件
target.on("mouseover", (e) => {
// 鼠标事件关闭
this.mousetool.close(false);
});
target.on("mouseout", (e) => {
// 这里不方便获取原来的属性，因为position不好解决，还是设置一个值吧
// 鼠标事件开启，并且赋值原来的属性，this.mouseToolMarkerOptions是开启绘制的时候记录的
this.mousetool.marker(this.mouseToolMarkerOptions);
});
// 点
target.on("click", (e) => {
// 弹框
});
}
// 挂上线以及线的事件
lineEditor(line) {
// line.editor && line.editor.close();
// 当前点击次数，1次为编辑，2次为弹框
line.editorNum = 0;
line.editor = new AMap.PolyEditor(this.map, line);
}
// 绘制管道的时候，挂载的事件
mouseToolPolineEvent(target) {
// 线按下的时候会变成编辑，mousetool事件会清空 移出线的时候 在把polyline事件加上
target.on("mouseover", (e) => {
// 鼠标事件关闭
// this.mousetool.close(false);
});
target.on("mouseout", (e) => {
// 有时候按在线上移动地图，map点击事件中mosueToolPolineDownFlag无法归位，在这里归位
this.mosueToolPolineDownFlag = false;
// 鼠标事件开启，并且赋值原来的属性，this.mouseToolMarkerOptions是开启绘制的时候记录的
// this.mousetool.polyline(this.mouseToolPolineOptions);
});
// 线
target.on("mousedown", (e) => {
const line = e.target;
// mosueTool按下的flag,按在线上，不询问是否删除
this.mosueToolPolineDownFlag = true;
// 按下的时候要关闭事件
this.mousetool.close(false);
// 如果当前状态不是编辑，则进入编辑状态
if (line.editorNum < 1) {
// 打开并且++
line.editor.open();
line.editorNum++;
} else {
// 这里就要弹框了
console.log(line.getPath());
}
});
}
// 设备点击上图开启
mouseAddMarker(markerObj = {}) {
// 清空已经绘制完的对象
//this.mousetoolClose(true);
// 记录一下配置项，在挂载点击的时候，需要使用
this.mouseToolMarkerOptions = {
draggable: true,
id: 'flag',
icon: new AMap.Icon({
size: [60, 60],
image: require("@/assets/image/fla01g.png"),
imageSize: [60, 60],
}),
offset: new AMap.Pixel(-19,-42),
};
this.mousetool.marker(this.mouseToolMarkerOptions);
}
// 管线点击上图开启
mouseAddPipeline(hz) {
this.editorObject.tabAct = hz;
//this.mousetoolClose(false);
// 开始画线
this.mosuetoolPolineFlag = true;
this.mouseToolPolineOptions = {
strokeColor: '#3366FF',
strokeOpacity: 1,
strokeWeight: 6,
strokeStyle: 'solid',
};
this.mousetool.polyline(this.mouseToolPolineOptions);
}
//⚪圆
mouseAddCircle(hz) {
this.editorObject.tabAct = hz;
//this.mousetoolClose(false);
// 开始画线
var c ={
strokeColor: '#FF33FF',
strokeOpacity: 1,
strokeWeight: 4,
fillColor: '#1791fc',
fillOpacity: 0.4,
strokeStyle: 'solid',
};
this.mousetool.circle(c);
}
//多边形
mouseAddPolygon(hz) {
this.editorObject.tabAct = hz;
//this.mousetoolClose(false);
// 开始画线
this.mouseToolPolineOptions = {
strokeColor: '#0dec66',
strokeOpacity: 1,
strokeWeight: 4,
strokeOpacity: 1,
fillColor: '#ee6a38',
fillOpacity: 0.3,
strokeStyle: 'solid',
}
this.mousetool.polygon(this.mouseToolPolineOptions);
}
mouseAddRule() {
//测距
this.mousetool.rule({
startMarkerOptions: {
icon: new AMap.Icon({
size: new AMap.Size(128, 128),
imageSize: new AMap.Size(50, 50),
image: 'images/qi.png',
}),
offset: new AMap.Pixel(-25, -50),
},
endMarkerOptions: {
icon: new AMap.Icon({
size: new AMap.Size(128, 128),
imageSize: new AMap.Size(40, 40),
image: 'images/zhong.png',
}),
offset: new AMap.Pixel(-20, -40),
},
midMarkerOptions: {
icon: new AMap.Icon({
size: new AMap.Size(128, 128),
imageSize: new AMap.Size(40, 40),
image: 'images/jing.png',
}),
offset: new AMap.Pixel(-20, -40),
},
lineOptions: {
strokeStyle: 'solid',
strokeColor: '#FF33FF',
strokeOpacity: 1,
strokeWeight: 3,
},
});
}
mouseAddMeasureArea() {
//面积
this.mousetool.measureArea({
strokeColor: '#80d8ff',
fillColor: '#80d8ff',
fillOpacity: 0.5,
});
}
// 手动清除map上绘制的对象
mouseToolDrawClear() {
if (this.nowMouseTarget) {
this.map.remove(this.nowMouseTarget);
// 如果有editor,则关闭
this.nowMouseTarget.editor && this.nowMouseTarget.editor.close();
this.nowMouseTarget = null;
}
}
//编辑图形
editOverlays() {
this.mousetool.close(false);
var type = this.editorObject.tabAct;
let layobj = this.getAllDrawLays();
switch (type) {
case 'Circle':
if (layobj.CircleArr.length > 0)
layobj.CircleArr.forEach((ele) => {
let editor = new AMap.CircleEditor(this.map, ele);
editor.open();
this.editorObject.editorArr.push(editor);
});
break;
case 'Polyline':
if (layobj.PolylineArr.length > 0)
layobj.PolylineArr.forEach((ele) => {
let editor = new AMap.PolyEditor(this.map, ele);
editor.open();
this.editorObject.editorArr.push(editor);
});
break;
case 'Polygon':
if (layobj.PolygonArr.length > 0)
layobj.PolygonArr.forEach((ele) => {
let editor = new AMap.PolyEditor(this.map, ele);
editor.open();
this.editorObject.editorArr.push(editor);
});
break;
}
}
getAllDrawLays() {
let laysArr = this.map.getAllOverlays(),
CircleArr = [],
MarkerArr = [],
PolylineArr = [],
PolygonArr = [];
laysArr.forEach((ele) => {
if (ele.CLASS_NAME == 'Overlay.Circle') CircleArr.push(ele);
if (ele.CLASS_NAME == 'Overlay.Polygon') PolygonArr.push(ele);
if (ele.CLASS_NAME == 'Overlay.Polyline') PolylineArr.push(ele);
if (ele.CLASS_NAME == 'Overlay.Marker' && ele.getzIndex() == 9999) {
MarkerArr.push(ele);
}
});
let allDrawLays = [...CircleArr, ...MarkerArr, ...PolylineArr, ...PolygonArr];
return {
allDrawLays,
CircleArr,
MarkerArr,
PolylineArr,
PolygonArr,
};
}
//结束编辑
endEditOverlays() {
console.log(this.editorObject.editorArr.length)
if (this.editorObject.editorArr.length > 0) {
this.editorObject.editorArr.forEach((ele) => {
ele.close();
});
}
}
//结束绘制
endOverlays() {
this.mousetool.close(false);
}
//删除图形
delOverlays() {
let layobj = this.getAllDrawLays(),
html = '',
type = this.editorObject.tabAct,
len = layobj[type + 'Arr'] ? layobj[type + 'Arr'].length : '';
// window.delRadioLays = function (num) {
// this.map.remove(layobj[type + 'Arr'][num - 1]);
// };
if (len > 0) this.alertFun(len, type, layobj);
}
delRadioLays(num){
console.log(num);
//this.map.remove(layobj[this.editorObject.tabAct + 'Arr'][num - 1]);
}
alertFun(len, type, layobj) {
let stype = '',
html = '';
switch (type) {
case 'Circle':
stype = '圆形';
break;
case 'Polyline':
stype = '线段';
break;
case 'Polygon':
stype = '多边形';
break;
}
for (let i = 0; i < len; i++) {
let lena = i + 1;
html += '<input name="in" type="radio" onClick="delRadioLays('+lena+')"/>第'+lena+'个'+stype;
}
document.getElementById("delTu").innerHTML=html;
// layLayer.open({
// content: html,
// });
}
// 关闭点击上图事件 true清除之前绘制的图像，false 仅关闭上图事件
mousetoolClose(boolean) {
// 清空地图上的绘制对象的同时,也要清楚这个nowMouseTarget控制对象
if (this.nowMouseTarget) {
// 如果有editor,则关闭
this.nowMouseTarget.editor && this.nowMouseTarget.editor.close();
this.nowMouseTarget = null;
}
this.mousetool.close(boolean);
}
/**
*
*
*
*
*
*
* 地图上add设备
*
*
* @description:
* @param {*} deviceData marker的数据
* @param {*} compontent marker点击弹出的infowindow的组件
* @return {*}
*/
addDevice(deviceData, compontent) {
const { longitude: lng, latitude: lat, iconType } = deviceData;
const icon = svgUrl[iconType];
console.log("icon", icon);
let device = this.createMarker({
map: this.map,
anchor: "bottom-center",
icon,
position: [lng, lat],
extData: deviceData,
// label:{
// content:123,
// direction:"top",
// }
});
// device.hide();
// 如果没有有这个公司的数组，就创建，有就直接push
if (!Array.isArray(this.allDevice[iconType])) {
this.allDevice[iconType] = [];
}
this.allDevice[iconType].push(device);
// 设备的事件函数
this.deviceEvent(device, compontent);
}
deviceEvent(device, compontent) {
device.on("click", (e) => {
const target = e.target;
// 如果control==0就是默认值，没有使用123功能，就显示infowindow
if (this.control == 0) {
this.markerClick(target, compontent);
} else if (this.control == 2) {
// 2是已经上图的设备拥有的编辑功能
} else if (this.control == 3) {
// 3是删除操作
}
});
device.on("mouseover", (e) => {
const target = e.target;
const data = target.getExtData();
console.log(data);
const name =
data.nickName ||
data.deviceName ||
data.videoName ||
data.stationName ||
data.time;
target.setLabel({ content: name, direction: "top" });
});
device.on("mouseout", (e) => {
const target = e.target;
const data = target.getExtData();
target.setLabel({ content: "" });
});
}
/** 点击marker出现infowindow
* @description:
* @param {*} target 点击的对象
* @param {*} compontent marker点击弹出的infowindow的组件
* @return {*}
*/
markerClick(target, compontent) {
const deviceExtData = target.getExtData();
const { longitude: lng, latitude: lat } = deviceExtData;
// 创建一个可以控制的组件，将其dom插入infowindow
this.infowindowComponent = this.createInfowindowDom(
this.vue,
this,
deviceExtData,
compontent
);
// 没恩么用，控制台测试的时候用着玩的
window.func = () => {
const { longitude: lng, latitude: lat } = target.getExtData();
const cd = {
id: 1,
name: "9",
lng,
lat,
};
this.infowindowComponentChange(cd);
target.setExtData(cd);
};
this.infowindow = new AMap.InfoWindow({
isCustom: true,
content: this.infowindowComponent.$el,
position: [lng, lat],
// anchor: "top-left",
// offset: [20, -45],
anchor: "middle-left",
offset: [20, -10],
});
this.infowindow.open(this.map);
}
// 创建要加入到infowindow里的
createInfowindowDom(vueRoot, mapClass, deviceData, compontent) {
const Component = this.vue.$Vue.extend(compontent, {});
return new Component({
data() {
return {
// 当前vue实例
vueRoot,
// 自己写的map类
mapClass,
// 数据
deviceData,
};
},
}).$mount();
}
// 当前显示的infowindow内部的数据发生变化，一般在socket传回数据的时候使用
infowindowComponentChange(data) {
this.infowindowComponent.deviceData = data;
}
// 创建marker
createMarker(MarkerOptions) {
return new AMap.Marker(MarkerOptions);
}
// 地图上add管道
addPipeLine(objData, component) {
const { path, pipePressure, iconType } = objData;
// 根据压力获取颜色
const color = pipeColor[pipePressure + 1];
const pipe = this.createPipeLine({
path: eval(path),
strokeWeight: 4,
strokeColor: color,
extData: objData,
cursor: "pointer",
});
this.map.add(pipe);
// pipe.hide();
if (!Array.isArray(this.pipeArr[iconType])) {
this.pipeArr[iconType] = [];
}
this.pipeArr[iconType].push(pipe);
// console.log(this.pipeArr);
// this.map.panTo([path[0][0], path[0][1]]);
this.pipeEvent(pipe, component);
}
createPipeLine(pipeLineOptions) {
return new AMap.Polyline(pipeLineOptions);
}
pipeEvent(pipe, compontent) {
pipe.on("mouseover", (e) => {
const target = e.target;
// 获取当前颜色
const options = target.getOptions();
options.strokeColor = "blue";
target.setOptions(options);
});
pipe.on("mouseout", (e) => {
const target = e.target;
// 根据管道压力获取颜色
const { pipePressure } = target.getExtData();
const color = pipeColor[pipePressure + 1];
// 获取当前颜色
const options = target.getOptions();
options.strokeColor = color;
target.setOptions(options);
});
pipe.on("click", (e) => {
const target = e.target;
target.lnglat = e.lnglat;
// 如果control==0就是默认值，没有使用123功能，就显示infowindow
if (this.control == 0) {
this.pipeClick(target, compontent);
} else if (this.control == 2) {
// 2是已经上图的设备拥有的编辑功能
} else if (this.control == 3) {
// 3是删除操作
}
});
}
pipeClick(target, compontent) {
const deviceExtData = target.getExtData();
const { lng, lat } = target.lnglat;
// 创建一个可以控制的组件，将其dom插入infowindow
this.infowindowComponent = this.createInfowindowDom(
this.vue,
this,
deviceExtData,
compontent
);
// 没恩么用，控制台测试的时候用着玩的
// window.func = () => {
// const { lng, lat } = target.getExtData();
// const cd = {
// id: 1,
// name: "9",
// lng,
// lat,
// };
// this.infowindowComponentChange(cd);
// target.setExtData(cd);
// };
this.infowindow = new AMap.InfoWindow({
isCustom: true,
content: this.infowindowComponent.$el,
position: [lng, lat],
// anchor: "top-left",
// offset: [20, -15],
anchor: "middle-left",
offset: [20, 0],
});
this.infowindow.open(this.map);
}
infowindowClose() {
if (!this.infowindow) return;
this.infowindow.close();
}
// 设备以及公司过滤
allfilter(companyArr, typeArr) {
for (let pipeItem in this.pipeArr) {
this.pipeArr[pipeItem].forEach((pipe) => {
const data = pipe.getExtData();
if (companyArr.indexOf(data.companyType + "") >= 0) {
pipe.show();
} else {
pipe.hide();
}
});
}
for (let deviceItem in this.allDevice) {
this.allDevice[deviceItem].forEach((device) => {
const data = device.getExtData();
// 设备过滤受到bigwindow页面的的两种制约，companyArr, typeArr 两个数组制约显示隐藏
// 燃气没有公司，所以没有device.companyType不收到公司的控制
const companyHas = companyArr.indexOf(data.companyType + "") >= 0;
// 设备存在 受到设备按钮限制
const deviceHas = typeArr.indexOf(+data.iconType) >= 0;
// 如果是燃气公司的话，不受按钮限制
const enterprise = data.iconType == 7 || data.iconType == 8;
// 必须设备存在数组里，才会显示设备 !data.companyType代表用户不受公司制约
if (enterprise || (deviceHas && (companyHas || !data.companyType))) {
device.show();
} else {
device.hide();
}
});
}
}
// 普通调用方法
// 设备报警
deviceAlarm(obj) {
// 设备的类型
const { iconType } = obj;
const publicId = obj.userId || obj.deviceId;
// 找到这个设备所属的空间
const device = this.allDevice[iconType].filter(
(item) =>
(item.getExtData().userId || item.getExtData().deviceId) == publicId
)[0];
// 更改的icon
const icon = svgAlarm[iconType];
device.setIcon(icon);
device.setzIndex(13);
// 将旧的值缓存一下
// device.oldData = device.getExtData();
// device.setExtData(obj);
// 可能出现infoWindow数据变化
this.alarmInfowindowChange(obj);
if (!this.alarmObj[iconType]) {
this.alarmObj[iconType] = [];
}
const ind = this.alarmObj[iconType].indexOf(publicId);
if (ind < 0) {
this.alarmObj[iconType].push(publicId);
}
}
// 报警时候，可能发生infowindowComponent存在，也要变化
alarmInfowindowChange(obj) {
if (!this.infowindowComponent) return;
// 如果infowindow是打开的，就改变里面的数据 必须是 调压箱2 阀门3 用户6 才会发生变化电话
const infowindowDeviceType = [2, 3, 6].includes(
this.infowindowComponent.deviceData.iconType
);
// 如果存在userId就用userId，如果存在deviceId就用deviceId
const infowindowDeviceId =
this.infowindowComponent.deviceData.userId ||
this.infowindowComponent.deviceData.deviceId;
// 如果存在userId就用userId，如果存在deviceId就用deviceId
const objId = obj.userId || obj.deviceId;
// 如果两个值匹配,才可以改变infowindow身上的组件
const infowindowComponentHas = infowindowDeviceId == objId;
if (
this.infowindowComponent &&
infowindowDeviceType &&
infowindowComponentHas
) {
// this.infowindowComponentChange(obj);
if (this.infowindowComponent.http) {
this.infowindowComponent.myHttp();
}
}
}
//如果传过来的报警设备中，有不在deviceAlarm中，就是恢复的设备恢复
relieveAlarm(alarmObj) {
// 把报警数组改变结构,如果有userId就是用户，如果有deviceId就是其他设备
const httpObj = {};
alarmObj.forEach((item) => {
const publicId = item.userId || item.deviceId;
if (!Array.isArray(httpObj[item.iconType])) {
httpObj[item.iconType] = [];
}
httpObj[item.iconType].push(publicId);
});
// 循环现有报警设备
for (let iconType in this.alarmObj) {
const arr = this.alarmObj[iconType];
// 循环现有报警设备
for (let i = 0; i < arr.length; i++) {
// 看看现有报警设备中有没有不在 报警数组中的值，有就恢复可能是userId，也可能是deviceId
const publicId = arr[i];
// 看看接口传来的数据中还有没有这些Id，如果没有了，就是修好了
const hasId = httpObj[iconType]?.includes(publicId);
// 如果已经不在报警数组中,就要去大数组中找他,利用userId
// 如果id不存在了，说明不报警了
if (!hasId) {
// 过滤出来这个要恢复的设备
const device = this.allDevice[iconType].filter(
(item) =>
(item.getExtData().userId || item.getExtData().deviceId) ==
publicId
)[0];
// 恢复
const icon = svgUrl[iconType];
device.setIcon(icon);
// 赋值
// const deviceData = { ...device.oldData };
// device.setExtData(deviceData);
// device.oldData = null;
// 如果infowindow是打开的
this.alarmInfowindowChange(device.getExtData());
// 在arr中删掉
arr.splice(i, 1);
// 由于删掉了当前，所以要--恢复位置
i--;
}
}
}
}
// ws协议方法
wsAlarm(obj) {
const { iconType, userId, userStatus } = obj;
const decice = this.allDevice[iconType].filter(
(item) => item.getExtData().userId == userId
)[0];
let icon = null;
// 2报警，1恢复
if (userStatus == 2) {
icon = svgAlarm[iconType];
device.oldData = device.getExtData();
device.setExtData(obj);
} else if (userStatus == 1) {
icon = svgUrl[iconType];
const oldData = device.oldData;
device.setExtData(oldData);
device.oldData = null;
}
decice.setIcon(icon);
}
// 卫星图切换
satellite = null;
changeMap(bool) {
// 卫星,
if (!bool) {
if (this.satellite) return;
this.satellite = new AMap.TileLayer.Satellite();
this.map.addLayer(this.satellite);
} else {
if (this.satellite) {
this.map.removeLayer(this.satellite);
this.satellite = null;
}
}
}
// 轨迹回放
/**
* @description:
* @param {*} vehicleId 设备id
* @param {*} path 轨迹回访率丼
* @return {*}
*/
backTrack(vehicleId, path, times,component) {
this.infowindowClose();
AMap.plugin("AMap.MoveAnimation", () => {
let marker = this.allDevice[9].filter(
(item) => item.getExtData().vehicleId == vehicleId
)[0];
// 绘制轨迹
marker.polyline = new AMap.Polyline({
map: this.map,
path,
showDir: true,
strokeColor: "#28F", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 6, //线宽
// strokeStyle: "solid" //线样式
});
marker.passedPolyline = new AMap.Polyline({
map: this.map,
strokeColor: "#AF5", //线颜色
strokeWeight: 6, //线宽
});
marker.on("moving", (e) => {
marker.passedPolyline.setPath(e.passedPath);
// this.map.setCenter(e.target.getPosition(), true);
// console.log(getPosition());
});
// 每个path的点
// marker.pointArr = [];
// carTarget
//点击的时候，先传进来一个点
const carPathData = { ...marker.getExtData(), time: times[0] };
carPathData.iconType = 14;
this.addDevice(carPathData,component);
// marker.pointArr.push(point);
marker.on("moveend", (e) => {
// this.addDevice(carPathData,carBackComponent);
// 如果不是最后一个点，就创建一个新的worderpoint，如果是就不创建，并且把自身删除
let z = {
longitude: e.pos[0],
latitude: e.pos[1],
iconType: 14,
time: times[e.index],
};
// if (e.index == path.length - 1) {
// point = this.addDevice(z, null);
// } else {
this.addDevice(z,component);
// workPoint.infoWindow.open(map,e.passedPos);
// }
console.log("定点", e);
});
marker.moveAlong(path, {
// 每一段的时长
duration: 8000, //可根据实际采集时间间隔设置
// JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
autoRotation: true,
});
});
}
clearbackTrack(vehicleId) {
// let marker = this.allDevice[9].filter(
// (item) => item.getExtData().vehicleId == vehicleId
// )[0];
this.allDevice["9"]?.forEach((item) => {
if (item) {
// 停止运动
item.stopMove();
// 删除每个点
console.log(item.pointArr);
if (item.polyline) {
this.map.remove(item.polyline);
}
if (item.passedPolyline) {
this.map.remove(item.passedPolyline);
}
this.map.remove(item);
}
});
// 最后把数组清空
this.allDevice["9"] = [];
// 把car的路径点也清空
this.allDevice["14"]?.forEach((iten) => {
this.map.remove(iten);
});
this.allDevice["14"] = [];
this.infowindowClose();
}
}
gassafetyprogress-web/src/views/emergency/index.vue
View file @ fac1cbfd
......@@ -31,30 +31,62 @@
/>
<PipeColor />
<!-- 底部按钮 -->
<div class="home-div">
<img src="@/assets/mapinages/bottombanner.png" alt="" style="" />
<div class="listingsSty fangy">
<div
@click="allCompany"
:class="selarr.length == companyLength ? 'active' : ''"
class="firsty"
>
全部
</div>
<div
class="firsty"
:class="selarr.indexOf(item.val) >= 0 ? 'active' : ''"
v-for="(item, index) in typeList"
:key="item.val"
@click="sel(index, item)"
>
{{ item.name }}
</div>
</div>
</div>
<!--<div class="home-div">-->
<!--<img src="@/assets/mapinages/bottombanner.png" alt="" style="" />-->
<!--<div class="listingsSty fangy">-->
<!--<div-->
<!--@click="allCompany"-->
<!--:class="selarr.length == companyLength ? 'active' : ''"-->
<!--class="firsty"-->
<!--&gt;-->
<!--全部-->
<!--</div>-->
<!--<div-->
<!--class="firsty"-->
<!--:class="selarr.indexOf(item.val) >= 0 ? 'active' : ''"-->
<!--v-for="(item, index) in typeList"-->
<!--:key="item.val"-->
<!--@click="sel(index, item)"-->
<!--&gt;-->
<!--{{ item.name }}-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<div class="event_div" @click="handleAdd">
事件接报
</div>
<!--<div class="mouseToolBtn">-->
<!--<button class="serBtn" @click="openDraw()" id="mouseToolBtn">画图</button>-->
<!--</div>-->
<!--<div class="delTu" id="delTu">-->
<!--&lt;!&ndash;<input name="in" type="radio" @click="delRadioLays()"/>&ndash;&gt;-->
<!--</div>-->
<!--<div class="toolBtn" :style="display">-->
<!--<div class="el-form-div" style="height: 30px;background: black">-->
<!--<div class="detail-title">标绘工具</div>-->
<!--<div style="cursor: pointer;" >-->
<!--<img style="width: 20px;height: 20px;margin-top: 5px;" @click="closeDraw" src="@/assets/mapImages/closeBtn.png" alt="" />-->
<!--</div>-->
<!--</div>-->
<!--<div class="el-form-div">-->
<!--<div style="width: 50%">-->
<!--<div class="tool-div" @click="drawMark()">标记</div>-->
<!--<div class="tool-div" @click="drawCircle()">圆形 </div>-->
<!--<div class="tool-div" @click="drawRule()">测距</div>-->
<!--<div class="tool-div" @click="editDraw()">编辑图形</div>-->
<!--<div class="tool-div" @click="map.delOverlays()">删除图形</div>-->
<!--<div class="tool-div" @click="mouseToolDrawClear">清除所有</div>-->
<!--</div>-->
<!--<div style="width: 50%">-->
<!--<div class="tool-div" @click="drawPolyline()">线段</div>-->
<!--<div class="tool-div" @click="drawPolygon()">多边形</div>-->
<!--<div class="tool-div" @click="drawMeasureArea()">面积</div>-->
<!--<div class="tool-div" @click="endEditDraw()">关闭编辑</div>-->
<!--<div class="tool-div" @click="map.endOverlays()">结束绘制</div>-->
<!--<div class="tool-div">保存图片</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!-- 设备按钮 -->
<div class="typelist-div">
<div
......@@ -74,7 +106,7 @@
<div class="typelist-div2">
<div
class="list"
style="width: 146px;height: 40px;line-height: 30px;margin-top: 1px;"
style="width: 146px;height: 35px;line-height: 35px;"
v-for="(item, index) in arr2"
:key="index"
:class="selarr1.indexOf(item.val) >= 0 ? 'active' : ''"
......@@ -82,7 +114,7 @@
>
<img
:src="item.imgurl"
style="margin-top: 3px; float: left; margin-right: 3px;width: 26px"
style="margin-top: 6px;float: left; margin-right: 3px;width: 18px;height: 18px;margin-left: 10px;"
/>
{{ item.name }}
</div>
......@@ -200,7 +232,7 @@
<script>
// @ is an alias to /src
import { EditorMap } from "@/utils/mapClass/map";
import { EditorMap } from "@/utils/mapClass/yjmap";
import { mapGetters, mapActions } from "vuex";
import { listDetectorInfo } from "@/api/detector/detectorInfo";
import { detectorUserList } from "@/api/detector/detectorUser";
......@@ -292,6 +324,7 @@ export default {
name: "中燃韵科",
},
],
display:"display:none",
// 2:"调压箱",
// 3:"阀门",
// 4:"厂站",
......@@ -381,6 +414,8 @@ export default {
// 报警轮询timer
alarmTimer: null,
//绘制工具
markNum:0,
// 表单参数
form: {},
// 表单校验
......@@ -444,7 +479,7 @@ export default {
"map",
{
center: path,
mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
//mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
zoom: 14.5,
},
this
......@@ -782,17 +817,45 @@ export default {
this.nowweek = `${weekArr[week]}`;
this.nowDate = `${year}年${month}月${day}`;
},
// 地图绘制
// drawMark() {
// this.map.mouseAddMarker();
// },
// drawPolyline() {
// this.map.mouseAddPipeline("Polyline");
// },
// drawCircle() {
// this.map.mouseAddCircle("Circle");
// },
// drawPolygon() {
// this.map.mouseAddPolygon("Polygon");
// },
// drawRule() {
// this.map.mouseAddRule();
// },
// drawMeasureArea() {
// this.map.mouseAddMeasureArea();
// },
// mouseToolDrawClear(){
// this.map.mousetoolClose(true);
// },
// editDraw(){
// this.map.editOverlays();
// },
// endEditDraw(){
// this.map.endEditOverlays();
// },
// delRadioLays(num){
// console.log("---"+num)
// },
// openDraw(){
// this.display="";
// },
// closeDraw(){
// this.display="display:none";
// }
},
// 销毁定时器
beforeDestroy() {
if (this.formatDate) {
clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
}
// 报警
if (this.alarmTimer) {
clearInterval(this.alarmTimer);
}
},
};
</script>
<style lang="scss" scoped>
......@@ -844,11 +907,11 @@ export default {
}
.rightbar {
width: 470px;
height: 90%;
height: 92%;
position: fixed;
top: 50px;
right: 0;
background: #112238;
background: #ffffff;
}
.home-div {
width: 50%;
......@@ -964,22 +1027,55 @@ export default {
z-index: 9999;
float: left;
margin-left: 15px;
color: #fff;
color: #000000;
line-height: auto;
text-align: center;
background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%);
box-shadow: inset 0px 1px 2px 1px #125c9b;
background: #ffffff;
box-shadow: inset 0px 1px 2px 1px #ffffff;
font-size: 14px;
padding: 5px 7px;
cursor: pointer;
}
.list.active {
background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%);
box-shadow: inset 0px 1px 2px 1px #125c9b;
color: #2ee7e7;
background: #ffffff;
box-shadow: inset 0px 1px 2px 1px #ffffff;
color: #1890ff;
font-size: 14px;
}
.mouseToolBtn {
position: fixed;
margin-left: 100px;
z-index: 999;
bottom: 50px;
}
.delTu{
position: fixed;
margin-left: 30%;
margin-top: 300px;
z-index: 999;
height: 150px;
width: 450px;
background: #1c84c6;
}
.serBtn {
background: #fff;
width: 50px;
height: 50px;
text-align: center;
outline: none;
border-radius: 5px;
border: none;
cursor: pointer;
}
.toolBtn{
background: white;
width: 160px;
position: fixed;
margin-left: 100px;
z-index: 999;
bottom: 100px;
height: 200px;
}
.el-form-div{
display:flex;
flex-direction:row;
......@@ -987,6 +1083,25 @@ export default {
justify-content:flex-start;
width: 100%;
}
.detail-title{
height: 30px;
color: white;
line-height: 30px;
width: 130px;
font-size: 15px;
margin-left: 5px;
}
.tool-div{
border: 1px solid #cccccc;
width: 80%;
margin-left: 10%;
text-align: center;
margin-top: 4px;
font-size: 14px;
height: 24px;
line-height: 24px;
cursor:pointer;
}
::v-deep .el-dialog:not(.is-fullscreen) {
margin-top: 13vh !important;
}
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Cg.vue 0 → 100644
View file @ fac1cbfd
<!--
* @Author: your name
* @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-28 13:59:37
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
-->
<template>
<div class="czcard">
<my-collapse
title="储罐"
ref="myCollapse"
:listNum="czList.filter((item) => item.show).length"
>
<template v-slot:chackbox>
<div
class="filter"
:class="`one-${item.state}`"
v-for="item in filterList"
:key="item.value"
>
<span
class="text"
:class="{ active: deviceTypeArr.indexOf(item.state) >= 0 }"
@click="fliterTypeChange(item)"
>{{ item.value }}</span
>
<span class="number">({{ item.count }})</span>
</div>
</template>
<template #container>
<div class="container flex">
<div
class="com"
v-for="item in czList"
:key="item.deviceName"
v-show="item.show"
>
<div :title="item.companyName" class="left zzz">
{{ item.companyName }}
</div>
<div :class="`one-${item.state}`" class="state">
{{ typeState[item.state - 1] }}
</div>
</div>
</div>
</template>
</my-collapse>
</div>
</template>
<script>
import MyCollapse from "./MyCollapse";
import CzItem from "./CzItem";
// 场罐
export default {
components: {
MyCollapse,
CzItem,
},
data() {
return {
carHide: true,
addStartNum: 3,
filterList: [
{ value: "正常", count: 100, state: 1 },
{ value: "报警", count: 100, state: 2 },
{ value: "离线", count: 100, state: 3 },
],
typeState: ["正常", "报警", "离线"],
deviceTypeArr: [1, 2, 3],
czList: [
{ companyName: "河北泽宏股份储罐", state: 1, show: true },
{ companyName: "河北泽宏股份储罐", state: 2, show: true },
{ companyName: "河北泽宏股份储罐", state: 3, show: true },
{ companyName: "河北泽宏股份储罐", state: 1, show: true },
{ companyName: "河北泽宏股份储罐", state: 2, show: true },
{ companyName: "河北泽宏股份储罐", state: 3, show: true },
{ companyName: "河北泽宏股份储罐", state: 1, show: true },
{ companyName: "河北泽宏股份储罐", state: 2, show: true },
{ companyName: "河北泽宏股份储罐", state: 3, show: true },
{ companyName: "河北泽宏股份储罐", state: 1, show: true },
{ companyName: "河北泽宏股份储罐", state: 2, show: true },
{ companyName: "河北泽宏股份储罐", state: 3, show: true },
{ companyName: "河北泽宏股份储罐", state: 1, show: true },
{ companyName: "河北泽宏股份储罐", state: 2, show: true },
{ companyName: "河北泽宏股份储罐", state: 3, show: true },
{ companyName: "河北泽宏股份储罐", state: 1, show: true },
{ companyName: "河北泽宏股份储罐", state: 2, show: true },
{ companyName: "河北泽宏股份储罐", state: 3, show: true },
],
};
},
computed: {
// 计算有多少个展示的对象,如果小于3个,就把justify-content: space-between;取消
getShowNum() {
return this.czList.filter((item) => item.show).length < this.addStartNum;
},
},
mounted() {
// this.changeAddStartNum();
},
methods: {
hide() {
this.carHide = !this.carHide;
},
// 根据父子元素自动计算是否需要添加值start
changeAddStartNum() {
const czItem = this.$refs.czItem;
let czItemWidth;
// 组件有可能是一个数组，所以要这样判断
if (Array.isArray(czItem)) {
const { width } = czItem[0].$el.getBoundingClientRect();
czItemWidth = width;
} else {
const { width } = czItem.$el.getBoundingClientRect();
czItemWidth = width;
}
// 取出collap的宽
const { width: CollapseWidth } =
this.$refs.myCollapse.$el.getBoundingClientRect();
// 得到最小的承载数量
this.addStartNum = Math.floor(CollapseWidth / czItemWidth);
},
//过滤选择
fliterTypeChange(data) {
const { state } = data;
const index = this.deviceTypeArr.indexOf(state);
if (index >= 0) {
this.deviceTypeArr.splice(index, 1);
} else {
this.deviceTypeArr.push(state);
}
this.filter(this.deviceTypeArr);
},
// 过滤对象
filter(arr) {
this.czList.forEach((item) => {
const { state } = item;
if (arr.includes(state)) {
item.show = true;
} else {
item.show = false;
}
});
},
},
};
</script>
<style lang="scss" scoped>
$one: #666666;
$two: #ff6c68;
$three: #bbbbbb;
$active: #06d7b1 !important;
.filter {
margin-right: 22px;
margin-top: 5px;
font-size: 14px;
.text {
position: relative;
cursor: pointer;
&::before {
content: "";
position: absolute;
border-radius: 50%;
width: 6px;
height: 6px;
left: -10px;
top: 50%;
margin-top: -3px;
}
&.active {
color: $active;
}
&:hover {
color: #06d7b189 !important;
}
}
.number {
font-weight: 500;
}
&.one-1 {
.number,
.text {
color: $one;
}
.text {
&:before {
background-color: $one;
}
}
}
&.one-2 {
.number,
.text {
color: $two;
}
.text {
&:before {
background-color: $two;
}
}
}
&.one-3 {
.number,
.text {
color: $three;
}
.text {
&:before {
background-color: $three;
}
}
}
}
.container {
width: 100%;
flex-wrap: wrap;
margin-left: 35px;
&.start {
justify-content: flex-start;
& > div {
// margin-right: 50px;
}
}
& > div {
margin-bottom: 20px;
display: flex;
justify-content: flex-start;
// margin-right: 45px;
width: 15%;
min-width: 190px;
margin-right: 1.5%;
.left {
margin-right: 4px;
font-size: 14px;
max-width: 112px;
}
.state {
font-size: 8px;
padding: 0px 4px;
box-sizing: border-box;
&.one-1 {
color: #fff;
border: 1px solid #6fffe5;
border-radius: 2px;
background-color: #06d7b1;
}
&.one-2 {
color: #fff;
border: 1px solid #ff9c99;
border-radius: 2px;
background-color: #ff6c68;
}
&.one-3 {
color: #fff;
border: 1px solid #aaaaaa;
border-radius: 2px;
background-color: #bbbbbb;
}
}
}
}
.flex {
display: flex;
justify-content: flex-start;
}
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue 0 → 100644
View file @ fac1cbfd
<!--
* @Author: your name
* @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-28 14:33:23
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
-->
<template>
<div class="czcard">
<my-collapse
title="场站"
ref="myCollapse"
:listNum="czList.filter((item) => item.show).length"
>
<template v-slot:chackbox>
<div class="filter" v-for="item in filterList" :key="item.value">
<span
class="text"
:class="{ active: deviceTypeArr.indexOf(item.type) >= 0 }"
@click="fliterTypeChange(item)"
>{{ item.value }}</span
>
<span class="number">({{ item.count }})</span>
</div>
</template>
<template #container>
<div class="container" :class="{ start: getShowNum }">
<div v-for="(item,index) in czList" :key="item.deviceName+index" v-show="item.show">
<CzItem ref="czItem" :list="item" v-if="item.show" />
</div>
</div>
</template>
</my-collapse>
</div>
</template>
<script>
import MyCollapse from "./MyCollapse";
import CzItem from "./CzItem";
export default {
// 场站
components: {
MyCollapse,
CzItem,
},
data() {
return {
carHide: true,
addStartNum: 3,
filterList: [
{ value: "加气站", count: 100, type: 1 },
{ value: "门站", count: 100, type: 2 },
{ value: "调压站", count: 100, type: 3 },
{ value: "储备站", count: 100, type: 4 },
{ value: "气化站", count: 100, type: 5 },
],
deviceTypeArr: [1, 2, 3, 4, 5],
czList: [
{
deviceName: "加气站",
state: 1,
a: 25,
b: 56,
c: 54,
d: 15,
e: 56,
image: "",
show: true,
type: 1,
},
{
deviceName: "门站",
state: 1,
a: 25,
b: 56,
c: 54,
d: 15,
e: 56,
image: "",
show: true,
type: 2,
},
{
deviceName: "调压站",
state: 1,
a: 25,
b: 56,
c: 54,
d: 15,
e: 56,
image: "",
show: true,
type: 3,
},
{
deviceName: "储备站",
state: 1,
a: 25,
b: 56,
c: 54,
d: 15,
e: 56,
image: "",
show: true,
type: 4,
},
{
deviceName: "气化站",
state: 1,
a: 25,
b: 56,
c: 54,
d: 15,
e: 56,
image: "",
show: true,
type: 5,
},
{
deviceName: "气化站",
state: 1,
a: 25,
b: 56,
c: 54,
d: 15,
e: 56,
image: "",
show: true,
type: 5,
},
{
deviceName: "储备站",
state: 1,
a: 25,
b: 56,
c: 54,
d: 15,
e: 56,
image: "",
show: true,
type: 4,
},
],
};
},
computed: {
// 计算有多少个展示的对象,如果小于3个,就把justify-content: space-between;取消
getShowNum() {
return this.czList.filter((item) => item.show).length < this.addStartNum;
},
},
mounted() {
this.changeAddStartNum();
},
methods: {
hide() {
this.carHide = !this.carHide;
// this.myCollapse();
},
// 根据父子元素自动计算是否需要添加值start
changeAddStartNum() {
const czItem = this.$refs.czItem;
let czItemWidth;
// 组件有可能是一个数组，所以要这样判断
if (Array.isArray(czItem)) {
const { width } = czItem[0].$el.getBoundingClientRect();
czItemWidth = width;
} else {
const { width } = czItem.$el.getBoundingClientRect();
czItemWidth = width;
}
// 取出collap的宽
const { width: CollapseWidth } =
this.$refs.myCollapse.$el.getBoundingClientRect();
// 得到最小的承载数量
this.addStartNum = Math.floor(CollapseWidth / czItemWidth);
},
//过滤选择
fliterTypeChange(data) {
const { type } = data;
const index = this.deviceTypeArr.indexOf(type);
if (index >= 0) {
this.deviceTypeArr.splice(index, 1);
} else {
this.deviceTypeArr.push(type);
}
this.filter(this.deviceTypeArr);
// 改变大小,因为动画原因加个延迟
// this.$nextTick(() => {
// setTimeout(()=>{
// this.myCollapse()
// }, 300);
// });
},
myCollapse() {
// this.$refs.myCollapse.getHeight();
},
// 过滤对象
filter(arr) {
this.czList.forEach((item) => {
const { type } = item;
if (arr.includes(type)) {
item.show = true;
} else {
item.show = false;
}
});
},
},
};
</script>
<style lang="scss" scoped>
.filter {
margin-right: 12px;
margin-top: 5px;
font-size: 14px;
.text {
cursor: pointer;
&:hover {
color: #06d7b189 !important;
}
&.active {
color: #06d7b1;
}
}
.number {
font-weight: 500;
color: #1890ff;
}
}
.container {
width: 100%;
flex-wrap: wrap;
display: flex;
&.start {
justify-content: flex-start;
& > div {
// margin-right: 50px;
}
}
& > div {
margin-bottom: 20px;
margin-left: 1%;
width: 24%;
min-width: 295px;
}
}
.flex {
display: flex;
justify-content: space-between;
}
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzItem.vue 0 → 100644
View file @ fac1cbfd
<!--
* @Author: your name
* @Date: 2022-03-26 10:27:00
* @LastEditTime: 2022-03-28 13:59:11
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzItem.vue
-->
<template>
<div class="czitem flex">
<div class="left">
<div class="img">
<div class="state">
{{ list.state == "0" ? "正常" : "报警" }}
</div>
<img v-if="list.src" src="" alt="" />
暂无图片
</div>
<div v-unValue class="device-name zzz">{{ list.deviceName }}</div>
</div>
<div class="right">
<div>温度：<span :class="{active:list.a>50}">{{list.a}}°C</span></div>
<div>水温：<span :class="{active:list.b>50}">{{list.b}}°C</span></div>
<div>压力：<span :class="{active:list.c>50}">{{list.c}}Pa</span></div>
<div>湿度：<span :class="{active:list.d>50}">{{list.d}}°C</span></div>
<div>水温：<span :class="{active:list.e>50}">{{list.e}}°C</span></div>
</div>
</div>
</template>
<script>
export default {
// 场站子组件
props: {
list: {
type: Object,
},
},
};
</script>
<style lang="scss" scoped>
.czitem {
// min-width: 324px;
width: 100%;
min-height: 191px;
padding: 14px 12px 18px 25px;
box-sizing: border-box;
border-radius: 4px;
border: 1px solid #e6ebf5;
// display: flex;
.left {
// margin-right: 48px;
.img {
width: 162px;
height: 120px;
border-radius: 4px;
line-height: 120px;
text-align: center;
position: relative;
box-sizing: border-box;
border: 1px solid #e6ebf5;
margin-bottom: 11px;
.state {
position: absolute;
top: 0;
left: 0;
width: 162px;
height: 28px;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 4px 4px 0px 0px;
text-align: center;
line-height: 28px;
color: #06d7b1;
font-size: 14px;
}
img {
width: 100%;
height: 100%;
}
}
.device-name {
font-size: 14px;
color: #666666;
font-weight: 500;
}
}
.right {
font-size: 14px;
min-width: 80px;
& > div {
margin-bottom: 10px;
span.active{
color: red;
}
}
}
}
.flex {
display: flex;
justify-content: space-between;
}
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Fmj.vue 0 → 100644
View file @ fac1cbfd
<!--
* @Author: your name
* @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-28 14:00:33
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
-->
<template>
<div class="czcard">
<my-collapse
title="阀门井"
ref="myCollapse"
:listNum="czList.filter((item) => item.show).length"
>
<template v-slot:chackbox>
<div
class="filter"
:class="`one-${item.state}`"
v-for="item in filterList"
:key="item.value"
>
<span
class="text"
:class="{ active: deviceTypeArr.indexOf(item.state) >= 0 }"
@click="fliterTypeChange(item)"
>{{ item.value }}</span
>
<span class="number">({{ item.count }})</span>
</div>
</template>
<template #container>
<div class="container flex">
<div
class="com"
v-for="item in czList"
:key="item.deviceName"
v-show="item.show"
>
<div :title="item.companyName" class="left zzz">
{{ item.companyName }}
</div>
<div :class="`one-${item.state}`" class="state">
{{ typeState[item.state - 1] }}
</div>
</div>
</div>
</template>
</my-collapse>
</div>
</template>
<script>
import MyCollapse from "./MyCollapse";
import CzItem from "./CzItem";
export default {
// 阀门井
components: {
MyCollapse,
CzItem,
},
data() {
return {
carHide: true,
addStartNum: 3,
filterList: [
{ value: "正常", count: 100, state: 1 },
{ value: "报警", count: 100, state: 2 },
{ value: "离线", count: 100, state: 3 },
],
typeState: ["正常", "报警", "离线"],
deviceTypeArr: [1, 2, 3],
czList: [
{ companyName: "河北泽宏股份阀门井", state: 1, show: true },
{ companyName: "河北泽宏股份阀门井", state: 2, show: true },
{ companyName: "河北泽宏股份阀门井", state: 3, show: true },
{ companyName: "河北泽宏股份阀门井", state: 1, show: true },
{ companyName: "河北泽宏股份阀门井", state: 2, show: true },
{ companyName: "河北泽宏股份阀门井", state: 3, show: true },
{ companyName: "河北泽宏股份阀门井", state: 1, show: true },
{ companyName: "河北泽宏股份阀门井", state: 2, show: true },
{ companyName: "河北泽宏股份阀门井", state: 3, show: true },
{ companyName: "河北泽宏股份阀门井", state: 1, show: true },
{ companyName: "河北泽宏股份阀门井", state: 2, show: true },
{ companyName: "河北泽宏股份阀门井", state: 3, show: true },
{ companyName: "河北泽宏股份阀门井", state: 1, show: true },
{ companyName: "河北泽宏股份阀门井", state: 2, show: true },
{ companyName: "河北泽宏股份阀门井", state: 3, show: true },
{ companyName: "河北泽宏股份阀门井", state: 1, show: true },
{ companyName: "河北泽宏股份阀门井", state: 2, show: true },
{ companyName: "河北泽宏股份阀门井", state: 3, show: true },
],
};
},
computed: {
// 计算有多少个展示的对象,如果小于3个,就把justify-content: space-between;取消
getShowNum() {
return this.czList.filter((item) => item.show).length < this.addStartNum;
},
},
mounted() {
// this.changeAddStartNum();
},
methods: {
hide() {
this.carHide = !this.carHide;
},
// 根据父子元素自动计算是否需要添加值start
changeAddStartNum() {
const czItem = this.$refs.czItem;
let czItemWidth;
// 组件有可能是一个数组，所以要这样判断
if (Array.isArray(czItem)) {
const { width } = czItem[0].$el.getBoundingClientRect();
czItemWidth = width;
} else {
const { width } = czItem.$el.getBoundingClientRect();
czItemWidth = width;
}
// 取出collap的宽
const { width: CollapseWidth } =
this.$refs.myCollapse.$el.getBoundingClientRect();
// 得到最小的承载数量
this.addStartNum = Math.floor(CollapseWidth / czItemWidth);
},
//过滤选择
fliterTypeChange(data) {
const { state } = data;
const index = this.deviceTypeArr.indexOf(state);
if (index >= 0) {
this.deviceTypeArr.splice(index, 1);
} else {
this.deviceTypeArr.push(state);
}
this.filter(this.deviceTypeArr);
},
// 过滤对象
filter(arr) {
this.czList.forEach((item) => {
const { state } = item;
if (arr.includes(state)) {
item.show = true;
} else {
item.show = false;
}
});
},
},
};
</script>
<style lang="scss" scoped>
$one: #666666;
$two: #ff6c68;
$three: #bbbbbb;
$active: #06d7b1 !important;
.filter {
margin-right: 22px;
margin-top: 5px;
font-size: 14px;
.text {
position: relative;
cursor: pointer;
&::before {
content: "";
position: absolute;
border-radius: 50%;
width: 6px;
height: 6px;
left: -10px;
top: 50%;
margin-top: -3px;
}
&.active {
color: $active;
}
&:hover {
color: #06d7b189 !important;
}
}
.number {
font-weight: 500;
}
&.one-1 {
.number,
.text {
color: $one;
}
.text {
&:before {
background-color: $one;
}
}
}
&.one-2 {
.number,
.text {
color: $two;
}
.text {
&:before {
background-color: $two;
}
}
}
&.one-3 {
.number,
.text {
color: $three;
}
.text {
&:before {
background-color: $three;
}
}
}
}
.container {
width: 100%;
flex-wrap: wrap;
margin-left: 35px;
&.start {
justify-content: flex-start;
& > div {
// margin-right: 50px;
}
}
& > div {
margin-bottom: 20px;
display: flex;
justify-content: flex-start;
// margin-right: 45px;
width: 15%;
min-width: 190px;
margin-right: 1.5%;
.left {
margin-right: 4px;
font-size: 14px;
max-width: 112px;
}
.state {
font-size: 8px;
padding: 0px 4px;
box-sizing: border-box;
&.one-1 {
color: #fff;
border: 1px solid #6fffe5;
border-radius: 2px;
background-color: #06d7b1;
}
&.one-2 {
color: #fff;
border: 1px solid #ff9c99;
border-radius: 2px;
background-color: #ff6c68;
}
&.one-3 {
color: #fff;
border: 1px solid #aaaaaa;
border-radius: 2px;
background-color: #bbbbbb;
}
}
}
}
.flex {
display: flex;
justify-content: flex-start;
}
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/MyCollapse.vue 0 → 100644
View file @ fac1cbfd
<!--
* @Author: your name
* @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-28 13:46:49
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
-->
<template>
<div class="czcard">
<div
class="card"
:style="{ height: transitionHeight }"
:class="{ hide: carHide }"
>
<div class="title flex">
<div class="left">
<div class="device">{{ title }}</div>
<slot name="chackbox" />
</div>
<div class="right">
<i
class="iconfont icon-jt"
@click="hide"
:class="{ active: !carHide }"
></i>
</div>
</div>
<div ref="container">
<transition name="fade" mode="out-in">
<div :key="listNum">
<slot name="container" />
</div>
</transition>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
props: {
title: String,
// 动画需求
listNum: {
type: Number,
default:"1"
},
},
data() {
return {
carHide: true,
transitionHeight: "60px",
};
},
computed: {
...mapGetters(["sidebar"]),
},
watch: {
["sidebar.opened"](val) {
setTimeout(this.getHeight, 200);
// this.getHeight();
},
listNum() {
setTimeout(() => {
this.getHeight();
}, 300);
},
},
mounted() {
this.getHeight();
},
methods: {
hide() {
this.carHide = !this.carHide;
},
getHeight() {
const { height } = this.$refs?.container?.getBoundingClientRect();
if (!height) {
return;
}
// 高度必须是一个指定的值才能过渡变化，这样就计算出了整个元素的指定高度，然后赋值
if (height > 0) {
this.transitionHeight = height + 60 + 18 + "px";
} else {
this.transitionHeight = "60px";
}
},
},
};
</script>
<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
transition: all 0.25s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
.card {
transition: all 0.5s;
// height: 212px;
background: #ffffff;
box-shadow: 2px 0px 12px 1px rgba(0, 0, 0, 0.1);
border-radius: 4px 4px 4px 4px;
border: 1px solid #e6ebf5;
box-sizing: border-box;
padding: 15px 22px 18px 22px;
overflow: hidden;
margin-bottom: 20px;
&.hide {
height: 60px !important;
}
.title {
margin-bottom: 12px;
margin-left: 40px;
.left {
display: flex;
.device {
font-size: 18px;
color: #666666;
font-weight: 500;
margin-right: 62px;
}
}
.right {
i {
transition: all 0.5s;
display: inline-block;
font-size: 30px;
color: #c4c4c4;
cursor: pointer;
&.active {
transform: rotate(90deg);
}
}
}
}
}
.flex {
display: flex;
justify-content: space-between;
}
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/TopCard.vue 0 → 100644
View file @ fac1cbfd
<!--
* @Author: your name
* @Date: 2022-03-25 13:46:23
* @LastEditTime: 2022-03-25 17:18:05
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData.vue
-->
<template>
<div class="">
<div class="top-card flex">
<div
class="box-card"
v-for="(item, index) in cardList"
:key="item.deviceName"
>
<div class="top flex">
<div class="top-left">
<span
class="iconfont"
:class="`icon-` + deviceIconList[index]"
></span>
<span class="text">{{ item.deviceName }}</span>
</div>
<div class="top-right flex">
<span class="text">总数</span>
<span class="count">{{ item.count }}</span>
</div>
</div>
<div class="middle flex">
<div class="first">正常</div>
<div>高爆</div>
<div>低爆</div>
<div class="last">离线数</div>
</div>
<div class="bottom flex">
<div class="first">1234</div>
<div>1234</div>
<div>1231</div>
<div class="last">534534</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "charsData",
props:{
cardList:{
type:Array,
}
},
data() {
return {
deviceIconList: ["ylb", "llj", "tcq"],
};
},
};
</script>
<style lang="scss" scoped>
.top-card {
margin-bottom:22px;
& > div {
flex: 1;
margin-right: 20px;
height: 212px;
background: #ffffff;
box-shadow: 2px 0px 12px 1px rgba(0, 0, 0, 0.1);
border-radius: 4px 4px 4px 4px;
border: 1px solid #e6ebf5;
box-sizing: border-box;
padding: 34px 40px 38px;
.top {
font-size: 20px;
margin-bottom: 46px;
.top-left {
color: #1890ff;
.iconfont {
font-size: 20px;
margin-right: 4px;
}
.text {
font-weight: 500;
}
}
.top-right {
padding-top: 5px;
font-size: 16px;
.text {
font-size: 16px;
font-weight: 500;
margin-right: 2px;
padding-top: 3px;
}
.count {
color: #1890ff;
font-size: 22px;
letter-spacing: 1px;
}
}
}
&:last-child {
margin-right: 0;
}
}
.middle,
.bottom {
// justify-content: space-around;
& > div {
// flex: 1;
text-align: center;
font-size: 16px;
&.first {
text-align: left;
}
&.last {
text-align: right;
}
}
}
.middle {
margin-bottom: 20px;
& > div {
font-weight: 500;
}
}
}
.flex {
display: flex;
justify-content: space-between;
}
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Tyx.vue 0 → 100644
View file @ fac1cbfd
<!--
* @Author: your name
* @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-28 14:00:10
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
-->
<template>
<div class="czcard">
<my-collapse
title="调压箱"
ref="myCollapse"
:listNum="czList.filter((item) => item.show).length"
>
<template v-slot:chackbox>
<div
class="filter"
:class="`one-${item.state}`"
v-for="item in filterList"
:key="item.value"
>
<span
class="text"
:class="{ active: deviceTypeArr.indexOf(item.state) >= 0 }"
@click="fliterTypeChange(item)"
>{{ item.value }}</span
>
<span class="number">({{ item.count }})</span>
</div>
</template>
<template #container>
<div class="container flex">
<div
class="com"
v-for="item in czList"
:key="item.deviceName"
v-show="item.show"
>
<div :title="item.companyName" class="left zzz">
{{ item.companyName }}
</div>
<div :class="`one-${item.state}`" class="state">
{{ typeState[item.state - 1] }}
</div>
</div>
</div>
</template>
</my-collapse>
</div>
</template>
<script>
// 调压箱
import MyCollapse from "./MyCollapse";
import CzItem from "./CzItem";
export default {
components: {
MyCollapse,
CzItem,
},
data() {
return {
carHide: true,
addStartNum: 3,
filterList: [
{ value: "正常", count: 100, state: 1 },
{ value: "报警", count: 100, state: 2 },
{ value: "离线", count: 100, state: 3 },
],
typeState: ["正常", "报警", "离线"],
deviceTypeArr: [1, 2, 3],
czList: [
{ companyName: "河北泽宏股份调压箱", state: 1, show: true },
{ companyName: "河北泽宏股份调压箱", state: 2, show: true },
{ companyName: "河北泽宏股份调压箱", state: 3, show: true },
{ companyName: "河北泽宏股份调压箱", state: 1, show: true },
{ companyName: "河北泽宏股份调压箱", state: 2, show: true },
{ companyName: "河北泽宏股份调压箱", state: 3, show: true },
{ companyName: "河北泽宏股份调压箱", state: 1, show: true },
{ companyName: "河北泽宏股份调压箱", state: 2, show: true },
{ companyName: "河北泽宏股份调压箱", state: 3, show: true },
{ companyName: "河北泽宏股份调压箱", state: 1, show: true },
{ companyName: "河北泽宏股份调压箱", state: 2, show: true },
{ companyName: "河北泽宏股份调压箱", state: 3, show: true },
{ companyName: "河北泽宏股份调压箱", state: 1, show: true },
{ companyName: "河北泽宏股份调压箱", state: 2, show: true },
{ companyName: "河北泽宏股份调压箱", state: 3, show: true },
{ companyName: "河北泽宏股份调压箱", state: 1, show: true },
{ companyName: "河北泽宏股份调压箱", state: 2, show: true },
{ companyName: "河北泽宏股份调压箱", state: 3, show: true },
],
};
},
computed: {
// 计算有多少个展示的对象,如果小于3个,就把justify-content: space-between;取消
getShowNum() {
return this.czList.filter((item) => item.show).length < this.addStartNum;
},
},
mounted() {
// this.changeAddStartNum();
},
methods: {
hide() {
this.carHide = !this.carHide;
},
// 根据父子元素自动计算是否需要添加值start
changeAddStartNum() {
const czItem = this.$refs.czItem;
let czItemWidth;
// 组件有可能是一个数组，所以要这样判断
if (Array.isArray(czItem)) {
const { width } = czItem[0].$el.getBoundingClientRect();
czItemWidth = width;
} else {
const { width } = czItem.$el.getBoundingClientRect();
czItemWidth = width;
}
// 取出collap的宽
const { width: CollapseWidth } =
this.$refs.myCollapse.$el.getBoundingClientRect();
// 得到最小的承载数量
this.addStartNum = Math.floor(CollapseWidth / czItemWidth);
},
//过滤选择
fliterTypeChange(data) {
const { state } = data;
const index = this.deviceTypeArr.indexOf(state);
if (index >= 0) {
this.deviceTypeArr.splice(index, 1);
} else {
this.deviceTypeArr.push(state);
}
this.filter(this.deviceTypeArr);
},
// 过滤对象
filter(arr) {
this.czList.forEach((item) => {
const { state } = item;
if (arr.includes(state)) {
item.show = true;
} else {
item.show = false;
}
});
},
},
};
</script>
<style lang="scss" scoped>
$one: #666666;
$two: #ff6c68;
$three: #bbbbbb;
$active: #06d7b1 !important;
.filter {
margin-right: 22px;
margin-top: 5px;
font-size: 14px;
.text {
position: relative;
cursor: pointer;
&::before {
content: "";
position: absolute;
border-radius: 50%;
width: 6px;
height: 6px;
left: -10px;
top: 50%;
margin-top: -3px;
}
&.active {
color: $active;
}
&:hover {
color: #06d7b189 !important;
}
}
.number {
font-weight: 500;
}
&.one-1 {
.number,
.text {
color: $one;
}
.text {
&:before {
background-color: $one;
}
}
}
&.one-2 {
.number,
.text {
color: $two;
}
.text {
&:before {
background-color: $two;
}
}
}
&.one-3 {
.number,
.text {
color: $three;
}
.text {
&:before {
background-color: $three;
}
}
}
}
.container {
width: 100%;
flex-wrap: wrap;
margin-left: 35px;
&.start {
justify-content: flex-start;
& > div {
// margin-right: 50px;
}
}
& > div {
margin-bottom: 20px;
display: flex;
justify-content: flex-start;
// margin-right: 45px;
width: 15%;
min-width: 190px;
margin-right: 1.5%;
.left {
margin-right: 4px;
font-size: 14px;
max-width: 112px;
}
.state {
font-size: 8px;
padding: 0px 4px;
box-sizing: border-box;
&.one-1 {
color: #fff;
border: 1px solid #6fffe5;
border-radius: 2px;
background-color: #06d7b1;
}
&.one-2 {
color: #fff;
border: 1px solid #ff9c99;
border-radius: 2px;
background-color: #ff6c68;
}
&.one-3 {
color: #fff;
border: 1px solid #aaaaaa;
border-radius: 2px;
background-color: #bbbbbb;
}
}
}
}
.flex {
display: flex;
justify-content: flex-start;
}
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/index.vue 0 → 100644
View file @ fac1cbfd
<!--
* @Author: your name
* @Date: 2022-03-25 13:46:23
* @LastEditTime: 2022-03-28 13:50:56
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData.vue
-->
<template>
<div class="chars-data">
<TopCard :cardList="cardList"/>
<CzCard/>
<Cg/>
<Fmj/>
<Tyx/>
</div>
</template>
<script>
import TopCard from "./TopCard";
import CzCard from "./CzCard";
import Cg from "./Cg";
import Fmj from "./Fmj";
import Tyx from "./Tyx";
export default {
name: "charsData",
components: {
TopCard,
CzCard,
Cg,
Fmj,
Tyx
},
data() {
return {
cardList: [
{ deviceName: "压力表", count: 123123 },
{ deviceName: "流量计", count: 123123 },
{ deviceName: "探测器", count: 123123 },
],
deviceIconList: ["ylb", "llj", "tcq"],
};
},
};
</script>
<style lang="scss" scoped>
.chars-data {
// padding: 26px 108px 0 88px;
padding: 20px;
}
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/tableData/index.vue 0 → 100644
View file @ fac1cbfd
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="设备名称" prop="deviceName">
<el-input
v-model="queryParams.deviceName"
placeholder="请输入设备名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="设备编号" prop="deviceNum">
<el-input
v-model="queryParams.deviceNum"
placeholder="请输入设备编号"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="所属企业" prop="beyondEnterpriseId">
<el-select v-model="queryParams.beyondEnterpriseId" placeholder="请选择所属企业">
<el-option
v-for="item in enterprises"
:key="item.enterpriseId"
:label="item.enterpriseName"
:value="item.enterpriseId"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="压力表" name="first" key="first">
<pressureTab
:activeName="activeName"
:childrenQueryParams="queryParams"
v-if="activeName === 'first'"
ref="pressure"></pressureTab>
</el-tab-pane>
<el-tab-pane label="流量计" name="second" key="second">
<flowmeterTab
:activeName="activeName"
:childrenQueryParams="queryParams"
v-if="activeName === 'second'"
ref="flowmeter"></flowmeterTab>
</el-tab-pane>
<el-tab-pane label="探测器" name="third" key="third">
<detector-tab
:activeName="activeName"
:childrenQueryParams="queryParams"
v-if="activeName === 'third'"
ref="detector">
</detector-tab>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { listData, getData, delData, addData, updateData, exportData } from "@/api/operationMonitor/data";
import { enterpriseLists } from "@/api/regulation/info";
import detectorTab from "./detectorTab";
import flowmeterTab from "./flowmeterTab";
import pressureTab from "./pressureTab"
export default {
name: "Data",
components: {
detectorTab,
flowmeterTab,
pressureTab
},
data() {
return {
// 遮罩层
loading: true,
// 导出遮罩层
exportLoading: false,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 设备监控表格数据
dataList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
deviceNum: null,
standardConditionAccumulation: null,
workingConditionAccumulation: null,
backingStandardConditionAccumulation: null,
residualQuantity: null,
standardConditionFlow: null,
workingConditionFlow: null,
temperature: null,
pressure: null,
reportTime: null,
communicationStatus: null,
deviceStatus: null,
isDel: null,
remarks: null,
deviceType: "1"
},
// 表单参数
form: {},
// 表单校验
rules: {
deviceNum: [
{ required: true, message: "设备id不能为空", trigger: "blur" }
],
},
enterprises:[],
activeName: "first"
};
},
created() {
//this.getList();
this.getEnterpriseLists();
},
methods: {
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
deviceReportDataId: null,
deviceNum: null,
standardConditionAccumulation: null,
workingConditionAccumulation: null,
backingStandardConditionAccumulation: null,
residualQuantity: null,
standardConditionFlow: null,
workingConditionFlow: null,
temperature: null,
pressure: null,
reportTime: null,
communicationStatus: "0",
deviceStatus: "0",
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
isDel: null,
remarks: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
if("first" == this.activeName){
this.$refs.pressure.pressureHandleQuery();
}else if("second" == this.activeName){
this.$refs.flowmeter.flowmeterHandleQuery();
}else{
this.$refs.detector.detectorHandleQuery();
}
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
//所属单位
getEnterpriseLists(){
enterpriseLists().then(response => {
this.enterprises = response.rows;
});
},
//切换tag
handleClick(tab, event){
if("0" == tab.index){
this.activeName = "first"
}else if("1" == tab.index){
this.activeName = "second"
}else{
this.activeName = "third"
}
}
}
};
</script>
<style>
.el-tag {
margin-left: 10px;
text-align: center;
width: 200px;
}
</style>
gassafetyprogress-web/src/views/operationMonitor/monitorData/index.vue
View file @ fac1cbfd
<!--
* @Author: your name
* @Date: 2022-03-08 17:28:57
* @LastEditTime: 2022-03-28 13:54:22
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/index.vue
-->
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="设备名称" prop="deviceName">
<el-input
v-model="queryParams.deviceName"
placeholder="请输入设备名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="设备编号" prop="deviceNum">
<el-input
v-model="queryParams.deviceNum"
placeholder="请输入设备编号"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="所属企业" prop="beyondEnterpriseId">
<el-select v-model="queryParams.beyondEnterpriseId" placeholder="请选择所属企业">
<el-option
v-for="item in enterprises"
:key="item.enterpriseId"
:label="item.enterpriseName"
:value="item.enterpriseId"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="压力表" name="first" key="first">
<pressureTab
:activeName="activeName"
:childrenQueryParams="queryParams"
v-if="activeName === 'first'"
ref="pressure"></pressureTab>
</el-tab-pane>
<el-tab-pane label="流量计" name="second" key="second">
<flowmeterTab
:activeName="activeName"
:childrenQueryParams="queryParams"
v-if="activeName === 'second'"
ref="flowmeter"></flowmeterTab>
</el-tab-pane>
<el-tab-pane label="探测器" name="third" key="third">
<detector-tab
:activeName="activeName"
:childrenQueryParams="queryParams"
v-if="activeName === 'third'"
ref="detector">
</detector-tab>
</el-tab-pane>
</el-tabs>
<div class="monitorData">
<div class="iconfont">
<div
v-for="(item, index) in changeIcon"
:key="item.class"
:class="[item.class, { active: isCom == index }]"
@click="isComChange(index)"
></div>
</div>
<transition name="fade-transform" mode="out-in">
<keep-alive>
<component :is="currentTabComponent"></component>
</keep-alive>
</transition>
</div>
</template>
<script>
import { listData, getData, delData, addData, updateData, exportData } from "@/api/operationMonitor/data";
import { enterpriseLists } from "@/api/regulation/info";
import detectorTab from "./component/detectorTab";
import flowmeterTab from "./component/flowmeterTab";
import pressureTab from "./component/pressureTab"
import charsData from "./component/charsData";
import tabledata from "./component/tableData";
export default {
name: "Data",
components: {
detectorTab,
flowmeterTab,
pressureTab
},
data() {
return {
// 遮罩层
loading: true,
// 导出遮罩层
exportLoading: false,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 设备监控表格数据
dataList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
deviceNum: null,
standardConditionAccumulation: null,
workingConditionAccumulation: null,
backingStandardConditionAccumulation: null,
residualQuantity: null,
standardConditionFlow: null,
workingConditionFlow: null,
temperature: null,
pressure: null,
reportTime: null,
communicationStatus: null,
deviceStatus: null,
isDel: null,
remarks: null,
deviceType: "1"
},
// 表单参数
form: {},
// 表单校验
rules: {
deviceNum: [
{ required: true, message: "设备id不能为空", trigger: "blur" }
],
},
enterprises:[],
activeName: "first"
// currentTabComponent: tabledata,
changeIcon: [{ class: "icon-b" }, { class: "icon-a" }],
isCom: 0,
};
},
created() {
//this.getList();
this.getEnterpriseLists();
computed: {
currentTabComponent() {
return this.isCom == 0 ? tabledata : charsData;
},
methods: {
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
deviceReportDataId: null,
deviceNum: null,
standardConditionAccumulation: null,
workingConditionAccumulation: null,
backingStandardConditionAccumulation: null,
residualQuantity: null,
standardConditionFlow: null,
workingConditionFlow: null,
temperature: null,
pressure: null,
reportTime: null,
communicationStatus: "0",
deviceStatus: "0",
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
isDel: null,
remarks: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
if("first" == this.activeName){
this.$refs.pressure.pressureHandleQuery();
}else if("second" == this.activeName){
this.$refs.flowmeter.flowmeterHandleQuery();
}else{
this.$refs.detector.detectorHandleQuery();
}
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
methods: {
isComChange(index) {
this.isCom = index;
},
//所属单位
getEnterpriseLists(){
enterpriseLists().then(response => {
this.enterprises = response.rows;
});
},
//切换tag
handleClick(tab, event){
if("0" == tab.index){
this.activeName = "first"
}else if("1" == tab.index){
this.activeName = "second"
}else{
this.activeName = "third"
}
}
}
};
</script>
<style>
.el-tag {
margin-left: 10px;
text-align: center;
width: 200px;
<style lang="scss" scoped>
@import url("~@/assets/iconfont/monitorData/iconfont.css");
.iconfont {
display: flex;
justify-content: right;
margin-right: 37px;
padding-top: 38px;
div {
cursor: pointer;
padding: 4px;
&.active,
&:hover {
background-color: #666666;
color: #fff;
}
}
</style>
.icon-b {
margin-right: 23px;
}
}
</style>>
gassafetyprogress-web/src/views/regulation/device/index.vue
View file @ fac1cbfd
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form
:model="queryParams"
ref="queryForm"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="设备名称" prop="deviceName">
<el-input
v-model="queryParams.deviceName"
......@@ -19,18 +25,26 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<!-- <el-form-item label="所在地址" prop="deviceAddr">-->
<!-- <el-input-->
<!-- v-model="queryParams.deviceAddr"-->
<!-- placeholder="请输入所在地址"-->
<!-- clearable-->
<!-- size="small"-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="所在地址" prop="deviceAddr">-->
<!-- <el-input-->
<!-- v-model="queryParams.deviceAddr"-->
<!-- placeholder="请输入所在地址"-->
<!-- clearable-->
<!-- size="small"-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
......@@ -43,7 +57,8 @@
size="mini"
@click="handleAdd"
v-hasPermi="['device:device:add']"
>新增</el-button>
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
......@@ -54,7 +69,8 @@
:disabled="single"
@click="handleUpdate"
v-hasPermi="['device:device:edit']"
>修改</el-button>
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
......@@ -65,7 +81,8 @@
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['device:device:remove']"
>删除</el-button>
>删除</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
......@@ -76,31 +93,81 @@
:loading="exportLoading"
@click="handleExport"
v-hasPermi="['device:device:export']"
>导出</el-button>
>导出</el-button
>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange">
<el-table
v-loading="loading"
:data="deviceList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<!-- <el-table-column label="设备id" align="center" prop="deviceId" />-->
<el-table-column label="照片" align="center" >
<template scope="List">
<img :src="List.row.iconUrl" width="100px">
<!-- <el-table-column label="设备id" align="center" prop="deviceId" />-->
<el-table-column label="照片" align="center">
<template slot-scope="List">
<img :src="List.row.iconUrl" width="100px" />
</template>
</el-table-column>
<el-table-column label="设备名称" align="center" prop="deviceName" />
<el-table-column label="设备编号" align="center" prop="deviceCode" />
<el-table-column label="所在地址" align="center" prop="deviceAddr" />
<el-table-column label="设备型号" align="center" prop="deviceModel" />
<el-table-column label="设备类型" align="center" prop="deviceType" />
<el-table-column label="权属单位名称" align="center" prop="beyondEnterpriseName" />
<el-table-column label="安装时间" align="center" prop="installationTime" width="180">
<el-table-column label="设备名称" align="center" prop="deviceName">
<span slot-scope="scope" v-if="scope.row.deviceName">{{
scope.row.deviceName
}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="设备编号" align="center" prop="deviceCode">
<span slot-scope="scope" v-if="scope.row.deviceCode">{{
scope.row.deviceCode
}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="所在地址" align="center" prop="deviceAddr">
<span slot-scope="scope" v-if="scope.row.deviceAddr">{{
scope.row.deviceAddr
}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="设备型号" align="center" prop="deviceModel">
<span slot-scope="scope" v-if="scope.row.deviceModel">{{
scope.row.deviceModel
}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="设备类型" align="center" prop="deviceType">
<span slot-scope="scope" v-if="scope.row.deviceType">{{
scope.row.deviceType
}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column
label="权属单位名称"
align="center"
prop="beyondEnterpriseName"
>
<span slot-scope="scope" v-if="scope.row.beyondEnterpriseName">{{
scope.row.beyondEnterpriseName
}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column
label="安装时间"
align="center"
prop="installationTime"
width="180"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.installationTime, '{y}-{m}-{d}') }}</span>
<span v-if="scope.row.installationTime">{{
parseTime(scope.row.installationTime, "{y}-{m}-{d}")
}}</span>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="照片" align="center" >
<el-table-column label="照片" align="center">
<template slot-scope="List">
<span
class="dbtn"
......@@ -112,7 +179,11 @@
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
......@@ -120,20 +191,22 @@
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['device:device:edit']"
>修改</el-button>
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['device:device:remove']"
>删除</el-button>
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
......@@ -141,9 +214,19 @@
/>
<!--选择关联设备弹出框-->
<el-dialog title="选择关联设备" width="1100px" :visible.sync="dialogTableVisible" formLabelWidth="160px">
<el-dialog
title="选择关联设备"
width="1100px"
:visible.sync="dialogTableVisible"
formLabelWidth="160px"
>
<template>
<el-form :model="dateQueryParams" ref="queryForm" :inline="true" v-show="showSearch" >
<el-form
:model="dateQueryParams"
ref="queryForm"
:inline="true"
v-show="showSearch"
>
<el-form-item label="设备名称" prop="deviceName">
<el-input
v-model="dateQueryParams.deviceName"
......@@ -172,8 +255,19 @@
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryData">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQueryDate">重置</el-button>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQueryData"
>搜索</el-button
>
<el-button
icon="el-icon-refresh"
size="mini"
@click="resetQueryDate"
>重置</el-button
>
</el-form-item>
</el-form>
......@@ -186,19 +280,20 @@
size="mini"
@click="dialogFormVisible = true"
v-hasPermi="['device:device:add']"
>新增</el-button>
>新增</el-button
>
</el-col>
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="success"-->
<!-- plain-->
<!-- icon="el-icon-edit"-->
<!-- size="mini"-->
<!-- :disabled="single"-->
<!-- @click="handleUpdate"-->
<!-- v-hasPermi="['device:device:edit']"-->
<!-- >修改</el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="success"-->
<!-- plain-->
<!-- icon="el-icon-edit"-->
<!-- size="mini"-->
<!-- :disabled="single"-->
<!-- @click="handleUpdate"-->
<!-- v-hasPermi="['device:device:edit']"-->
<!-- >修改</el-button>-->
<!-- </el-col>-->
<el-col :span="1.5">
<el-button
type="danger"
......@@ -208,30 +303,54 @@
:disabled="multiple"
@click="deleteListDetailInfo"
v-hasPermi="['device:device:remove']"
>删除</el-button>
>删除</el-button
>
</el-col>
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="warning"-->
<!-- plain-->
<!-- icon="el-icon-download"-->
<!-- size="mini"-->
<!-- :loading="exportLoading"-->
<!-- @click="handleExport"-->
<!-- v-hasPermi="['device:device:export']"-->
<!-- >导出</el-button>-->
<!-- </el-col>-->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getDataList"></right-toolbar>
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="warning"-->
<!-- plain-->
<!-- icon="el-icon-download"-->
<!-- size="mini"-->
<!-- :loading="exportLoading"-->
<!-- @click="handleExport"-->
<!-- v-hasPermi="['device:device:export']"-->
<!-- >导出</el-button>-->
<!-- </el-col>-->
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getDataList"
></right-toolbar>
</el-row>
<el-table v-loading="loadings" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" max-height="250" @selection-change="tableDataSelectionChange">
<el-table-column type="selection" width="55" align="center"></el-table-column>
<el-table
v-loading="loadings"
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
max-height="250"
@selection-change="tableDataSelectionChange"
>
<el-table-column
type="selection"
width="55"
align="center"
></el-table-column>
<el-table-column label="设备名称" align="center" prop="deviceName" />
<el-table-column label="设备型号" align="center" prop="deviceModel" />
<el-table-column label="设备类型" align="center" prop="deviceType" />
<el-table-column label="探测介质" align="center" prop="detectionMedium" />
<el-table-column
label="探测介质"
align="center"
prop="detectionMedium"
/>
<el-table-column label="物联网编号" align="center" prop="iotNo" />
<el-table-column label="备注" align="center" prop="remarksn" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
......@@ -239,31 +358,46 @@
icon="el-icon-delete"
@click="deleteDetailInfo(scope.row)"
v-hasPermi="['device:device:remove']"
>删除</el-button>
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="insertListDetailInfo">提 交</el-button>
<el-button @click="dialogTableVisible=false">取 消</el-button>
<el-button type="primary" @click="insertListDetailInfo"
>提 交</el-button
>
<el-button @click="dialogTableVisible = false">取 消</el-button>
</div>
</template>
</el-dialog>
<!--添加关联设备弹出框-->
<el-dialog title="添加关联设备" :visible.sync="dialogFormVisible">
<el-form ref="formDetailInfo" :model="formDetailInfo" :rules="formDetailInfoRules" label-width="95px" style="height: 230px">
<el-form
ref="formDetailInfo"
:model="formDetailInfo"
:rules="formDetailInfoRules"
label-width="95px"
style="height: 230px"
>
<el-row>
<el-col :span="11">
<el-form-item label="设备名称" prop="deviceName">
<el-input v-model="formDetailInfo.deviceName" placeholder="请输入设备名称" autocomplete="off"></el-input>
<el-input
v-model="formDetailInfo.deviceName"
placeholder="请输入设备名称"
autocomplete="off"
></el-input>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="设备型号" prop="deviceModel">
<el-input v-model="formDetailInfo.deviceModel" placeholder="请输入设备型号" />
<el-input
v-model="formDetailInfo.deviceModel"
placeholder="请输入设备型号"
/>
</el-form-item>
</el-col>
</el-row>
......@@ -271,7 +405,10 @@
<el-row>
<el-col :span="11">
<el-form-item label="设备类型" prop="deviceType">
<el-select v-model="formDetailInfo.deviceType" placeholder="请选择设备类型">
<el-select
v-model="formDetailInfo.deviceType"
placeholder="请选择设备类型"
>
<el-option label="压力表" value="1" />
<el-option label="流量计" value="2" />
<el-option label="探测器" value="3" />
......@@ -280,49 +417,64 @@
</el-col>
<el-col :span="11">
<el-form-item label="物联网编号" prop="iotNo" >
<el-input v-model="formDetailInfo.iotNo" placeholder="请输入物联网编号" />
<el-form-item label="物联网编号" prop="iotNo">
<el-input
v-model="formDetailInfo.iotNo"
placeholder="请输入物联网编号"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="22">
<el-form-item label="探测介质" prop="detectionMedium" >
<el-input v-model="formDetailInfo.detectionMedium" placeholder="请输入探测介质" />
<el-form-item label="探测介质" prop="detectionMedium">
<el-input
v-model="formDetailInfo.detectionMedium"
placeholder="请输入探测介质"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="22">
<el-form-item label="备注" prop="remarksn">
<el-input v-model="formDetailInfo.remarksn" type="textarea" placeholder="请输入备注" />
<el-input
v-model="formDetailInfo.remarksn"
type="textarea"
placeholder="请输入备注"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="addDetailInfo">提 交</el-button>
<el-button @click="dialogFormVisible=false">取 消</el-button>
<el-button @click="dialogFormVisible = false">取 消</el-button>
</div>
</el-dialog>
<!-- 添加或修改设备信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="780px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<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="deviceCode">
<el-input v-model="form.deviceCode" placeholder="请输入设备编号" :disabled="true"/>
<el-input
v-model="form.deviceCode"
placeholder="请输入设备编号"
:disabled="true"
/>
</el-form-item>
</el-col>
</el-row>
......@@ -330,13 +482,19 @@
<el-row>
<el-col :span="11">
<el-form-item label="所在地址" prop="deviceAddr">
<el-input v-model="form.deviceAddr" placeholder="请输入所在地址" />
<el-input
v-model="form.deviceAddr"
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>
......@@ -353,27 +511,38 @@
<el-col :span="11">
<el-form-item label="权属单位" prop="beyondEnterpriseId">
<el-select v-model="form.beyondEnterpriseId" placeholder="请在下拉框中选择权属单位" maxlength="255" :disabled="false" clearable>
<el-option v-for="item in test" :key="item.enterpriseId" :label="item.enterpriseName" :value="item.enterpriseId">
<el-select
v-model="form.beyondEnterpriseId"
placeholder="请在下拉框中选择权属单位"
maxlength="255"
:disabled="false"
clearable
>
<el-option
v-for="item in test"
:key="item.enterpriseId"
:label="item.enterpriseName"
:value="item.enterpriseId"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<!-- <el-row>-->
<!-- <el-col :span="11">-->
<!-- <el-form-item label="经度" prop="longitude">-->
<!-- <el-input v-model="form.longitude" placeholder="请输入经度" />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-row>-->
<!-- <el-col :span="11">-->
<!-- <el-form-item label="经度" prop="longitude">-->
<!-- <el-input v-model="form.longitude" placeholder="请输入经度" />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="11">-->
<!-- <el-form-item label="纬度" prop="latitude">-->
<!-- <el-input v-model="form.latitude" placeholder="请输入纬度" />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- <el-col :span="11">-->
<!-- <el-form-item label="纬度" prop="latitude">-->
<!-- <el-input v-model="form.latitude" placeholder="请输入纬度" />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- </el-row>-->
<el-row>
<el-col :span="21">
......@@ -382,10 +551,12 @@
<el-input v-model="form.longitude" placeholder="请输入经度" />
</el-col>
<el-col :span="9" style="margin-left: 15px">
<el-input v-model="form.latitude" placeholder="请输入纬度"/>
<el-input v-model="form.latitude" placeholder="请输入纬度" />
</el-col>
<el-col :span="3" style="margin-left: 35px">
<el-button type="primary" plain @click="MapdialogFun">选择经纬度</el-button>
<el-button type="primary" plain @click="MapdialogFun"
>选择经纬度</el-button
>
</el-col>
</el-form-item>
</el-col>
......@@ -398,7 +569,8 @@
listType="picture"
@resFun="getFileInfo"
@remove="listRemove"
:fileArr="fileList">
:fileArr="fileList"
>
</FileUpload>
</el-form-item>
</el-col>
......@@ -421,22 +593,28 @@
<el-row>
<el-col :span="11">
<el-form-item label="安装时间" prop="installationTime">
<el-date-picker clearable size="small"
<el-date-picker
clearable
size="small"
v-model="form.installationTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择安装时间">
placeholder="选择安装时间"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="最后巡检时间" prop="inspectionTime">
<el-date-picker clearable size="small"
<el-date-picker
clearable
size="small"
v-model="form.inspectionTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择最后巡检时间">
placeholder="选择最后巡检时间"
>
</el-date-picker>
</el-form-item>
</el-col>
......@@ -445,33 +623,64 @@
<el-row>
<el-col :span="22">
<el-form-item label="备注" prop="remarks">
<el-input v-model="form.remarks" type="textarea" placeholder="请输入备注" />
<el-input
v-model="form.remarks"
type="textarea"
placeholder="请输入备注"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<h3>关联设备</h3>
<el-table v-loading="loadings" ref="multipleTable" :data="DetailInfoList" tooltip-effect="dark" style="width: 100%" max-height="250" @selection-change="tableDataSelectionChange">
<div class="tableTitle">
<img
:src="relationImg"
style="
width: 24px;
height: 25px;
position: relative;
left: -339px;
top: -12px;
"
/>
<span class="midText">关联设备</span>
</div>
<el-table
v-loading="loadings"
ref="multipleTable"
:data="DetailInfoList"
tooltip-effect="dark"
style="width: 100%"
max-height="250"
@selection-change="tableDataSelectionChange"
>
<el-table-column label="设备名称" align="center" prop="deviceName" />
<el-table-column label="设备型号" align="center" prop="deviceModel" />
<el-table-column label="设备类型" align="center" prop="deviceType" />
<el-table-column label="物联网编号" align="center" prop="iotNo" />
<el-table-column label="备注" align="center" prop="remarksn" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="deleteDataListilInfo(scope.row,scope.$index)"
@click="deleteDataListilInfo(scope.row, scope.$index)"
v-hasPermi="['device:device:remove']"
>删除</el-button>
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="selectDataListInfo">选择关联设备</el-button>
<el-button type="primary" @click="selectDataListInfo"
>选择关联设备</el-button
>
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
......@@ -488,9 +697,24 @@
<script>
import { listDevice, getDevice, delDevice, addDevice, updateDevice, exportDevice, selectTEnterprise,getDdeviceDetailInfo,addDetailInfos,deleteDetailInfo,deleteeListDetailInfo,selectDetailInfoList,deleteDeviceDetailInfo,updateDetailInfoLists} from "@/api/regulation/device";
import GetPos from '@/components/GetPos';
import FileUpload from '@/components/FileSuperviseUpload';
import {
listDevice,
getDevice,
delDevice,
addDevice,
updateDevice,
exportDevice,
selectTEnterprise,
getDdeviceDetailInfo,
addDetailInfos,
deleteDetailInfo,
deleteeListDetailInfo,
selectDetailInfoList,
deleteDeviceDetailInfo,
updateDetailInfoLists,
} from "@/api/regulation/device";
import GetPos from "@/components/GetPos";
import FileUpload from "@/components/FileSuperviseUpload";
export default {
name: "Device",
components: {
......@@ -499,15 +723,16 @@ export default {
},
data() {
return {
relationImg: require("@/assets/project/relation.png"),
//头像
fileList: [],
/**弹出层*/
//下级设备数据数组
tableData: [],
//存储已被选中的下级数据id
DetailInfoListId :[],
DetailInfoListId: [],
//存储已经选中的下级关联数据
DetailInfoList:[],
DetailInfoList: [],
multipleSelection: [],
dialogTableVisible: false,
dialogFormVisible: false,
......@@ -516,41 +741,43 @@ export default {
devicePos: [],
/**--------------地图使用数据---------------*/
form: {
name: '',
region: '',
date1: '',
date2: '',
name: "",
region: "",
date1: "",
date2: "",
delivery: false,
type: [],
resource: '',
desc: '',
resource: "",
desc: "",
},
formLabelWidth: '120px',
formLabelWidth: "120px",
/*添加关联设备*/
formDetailInfo:{
relationDeviceDetailId:'',
deviceName: '',
deviceModel:'',
deviceType:'',
iotNo:'',
detectionMedium:'',
remarksn:''
formDetailInfo: {
relationDeviceDetailId: "",
deviceName: "",
deviceModel: "",
deviceType: "",
iotNo: "",
detectionMedium: "",
remarksn: "",
},
/*动态添加输入框*/
dynamicValidateForm: {
domains: [{
deviceName: '',
deviceModel:'',
deviceType:'',
iotNo:'',
remarksn:''
}],
domains: [
{
deviceName: "",
deviceModel: "",
deviceType: "",
iotNo: "",
remarksn: "",
},
],
},
// 遮罩层
loading: true,
//下级数据的遮罩层
loadings:true,
loadings: true,
// 导出遮罩层
exportLoading: false,
// 选中数组
......@@ -564,7 +791,7 @@ export default {
// 总条数
total: 0,
//下级关联设备条数
detailTotal:0,
detailTotal: 0,
// 设备信息表格数据
deviceList: [],
// 弹出层标题
......@@ -586,7 +813,7 @@ export default {
iotNo: null,
},
//下级参数
detailInfoParams:{
detailInfoParams: {
pageNum: 1,
pageSize: 10,
},
......@@ -614,19 +841,19 @@ export default {
],
},
//关联设备下级数据 表单校验
formDetailInfoRules:{
deviceName:[
formDetailInfoRules: {
deviceName: [
{ required: true, message: "请输入设备名称", trigger: "blur" },
{ min: 0, max: 20, message: "长度20位", trigger: "blur" },
],
deviceModel:[
deviceModel: [
{ required: true, message: "请输入设备型号", trigger: "blur" },
{ min: 0, max: 20, message: "长度20位", trigger: "blur" },
],
deviceType:[
deviceType: [
{ required: true, message: "请选择设备类型", trigger: "blur" },
],
iotNo:[
iotNo: [
{ required: true, message: "请输入联网编号", trigger: "blur" },
{ min: 0, max: 20, message: "长度20位", trigger: "blur" },
],
......@@ -638,18 +865,18 @@ export default {
},
methods: {
/**上传头像*/
getFileInfo(res){
getFileInfo(res) {
this.form.dealPlan = res.fileName;
this.form.iconUrl = res.url;
this.form.burl=res.burl;
this.form.burl = res.burl;
this.fileList.push({
name: res.fileName,
url: uploadfile,
burl:res.burl,
burl: res.burl,
});
},
checkFile(url) {
window.open(url,'_blank');
window.open(url, "_blank");
},
listRemove(e) {
this.form.dealPlan = "";
......@@ -657,21 +884,19 @@ export default {
},
/** 查询设备信息列表 */
getList() {
this.loading = true;
listDevice(this.queryParams).then(response => {
listDevice(this.queryParams).then((response) => {
this.deviceList = response.rows;
this.total = response.total;
this.loading = false;
});
},
/**查询下级数据列表方法*/
getDataList(){
getDataList() {
this.loadings = true;
// console.log(this.dateQueryParams)
//查询下级设备数据
getDdeviceDetailInfo(this.dateQueryParams).then(response => {
getDdeviceDetailInfo(this.dateQueryParams).then((response) => {
//下级设备数据 到时候换成下级数据
this.tableData = response.rows;
this.detailTotal = response.total;
......@@ -708,7 +933,7 @@ export default {
updateTime: null,
isDel: null,
remarks: null,
relationDeviceType:'1',
relationDeviceType: "1",
};
this.resetForm("form");
},
......@@ -718,7 +943,7 @@ export default {
this.getList();
},
/** 下级数据搜索*/
handleQueryData(){
handleQueryData() {
this.getDataList();
},
/** 重置按钮操作 */
......@@ -727,39 +952,39 @@ export default {
this.handleQuery();
},
/** 下级数据重置按钮操作 搜索框重置*/
resetQueryDate(){
this.dateQueryParams={
resetQueryDate() {
this.dateQueryParams = {
deviceName: null,
deviceModel: null,
iotNo: null,
}
};
this.getDataList();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.deviceId)
this.single = selection.length!==1
this.multiple = !selection.length
this.ids = selection.map((item) => item.deviceId);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
//关联数据多选框选中数据
tableDataSelectionChange(selection){
this.ids = selection.map(item => item.relationDeviceDetailId)
this.datalist=selection.map(item => item)
tableDataSelectionChange(selection) {
this.ids = selection.map((item) => item.relationDeviceDetailId);
this.datalist = selection.map((item) => item);
//按钮 非选中禁用
this.single = selection.length!==1
this.multiple = !selection.length
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
handleAdd() {
//查询企业名称下拉框数据
selectTEnterprise().then(response => {
selectTEnterprise().then((response) => {
this.test = response.data;
});
//清空关联设备数据
this.DetailInfoList=''
this.DetailInfoList = "";
this.loadings = true;
//查询下级设备数据
getDdeviceDetailInfo(this.dateQueryParams).then(response => {
getDdeviceDetailInfo(this.dateQueryParams).then((response) => {
//下级设备数据 到时候换成下级数据
this.tableData = response.rows;
this.detailTotal = response.total;
......@@ -773,28 +998,28 @@ export default {
/** 修改按钮操作 */
handleUpdate(row) {
//查询企业名称下拉框数据
selectTEnterprise().then(response => {
selectTEnterprise().then((response) => {
this.test = response.data;
});
const deviceId = row.deviceId || this.ids
var tDeviceInfon={
id:deviceId,
relationDeviceType:'1'
}
const deviceId = row.deviceId || this.ids;
var tDeviceInfon = {
id: deviceId,
relationDeviceType: "1",
};
//查询关联设备信息数据
selectDetailInfoList(JSON.stringify(tDeviceInfon)).then(response => {
selectDetailInfoList(JSON.stringify(tDeviceInfon)).then((response) => {
this.DetailInfoList = response.rows;
this.loadings = false;
});
this.reset();
getDevice(deviceId).then(response => {
getDevice(deviceId).then((response) => {
this.form = response.data;
//图片回显
if (this.form.iconUrl) {
this.fileList.push({
name: '照片',
name: "照片",
url: this.form.iconUrl,
});
}
......@@ -807,205 +1032,226 @@ export default {
handleDelete(row) {
const deviceIds = row.deviceId || this.ids;
// const deviceIds = row.relationDeviceDetailId || this.ids;
this.$confirm('是否确认删除设备信息编号为"' + deviceIds + '"的数据项?', "警告", {
this.$confirm(
'是否确认删除设备信息编号为"' + deviceIds + '"的数据项?',
"警告",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
type: "warning",
}
)
.then(function () {
return delDevice(deviceIds);
}).then(() => {
})
.then(() => {
this.getList();
this.msgSuccess("删除成功");
}).catch(() => {});
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm('是否确认导出所有设备信息数据项?', "警告", {
this.$confirm("是否确认导出所有设备信息数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
type: "warning",
})
.then(() => {
this.exportLoading = true;
return exportDevice(queryParams);
}).then(response => {
})
.then((response) => {
this.download(response.msg);
this.exportLoading = false;
}).catch(() => {});
})
.catch(() => {});
},
/**动态添加输入框方法*/
addDomain() {
this.dynamicValidateForm.domains.push({
deviceName: '',
deviceModel:'',
deviceType:'',
iotNo:'',
remarksn:'',
deviceName: "",
deviceModel: "",
deviceType: "",
iotNo: "",
remarksn: "",
});
},
/**动态删除输入框方法*/
removeDomain(item) {
var index = this.dynamicValidateForm.domains.indexOf(item)
var index = this.dynamicValidateForm.domains.indexOf(item);
if (index !== -1) {
this.dynamicValidateForm.domains.splice(index, 1)
this.dynamicValidateForm.domains.splice(index, 1);
}
},
/**提交数据方法*/
submitForm() {
this.$refs["form"].validate(valid => {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.deviceId != null) {
updateDevice(this.form).then(response => {
updateDevice(this.form).then((response) => {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
});
if ( this.datalist !=null){
this.form.relationDeviceType='1';
var tDeviceInfon={
tDeviceInfo:this.form,
tDeviceInfoS:this.datalist
}
if (this.datalist != null) {
this.form.relationDeviceType = "1";
var tDeviceInfon = {
tDeviceInfo: this.form,
tDeviceInfoS: this.datalist,
};
//重新绑定修改后的关联设备
updateDetailInfoLists(JSON.stringify(tDeviceInfon)).then(response => {
updateDetailInfoLists(JSON.stringify(tDeviceInfon)).then(
(response) => {
this.open = false;
this.getList();
});
}
);
}
} else {
if (valid) {
//获取已经选中的下级设备id
const deviceIds = this.ids;
// alert(deviceIds)
this.form.relationDeviceType='1';
var tDeviceInfon={
tDeviceInfo:this.form,
tDeviceInfoS:this.datalist
}
addDevice(JSON.stringify(tDeviceInfon)).then(response => {
this.form.relationDeviceType = "1";
var tDeviceInfon = {
tDeviceInfo: this.form,
tDeviceInfoS: this.datalist,
};
addDevice(JSON.stringify(tDeviceInfon)).then((response) => {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
});
} else {
console.log('error submit!!');
console.log("error submit!!");
return false;
}
}
}
});
},
/**关联设备添加方法*/
addDetailInfo(){
this.$refs["formDetailInfo"].validate(valid => {
addDetailInfo() {
this.$refs["formDetailInfo"].validate((valid) => {
if (valid) {
addDetailInfos(this.formDetailInfo).then(response => {
addDetailInfos(this.formDetailInfo).then((response) => {
// this.tableData.push(this.formDetailInfo)
//关闭弹出层
this.dialogFormVisible = false;
//数据表单重置
this.formDetailInfo={
this.formDetailInfo = {
deviceName: null,
deviceModel:null,
deviceType:null,
iotNo:null,
remarksn:null
deviceModel: null,
deviceType: null,
iotNo: null,
remarksn: null,
};
this.getDataList();
this.msgSuccess("新增成功");
});
}
});
},
/**关联设备单条删除方法*/
deleteDetailInfo(row){
deleteDetailInfo(row) {
const deviceIds = row.relationDeviceDetailId;
this.$confirm('是否确认删除设备信息编号为"' + deviceIds + '"的数据项?', "警告", {
this.$confirm(
'是否确认删除设备信息编号为"' + deviceIds + '"的数据项?',
"警告",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
type: "warning",
}
)
.then(function () {
return deleteDetailInfo(deviceIds);
}).then(() => {
})
.then(() => {
// this.tableData.splice(index,1);
this.getDataList();
this.msgSuccess("删除成功");
}).catch(() => {});
})
.catch(() => {});
},
/**关联设备已经选中数据删除方法*/
deleteDataListilInfo(row,index){
deleteDataListilInfo(row, index) {
const deviceIds = row.relationDeviceDetailId;
//判断form表单是否有id来验证是修改的删除还是添加的删除
if (this.form.deviceId != null) {
deleteDeviceDetailInfo(deviceIds).then(response => {
deleteDeviceDetailInfo(deviceIds).then((response) => {
this.msgSuccess("删除成功");
this.DetailInfoList.splice(index,1);
this.DetailInfoList.splice(index, 1);
});
}else {
this.DetailInfoList.splice(index,1);
} else {
this.DetailInfoList.splice(index, 1);
this.msgSuccess("删除成功");
}
},
/**
* 批量删除关联设备方法
* @param row
*/
deleteListDetailInfo(row){
deleteListDetailInfo(row) {
const deviceIds = this.ids;
this.$confirm('是否确认删除设备信息编号为"' + deviceIds + '"的数据项?', "警告", {
this.$confirm(
'是否确认删除设备信息编号为"' + deviceIds + '"的数据项?',
"警告",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
type: "warning",
}
)
.then(function () {
return deleteeListDetailInfo(deviceIds);
}).then(() => {
})
.then(() => {
this.getDataList();
this.msgSuccess("删除成功");
}).catch(() => {});
})
.catch(() => {});
},
/**添加关联设备与设备绑定的数据 （存储到数组中）*/
insertListDetailInfo(row){
insertListDetailInfo(row) {
//获取已经选中的下级设备id
const deviceIds = this.ids;
const li=this.datalist;
const li = this.datalist;
if (this.form.deviceId != null) {
//修改
this.DetailInfoList=this.DetailInfoList.concat(this.datalist)
this.DetailInfoList = this.DetailInfoList.concat(this.datalist);
//添加到数组中 以便下次使用
this.DetailInfoListId.push(deviceIds);
// alert(this.DetailInfoListId)
this.dialogTableVisible=false
this.dialogTableVisible = false;
this.msgSuccess("添加成功");
}else {
} else {
//添加
// this.DetailInfoList.push(this.datalist)
//清空数组数据 将之前的数据清空
this.DetailInfoListId.splice(row);
this.DetailInfoList=this.datalist;
this.DetailInfoList = this.datalist;
//添加到数组中 以便下次使用
this.DetailInfoListId.push(deviceIds);
// alert(this.DetailInfoListId)
this.dialogTableVisible=false
this.dialogTableVisible = false;
this.msgSuccess("添加成功");
}
},
/**
* 选择关联设备查询方法
*/
selectDataListInfo(){
selectDataListInfo() {
//查询下级设备数据
getDdeviceDetailInfo(this.dateQueryParams).then(response => {
getDdeviceDetailInfo(this.dateQueryParams).then((response) => {
//下级设备数据 到时候换成下级数据
this.tableData = response.rows;
this.detailTotal = response.total;
this.loadings = false;
//打开选择关联设备弹出框
this.dialogTableVisible = true
this.dialogTableVisible = true;
});
},
......@@ -1027,18 +1273,18 @@ export default {
* 经纬度 选择
* @param res
*/
getPath(res){
getPath(res) {
console.log("res", res);
console.log(this.form.longitude, this.form.latitude);
//确认选择经纬度
this.form.longitude = res[0];
this.form.latitude = res[1];
}
}
},
},
};
</script>
<style>
.dbtn {
.dbtn {
display: inline-block;
line-height: normal;
padding-left: 2px;
......@@ -1048,9 +1294,26 @@ export default {
border-style: solid;
border-width: 0;
color: rgb(48, 180, 107);
}
.dbtn:hover {
}
.dbtn:hover {
border-width: 1px;
border-color: rgb(48, 180, 107);
}
}
.tableTitle {
position: relative;
margin: 24px auto;
width: 600px;
height: 2px;
background-color: #d4d4d4;
text-align: center;
font-size: 16px;
color: rgba(101, 101, 101, 1);
}
.midText {
position: absolute;
left: 3%;
background-color: #ffffff;
padding: 0 15px;
transform: translateX(-50%) translateY(-50%);
}
</style>
gassafetyprogress-web/src/views/regulation/gasuser/index.vue
View file @ fac1cbfd
......@@ -53,14 +53,38 @@
<el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<!--<el-table-column label="用户账号" align="center" prop="username" />-->
<el-table-column label="用户名称" align="center" prop="nickName" />
<el-table-column label="用户类型" align="center" prop="userType" />
<el-table-column label="地址" align="center" prop="address" />
<el-table-column label="经度" align="center" prop="longitude" />
<el-table-column label="纬度" align="center" prop="latitude" />
<el-table-column label="联系人" align="center" prop="linkman" />
<el-table-column label="电话" align="center" prop="phone" />
<el-table-column label="邮箱" align="center" prop="email" />
<el-table-column label="用户名称" align="center" prop="nickName" >
<span slot-scope="scope" v-if="scope.row.nickName">{{scope.row.nickName}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="用户类型" align="center" prop="userType" >
<span slot-scope="scope" v-if="scope.row.userType">{{scope.row.userType}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="地址" align="center" prop="address" >
<span slot-scope="scope" v-if="scope.row.address">{{scope.row.address}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="经度" align="center" prop="longitude" >
<span slot-scope="scope" v-if="scope.row.longitude">{{scope.row.longitude}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="纬度" align="center" prop="latitude" >
<span slot-scope="scope" v-if="scope.row.latitude">{{scope.row.latitude}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="联系人" align="center" prop="linkman" >
<span slot-scope="scope" v-if="scope.row.linkman">{{scope.row.linkman}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="电话" align="center" prop="phone" >
<span slot-scope="scope" v-if="scope.row.phone">{{scope.row.phone}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="邮箱" align="center" prop="email" >
<span slot-scope="scope" v-if="scope.row.email">{{scope.row.email}}</span>
<span v-else>-</span>
</el-table-column>
<!--<el-table-column label="备注" align="center" prop="remarks" />-->
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
......
gassafetyprogress-web/src/views/regulation/info/index.vue
View file @ fac1cbfd
......@@ -80,14 +80,38 @@
<img :src="List.row.doDusiness" width="100px">
</template>
</el-table-column>
<el-table-column label="企业名称" align="center" prop="enterpriseName" />
<el-table-column label="注册地址" align="center" prop="registerAddress" />
<el-table-column label="法定代表人" align="center" prop="legalRepresentative" />
<el-table-column label="经营区域" align="center" prop="businessArea" />
<el-table-column label="许可证编号" align="center" prop="licenseKey" />
<el-table-column label="许可证有效期" align="center" prop="licenseValidityTime" />
<el-table-column label="年度监督检查情况" align="center" prop="annualSupervisionInspection" />
<el-table-column label="备注" align="center" prop="remarks" />
<el-table-column label="企业名称" align="center" prop="enterpriseName" >
<span slot-scope="scope" v-if="scope.row.enterpriseName">{{scope.row.enterpriseName}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="注册地址" align="center" prop="registerAddress" >
<span slot-scope="scope" v-if="scope.row.registerAddress">{{scope.row.registerAddress}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="法定代表人" align="center" prop="legalRepresentative" >
<span slot-scope="scope" v-if="scope.row.legalRepresentative">{{scope.row.legalRepresentative}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="经营区域" align="center" prop="businessArea">
<span slot-scope="scope" v-if="scope.row.businessArea">{{scope.row.businessArea}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="许可证编号" align="center" prop="licenseKey" >
<span slot-scope="scope" v-if="scope.row.licenseKey">{{scope.row.licenseKey}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="许可证有效期" align="center" prop="licenseValidityTime" >
<span slot-scope="scope" v-if="scope.row.licenseValidityTime">{{scope.row.licenseValidityTime}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="年度监督检查情况" align="center" prop="annualSupervisionInspection" >
<span slot-scope="scope" v-if="scope.row.annualSupervisionInspection">{{scope.row.annualSupervisionInspection}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="备注" align="center" prop="remarks" >
<span slot-scope="scope" v-if="scope.row.remarks">{{scope.row.remarks}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="营业执照" align="center" >
<template slot-scope="List">
<span
......
gassafetyprogress-web/src/views/regulation/pipe/index.vue
View file @ fac1cbfd
......@@ -92,16 +92,40 @@
<el-table v-loading="loading" :data="pipeList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="管道长度(米)" align="center" prop="pipeLength" />
<el-table-column label="走向" align="center" prop="pipeTrend" />
<el-table-column label="管径(厘米)" align="center" prop="pipeDiameter" />
<el-table-column label="压力" align="center" prop="pipePressure" />
<el-table-column label="管道长度(米)" align="center" prop="pipeLength" >
<span slot-scope="scope" v-if="scope.row.pipeLength">{{scope.row.pipeLength}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="走向" align="center" prop="pipeTrend" >
<span slot-scope="scope" v-if="scope.row.pipeTrend">{{scope.row.pipeTrend}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="管径(厘米)" align="center" prop="pipeDiameter" >
<span slot-scope="scope" v-if="scope.row.pipeDiameter">{{scope.row.pipeDiameter}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="压力" align="center" prop="pipePressure" >
<span slot-scope="scope" v-if="scope.row.pipePressure">{{scope.row.pipePressure}}</span>
<span v-else>-</span>
</el-table-column>
<!-- <el-table-column label="人员类型" align="center" prop="peopleOccupation" />-->
<el-table-column label="建设年代" align="center" prop="buildDate" />
<el-table-column label="建设单位" align="center" prop="buildUnit" />
<el-table-column label="权属单位" align="center" prop="beyondEnterpriseName" />
<el-table-column label="建设年代" align="center" prop="buildDate" >
<span slot-scope="scope" v-if="scope.row.buildDate">{{scope.row.buildDate}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="建设单位" align="center" prop="buildUnit" >
<span slot-scope="scope" v-if="scope.row.buildUnit">{{scope.row.buildUnit}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="权属单位" align="center" prop="beyondEnterpriseName" >
<span slot-scope="scope" v-if="scope.row.beyondEnterpriseName">{{scope.row.beyondEnterpriseName}}</span>
<span v-else>-</span>
</el-table-column>
<!-- <el-table-column label="坐标" align="center" prop="coordinates" />-->
<el-table-column label="备注" align="center" prop="remarks" />
<el-table-column label="备注" align="center" prop="remarks" >
<span slot-scope="scope" v-if="scope.row.remarks">{{scope.row.remarks}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
......
gassafetyprogress-web/src/views/regulation/station/index.vue
View file @ fac1cbfd
......@@ -84,23 +84,47 @@
<el-table v-loading="loading" :data="stationList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="照片" align="center" >
<template scope="List">
<template slot-scope="List">
<img :src="List.row.pictureAddress" width="100px">
</template>
</el-table-column>
<el-table-column label="场站类型" align="center" prop="siteStationType" />
<el-table-column label="场站名称" align="center" prop="siteStationName" />
<el-table-column label="场站类型" align="center" prop="siteStationType" >
<span slot-scope="scope" v-if="scope.row.siteStationType">{{scope.row.siteStationType}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="场站名称" align="center" prop="siteStationName" >
<span slot-scope="scope" v-if="scope.row.siteStationName">{{scope.row.siteStationName}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="建设年代" align="center" prop="buildDate" width="180">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.buildDate, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="建设单位" align="center" prop="buildUnit" />
<el-table-column label="权属单位" align="center" prop="beyondEnterpriseId" />
<el-table-column label="权属单位" align="center" prop="beyondEnterpriseName" />
<el-table-column label="经度" align="center" prop="longitude" />
<el-table-column label="纬度" align="center" prop="latitude" />
<el-table-column label="备注" align="center" prop="remarks" />
<el-table-column label="建设单位" align="center" prop="buildUnit" >
<span slot-scope="scope" v-if="scope.row.buildUnit">{{scope.row.buildUnit}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="权属单位" align="center" prop="beyondEnterpriseId" >
<span slot-scope="scope" v-if="scope.row.beyondEnterpriseId">{{scope.row.beyondEnterpriseId}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="权属单位" align="center" prop="beyondEnterpriseName" >
<span slot-scope="scope" v-if="scope.row.beyondEnterpriseName">{{scope.row.beyondEnterpriseName}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="经度" align="center" prop="longitude" >
<span slot-scope="scope" v-if="scope.row.longitude">{{scope.row.longitude}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="纬度" align="center" prop="latitude" >
<span slot-scope="scope" v-if="scope.row.latitude">{{scope.row.latitude}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="备注" align="center" prop="remarks" >
<span slot-scope="scope" v-if="scope.row.remarks">{{scope.row.remarks}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="照片" align="center" >
<template slot-scope="List">
<span
......@@ -253,7 +277,10 @@
</el-col>
</el-row>
</el-form>
<h3>关联设备</h3>
<div class="tableTitle">
<img :src="relationImg" style="width: 24px; height: 25px;position: relative; left: -339px; top: -12px;"/>
<span class="midText">关联设备</span>
</div>
<el-table v-loading="loadings" ref="multipleTable" :data="DetailInfoList" tooltip-effect="dark" style="width: 100%" max-height="250" @selection-change="tableDataSelectionChange">
<el-table-column label="设备名称" align="center" prop="deviceName" />
<el-table-column label="设备型号" align="center" prop="deviceModel" />
......@@ -451,6 +478,7 @@ export default {
},
data() {
return {
relationImg: require('@/assets/project/relation.png'),
//头像
fileList: [],
/**-------------------弹出框所用数据-------------------------------*/
......@@ -985,4 +1013,21 @@ export default {
border-width: 1px;
border-color: rgb(48, 180, 107);
}
.tableTitle {
position: relative;
margin: 24px auto;
width: 600px;
height: 2px;
background-color: #d4d4d4;
text-align: center;
font-size: 16px;
color: rgba(101, 101, 101, 1);
}
.midText {
position: absolute;
left: 3%;
background-color: #ffffff;
padding: 0 15px;
transform: translateX(-50%) translateY(-50%);
}
</style>
gassafetyprogress-web/src/views/regulation/supervise/index.vue
View file @ fac1cbfd
......@@ -88,15 +88,42 @@
<img :src="List.row.avatarAddress" width="100px">
</template>
</el-table-column>
<el-table-column label="姓名" align="center" prop="employedPeopleName" />
<el-table-column label="身份证号" align="center" prop="idCard" />
<el-table-column label="技能岗位证书编号" align="center" prop="certificateNum" />
<el-table-column label="受聘企业名称" align="center" prop="beyondEnterpriseName" />
<el-table-column label="发证部门" align="center" prop="registerExaminationType" />
<el-table-column label="任职岗位" align="center" prop="peopleOccupation" />
<el-table-column label="发证日期" align="center" prop="issueDate" />
<el-table-column label="复检日期" align="center" prop="certificateChange" />
<el-table-column label="备注" align="center" prop="remarks" />
<el-table-column label="姓名" align="center" prop="employedPeopleName" >
<span slot-scope="scope" v-if="scope.row.employedPeopleName">{{scope.row.employedPeopleName}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="身份证号" align="center" prop="idCard" >
<span slot-scope="scope" v-if="scope.row.idCard">{{scope.row.idCard}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="技能岗位证书编号" align="center" prop="certificateNum" >
<span slot-scope="scope" v-if="scope.row.certificateNum">{{scope.row.certificateNum}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="受聘企业名称" align="center" prop="beyondEnterpriseName" >
<span slot-scope="scope" v-if="scope.row.beyondEnterpriseName">{{scope.row.beyondEnterpriseName}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="发证部门" align="center" prop="registerExaminationType" >
<span slot-scope="scope" v-if="scope.row.registerExaminationType">{{scope.row.registerExaminationType}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="任职岗位" align="center" prop="peopleOccupation" >
<span slot-scope="scope" v-if="scope.row.peopleOccupation">{{scope.row.peopleOccupation}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="发证日期" align="center" prop="issueDate" >
<span slot-scope="scope" v-if="scope.row.issueDate">{{scope.row.issueDate}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="复检日期" align="center" prop="certificateChange" >
<span slot-scope="scope" v-if="scope.row.certificateChange">{{scope.row.certificateChange}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="备注" align="center" prop="remarks" >
<span slot-scope="scope" v-if="scope.row.remarks">{{scope.row.remarks}}</span>
<span v-else>-</span>
</el-table-column>
<el-table-column label="照片" align="center" >
<template slot-scope="List">
<span
......
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