This commit is contained in:
parent
60909c08d5
commit
0cfd460156
|
|
@ -0,0 +1,11 @@
|
|||
const isCamera = false; // 是否开启相机限制
|
||||
const cameraLon = 116.3974;
|
||||
const cameraLat = 39.9042;
|
||||
const cameraRadius = 40000;
|
||||
|
||||
window.mapConfig = {
|
||||
isCamera: isCamera,
|
||||
cameraLon: cameraLon,
|
||||
cameraLat: cameraLat,
|
||||
cameraRadius: cameraRadius
|
||||
};
|
||||
|
|
@ -1,36 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<meta base="/platform/">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
|
||||
<!-- <link rel="stylesheet" href="/dep/mars3d/mars3d/divGraphic.css" /> -->
|
||||
<!-- ***_*** -->
|
||||
<link href="/dep/mars3d/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
|
||||
<script src="/dep/mars3d/Cesium/Cesium.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="/dep/mars3d/mars3d/mars3d.css" />
|
||||
<script type="text/javascript" src="/dep/mars3d/mars3d/mars3d.js"></script>
|
||||
<script type="text/javascript" src="/dep/mars3d/turf/turf.min.js"></script>
|
||||
<script type="text/javascript" src="/dep/localforage.min.js"></script>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<meta base="/platform/">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>
|
||||
<%= htmlWebpackPlugin.options.title %>
|
||||
</title>
|
||||
<script src="/config.js"></script>
|
||||
|
||||
<!-- <link rel="stylesheet" href="/dep/mars3d/mars3d/divGraphic.css" /> -->
|
||||
<!-- ***_*** -->
|
||||
<link href="/dep/mars3d/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
|
||||
<script src="/dep/mars3d/Cesium/Cesium.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="/dep/mars3d/mars3d/mars3d.css" />
|
||||
<script type="text/javascript" src="/dep/mars3d/mars3d/mars3d.js"></script>
|
||||
<script type="text/javascript" src="/dep/mars3d/turf/turf.min.js"></script>
|
||||
<script type="text/javascript" src="/dep/localforage.min.js"></script>
|
||||
|
||||
|
||||
<!-- 线上Mars3d -->
|
||||
<!-- <link href="http://mars3d.cn/lib/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
|
||||
<!-- 线上Mars3d -->
|
||||
<!-- <link href="http://mars3d.cn/lib/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
|
||||
<link href="http://mars3d.cn/lib/mars3d/mars3d.css" rel="stylesheet" type="text/css" />
|
||||
<script src="http://mars3d.cn/lib/Cesium/Cesium.js" type="text/javascript"></script>
|
||||
<script src="http://mars3d.cn/lib/turf/turf.min.js" type="text/javascript"></script>
|
||||
<script src="http://mars3d.cn/lib/mars3d/mars3d.js" type="text/javascript"></script> -->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>htmlWebpackPlugin.options</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>htmlWebpackPlugin.options</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import request from "@/utils/request";
|
||||
|
||||
export function whitListList(data) {
|
||||
return request({
|
||||
url: "/api/WhitList/list",
|
||||
method: "get",
|
||||
params: data
|
||||
});
|
||||
}
|
||||
|
||||
export function whitListAdd(data) {
|
||||
return request({
|
||||
url: "/api/WhitList/add",
|
||||
method: "post",
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
export function whitListUpdate(data) {
|
||||
return request({
|
||||
url: "/api/WhitList/update",
|
||||
method: "post",
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
export function whitListDelete(data) {
|
||||
return request({
|
||||
url: "/api/WhitList/delete",
|
||||
method: "delete",
|
||||
params: data
|
||||
});
|
||||
}
|
||||
|
|
@ -315,6 +315,9 @@
|
|||
.el-time-spinner__item.active:not(.disabled) {
|
||||
color: #fff;
|
||||
}
|
||||
.el-time-panel {
|
||||
width: 100%;
|
||||
}
|
||||
.el-time-panel__btn {
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -464,6 +467,16 @@
|
|||
.el-cascader {
|
||||
width: 100%;
|
||||
}
|
||||
.el-date-editor {
|
||||
width: 100% !important;
|
||||
.el-range-input {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
.el-range-separator {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.avatar-uploader {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
|
@ -510,7 +523,11 @@
|
|||
.el-date-table td.in-range div:hover,
|
||||
.el-date-table.is-week-mode .el-date-table__row.current div,
|
||||
.el-date-table.is-week-mode .el-date-table__row:hover div {
|
||||
background-color: rgb(50, 77, 109) !important;
|
||||
background-color: rgb(13, 49, 211) !important;
|
||||
}
|
||||
.el-date-range-picker__time-picker-wrap {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.el-time-range-picker__header {
|
||||
color: #fff;
|
||||
|
|
|
|||
|
|
@ -119,11 +119,11 @@ body {
|
|||
margin-right: 40px;
|
||||
margin-top: 10px;
|
||||
.menuItem {
|
||||
width: 283px;
|
||||
width: 305px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-right: 20px;
|
||||
margin-right: 10px;
|
||||
.menuFor {
|
||||
width: 41px;
|
||||
height: 41px;
|
||||
|
|
@ -363,11 +363,14 @@ body {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
justify-content: flex-start;
|
||||
align-content: flex-start;
|
||||
.device-item {
|
||||
//一排三个
|
||||
width: 30%;
|
||||
height: 30%;
|
||||
margin-left: 3%;
|
||||
margin-top: 2%;
|
||||
.device-icon {
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
|
|
|
|||
|
|
@ -519,7 +519,7 @@ export default {
|
|||
deviceManufacturerQuery() {
|
||||
return this.deviceManufacturer;
|
||||
},
|
||||
// 根据城市编码查询地图位置
|
||||
|
||||
changeCascader(row) {
|
||||
console.log(row);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -156,7 +156,7 @@ export default {
|
|||
this.mapMars.clock.stopTime = stop.clone();
|
||||
this.mapMars.clock.currentTime = start.clone();
|
||||
// eslint-disable-next-line no-undef
|
||||
this.mapMars.clock.clockRange = Cesium.ClockRange.UNBOUNDED;
|
||||
this.mapMars.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
|
||||
this.mapMars.clock.multiplier = 1;
|
||||
if (this.mapMars.controls.timeline) {
|
||||
this.mapMars.controls.timeline.zoomTo(start, stop);
|
||||
|
|
|
|||
|
|
@ -73,26 +73,39 @@ export default {
|
|||
deviceStatus: [],
|
||||
positionData: [],
|
||||
isContracted: false,
|
||||
homeView: {}
|
||||
lastPositionsHash: null // 初始化为 null,避免首次误判
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
homeData: {
|
||||
handler(newVal) {
|
||||
this.homeView = newVal;
|
||||
this.positionData = newVal.positions;
|
||||
"homeData.positions": {
|
||||
handler(newPositions) {
|
||||
newPositions = newPositions || [];
|
||||
|
||||
const currentHash = JSON.stringify(newPositions);
|
||||
|
||||
// 比较新旧数据(首次加载时 lastPositionsHash 为 null)
|
||||
if (
|
||||
this.lastPositionsHash !== null &&
|
||||
currentHash === this.lastPositionsHash
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 数据变化或首次加载
|
||||
if (newPositions.length > 0) {
|
||||
this.lastPositionsHash = currentHash; // 更新缓存
|
||||
this.positionData = newPositions;
|
||||
this.homeView = this.homeData;
|
||||
this.$nextTick(() => {
|
||||
console.log("Calling handleTitleClick due to positions change");
|
||||
this.handleTitleClick(true, "all");
|
||||
});
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
immediate: true // 初始加载时触发
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let time = setInterval(() => {
|
||||
if (this.positionData.length > 0) {
|
||||
clearInterval(time);
|
||||
this.handleTitleClick(true, "all");
|
||||
}
|
||||
}, 500);
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
handleContractClick() {
|
||||
this.isContracted = !this.isContracted; // 切换状态
|
||||
|
|
|
|||
|
|
@ -111,6 +111,7 @@ import LogDialog from "../../menuData/LogDialog.vue"; // ID: 3
|
|||
import AlertDialog from "../../menuData/AlertDialog.vue"; // ID: 5
|
||||
import PositionDialog from "../../menuData/PositionDialog.vue"; // ID: 6
|
||||
import AnalysisDialog from "../../menuData/AnalysisDialog.vue"; // ID: 7
|
||||
import WhitListDialog from "../../menuData/WhitListDialog.vue"; // ID: 8
|
||||
import { userUpdatepwd } from "@/api/user.js";
|
||||
export default {
|
||||
name: "header-top",
|
||||
|
|
@ -120,7 +121,8 @@ export default {
|
|||
LogDialog,
|
||||
AlertDialog,
|
||||
PositionDialog,
|
||||
AnalysisDialog
|
||||
AnalysisDialog,
|
||||
WhitListDialog
|
||||
},
|
||||
props: {
|
||||
homeData: {
|
||||
|
|
@ -172,6 +174,12 @@ export default {
|
|||
name: "统计分析",
|
||||
icon: require("@/assets/img/menu/tjfx.png"),
|
||||
iconActive: require("@/assets/img/menu/tjfx-hove.png")
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "白名单",
|
||||
icon: require("@/assets/img/menu/tjfx.png"),
|
||||
iconActive: require("@/assets/img/menu/tjfx-hove.png")
|
||||
}
|
||||
],
|
||||
quanping: [
|
||||
|
|
@ -303,6 +311,9 @@ export default {
|
|||
this.currentDialog = "LogDialog";
|
||||
this.showDialog = true;
|
||||
break;
|
||||
case 4:
|
||||
this.showDialog = false;
|
||||
break;
|
||||
case 5:
|
||||
this.currentDialog = "AlertDialog";
|
||||
this.showDialog = true;
|
||||
|
|
@ -315,9 +326,9 @@ export default {
|
|||
this.currentDialog = "AnalysisDialog";
|
||||
this.showDialog = true;
|
||||
break;
|
||||
case 4:
|
||||
case 8:
|
||||
this.showDialog = false;
|
||||
this.currentDialog = "WhitListDialog";
|
||||
this.showDialog = true;
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -277,103 +277,73 @@ export function mapUavFiex(options) {
|
|||
graphicLayer.remove();
|
||||
} else {
|
||||
options.forEach((item) => {
|
||||
let graphic = graphicLayer.getGraphicById(item.BatchId);
|
||||
// let startPoint = graphicLayer.getGraphicById(item.BatchId + "start"); // 起始点
|
||||
if (item.drone_lon !== 0 || item.drone_lat !== 0) {
|
||||
let graphic = graphicLayer.getGraphicById(item.BatchId);
|
||||
// let startPoint = graphicLayer.getGraphicById(item.BatchId + "start"); // 起始点
|
||||
|
||||
//发现无人机
|
||||
if (!graphic) {
|
||||
// eslint-disable-next-line no-undef
|
||||
graphic = new mars3d.graphic.Route({
|
||||
id: item.BatchId,
|
||||
name: "无人机",
|
||||
maxCacheCount: -1,
|
||||
polyline: {
|
||||
width: 2,
|
||||
opacity: 1,
|
||||
randomColor: true,
|
||||
show: true
|
||||
},
|
||||
billboard: {
|
||||
image: require("@/assets/img/uav.svg"),
|
||||
scale: 0.5,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
||||
},
|
||||
//发现无人机
|
||||
if (!graphic) {
|
||||
// eslint-disable-next-line no-undef
|
||||
graphic = new mars3d.graphic.Route({
|
||||
id: item.BatchId,
|
||||
name: "无人机",
|
||||
maxCacheCount: -1,
|
||||
polyline: {
|
||||
width: 2,
|
||||
opacity: 1,
|
||||
randomColor: true,
|
||||
show: true
|
||||
},
|
||||
billboard: {
|
||||
image: require("@/assets/img/uav.svg"),
|
||||
scale: 0.5,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
||||
},
|
||||
|
||||
attr: item
|
||||
});
|
||||
graphicLayer.addGraphic(graphic);
|
||||
attr: item
|
||||
});
|
||||
graphicLayer.addGraphic(graphic);
|
||||
}
|
||||
|
||||
graphic.attr = item;
|
||||
bindLayerPopup(graphicLayer, graphic);
|
||||
}
|
||||
|
||||
graphic.attr = item;
|
||||
bindLayerPopup(graphicLayer, graphic);
|
||||
if (item.app_lon !== 0 || item.app_lat !== 0) {
|
||||
let app_graphic = graphicLayer.getGraphicById(item.BatchId + "_app");
|
||||
// let startPoint = graphicLayer.getGraphicById(item.BatchId + "start"); // 起始点
|
||||
//发现飞手
|
||||
if (!app_graphic) {
|
||||
// eslint-disable-next-line no-undef
|
||||
app_graphic = new mars3d.graphic.Route({
|
||||
id: item.BatchId + "_app",
|
||||
name: "飞手",
|
||||
maxCacheCount: -1,
|
||||
label: {
|
||||
text: "飞手位置",
|
||||
font_size: 14,
|
||||
font_family: "微软雅黑"
|
||||
},
|
||||
polyline: {
|
||||
width: 2,
|
||||
opacity: 1,
|
||||
randomColor: true,
|
||||
show: true
|
||||
},
|
||||
point: {
|
||||
color: "#00ffff",
|
||||
pixelSize: 8,
|
||||
outlineColor: "#ffffff",
|
||||
outlineWidth: 2
|
||||
},
|
||||
|
||||
let app_graphic = graphicLayer.getGraphicById(item.BatchId + "_app");
|
||||
// let startPoint = graphicLayer.getGraphicById(item.BatchId + "start"); // 起始点
|
||||
|
||||
//发现无人机
|
||||
if (!app_graphic) {
|
||||
// eslint-disable-next-line no-undef
|
||||
app_graphic = new mars3d.graphic.Route({
|
||||
id: item.BatchId + "_app",
|
||||
name: "飞手",
|
||||
maxCacheCount: -1,
|
||||
label: {
|
||||
text: "飞手位置",
|
||||
font_size: 14,
|
||||
font_family: "微软雅黑"
|
||||
},
|
||||
polyline: {
|
||||
width: 2,
|
||||
opacity: 1,
|
||||
randomColor: true,
|
||||
show: true
|
||||
},
|
||||
point: {
|
||||
color: "#00ffff",
|
||||
pixelSize: 8,
|
||||
outlineColor: "#ffffff",
|
||||
outlineWidth: 2
|
||||
},
|
||||
|
||||
attr: item
|
||||
});
|
||||
graphicLayer.addGraphic(app_graphic);
|
||||
attr: item
|
||||
});
|
||||
graphicLayer.addGraphic(app_graphic);
|
||||
}
|
||||
}
|
||||
// 起始点位
|
||||
// if (item.lon !== 0 && item.lat !== 0) {
|
||||
// if (!startPoint) {
|
||||
// // eslint-disable-next-line no-undef
|
||||
// startPoint = new mars3d.graphic.BillboardEntity({
|
||||
// id: item.BatchId + "start",
|
||||
// // eslint-disable-next-line no-undef
|
||||
// position: new mars3d.LngLatPoint(item.lon, item.lat, item.alt),
|
||||
// style: {
|
||||
// image: require("@/assets/img/uav.svg"),
|
||||
// scale: 1,
|
||||
// // eslint-disable-next-line no-undef
|
||||
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
// // eslint-disable-next-line no-undef
|
||||
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
// label: {
|
||||
// text: "起始点",
|
||||
// font: "14px Arial",
|
||||
// color: "#ffffff",
|
||||
// outline: true,
|
||||
// outlineColor: "#000000",
|
||||
// outlineWidth: 2,
|
||||
// // eslint-disable-next-line no-undef
|
||||
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
// // eslint-disable-next-line no-undef
|
||||
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
||||
// }
|
||||
// },
|
||||
// show: false,
|
||||
// attr: item
|
||||
// });
|
||||
// graphicLayer.addGraphic(startPoint);
|
||||
// }
|
||||
// }
|
||||
// 更新发现无人机设备的大小
|
||||
let graphicDevice = window.marsMap.getLayerById("devLog");
|
||||
if (graphicDevice) {
|
||||
let deviceGraphic = graphicDevice.getGraphicById(item.DeviceId);
|
||||
|
|
@ -391,17 +361,21 @@ export function mapUavFiex(options) {
|
|||
// 取出对应无人机的轨迹列表
|
||||
options.map((item) => {
|
||||
if (item.BatchId === car.id) {
|
||||
// eslint-disable-next-line no-undef
|
||||
const point = new mars3d.LngLatPoint(
|
||||
item.drone_lon,
|
||||
item.drone_lat,
|
||||
item.height
|
||||
);
|
||||
car.addDynamicPosition(point, 0);
|
||||
if (item.drone_lon !== 0 || item.drone_lat !== 0) {
|
||||
// eslint-disable-next-line no-undef
|
||||
const point = new mars3d.LngLatPoint(
|
||||
item.drone_lon,
|
||||
item.drone_lat,
|
||||
item.height
|
||||
);
|
||||
car.addDynamicPosition(point, 0);
|
||||
}
|
||||
} else if (item.BatchId + "_app" === car.id) {
|
||||
// eslint-disable-next-line no-undef
|
||||
const point = new mars3d.LngLatPoint(item.app_lon, item.app_lat, 0);
|
||||
car.addDynamicPosition(point, 0);
|
||||
if (item.app_lon !== 0 || item.app_lat !== 0) {
|
||||
// eslint-disable-next-line no-undef
|
||||
const point = new mars3d.LngLatPoint(item.app_lon, item.app_lat, 0);
|
||||
car.addDynamicPosition(point, 0);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -55,6 +55,10 @@ export default {
|
|||
// eslint-disable-next-line no-undef
|
||||
map.on(mars3d.EventType.click, this.map_clickHandler, map);
|
||||
map.on(mars3d.EventType.cameraMoveEnd, this.map_zoomHandler, map);
|
||||
// map.scene.screenSpaceCameraController.enableTranslate = false;
|
||||
// map.scene.screenSpaceCameraController.enableRotate = false; // 禁用旋转
|
||||
// map.scene.screenSpaceCameraController.enableTilt = false; // 禁用倾斜
|
||||
// map.scene.screenSpaceCameraController.enableZoom = false; // 禁用缩放
|
||||
},
|
||||
map_clickHandler(event) {
|
||||
console.log(event);
|
||||
|
|
@ -72,6 +76,26 @@ export default {
|
|||
},
|
||||
onMapLoad(map) {
|
||||
map.changeMouseModel(true);
|
||||
// 在地图初始化后禁用平移
|
||||
let camera = window.mapConfig;
|
||||
console.log(camera, "camera");
|
||||
if (camera.isCamera) {
|
||||
let cameraHistory = new mars3d.thing.CameraHistory({
|
||||
limit: {
|
||||
// 限定视角范围
|
||||
position: Cesium.Cartesian3.fromDegrees(
|
||||
camera.cameraLon,
|
||||
camera.cameraLat,
|
||||
0
|
||||
),
|
||||
radius: camera.cameraRadius,
|
||||
debugExtent: false
|
||||
}
|
||||
});
|
||||
map.addThing(cameraHistory);
|
||||
map.scene.screenSpaceCameraController.minimumZoomDistance = 1000; //相机的高度的最小值
|
||||
map.scene.screenSpaceCameraController.maximumZoomDistance = 500000; //相机高度的最大值
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -45,6 +45,8 @@
|
|||
:visible.sync="drawer"
|
||||
append-to-body
|
||||
direction="rtl"
|
||||
:wrapperClosable="false"
|
||||
:close-on-press-escape="false"
|
||||
>
|
||||
<div class="demo-drawer__content">
|
||||
<my-mars :historyList="historyList"> </my-mars>
|
||||
|
|
|
|||
|
|
@ -72,6 +72,8 @@
|
|||
:visible.sync="drawer"
|
||||
append-to-body
|
||||
direction="rtl"
|
||||
:wrapperClosable="false"
|
||||
:close-on-press-escape="false"
|
||||
>
|
||||
<div class="demo-drawer__content">
|
||||
<my-form
|
||||
|
|
@ -191,24 +193,37 @@ export default {
|
|||
key: 9,
|
||||
imageUrl: require("@/assets/img/device/9.png")
|
||||
}
|
||||
],
|
||||
rules: [
|
||||
{ required: true, message: "请选择关联防区", trigger: "change" }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "设备协议",
|
||||
type: "select",
|
||||
model: "protocol",
|
||||
options: []
|
||||
options: [],
|
||||
rules: [
|
||||
{ required: true, message: "请选择关联防区", trigger: "change" }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "端口",
|
||||
type: "input",
|
||||
model: "port",
|
||||
rules: [{ required: true, message: "请输入设备名称" }]
|
||||
},
|
||||
{
|
||||
label: "ip",
|
||||
type: "input",
|
||||
model: "ip",
|
||||
rules: [{ required: true, message: "请输入设备名称" }]
|
||||
},
|
||||
{
|
||||
label: "机型",
|
||||
type: "input",
|
||||
model: "model"
|
||||
},
|
||||
{
|
||||
label: "端口",
|
||||
type: "input",
|
||||
model: "port"
|
||||
},
|
||||
{
|
||||
label: "账号",
|
||||
type: "input",
|
||||
|
|
@ -219,11 +234,6 @@ export default {
|
|||
type: "input",
|
||||
model: "password"
|
||||
},
|
||||
{
|
||||
label: "ip",
|
||||
type: "input",
|
||||
model: "ip"
|
||||
},
|
||||
{
|
||||
label: "详细地址",
|
||||
type: "input",
|
||||
|
|
@ -245,10 +255,6 @@ export default {
|
|||
],
|
||||
tableData: [],
|
||||
coloumData: [
|
||||
// {
|
||||
// slot: "img",
|
||||
// label: "设备图片"
|
||||
// },
|
||||
{
|
||||
type: "text",
|
||||
label: "设备名称",
|
||||
|
|
@ -428,10 +434,10 @@ export default {
|
|||
// 新增 搜索
|
||||
headdenForm(value, type) {
|
||||
let params = {};
|
||||
this.initPosition();
|
||||
if (type === "add") {
|
||||
this.isType = "add";
|
||||
this.title = "新增设备";
|
||||
this.initPosition();
|
||||
this.initDeviceProtocol();
|
||||
this.fromItem = {};
|
||||
this.drawer = true;
|
||||
|
|
|
|||
|
|
@ -61,6 +61,8 @@
|
|||
:visible.sync="drawer"
|
||||
append-to-body
|
||||
direction="rtl"
|
||||
:wrapperClosable="false"
|
||||
:close-on-press-escape="false"
|
||||
>
|
||||
<div class="demo-drawer__content">
|
||||
<my-form
|
||||
|
|
|
|||
|
|
@ -66,6 +66,8 @@
|
|||
:visible.sync="drawer"
|
||||
append-to-body
|
||||
direction="rtl"
|
||||
:wrapperClosable="false"
|
||||
:close-on-press-escape="false"
|
||||
>
|
||||
<div class="demo-drawer__content">
|
||||
<my-form
|
||||
|
|
@ -270,7 +272,7 @@ export default {
|
|||
}
|
||||
console.log(value);
|
||||
},
|
||||
// 停用 编辑 删除
|
||||
// 编辑 删除
|
||||
handleClick(value, type) {
|
||||
if (type === "edit") {
|
||||
this.isType = "edit";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,381 @@
|
|||
<template>
|
||||
<div class="dictionary">
|
||||
<div class="demo-formName">
|
||||
<my-form
|
||||
:formNewList="formList"
|
||||
:fromItem="formItem"
|
||||
@headdenForm="headdenForm"
|
||||
searchFive
|
||||
ref="myForm"
|
||||
>
|
||||
</my-form>
|
||||
</div>
|
||||
<div class="count">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
@click="headdenForm({ page: 1, pageSize: 10 }, 'search')"
|
||||
>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="headdenForm({}, 'add')"
|
||||
>
|
||||
新增
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<my-table
|
||||
:tableData="tableData"
|
||||
:coloumData="coloumData"
|
||||
isShowPagination
|
||||
:paginationParam="paginationParam"
|
||||
@changeSize="handleSizeChange"
|
||||
@changePage="handlePageChange"
|
||||
@selectionChange="handleSelectionChange"
|
||||
>
|
||||
</my-table>
|
||||
</div>
|
||||
<el-drawer
|
||||
:title="title"
|
||||
:visible.sync="drawer"
|
||||
append-to-body
|
||||
direction="rtl"
|
||||
:wrapperClosable="false"
|
||||
:close-on-press-escape="false"
|
||||
>
|
||||
<div class="demo-drawer__content">
|
||||
<my-form
|
||||
:formNewList="formDrawerList"
|
||||
:fromItem="fromItem"
|
||||
dialogImageUrl
|
||||
@determine="determine"
|
||||
@handleClose="handleClose"
|
||||
@changeSelect="changeSelect"
|
||||
labelWidth="120px"
|
||||
:disabled="isEditFlag"
|
||||
>
|
||||
</my-form>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
"use script";
|
||||
import {
|
||||
whitListList,
|
||||
whitListAdd,
|
||||
whitListUpdate,
|
||||
whitListDelete
|
||||
} from "@/api/whitList.js";
|
||||
import { devPositionList } from "@/api/position.js";
|
||||
export default {
|
||||
name: "whitListDialog",
|
||||
data() {
|
||||
return {
|
||||
formList: [
|
||||
{
|
||||
label: "名称",
|
||||
type: "input",
|
||||
model: "key"
|
||||
}
|
||||
],
|
||||
tableData: [],
|
||||
coloumData: [
|
||||
{
|
||||
type: "text",
|
||||
label: "sn",
|
||||
prop: "sn",
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
label: "描述",
|
||||
prop: "message"
|
||||
}
|
||||
],
|
||||
paginationParam: {
|
||||
currentPage: 1,
|
||||
size: 10,
|
||||
total: 0
|
||||
},
|
||||
formItem: {},
|
||||
formDrawerList: [
|
||||
{
|
||||
label: "sn",
|
||||
type: "input",
|
||||
model: "sn",
|
||||
rules: [{ required: true, message: "请输入sn" }]
|
||||
},
|
||||
{
|
||||
label: "是否全天",
|
||||
type: "select",
|
||||
model: "allDay",
|
||||
options: [
|
||||
{ label: "是", key: "0" },
|
||||
{ label: "否", key: "1" }
|
||||
],
|
||||
rules: [
|
||||
{ required: true, message: "请选择是否全天", trigger: "change" }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "关联防区",
|
||||
type: "select",
|
||||
model: "positionId",
|
||||
options: [],
|
||||
disabled: false,
|
||||
rules: [
|
||||
{ required: true, message: "请选择关联防区", trigger: "change" }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "时间日期",
|
||||
type: "datetimerange",
|
||||
model: "date",
|
||||
format: "yyyy-MM-dd HH:mm:ss"
|
||||
}
|
||||
],
|
||||
drawer: false,
|
||||
title: "",
|
||||
fromItem: {},
|
||||
isType: "",
|
||||
isEditFlag: false,
|
||||
PositionList: []
|
||||
};
|
||||
},
|
||||
components: {},
|
||||
mounted() {
|
||||
this.headdenForm({}, "search");
|
||||
this.search();
|
||||
},
|
||||
methods: {
|
||||
changeSelect(value) {
|
||||
const lastItem = this.formDrawerList[this.formDrawerList.length - 1];
|
||||
const dateTimeItem = {
|
||||
label: "时间日期",
|
||||
type: "datetimerange",
|
||||
model: "date",
|
||||
format: "yyyy-MM-dd HH:mm:ss"
|
||||
};
|
||||
|
||||
if (value === "0") {
|
||||
if (lastItem.label === "时间日期") {
|
||||
this.formDrawerList.pop();
|
||||
this.$set(this.fromItem, "date", null); // 清除 date 数据
|
||||
}
|
||||
} else if (value === "1") {
|
||||
if (lastItem.label !== "时间日期") {
|
||||
this.formDrawerList.push(dateTimeItem);
|
||||
this.$set(this.fromItem, "date", []); // 初始化 date 数据
|
||||
}
|
||||
}
|
||||
},
|
||||
initPosition() {
|
||||
devPositionList().then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.PositionList = res.data.items;
|
||||
this.formDrawerList.forEach((item) => {
|
||||
if (item.label === "关联防区") {
|
||||
item.options = res.data.items.map((item) => {
|
||||
item.label = item.name;
|
||||
item.key = item.id;
|
||||
return item;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
search() {
|
||||
this.headdenForm({}, "search");
|
||||
},
|
||||
// 搜索
|
||||
headdenForm(value, type) {
|
||||
let params = {};
|
||||
if (type === "search") {
|
||||
params = JSON.parse(JSON.stringify(this.$refs.myForm.ruleForm));
|
||||
if (params.dateRange) {
|
||||
params.startTime = params.dateRange[0];
|
||||
params.endTime = params.dateRange[1];
|
||||
}
|
||||
if (value.page !== undefined) {
|
||||
this.paginationParam.currentPage = value.page;
|
||||
this.paginationParam.size = value.pageSize;
|
||||
}
|
||||
params.page = this.paginationParam.currentPage;
|
||||
params.pageSize = this.paginationParam.size;
|
||||
this.$delete(params, "dateRange");
|
||||
whitListList(params).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.tableData = res.data.items;
|
||||
this.paginationParam.total = res.data.total;
|
||||
}
|
||||
});
|
||||
} else if (type === "add") {
|
||||
this.isType = "add";
|
||||
this.title = "新增白名单";
|
||||
this.initPosition();
|
||||
this.fromItem = {};
|
||||
this.formDrawerList = this.getDefaultFormDrawerList();
|
||||
this.isEditFlag = false;
|
||||
this.drawer = true;
|
||||
}
|
||||
},
|
||||
// 确定按钮
|
||||
determine(value) {
|
||||
const params = { ...value };
|
||||
console.log(params, "params");
|
||||
|
||||
// 设置 positionName
|
||||
const position = this.PositionList.find(
|
||||
(item) => item.id === params.positionId
|
||||
);
|
||||
params.positionName = position ? position.name : "";
|
||||
|
||||
// 处理 allDay 和时间
|
||||
if (params.allDay === "0") {
|
||||
params.allDay = true;
|
||||
params.startTime = "";
|
||||
params.endTime = "";
|
||||
} else {
|
||||
params.allDay = false;
|
||||
if (Array.isArray(params.date) && params.date.length === 2) {
|
||||
params.startTime = params.date[0];
|
||||
params.endTime = params.date[1];
|
||||
} else {
|
||||
params.startTime = "";
|
||||
params.endTime = "";
|
||||
}
|
||||
}
|
||||
delete params.date; // 移除 date 字段
|
||||
const apiCall = this.isType === "add" ? whitListAdd : whitListUpdate;
|
||||
apiCall(params)
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$message.success(
|
||||
`${this.isType === "add" ? "新增" : "编辑"}成功`
|
||||
);
|
||||
this.search();
|
||||
} else {
|
||||
this.$message.error(
|
||||
`${this.isType === "add" ? "新增" : "编辑"}失败`
|
||||
);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(`${this.isType === "add" ? "新增" : "编辑"}错误:`, err);
|
||||
this.$message.error(
|
||||
`${this.isType === "add" ? "新增" : "编辑"}时发生错误`
|
||||
);
|
||||
});
|
||||
this.drawer = false;
|
||||
},
|
||||
// 编辑 删除
|
||||
handleClick(value, type) {
|
||||
if (type === "edit") {
|
||||
this.isType = "edit";
|
||||
this.title = "编辑白名单";
|
||||
this.isEditFlag = false;
|
||||
this.fromItem = { ...value };
|
||||
this.formDrawerList = this.getDefaultFormDrawerList();
|
||||
value.allDay = value.allDay ? "0" : "1";
|
||||
this.changeSelect(value.allDay); // 根据 allDay 调整时间日期字段
|
||||
this.initPosition();
|
||||
this.drawer = true;
|
||||
} else if (type === "delete") {
|
||||
console.log(value);
|
||||
let params = {
|
||||
id: value.id
|
||||
};
|
||||
this.$confirm("此操作将永久删除该白名单, 是否继续?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
whitListDelete(params).then((res) => {
|
||||
if (res.code === 0) {
|
||||
this.$message.success("删除成功");
|
||||
this.headdenForm({}, "search");
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "已取消删除"
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
// 关闭抽屉
|
||||
handleClose() {
|
||||
this.drawer = false;
|
||||
},
|
||||
//分页
|
||||
handleSizeChange(value) {
|
||||
console.log(value);
|
||||
this.paginationParam.size = value;
|
||||
this.headdenForm({}, "search");
|
||||
},
|
||||
handlePageChange(value) {
|
||||
console.log(value);
|
||||
this.paginationParam.currentPage = value;
|
||||
this.headdenForm({}, "search");
|
||||
},
|
||||
handleSelectionChange(value) {
|
||||
console.log(value);
|
||||
}, // 初始化 formDrawerList 的公共方法
|
||||
getDefaultFormDrawerList() {
|
||||
return [
|
||||
{
|
||||
label: "sn",
|
||||
type: "input",
|
||||
model: "sn",
|
||||
rules: [{ required: true, message: "请输入sn" }]
|
||||
},
|
||||
{
|
||||
label: "是否全天",
|
||||
type: "select",
|
||||
model: "allDay",
|
||||
options: [
|
||||
{ label: "是", key: "0" },
|
||||
{ label: "否", key: "1" }
|
||||
],
|
||||
rules: [
|
||||
{ required: true, message: "请选择是否全天", trigger: "change" }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "关联防区",
|
||||
type: "select",
|
||||
model: "positionId",
|
||||
options: [],
|
||||
disabled: false,
|
||||
rules: [
|
||||
{ required: true, message: "请选择关联防区", trigger: "change" }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "时间日期",
|
||||
type: "datetimerange",
|
||||
model: "date",
|
||||
format: "yyyy-MM-dd HH:mm:ss"
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.dictionary {
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue