Skip to content

G
gassafety-progress
Commit e69d6246 authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

Merge branch 'develop_jzl'

parents 0cba0013 f4da6662
Show whitespace changes
Inline Side-by-side
Showing with 885 additions and 56 deletions
gassafetyprogress-web/src/utils/mapClass/mapbigwindow.js 0 → 100644
View file @ e69d6246
/*
* @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/views/operationMonitor/monitorData/component/charsData/Cg.vue
View file @ e69d6246
<!--
* @Author: your name
* @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-26 17:14:12
* @LastEditTime: 2022-03-28 13:52:40
* @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
......@@ -9,7 +9,11 @@
<template>
<div class="czcard">
<my-collapse title="储罐" ref="myCollapse">
<my-collapse
title="储罐"
ref="myCollapse"
:listNum="czList.filter((item) => item.show).length"
>
<template v-slot:chackbox>
<div
class="filter"
......@@ -34,8 +38,12 @@
: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 :title="item.companyName" class="left zzz">
{{ item.companyName }}
</div>
<div :class="`one-${item.state}`" class="state">
{{ typeState[item.state - 1] }}
</div>
</div>
</div>
</template>
......@@ -126,10 +134,6 @@ export default {
this.deviceTypeArr.push(state);
}
this.filter(this.deviceTypeArr);
// 改变大小
this.$nextTick(() => {
this.$refs.myCollapse.getHeight();
});
},
// 过滤对象
filter(arr) {
......@@ -235,7 +239,7 @@ $active: #06d7b1 !important;
// margin-right: 45px;
width: 15%;
min-width: 190px;
margin-right: 1%;
margin-right: 1.5%;
.left {
margin-right: 4px;
font-size: 14px;
......@@ -257,9 +261,9 @@ $active: #06d7b1 !important;
border-radius: 2px;
background-color: #ff6c68;
}
&.one-3{
&.one-3 {
color: #fff;
border: 1px solid #AAAAAA;
border: 1px solid #aaaaaa;
border-radius: 2px;
background-color: #bbbbbb;
}
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
View file @ e69d6246
<!--
* @Author: your name
* @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-26 17:12:04
* @LastEditTime: 2022-03-28 13:43:09
* @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
......@@ -9,7 +9,11 @@
<template>
<div class="czcard">
<my-collapse title="场站" ref="myCollapse">
<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
......@@ -140,7 +144,6 @@ export default {
show: true,
type: 4,
},
],
};
},
......@@ -156,6 +159,7 @@ export default {
methods: {
hide() {
this.carHide = !this.carHide;
// this.myCollapse();
},
// 根据父子元素自动计算是否需要添加值start
changeAddStartNum() {
......@@ -185,10 +189,15 @@ export default {
this.deviceTypeArr.push(type);
}
this.filter(this.deviceTypeArr);
// 改变大小
this.$nextTick(() => {
this.$refs.myCollapse.getHeight();
});
// 改变大小,因为动画原因加个延迟
// this.$nextTick(() => {
// setTimeout(()=>{
// this.myCollapse()
// }, 300);
// });
},
myCollapse() {
// this.$refs.myCollapse.getHeight();
},
// 过滤对象
filter(arr) {
......@@ -236,7 +245,7 @@ export default {
}
& > div {
margin-bottom: 20px;
margin-left:1%;
margin-left: 1%;
width: 24%;
min-width: 295px;
}
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Fmj.vue
View file @ e69d6246
<!--
* @Author: your name
* @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-26 17:16:36
* @LastEditTime: 2022-03-28 13:52:32
* @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
......@@ -9,7 +9,11 @@
<template>
<div class="czcard">
<my-collapse title="阀门井" ref="myCollapse">
<my-collapse
title="阀门井"
ref="myCollapse"
:listNum="czList.filter((item) => item.show).length"
>
<template v-slot:chackbox>
<div
class="filter"
......@@ -34,8 +38,12 @@
: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 :title="item.companyName" class="left zzz">
{{ item.companyName }}
</div>
<div :class="`one-${item.state}`" class="state">
{{ typeState[item.state - 1] }}
</div>
</div>
</div>
</template>
......@@ -126,10 +134,6 @@ export default {
this.deviceTypeArr.push(state);
}
this.filter(this.deviceTypeArr);
// 改变大小
this.$nextTick(() => {
this.$refs.myCollapse.getHeight();
});
},
// 过滤对象
filter(arr) {
......@@ -235,7 +239,7 @@ $active: #06d7b1 !important;
// margin-right: 45px;
width: 15%;
min-width: 190px;
margin-right: 1%;
margin-right: 1.5%;
.left {
margin-right: 4px;
font-size: 14px;
......@@ -257,9 +261,9 @@ $active: #06d7b1 !important;
border-radius: 2px;
background-color: #ff6c68;
}
&.one-3{
&.one-3 {
color: #fff;
border: 1px solid #AAAAAA;
border: 1px solid #aaaaaa;
border-radius: 2px;
background-color: #bbbbbb;
}
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/MyCollapse.vue
View file @ e69d6246
<!--
* @Author: your name
* @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-26 15:33:25
* @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
......@@ -16,7 +16,7 @@
>
<div class="title flex">
<div class="left">
<div class="device">{{title}}</div>
<div class="device">{{ title }}</div>
<slot name="chackbox" />
</div>
<div class="right">
......@@ -28,8 +28,12 @@
</div>
</div>
<div ref="container">
<transition name="fade" mode="out-in">
<div :key="listNum">
<slot name="container" />
</div>
</transition>
</div>
</div>
</div>
</template>
......@@ -38,9 +42,15 @@
import { mapGetters } from "vuex";
export default {
props:{
title:String,
props: {
title: String,
// 动画需求
listNum: {
type: Number,
default:"1"
},
},
data() {
return {
carHide: true,
......@@ -56,6 +66,11 @@ export default {
setTimeout(this.getHeight, 200);
// this.getHeight();
},
listNum() {
setTimeout(() => {
this.getHeight();
}, 300);
},
},
mounted() {
this.getHeight();
......@@ -67,14 +82,14 @@ export default {
},
getHeight() {
const { height } = this.$refs?.container?.getBoundingClientRect();
if(!height){
if (!height) {
return;
}
// 高度必须是一个指定的值才能过渡变化，这样就计算出了整个元素的指定高度，然后赋值
if (height > 0) {
this.transitionHeight = height + 60 + 18 + "px";
}else{
this.transitionHeight="60px";
} else {
this.transitionHeight = "60px";
}
},
},
......@@ -82,6 +97,13 @@ export default {
</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;
......@@ -92,7 +114,7 @@ export default {
box-sizing: border-box;
padding: 15px 22px 18px 22px;
overflow: hidden;
margin-bottom:20px;
margin-bottom: 20px;
&.hide {
height: 60px !important;
}
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Tyx.vue
View file @ e69d6246
<!--
* @Author: your name
* @Date: 2022-03-25 17:15:31
* @LastEditTime: 2022-03-26 17:16:52
* @LastEditTime: 2022-03-28 13:53:04
* @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
......@@ -9,7 +9,11 @@
<template>
<div class="czcard">
<my-collapse title="调压箱" ref="myCollapse">
<my-collapse
title="调压箱"
ref="myCollapse"
:listNum="czList.filter((item) => item.show).length"
>
<template v-slot:chackbox>
<div
class="filter"
......@@ -34,8 +38,12 @@
: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 :title="item.companyName" class="left zzz">
{{ item.companyName }}
</div>
<div :class="`one-${item.state}`" class="state">
{{ typeState[item.state - 1] }}
</div>
</div>
</div>
</template>
......@@ -126,10 +134,6 @@ export default {
this.deviceTypeArr.push(state);
}
this.filter(this.deviceTypeArr);
// 改变大小
this.$nextTick(() => {
this.$refs.myCollapse.getHeight();
});
},
// 过滤对象
filter(arr) {
......@@ -235,7 +239,7 @@ $active: #06d7b1 !important;
// margin-right: 45px;
width: 15%;
min-width: 190px;
margin-right: 1%;
margin-right: 1.5%;
.left {
margin-right: 4px;
font-size: 14px;
......@@ -257,9 +261,9 @@ $active: #06d7b1 !important;
border-radius: 2px;
background-color: #ff6c68;
}
&.one-3{
&.one-3 {
color: #fff;
border: 1px solid #AAAAAA;
border: 1px solid #aaaaaa;
border-radius: 2px;
background-color: #bbbbbb;
}
......
gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/index.vue
View file @ e69d6246
<!--
* @Author: your name
* @Date: 2022-03-25 13:46:23
* @LastEditTime: 2022-03-26 17:15:43
* @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
......@@ -46,6 +46,7 @@ export default {
<style lang="scss" scoped>
.chars-data {
padding: 26px 108px 0 88px;
// padding: 26px 108px 0 88px;
padding: 20px;
}
</style>
\ No newline at end of file
gassafetyprogress-web/src/views/operationMonitor/monitorData/index.vue
View file @ e69d6246
<!--
* @Author: your name
* @Date: 2022-03-08 17:28:57
* @LastEditTime: 2022-03-25 15:27:44
* @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
......@@ -16,7 +16,11 @@
@click="isComChange(index)"
></div>
</div>
<transition name="fade-transform" mode="out-in">
<keep-alive>
<component :is="currentTabComponent"></component>
</keep-alive>
</transition>
</div>
</template>
......@@ -28,7 +32,7 @@ export default {
return {
// currentTabComponent: tabledata,
changeIcon: [{ class: "icon-b" }, { class: "icon-a" }],
isCom: 1,
isCom: 0,
};
},
computed: {
......
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