Compare commits
	
		
			9 Commits
		
	
	
	| Author | SHA1 | Date | 
|---|---|---|
| 
							
							
								 | 
						8f0e654ffa | |
| 
							
							
								 | 
						6868111813 | |
| 
							
							
								 | 
						18da5b9d48 | |
| 
							
							
								 | 
						5dc45ea340 | |
| 
							
							
								 | 
						d423f16696 | |
| 
							
							
								 | 
						b205eda476 | |
| 
							
							
								 | 
						cdf6f6f5f5 | |
| 
							
							
								 | 
						f2a0977133 | |
| 
							
							
								 | 
						837255691e | 
| 
						 | 
				
			
			@ -121,6 +121,7 @@ body {
 | 
			
		|||
        align-items: center;
 | 
			
		||||
        margin-right: 40px;
 | 
			
		||||
        margin-top: 10px;
 | 
			
		||||
        z-index: 10;
 | 
			
		||||
        .menuItem {
 | 
			
		||||
          width: 305px;
 | 
			
		||||
          display: flex;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -16,6 +16,15 @@
 | 
			
		|||
        :rules="detail ? false : item.rules"
 | 
			
		||||
        v-show="item.show === undefined ? true : item.show"
 | 
			
		||||
      >
 | 
			
		||||
        <template #label>
 | 
			
		||||
          <span v-if="item.label && typeof item.label === 'string'">
 | 
			
		||||
            <span v-if="item.label.includes('*')">
 | 
			
		||||
              <span style="color: #f56c6c"> * </span>
 | 
			
		||||
              {{ item.label.replace("*", "") }}
 | 
			
		||||
            </span>
 | 
			
		||||
            <span v-else>{{ item.label }}</span>
 | 
			
		||||
          </span>
 | 
			
		||||
        </template>
 | 
			
		||||
        <!-- 输入框 -->
 | 
			
		||||
        <template v-if="item.type === 'input'">
 | 
			
		||||
          <el-input
 | 
			
		||||
| 
						 | 
				
			
			@ -423,7 +432,8 @@ export default {
 | 
			
		|||
          }
 | 
			
		||||
          if (newVal.geojson === undefined) {
 | 
			
		||||
            if (this.$refs.myMarsmap !== undefined) {
 | 
			
		||||
              this.$refs.myMarsmap[0].clearDraw();
 | 
			
		||||
              console.log(111122223333);
 | 
			
		||||
              // this.$refs.myMarsmap[0].clearDraw();
 | 
			
		||||
            }
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
| 
						 | 
				
			
			@ -536,37 +546,90 @@ export default {
 | 
			
		|||
          };
 | 
			
		||||
          if (this.$refs.myMarsmap) {
 | 
			
		||||
            let toJson = this.$refs.myMarsmap[0].toGeoJSON();
 | 
			
		||||
            if (toJson.features.length !== 0) {
 | 
			
		||||
              console.log(toJson, "toJson");
 | 
			
		||||
              // 多边形 首尾相同
 | 
			
		||||
              geojson.coordinates = toJson.features.map((item) => {
 | 
			
		||||
                if (item.properties.type === "polygon") {
 | 
			
		||||
                item.geometry.coordinates[0][
 | 
			
		||||
                  item.geometry.coordinates[0].length
 | 
			
		||||
                ] = item.geometry.coordinates[0][0];
 | 
			
		||||
                  // 确保 coordinates 是有效的多边形坐标(三维数组)
 | 
			
		||||
                  if (
 | 
			
		||||
                    Array.isArray(item.geometry.coordinates) &&
 | 
			
		||||
                    Array.isArray(item.geometry.coordinates[0]) &&
 | 
			
		||||
                    Array.isArray(item.geometry.coordinates[0][0])
 | 
			
		||||
                  ) {
 | 
			
		||||
                    let coords = item.geometry.coordinates[0];
 | 
			
		||||
                    if (coords.length > 1) {
 | 
			
		||||
                      let firstCoord = coords[0];
 | 
			
		||||
                      let lastCoord = coords[coords.length - 1];
 | 
			
		||||
 | 
			
		||||
                      // 清理重复的尾坐标
 | 
			
		||||
                      while (
 | 
			
		||||
                        coords.length > 1 &&
 | 
			
		||||
                        lastCoord[0] === firstCoord[0] &&
 | 
			
		||||
                        lastCoord[1] === firstCoord[1]
 | 
			
		||||
                      ) {
 | 
			
		||||
                        coords.pop();
 | 
			
		||||
                        // 更新 lastCoord
 | 
			
		||||
                        if (coords.length > 1) {
 | 
			
		||||
                          lastCoord = coords[coords.length - 1];
 | 
			
		||||
                        }
 | 
			
		||||
                      }
 | 
			
		||||
 | 
			
		||||
                      // 检查首尾坐标是否相同
 | 
			
		||||
                      if (
 | 
			
		||||
                        coords.length > 1 &&
 | 
			
		||||
                        (firstCoord[0] !== lastCoord[0] ||
 | 
			
		||||
                          firstCoord[1] !== lastCoord[1])
 | 
			
		||||
                      ) {
 | 
			
		||||
                        // 如果不同,将首坐标添加到尾部
 | 
			
		||||
                        item.geometry.coordinates[0].push(firstCoord);
 | 
			
		||||
                      }
 | 
			
		||||
                    }
 | 
			
		||||
                  }
 | 
			
		||||
                } else if (item.properties.type === "pointP") {
 | 
			
		||||
                console.log(item.geometry.coordinates);
 | 
			
		||||
                  console.log(item.geometry.coordinates, "112233");
 | 
			
		||||
                } else if (item.properties.type === "circle") {
 | 
			
		||||
                // eslint-disable-next-line no-undef
 | 
			
		||||
                  const positions = mars3d.PolyUtil.getEllipseOuterPositions({
 | 
			
		||||
                    position: item.geometry.coordinates,
 | 
			
		||||
                    radius: item.properties.style.radius
 | 
			
		||||
                  });
 | 
			
		||||
                  item.geometry.coordinates = [[]];
 | 
			
		||||
                  positions.forEach((el) => {
 | 
			
		||||
                  // eslint-disable-next-line no-undef
 | 
			
		||||
                  mars3d.LngLatPoint.fromCartesian(el).toArray(),
 | 
			
		||||
                    item.geometry.coordinates[0].push(
 | 
			
		||||
                      // eslint-disable-next-line no-undef
 | 
			
		||||
                      mars3d.LngLatPoint.fromCartesian(el).toArray()
 | 
			
		||||
                    );
 | 
			
		||||
                  });
 | 
			
		||||
                  console.log(item.geometry.coordinates);
 | 
			
		||||
                  // 为圆添加首坐标到尾部以闭合
 | 
			
		||||
                  if (item.geometry.coordinates[0].length > 0) {
 | 
			
		||||
                    item.geometry.coordinates[0].push(
 | 
			
		||||
                      item.geometry.coordinates[0][0]
 | 
			
		||||
                    );
 | 
			
		||||
                // console.log(item.geometry.coordinates);
 | 
			
		||||
                  }
 | 
			
		||||
                }
 | 
			
		||||
                return item.geometry.coordinates;
 | 
			
		||||
              });
 | 
			
		||||
 | 
			
		||||
              // 清理 geojson.coordinates,只保留第一个有效元素
 | 
			
		||||
              if (
 | 
			
		||||
                Array.isArray(geojson.coordinates) &&
 | 
			
		||||
                geojson.coordinates.length > 1
 | 
			
		||||
              ) {
 | 
			
		||||
                // 寻找第一个有效元素(点、多边形或圆)
 | 
			
		||||
                const firstValidItem = geojson.coordinates.find(
 | 
			
		||||
                  (item) =>
 | 
			
		||||
                    Array.isArray(item) &&
 | 
			
		||||
                    // 点坐标:[lng, lat]
 | 
			
		||||
                    ((item.length === 2 &&
 | 
			
		||||
                      typeof item[0] === "number" &&
 | 
			
		||||
                      typeof item[1] === "number") ||
 | 
			
		||||
                      // 多边形或圆坐标:三维数组
 | 
			
		||||
                      (Array.isArray(item[0]) && Array.isArray(item[0][0])))
 | 
			
		||||
                );
 | 
			
		||||
                // 如果找到有效元素,只保留它;否则置为空数组
 | 
			
		||||
                geojson.coordinates = firstValidItem ? [firstValidItem] : [];
 | 
			
		||||
              }
 | 
			
		||||
            }
 | 
			
		||||
            this.ruleForm.geoJson = geojson;
 | 
			
		||||
            this.ruleForm.center = [
 | 
			
		||||
              this.$refs.myMarsmap[0].lonData,
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -12,6 +12,8 @@
 | 
			
		|||
 | 
			
		||||
<script>
 | 
			
		||||
"use script";
 | 
			
		||||
import moment from "moment";
 | 
			
		||||
import { Homeview } from "@/api/home.js";
 | 
			
		||||
export default {
 | 
			
		||||
  name: "myMars",
 | 
			
		||||
  props: {
 | 
			
		||||
| 
						 | 
				
			
			@ -24,7 +26,9 @@ export default {
 | 
			
		|||
    return {
 | 
			
		||||
      inputs: "",
 | 
			
		||||
      checkInterval: null,
 | 
			
		||||
      time: null
 | 
			
		||||
      time: null,
 | 
			
		||||
      matchedNames: [],
 | 
			
		||||
      historyData: {}
 | 
			
		||||
    };
 | 
			
		||||
  },
 | 
			
		||||
  components: {},
 | 
			
		||||
| 
						 | 
				
			
			@ -32,9 +36,11 @@ export default {
 | 
			
		|||
    historyList: {
 | 
			
		||||
      handler(val) {
 | 
			
		||||
        let value = JSON.parse(JSON.stringify(val));
 | 
			
		||||
        console.log(value, "value");
 | 
			
		||||
        if (value) {
 | 
			
		||||
          this.startCheckTimer(value);
 | 
			
		||||
          this.startCheckTimer(value[1]);
 | 
			
		||||
        }
 | 
			
		||||
        this.historyData = value;
 | 
			
		||||
      },
 | 
			
		||||
      deep: true,
 | 
			
		||||
      immediate: true
 | 
			
		||||
| 
						 | 
				
			
			@ -98,6 +104,17 @@ export default {
 | 
			
		|||
      }, 100);
 | 
			
		||||
    },
 | 
			
		||||
    onProcessTraceability(mapList) {
 | 
			
		||||
      let newMapList = (mapList = mapList.filter(
 | 
			
		||||
        (item) => Number(item.lon) !== 0 && Number(item.lat) !== 0
 | 
			
		||||
      ));
 | 
			
		||||
      // if (newMapList.length === 0) {
 | 
			
		||||
      //   this.clearDraw();
 | 
			
		||||
      //   this.$message({
 | 
			
		||||
      //     message: "暂无数据",
 | 
			
		||||
      //     type: "warning"
 | 
			
		||||
      //   });
 | 
			
		||||
      //   return;
 | 
			
		||||
      // }
 | 
			
		||||
      // eslint-disable-next-line no-undef
 | 
			
		||||
      const property = new Cesium.SampledPositionProperty();
 | 
			
		||||
      // eslint-disable-next-line no-undef
 | 
			
		||||
| 
						 | 
				
			
			@ -109,10 +126,26 @@ export default {
 | 
			
		|||
 | 
			
		||||
      let start;
 | 
			
		||||
      let stop;
 | 
			
		||||
 | 
			
		||||
      // 如果数据只有一条,复制并调整时间
 | 
			
		||||
      if (newMapList.length === 1) {
 | 
			
		||||
        const firstItem = newMapList[0];
 | 
			
		||||
        const secondItem = { ...firstItem };
 | 
			
		||||
 | 
			
		||||
        // 增加1秒到 createTime
 | 
			
		||||
        const firstTime = moment(firstItem.createTime); // 使用 moment.js 来处理时间
 | 
			
		||||
        secondItem.createTime = firstTime
 | 
			
		||||
          .add(1, "seconds")
 | 
			
		||||
          .format("YYYY-MM-DD HH:mm:ss");
 | 
			
		||||
 | 
			
		||||
        newMapList.push(secondItem); // 将新的第二条数据加入到列表
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      for (let i = 0, len = mapList.length; i < len; i++) {
 | 
			
		||||
        const item = mapList[i];
 | 
			
		||||
        const lng = Number(item.lon); // 经度
 | 
			
		||||
        const lat = Number(item.lat); // 纬度
 | 
			
		||||
 | 
			
		||||
        const app_lng = Number(item.app_lon); // 经度
 | 
			
		||||
        const app_lat = Number(item.app_lat); // 纬度
 | 
			
		||||
        const height = item.alt || 5; // 高度5 是避免与 geojson 高度冲突
 | 
			
		||||
| 
						 | 
				
			
			@ -121,12 +154,12 @@ export default {
 | 
			
		|||
        const time = outputDate; // 时间
 | 
			
		||||
        let position = null;
 | 
			
		||||
        let app_position = null;
 | 
			
		||||
        if (lng !== 0 && lat !== 0) {
 | 
			
		||||
        if (lng && lat) {
 | 
			
		||||
          // eslint-disable-next-line no-undef
 | 
			
		||||
          position = Cesium.Cartesian3.fromDegrees(lng, lat, height);
 | 
			
		||||
          app_position = Cesium.Cartesian3.fromDegrees(app_lng, app_lat, 0);
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        let juliaDate = null;
 | 
			
		||||
        if (time) {
 | 
			
		||||
          // eslint-disable-next-line no-undef
 | 
			
		||||
| 
						 | 
				
			
			@ -144,9 +177,6 @@ export default {
 | 
			
		|||
        } else if (i === len - 1) {
 | 
			
		||||
          stop = juliaDate;
 | 
			
		||||
        }
 | 
			
		||||
        } else {
 | 
			
		||||
          console.log("经纬度为0,忽略该数据");
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
      // 设置时钟属性
 | 
			
		||||
      if (stop === undefined) {
 | 
			
		||||
| 
						 | 
				
			
			@ -170,6 +200,7 @@ export default {
 | 
			
		|||
      // });
 | 
			
		||||
      this.clearDraw();
 | 
			
		||||
      // 创建无人机对象
 | 
			
		||||
      console.log(property, "property");
 | 
			
		||||
      let pathEntity = this.graphicLayer.getGraphicById("pathIdsss");
 | 
			
		||||
      if (!pathEntity) {
 | 
			
		||||
        pathEntity = new mars3d.graphic.ModelEntity({
 | 
			
		||||
| 
						 | 
				
			
			@ -225,10 +256,85 @@ export default {
 | 
			
		|||
        });
 | 
			
		||||
        this.graphicLayer.addGraphic(app_pathEntity);
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      Homeview().then((res) => {
 | 
			
		||||
        console.log(res.data.positions, "res.data.positions");
 | 
			
		||||
        this.matchedNames = res.data.positions.filter((m) =>
 | 
			
		||||
          this.historyData[0].positionId.includes(m.id)
 | 
			
		||||
        );
 | 
			
		||||
        console.log(this.matchedNames, "this.matchedNames");
 | 
			
		||||
        if (this.matchedNames.length > 0) {
 | 
			
		||||
          let item = this.matchedNames[0];
 | 
			
		||||
          let graphiczhendi = this.mapMars.getLayerById("zhendi");
 | 
			
		||||
          if (!graphiczhendi) {
 | 
			
		||||
            graphiczhendi = new mars3d.layer.GeoJsonLayer({
 | 
			
		||||
              id: "zhendi",
 | 
			
		||||
              name: "zhendi",
 | 
			
		||||
              data: {
 | 
			
		||||
                type: "FeatureCollection",
 | 
			
		||||
                features: [
 | 
			
		||||
                  {
 | 
			
		||||
                    type: "Feature",
 | 
			
		||||
                    properties: {},
 | 
			
		||||
                    geometry: JSON.parse(item.regionJson)
 | 
			
		||||
                  }
 | 
			
		||||
                ]
 | 
			
		||||
              },
 | 
			
		||||
              symbol: {
 | 
			
		||||
                styleOptions: {
 | 
			
		||||
                  fill: true,
 | 
			
		||||
                  color: "#3388cc",
 | 
			
		||||
                  opacity: 0.5,
 | 
			
		||||
                  outline: true,
 | 
			
		||||
                  outlineStyle: {
 | 
			
		||||
                    width: 2,
 | 
			
		||||
                    opacity: 0.1
 | 
			
		||||
                  }
 | 
			
		||||
                }
 | 
			
		||||
              }
 | 
			
		||||
            });
 | 
			
		||||
            this.mapMars.addLayer(graphiczhendi);
 | 
			
		||||
          }
 | 
			
		||||
          item.devices.forEach((deviceItem) => {
 | 
			
		||||
            // 设备
 | 
			
		||||
            let graphic = this.graphicLayer.getGraphicById(
 | 
			
		||||
              deviceItem.id + "shebei"
 | 
			
		||||
            );
 | 
			
		||||
            if (!graphic) {
 | 
			
		||||
              graphic = new mars3d.graphic.BillboardEntity({
 | 
			
		||||
                id: deviceItem.id + "shebei",
 | 
			
		||||
                name: "设备",
 | 
			
		||||
                position: new mars3d.LngLatPoint(
 | 
			
		||||
                  deviceItem.lon,
 | 
			
		||||
                  deviceItem.lat,
 | 
			
		||||
                  0
 | 
			
		||||
                ),
 | 
			
		||||
                style: {
 | 
			
		||||
                  image: require(`@/assets/img/device/deviceIcon/${deviceItem.icon}.png`),
 | 
			
		||||
                  scale: 1,
 | 
			
		||||
                  horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
 | 
			
		||||
                  verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
 | 
			
		||||
                  clampToGround: true,
 | 
			
		||||
                  scaleByDistance: true,
 | 
			
		||||
                  scaleByDistance_near: 100,
 | 
			
		||||
                  scaleByDistance_nearValue: 0.5
 | 
			
		||||
                }
 | 
			
		||||
              });
 | 
			
		||||
              console.log(graphic, "graphic");
 | 
			
		||||
              this.graphicLayer.addGraphic(graphic);
 | 
			
		||||
            }
 | 
			
		||||
          });
 | 
			
		||||
        }
 | 
			
		||||
      });
 | 
			
		||||
    },
 | 
			
		||||
    clearDraw() {
 | 
			
		||||
      if (this.graphics) {
 | 
			
		||||
        this.mapMars.removeLayer(this.graphics);
 | 
			
		||||
      // if (this.graphics) {
 | 
			
		||||
      //   this.mapMars.removeLayer(this.graphics);
 | 
			
		||||
      // }
 | 
			
		||||
      let graphiczhendi = this.mapMars.getLayerById("zhendi");
 | 
			
		||||
      console.log(graphiczhendi, "layer");
 | 
			
		||||
      if (graphiczhendi !== undefined) {
 | 
			
		||||
        this.mapMars.removeLayer(graphiczhendi);
 | 
			
		||||
      }
 | 
			
		||||
      if (this.graphicLayer) {
 | 
			
		||||
        this.graphicLayer.clear();
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -99,15 +99,14 @@ export default {
 | 
			
		|||
      deep: true,
 | 
			
		||||
      immediate: true,
 | 
			
		||||
      handler(newVal) {
 | 
			
		||||
        console.log("newVal1111", newVal);
 | 
			
		||||
        if (newVal) {
 | 
			
		||||
          this.jsonData = JSON.parse(newVal);
 | 
			
		||||
          if (this.jsonData) {
 | 
			
		||||
            if (newVal) {
 | 
			
		||||
            this.showRegion(this.jsonData, "geojson");
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    mapData: {
 | 
			
		||||
      deep: true,
 | 
			
		||||
| 
						 | 
				
			
			@ -121,9 +120,9 @@ export default {
 | 
			
		|||
            this.lonData = "";
 | 
			
		||||
            this.latData = "";
 | 
			
		||||
          }
 | 
			
		||||
          console.log("mapData发生变化", newVal);
 | 
			
		||||
          if (this.lonData && this.latData) {
 | 
			
		||||
            if (this.lonData && this.latData) {
 | 
			
		||||
              this.isinputDisabled = true;
 | 
			
		||||
              this.deviceDrid(this.lonData, this.latData);
 | 
			
		||||
            }
 | 
			
		||||
          }
 | 
			
		||||
| 
						 | 
				
			
			@ -217,6 +216,7 @@ export default {
 | 
			
		|||
      }
 | 
			
		||||
      if (this.lonData && this.latData) {
 | 
			
		||||
        this.deviceDrid(this.lonData, this.latData);
 | 
			
		||||
        this.isinputDisabled = true;
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    lineClicks(val) {
 | 
			
		||||
| 
						 | 
				
			
			@ -328,13 +328,13 @@ export default {
 | 
			
		|||
      }
 | 
			
		||||
    },
 | 
			
		||||
    clearDraw() {
 | 
			
		||||
      console.log(111);
 | 
			
		||||
      this.isinputDisabled = false;
 | 
			
		||||
      if (this.graphicLayer) {
 | 
			
		||||
        this.graphicLayer.clear();
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    toGeoJSON() {
 | 
			
		||||
      console.log(this.graphicLayer, this.typeOf, "this.graphicLayer");
 | 
			
		||||
      if (this.typeOf === "pointP") {
 | 
			
		||||
        return this.graphicLayer.toGeoJSON({ noAlt: true });
 | 
			
		||||
      } else {
 | 
			
		||||
| 
						 | 
				
			
			@ -347,6 +347,7 @@ export default {
 | 
			
		|||
      }
 | 
			
		||||
    },
 | 
			
		||||
    showRegion(value, type) {
 | 
			
		||||
      this.clearDraw();
 | 
			
		||||
      let geojson = {};
 | 
			
		||||
      if (type === "uploadGeojson") {
 | 
			
		||||
        if (this.graphicLayer._graphicList.length === 0) {
 | 
			
		||||
| 
						 | 
				
			
			@ -387,7 +388,6 @@ export default {
 | 
			
		|||
      }
 | 
			
		||||
    },
 | 
			
		||||
    deviceDrid(lon, lat) {
 | 
			
		||||
      // this.clearDraw();
 | 
			
		||||
      console.log(this.graphicLayer, "this.graphicLayer");
 | 
			
		||||
      if (this.graphicLayer) {
 | 
			
		||||
        this.graphicLayer.eachGraphic((item) => {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -11,6 +11,8 @@
 | 
			
		|||
      :border="border"
 | 
			
		||||
      @selection-change="handleSelectionChange"
 | 
			
		||||
    >
 | 
			
		||||
      <el-table-column label="序号" type="index" align="center" width="50">
 | 
			
		||||
      </el-table-column>
 | 
			
		||||
      <el-table-column type="expand" v-if="isShowExpand">
 | 
			
		||||
        <template slot-scope="scope">
 | 
			
		||||
          <slot name="expand" :rowData="scope"></slot>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,5 +1,6 @@
 | 
			
		|||
<template>
 | 
			
		||||
  <div class="left-sidebar" :class="{ contracted: isContracted }">
 | 
			
		||||
    <div class="alarm-border warningAnimatBox" v-if="iswarning"></div>
 | 
			
		||||
    <div class="stats">
 | 
			
		||||
      <div class="stat-item" v-for="(item, index) in warningDay" :key="index">
 | 
			
		||||
        <div class="stat-name">{{ item.name }}</div>
 | 
			
		||||
| 
						 | 
				
			
			@ -309,6 +310,28 @@ export default {
 | 
			
		|||
.left-sidebar.contracted {
 | 
			
		||||
  transform: translateX(-90%);
 | 
			
		||||
}
 | 
			
		||||
.alarm-border {
 | 
			
		||||
  position: fixed;
 | 
			
		||||
  top: 0;
 | 
			
		||||
  left: 0;
 | 
			
		||||
  right: 0;
 | 
			
		||||
  bottom: 0;
 | 
			
		||||
  border: 1px solid transparent;
 | 
			
		||||
  pointer-events: none; /* Prevent interaction with the border */
 | 
			
		||||
  z-index: 9999; /* Ensure it appears above other elements */
 | 
			
		||||
  &.warningAnimatBox {
 | 
			
		||||
    animation: greenanimated-shadow 2s infinite;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
@keyframes greenanimated-shadow {
 | 
			
		||||
  0% {
 | 
			
		||||
    box-shadow: 0 0 0 0 #ff0000 inset;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  85% {
 | 
			
		||||
    box-shadow: 0px 0px 100px 0px #ff0000 inset;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
.audio-prompt {
 | 
			
		||||
  position: fixed;
 | 
			
		||||
  top: 0;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -54,6 +54,7 @@
 | 
			
		|||
        <el-dropdown trigger="click">
 | 
			
		||||
          <img :size="30" src="@/assets/img/menu/iconUser.png" />
 | 
			
		||||
          <el-dropdown-menu slot="dropdown">
 | 
			
		||||
            <el-dropdown-item>{{ userName }}</el-dropdown-item>
 | 
			
		||||
            <el-dropdown-item @click.native="passClick">
 | 
			
		||||
              修改密码
 | 
			
		||||
            </el-dropdown-item>
 | 
			
		||||
| 
						 | 
				
			
			@ -222,7 +223,8 @@ export default {
 | 
			
		|||
      ],
 | 
			
		||||
      fromItem: {},
 | 
			
		||||
      dialog: false,
 | 
			
		||||
      isAdmins: false
 | 
			
		||||
      isAdmins: false,
 | 
			
		||||
      userName: ""
 | 
			
		||||
    };
 | 
			
		||||
  },
 | 
			
		||||
  created() {},
 | 
			
		||||
| 
						 | 
				
			
			@ -238,6 +240,7 @@ export default {
 | 
			
		|||
    this.isAdmins = JSON.parse(localStorage.getItem("isAdmin"));
 | 
			
		||||
    this.updateTime();
 | 
			
		||||
    setInterval(this.updateTime, 1000); // 每秒更新一次时间
 | 
			
		||||
    this.userName = localStorage.getItem("userName");
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    updateTime() {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -156,7 +156,7 @@ export function allDevices(options, type, show) {
 | 
			
		|||
                  : require(`@/assets/img/device/deviceIcon/${deviceItem.icon}-offline.png`)
 | 
			
		||||
              }
 | 
			
		||||
            });
 | 
			
		||||
            if (deviceItem.icon === "9") {
 | 
			
		||||
            if (deviceItem.isMove) {
 | 
			
		||||
              graphic.setOptions({
 | 
			
		||||
                position: new mars3d.LngLatPoint(
 | 
			
		||||
                  deviceItem.lon,
 | 
			
		||||
| 
						 | 
				
			
			@ -205,7 +205,7 @@ export function allDevices(options, type, show) {
 | 
			
		|||
              : require(`@/assets/img/device/deviceIcon/${item.icon}-offline.png`)
 | 
			
		||||
          }
 | 
			
		||||
        });
 | 
			
		||||
        if (deviceItem.icon === "9") {
 | 
			
		||||
        if (deviceItem.isMove) {
 | 
			
		||||
          graphic.setOptions({
 | 
			
		||||
            position: new mars3d.LngLatPoint(deviceItem.lon, deviceItem.lat, 0)
 | 
			
		||||
          });
 | 
			
		||||
| 
						 | 
				
			
			@ -318,21 +318,21 @@ function bindLayerPopup(graphicLayer, graphic) {
 | 
			
		|||
          }" /></div>
 | 
			
		||||
          <div class="device-type">
 | 
			
		||||
            <div class="txt">
 | 
			
		||||
              <p class="p1">经度</p>
 | 
			
		||||
              <p class="p2">${attr.lon}</p>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="txt">
 | 
			
		||||
              <p class="p1">IP</p>
 | 
			
		||||
              <p class="p2">${attr.ip}</p>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="txt">
 | 
			
		||||
              <p class="p1">纬度</p>
 | 
			
		||||
              <p class="p2">${attr.lat}</p>
 | 
			
		||||
              <p class="p1">序列号</p>
 | 
			
		||||
              <p class="p2">${attr.deviceSN}</p>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="txt">
 | 
			
		||||
              <p class="p1">状态</p>
 | 
			
		||||
              <p class="p2">${attr.isOnline ? "在线" : "离线"}</p>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="txt">
 | 
			
		||||
              <p class="p1">位置</p>
 | 
			
		||||
              <p class="p2">${attr.lon}</p>
 | 
			
		||||
            </div>
 | 
			
		||||
            <div class="txt">
 | 
			
		||||
              <p class="p1">纬度</p>
 | 
			
		||||
              <p class="p2">${attr.lat}</p>
 | 
			
		||||
            </div>
 | 
			
		||||
          </div>
 | 
			
		||||
        </div>
 | 
			
		||||
      `,
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -34,6 +34,26 @@ export default {
 | 
			
		|||
    this.timeInterval = setInterval(() => {
 | 
			
		||||
      this.initHomeData();
 | 
			
		||||
    }, 2000);
 | 
			
		||||
    // setInterval(() => {
 | 
			
		||||
    //   this.signaData = [
 | 
			
		||||
    //     {
 | 
			
		||||
    //       serial_number: "123456",
 | 
			
		||||
    //       times: "2023-01-01 00:00:00",
 | 
			
		||||
    //       DeviceName: "无人机1",
 | 
			
		||||
    //       freq: "24GHz",
 | 
			
		||||
    //       device_type: "无人机",
 | 
			
		||||
    //       drone_lat: 39.9042,
 | 
			
		||||
    //       drone_lon: 116.4074,
 | 
			
		||||
    //       height: 100,
 | 
			
		||||
    //       speed: 10,
 | 
			
		||||
    //       heading: 90,
 | 
			
		||||
    //       battery: 80,
 | 
			
		||||
    //       online: true,
 | 
			
		||||
    //       BatchId: "123456",
 | 
			
		||||
    //       alarmLevel: 1
 | 
			
		||||
    //     }
 | 
			
		||||
    //   ];
 | 
			
		||||
    // }, 1000);
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    initHomeData() {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -145,8 +145,8 @@ export default {
 | 
			
		|||
      tableData: [],
 | 
			
		||||
      coloumData: [
 | 
			
		||||
        {
 | 
			
		||||
          label: "防区名称",
 | 
			
		||||
          prop: "positionName",
 | 
			
		||||
          label: "事件类型",
 | 
			
		||||
          prop: "flyStatus",
 | 
			
		||||
          align: "center"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
| 
						 | 
				
			
			@ -154,21 +154,21 @@ export default {
 | 
			
		|||
          prop: "duration",
 | 
			
		||||
          align: "center"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          label: "机型",
 | 
			
		||||
          prop: "model",
 | 
			
		||||
          align: "center"
 | 
			
		||||
        },
 | 
			
		||||
        // {
 | 
			
		||||
        //   label: "机型",
 | 
			
		||||
        //   prop: "model",
 | 
			
		||||
        //   align: "center"
 | 
			
		||||
        // },
 | 
			
		||||
        {
 | 
			
		||||
          label: "SN码",
 | 
			
		||||
          prop: "sn",
 | 
			
		||||
          align: "center"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          label: "频段",
 | 
			
		||||
          prop: "frequency",
 | 
			
		||||
          align: "center"
 | 
			
		||||
        },
 | 
			
		||||
        // {
 | 
			
		||||
        //   label: "频段",
 | 
			
		||||
        //   prop: "frequency",
 | 
			
		||||
        //   align: "center"
 | 
			
		||||
        // },
 | 
			
		||||
        {
 | 
			
		||||
          label: "开始时间",
 | 
			
		||||
          prop: "startTime",
 | 
			
		||||
| 
						 | 
				
			
			@ -236,21 +236,41 @@ export default {
 | 
			
		|||
        alarmList(params).then((res) => {
 | 
			
		||||
          if (res.code === 0) {
 | 
			
		||||
            this.tableData = res.data.items.map((item) => {
 | 
			
		||||
              const { isWhitelist, duration, frequency, ...rest } = item;
 | 
			
		||||
              const {
 | 
			
		||||
                isWhitelist,
 | 
			
		||||
                duration,
 | 
			
		||||
                frequency,
 | 
			
		||||
                model,
 | 
			
		||||
                alarmLevel,
 | 
			
		||||
                ...rest
 | 
			
		||||
              } = JSON.parse(JSON.stringify(item));
 | 
			
		||||
 | 
			
		||||
              let flyStatus = "";
 | 
			
		||||
              if (isWhitelist) {
 | 
			
		||||
                flyStatus = "白飞";
 | 
			
		||||
              } else {
 | 
			
		||||
                flyStatus = alarmLevel === 0 ? "防区外" : "入侵";
 | 
			
		||||
              }
 | 
			
		||||
              if (model === "O4") {
 | 
			
		||||
                flyStatus = "入侵";
 | 
			
		||||
              }
 | 
			
		||||
              return {
 | 
			
		||||
                ...rest,
 | 
			
		||||
                isattacked: item.isattacked ? "是" : "否",
 | 
			
		||||
                model: model,
 | 
			
		||||
                isattacked: item.isattacked ? "是" : "否", // 保留你原本的逻辑
 | 
			
		||||
                duration: String(item.duration),
 | 
			
		||||
                frequency: String(item.frequency)
 | 
			
		||||
                frequency: String(item.frequency),
 | 
			
		||||
                flyStatus // 新增字段
 | 
			
		||||
              };
 | 
			
		||||
            });
 | 
			
		||||
 | 
			
		||||
            this.paginationParam.total = res.data.total;
 | 
			
		||||
          }
 | 
			
		||||
        });
 | 
			
		||||
      }
 | 
			
		||||
      console.log(value);
 | 
			
		||||
    },
 | 
			
		||||
    // 停用 编辑 删除
 | 
			
		||||
    // 轨迹回放
 | 
			
		||||
    handleClick(value, type) {
 | 
			
		||||
      let params = { batchid: value.batchId };
 | 
			
		||||
      if (type === "playback") {
 | 
			
		||||
| 
						 | 
				
			
			@ -258,51 +278,7 @@ export default {
 | 
			
		|||
        alarmDetail(params).then((res) => {
 | 
			
		||||
          if (res.code === 0) {
 | 
			
		||||
            console.log(res.data, "res.data");
 | 
			
		||||
            this.historyList = res.data;
 | 
			
		||||
            // this.historyList = [
 | 
			
		||||
            //   {
 | 
			
		||||
            //     lon: 109.056198,
 | 
			
		||||
            //     lat: 38.674443,
 | 
			
		||||
            //     alt: 0,
 | 
			
		||||
            //     createTime: "2025-03-30 03:44:21",
 | 
			
		||||
            //     alarmLevel: 0
 | 
			
		||||
            //   },
 | 
			
		||||
            //   {
 | 
			
		||||
            //     lon: 109.081454,
 | 
			
		||||
            //     lat: 38.664766,
 | 
			
		||||
            //     alt: 0,
 | 
			
		||||
            //     createTime: "2025-03-30 03:44:22",
 | 
			
		||||
            //     alarmLevel: 0
 | 
			
		||||
            //   },
 | 
			
		||||
            //   {
 | 
			
		||||
            //     lon: 109.101687,
 | 
			
		||||
            //     lat: 38.632524,
 | 
			
		||||
            //     alt: 0,
 | 
			
		||||
            //     createTime: "2025-03-30 03:44:25",
 | 
			
		||||
            //     alarmLevel: 0
 | 
			
		||||
            //   },
 | 
			
		||||
            //   {
 | 
			
		||||
            //     lon: 109.063063,
 | 
			
		||||
            //     lat: 38.622878,
 | 
			
		||||
            //     alt: 0,
 | 
			
		||||
            //     createTime: "2025-03-30 03:44:30",
 | 
			
		||||
            //     alarmLevel: 0
 | 
			
		||||
            //   },
 | 
			
		||||
            //   {
 | 
			
		||||
            //     lon: 109.016034,
 | 
			
		||||
            //     lat: 38.635138,
 | 
			
		||||
            //     alt: 0,
 | 
			
		||||
            //     createTime: "2025-03-30 03:44:35",
 | 
			
		||||
            //     alarmLevel: 0
 | 
			
		||||
            //   },
 | 
			
		||||
            //   {
 | 
			
		||||
            //     lon: 108.991419,
 | 
			
		||||
            //     lat: 38.659515,
 | 
			
		||||
            //     alt: 0,
 | 
			
		||||
            //     createTime: "2025-03-30 03:44:38",
 | 
			
		||||
            //     alarmLevel: 0
 | 
			
		||||
            //   }
 | 
			
		||||
            // ];
 | 
			
		||||
            this.historyList = [value, res.data];
 | 
			
		||||
          }
 | 
			
		||||
        });
 | 
			
		||||
        this.title = "轨迹回放";
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -69,8 +69,8 @@ export default {
 | 
			
		|||
              return item;
 | 
			
		||||
            });
 | 
			
		||||
            res.data.model.map((item) => {
 | 
			
		||||
              item.name = item.model.slice(0, 10); // 截断 model 字段的值,使其不超过 10 个字符
 | 
			
		||||
              if (item.model.length > 10) {
 | 
			
		||||
              item.name = item.model.slice(0, 20); // 截断 model 字段的值,使其不超过 10 个字符
 | 
			
		||||
              if (item.model.length > 20) {
 | 
			
		||||
                item.name += "..."; // 如果原始 model 字段的值超过了 10 个字符,则在末尾添加省略号
 | 
			
		||||
              }
 | 
			
		||||
              item.value = item.count;
 | 
			
		||||
| 
						 | 
				
			
			@ -93,8 +93,10 @@ export default {
 | 
			
		|||
            const seriesData = sortedDateData.map((item) => item.count);
 | 
			
		||||
 | 
			
		||||
            const sortedDateData1 = res.data.time.sort(
 | 
			
		||||
              (a, b) => new Date(a.key) - new Date(b.key)
 | 
			
		||||
              (a, b) => Number(a.key) - Number(b.key)
 | 
			
		||||
            );
 | 
			
		||||
 | 
			
		||||
            console.log(sortedDateData1, "sortedDateData1");
 | 
			
		||||
            const xAxisData1 = sortedDateData1.map((item) => item.key);
 | 
			
		||||
            const seriesData1 = sortedDateData1.map((item) => item.count);
 | 
			
		||||
            this.chartData = res.data;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -144,7 +144,7 @@ export default {
 | 
			
		|||
          ]
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          label: "icon",
 | 
			
		||||
          label: "设备类型",
 | 
			
		||||
          type: "selectImg",
 | 
			
		||||
          model: "icon",
 | 
			
		||||
          options: [
 | 
			
		||||
| 
						 | 
				
			
			@ -219,11 +219,11 @@ export default {
 | 
			
		|||
          model: "ip",
 | 
			
		||||
          rules: [{ required: true, message: "请输入设备名称" }]
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          label: "机型",
 | 
			
		||||
          type: "input",
 | 
			
		||||
          model: "model"
 | 
			
		||||
        },
 | 
			
		||||
        // {
 | 
			
		||||
        //   label: "机型",
 | 
			
		||||
        //   type: "input",
 | 
			
		||||
        //   model: "model"
 | 
			
		||||
        // },
 | 
			
		||||
        {
 | 
			
		||||
          label: "账号",
 | 
			
		||||
          type: "input",
 | 
			
		||||
| 
						 | 
				
			
			@ -270,16 +270,21 @@ export default {
 | 
			
		|||
          label: "设备SN",
 | 
			
		||||
          prop: "deviceSN"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          type: "text",
 | 
			
		||||
          label: "ip",
 | 
			
		||||
          prop: "ip"
 | 
			
		||||
        },
 | 
			
		||||
        // {
 | 
			
		||||
        //   type: "text",
 | 
			
		||||
        //   label: "ip",
 | 
			
		||||
        //   prop: "ip"
 | 
			
		||||
        // },
 | 
			
		||||
        {
 | 
			
		||||
          type: "text",
 | 
			
		||||
          label: "关联防区",
 | 
			
		||||
          prop: "positionName"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          type: "text",
 | 
			
		||||
          label: "设备状态",
 | 
			
		||||
          prop: "online"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          type: "text",
 | 
			
		||||
          label: "安装地址",
 | 
			
		||||
| 
						 | 
				
			
			@ -462,7 +467,10 @@ export default {
 | 
			
		|||
        params.pageSize = this.paginationParam.size;
 | 
			
		||||
        deviceList(params).then((res) => {
 | 
			
		||||
          if (res.code === 0) {
 | 
			
		||||
            this.tableData = res.data.items;
 | 
			
		||||
            this.tableData = res.data.items.map((item) => {
 | 
			
		||||
              item.online = item.online === true ? "在线" : "离线";
 | 
			
		||||
              return item;
 | 
			
		||||
            });
 | 
			
		||||
            this.paginationParam.total = res.data.total;
 | 
			
		||||
          }
 | 
			
		||||
        });
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -123,7 +123,7 @@ export default {
 | 
			
		|||
          model: "address"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          label: "防区",
 | 
			
		||||
          label: "* 防区",
 | 
			
		||||
          type: "marsMapmap",
 | 
			
		||||
          model: "polygon"
 | 
			
		||||
        },
 | 
			
		||||
| 
						 | 
				
			
			@ -216,9 +216,9 @@ export default {
 | 
			
		|||
    },
 | 
			
		||||
    // 确定按钮
 | 
			
		||||
    determine(value) {
 | 
			
		||||
      let params = {};
 | 
			
		||||
      params = value;
 | 
			
		||||
      let params = { ...value };
 | 
			
		||||
      console.log(params, "params");
 | 
			
		||||
      if (params.geoJson.coordinates.length !== 0) {
 | 
			
		||||
        params.regionJson = JSON.stringify(params.geoJson);
 | 
			
		||||
 | 
			
		||||
        params.lon = params.center[0];
 | 
			
		||||
| 
						 | 
				
			
			@ -234,6 +234,8 @@ export default {
 | 
			
		|||
                if (res.code === 0) {
 | 
			
		||||
                  this.$message.success("新增成功");
 | 
			
		||||
                  this.headdenForm({}, "search");
 | 
			
		||||
                } else {
 | 
			
		||||
                  this.$message.error(res.msg);
 | 
			
		||||
                }
 | 
			
		||||
              })
 | 
			
		||||
              .catch((err) => {
 | 
			
		||||
| 
						 | 
				
			
			@ -244,6 +246,8 @@ export default {
 | 
			
		|||
              if (res.code === 0) {
 | 
			
		||||
                this.$message.success("编辑成功");
 | 
			
		||||
                this.headdenForm({}, "search");
 | 
			
		||||
              } else {
 | 
			
		||||
                this.$message.error(res.msg);
 | 
			
		||||
              }
 | 
			
		||||
            });
 | 
			
		||||
          }
 | 
			
		||||
| 
						 | 
				
			
			@ -251,6 +255,9 @@ export default {
 | 
			
		|||
        } else {
 | 
			
		||||
          this.$message.error("请选择地图上的经纬度");
 | 
			
		||||
        }
 | 
			
		||||
      } else {
 | 
			
		||||
        this.$message.error("请绘制地图上的防区");
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    // 新增 搜索
 | 
			
		||||
    headdenForm(value, type) {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -36,6 +36,9 @@
 | 
			
		|||
        @changePage="handlePageChange"
 | 
			
		||||
        @selectionChange="handleSelectionChange"
 | 
			
		||||
      >
 | 
			
		||||
        <template #whitTime="{ data }">
 | 
			
		||||
          {{ data.createTime }} - {{ data.endTime }}
 | 
			
		||||
        </template>
 | 
			
		||||
        <template #operate="{ data }">
 | 
			
		||||
          <el-link
 | 
			
		||||
            type="primary"
 | 
			
		||||
| 
						 | 
				
			
			@ -52,6 +55,9 @@
 | 
			
		|||
            删除
 | 
			
		||||
          </el-link>
 | 
			
		||||
        </template>
 | 
			
		||||
        <template #mark="{ data }">
 | 
			
		||||
          {{ data.mark }}
 | 
			
		||||
        </template>
 | 
			
		||||
      </my-table>
 | 
			
		||||
    </div>
 | 
			
		||||
    <el-drawer
 | 
			
		||||
| 
						 | 
				
			
			@ -103,34 +109,60 @@ export default {
 | 
			
		|||
      coloumData: [
 | 
			
		||||
        {
 | 
			
		||||
          type: "text",
 | 
			
		||||
          label: "sn",
 | 
			
		||||
          prop: "sn"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          type: "text",
 | 
			
		||||
          label: "是否全天",
 | 
			
		||||
          prop: "allDay"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          type: "text",
 | 
			
		||||
          label: "所属单位",
 | 
			
		||||
          prop: "company"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          type: "text",
 | 
			
		||||
          label: "机型",
 | 
			
		||||
          label: "型号",
 | 
			
		||||
          prop: "model"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          type: "text",
 | 
			
		||||
          label: "备注",
 | 
			
		||||
          prop: "mark"
 | 
			
		||||
          label: "序列号",
 | 
			
		||||
          prop: "sn"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          type: "text",
 | 
			
		||||
          label: "开放防区",
 | 
			
		||||
          prop: "positionName"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          type: "text",
 | 
			
		||||
          label: "开始时间",
 | 
			
		||||
          prop: "startTime"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          type: "text",
 | 
			
		||||
          label: "结束时间",
 | 
			
		||||
          prop: "endTime"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          type: "text",
 | 
			
		||||
          label: "创建时间",
 | 
			
		||||
          prop: "createTime"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          type: "text",
 | 
			
		||||
          label: "创建人",
 | 
			
		||||
          prop: "createBy"
 | 
			
		||||
        },
 | 
			
		||||
        // {
 | 
			
		||||
        //   type: "text",
 | 
			
		||||
        //   label: "是否全天",
 | 
			
		||||
        //   prop: "allDay"
 | 
			
		||||
        // },
 | 
			
		||||
        // {
 | 
			
		||||
        //   slot: "whitTime",
 | 
			
		||||
        //   label: "白名单生效的起止日期"
 | 
			
		||||
        // },
 | 
			
		||||
        {
 | 
			
		||||
          type: "text",
 | 
			
		||||
          label: "状态",
 | 
			
		||||
          prop: "status"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          slot: "operate",
 | 
			
		||||
          label: "操作",
 | 
			
		||||
          width: 250,
 | 
			
		||||
          fixed: "right"
 | 
			
		||||
          label: "操作"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          slot: "mark",
 | 
			
		||||
          label: "备注"
 | 
			
		||||
        }
 | 
			
		||||
      ],
 | 
			
		||||
      paginationParam: {
 | 
			
		||||
| 
						 | 
				
			
			@ -152,17 +184,24 @@ export default {
 | 
			
		|||
          model: "model",
 | 
			
		||||
          rules: [{ required: true, message: "请输入机型" }]
 | 
			
		||||
        },
 | 
			
		||||
        // {
 | 
			
		||||
        //   label: "是否全天",
 | 
			
		||||
        //   type: "select",
 | 
			
		||||
        //   model: "allDay",
 | 
			
		||||
        //   options: [
 | 
			
		||||
        //     { label: "是", key: "0" },
 | 
			
		||||
        //     { label: "否", key: "1" }
 | 
			
		||||
        //   ],
 | 
			
		||||
        //   rules: [
 | 
			
		||||
        //     { required: true, message: "请选择是否全天", trigger: "change" }
 | 
			
		||||
        //   ]
 | 
			
		||||
        // },
 | 
			
		||||
        {
 | 
			
		||||
          label: "是否全天",
 | 
			
		||||
          type: "select",
 | 
			
		||||
          model: "allDay",
 | 
			
		||||
          options: [
 | 
			
		||||
            { label: "是", key: "0" },
 | 
			
		||||
            { label: "否", key: "1" }
 | 
			
		||||
          ],
 | 
			
		||||
          rules: [
 | 
			
		||||
            { required: true, message: "请选择是否全天", trigger: "change" }
 | 
			
		||||
          ]
 | 
			
		||||
          label: "时间日期",
 | 
			
		||||
          type: "datetimerange",
 | 
			
		||||
          model: "date",
 | 
			
		||||
          format: "yyyy-MM-dd HH:mm:ss",
 | 
			
		||||
          rules: [{ required: true, message: "请选择时间日期" }]
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          label: "关联防区",
 | 
			
		||||
| 
						 | 
				
			
			@ -178,7 +217,8 @@ export default {
 | 
			
		|||
        {
 | 
			
		||||
          label: "所属单位",
 | 
			
		||||
          type: "input",
 | 
			
		||||
          model: "company"
 | 
			
		||||
          model: "company",
 | 
			
		||||
          rules: [{ required: true, message: "请输入所属单位" }]
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          label: "备注",
 | 
			
		||||
| 
						 | 
				
			
			@ -187,12 +227,6 @@ export default {
 | 
			
		|||
          rowsHeight: 15,
 | 
			
		||||
          placeholder: "请输入内容",
 | 
			
		||||
          model: "mark"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          label: "时间日期",
 | 
			
		||||
          type: "datetimerange",
 | 
			
		||||
          model: "date",
 | 
			
		||||
          format: "yyyy-MM-dd HH:mm:ss"
 | 
			
		||||
        }
 | 
			
		||||
      ],
 | 
			
		||||
      drawer: false,
 | 
			
		||||
| 
						 | 
				
			
			@ -254,6 +288,7 @@ export default {
 | 
			
		|||
      let params = {};
 | 
			
		||||
      if (type === "search") {
 | 
			
		||||
        params = JSON.parse(JSON.stringify(this.$refs.myForm.ruleForm));
 | 
			
		||||
        this.initPosition();
 | 
			
		||||
        if (params.dateRange) {
 | 
			
		||||
          params.startTime = params.dateRange[0];
 | 
			
		||||
          params.endTime = params.dateRange[1];
 | 
			
		||||
| 
						 | 
				
			
			@ -268,10 +303,46 @@ export default {
 | 
			
		|||
        whitListList(params).then((res) => {
 | 
			
		||||
          if (res.code === 0) {
 | 
			
		||||
            this.tableData = res.data.items.map((item) => {
 | 
			
		||||
              return item.allDay
 | 
			
		||||
                ? { ...item, allDay: "是" }
 | 
			
		||||
                : { ...item, allDay: "否" };
 | 
			
		||||
              let status = "待生效";
 | 
			
		||||
 | 
			
		||||
              if (item.allDay) {
 | 
			
		||||
                // 全天候直接生效
 | 
			
		||||
                status = "生效中";
 | 
			
		||||
              } else {
 | 
			
		||||
                const now = new Date();
 | 
			
		||||
                const startTime = item.startTime
 | 
			
		||||
                  ? new Date(item.startTime)
 | 
			
		||||
                  : null;
 | 
			
		||||
                const endTime = item.endTime ? new Date(item.endTime) : null;
 | 
			
		||||
 | 
			
		||||
                if (startTime && endTime) {
 | 
			
		||||
                  if (now < startTime) {
 | 
			
		||||
                    status = "待生效";
 | 
			
		||||
                  } else if (now >= startTime && now <= endTime) {
 | 
			
		||||
                    status = "生效中";
 | 
			
		||||
                  } else if (now > endTime) {
 | 
			
		||||
                    status = "失效";
 | 
			
		||||
                  }
 | 
			
		||||
                }
 | 
			
		||||
              }
 | 
			
		||||
 | 
			
		||||
              // 匹配 positionName
 | 
			
		||||
              let matchedNames = [];
 | 
			
		||||
              if (item.positionIds && item.positionIds.length > 0) {
 | 
			
		||||
                matchedNames = this.PositionList.filter((m) =>
 | 
			
		||||
                  item.positionIds.includes(m.id)
 | 
			
		||||
                ).map((m) => m.name);
 | 
			
		||||
              }
 | 
			
		||||
 | 
			
		||||
              return {
 | 
			
		||||
                ...item,
 | 
			
		||||
                allDay: item.allDay ? "是" : "否",
 | 
			
		||||
                status,
 | 
			
		||||
                positionName:
 | 
			
		||||
                  matchedNames.length > 0 ? matchedNames.join("、") : ""
 | 
			
		||||
              };
 | 
			
		||||
            });
 | 
			
		||||
 | 
			
		||||
            this.paginationParam.total = res.data.total;
 | 
			
		||||
          }
 | 
			
		||||
        });
 | 
			
		||||
| 
						 | 
				
			
			@ -280,7 +351,7 @@ export default {
 | 
			
		|||
        this.title = "新增白名单";
 | 
			
		||||
        this.initPosition();
 | 
			
		||||
        this.fromItem = {};
 | 
			
		||||
        this.formDrawerList = this.getDefaultFormDrawerList();
 | 
			
		||||
        // this.formDrawerList = this.getDefaultFormDrawerList();
 | 
			
		||||
        this.isEditFlag = false;
 | 
			
		||||
        this.drawer = true;
 | 
			
		||||
      }
 | 
			
		||||
| 
						 | 
				
			
			@ -297,12 +368,12 @@ export default {
 | 
			
		|||
      // params.positionName = position ? position.name : "";
 | 
			
		||||
 | 
			
		||||
      // 处理 allDay 和时间
 | 
			
		||||
      if (params.allDay === "0") {
 | 
			
		||||
        params.allDay = true;
 | 
			
		||||
        params.startTime = "";
 | 
			
		||||
        params.endTime = "";
 | 
			
		||||
      } else {
 | 
			
		||||
        params.allDay = false;
 | 
			
		||||
      // 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];
 | 
			
		||||
| 
						 | 
				
			
			@ -310,7 +381,9 @@ export default {
 | 
			
		|||
        params.startTime = "";
 | 
			
		||||
        params.endTime = "";
 | 
			
		||||
      }
 | 
			
		||||
      }
 | 
			
		||||
      // }
 | 
			
		||||
      params.allDay = false;
 | 
			
		||||
      params.createBy = localStorage.getItem("userName");
 | 
			
		||||
      delete params.date; // 移除 date 字段
 | 
			
		||||
      const apiCall = this.isType === "add" ? whitListAdd : whitListUpdate;
 | 
			
		||||
      apiCall(params)
 | 
			
		||||
| 
						 | 
				
			
			@ -340,11 +413,12 @@ export default {
 | 
			
		|||
        this.isType = "edit";
 | 
			
		||||
        this.title = "编辑白名单";
 | 
			
		||||
        this.isEditFlag = false;
 | 
			
		||||
        this.fromItem = { ...value };
 | 
			
		||||
        this.fromItem.positionId = value.positionIds;
 | 
			
		||||
        this.formDrawerList = this.getDefaultFormDrawerList();
 | 
			
		||||
        value.allDay = value.allDay ? "0" : "1";
 | 
			
		||||
        this.changeSelect(value.allDay); // 根据 allDay 调整时间日期字段
 | 
			
		||||
        this.fromItem = JSON.parse(JSON.stringify(value));
 | 
			
		||||
        this.fromItem.positionId = this.fromItem.positionIds;
 | 
			
		||||
        // this.formDrawerList = this.getDefaultFormDrawerList();
 | 
			
		||||
        // this.fromItem.allDay = this.fromItem.allDay ? "0" : "1";
 | 
			
		||||
        this.fromItem.date = [this.fromItem.startTime, this.fromItem.endTime];
 | 
			
		||||
        // this.changeSelect(this.fromItem.allDay); // 根据 allDay 调整时间日期字段
 | 
			
		||||
        this.initPosition();
 | 
			
		||||
        this.drawer = true;
 | 
			
		||||
      } else if (type === "delete") {
 | 
			
		||||
| 
						 | 
				
			
			@ -390,64 +464,6 @@ export default {
 | 
			
		|||
    },
 | 
			
		||||
    handleSelectionChange(value) {
 | 
			
		||||
      console.log(value);
 | 
			
		||||
    }, // 初始化 formDrawerList 的公共方法
 | 
			
		||||
    getDefaultFormDrawerList() {
 | 
			
		||||
      return [
 | 
			
		||||
        {
 | 
			
		||||
          label: "sn",
 | 
			
		||||
          type: "input",
 | 
			
		||||
          model: "sn",
 | 
			
		||||
          rules: [{ required: true, message: "请输入sn" }]
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          label: "机型",
 | 
			
		||||
          type: "input",
 | 
			
		||||
          model: "model",
 | 
			
		||||
          rules: [{ required: true, message: "请输入机型" }]
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          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,
 | 
			
		||||
          multiple: true,
 | 
			
		||||
          rules: [
 | 
			
		||||
            { required: true, message: "请选择关联防区", trigger: "change" }
 | 
			
		||||
          ]
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          label: "所属单位",
 | 
			
		||||
          type: "input",
 | 
			
		||||
          model: "company"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          label: "备注",
 | 
			
		||||
          type: "textarea",
 | 
			
		||||
          maxLenght: 100,
 | 
			
		||||
          rowsHeight: 15,
 | 
			
		||||
          placeholder: "请输入内容",
 | 
			
		||||
          model: "mark"
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
          label: "时间日期",
 | 
			
		||||
          type: "datetimerange",
 | 
			
		||||
          model: "date",
 | 
			
		||||
          format: "yyyy-MM-dd HH:mm:ss"
 | 
			
		||||
        }
 | 
			
		||||
      ];
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
};
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue