功能上传

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.2",
+    "@turf/turf": "^7.3.1",
     "animate.css": "^4.1.1",
     "cesium": "^1.132.0",
     "cesium-wind": "^1.0.4",

src/main.js

@@ -5,6 +5,7 @@ import App from './App.vue'
 import router from './router'
 import store from "./store/index";
 import * as echarts from "echarts";
+import * as turf from '@turf/turf'
 // import "echarts-gl";
 
 import ElementPlus from 'element-plus'
@@ -23,5 +24,6 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 }
 
 app.config.globalProperties.$echarts = echarts;
+app.config.globalProperties.$turf = turf;
 
 app.mount('#app')

src/views/cesiumComponents/drawPlot.vue

@@ -3,7 +3,11 @@
         <div class="mapBox">
             <div id="cesiumContainer" style="width: 100%; height: 100vh"></div>
         </div>
-        <drawPlotView @switchChange="switchChange" />
+        <drawPlotView ref="drawPlotView" :polygonGeoJSON="polygonGeoJSON" :lineGeoJSON="lineGeoJSON"
+         :pointGeoJSON="pointGeoJSON" @useGeoJson="useGeoJson" @switchChange="switchChange" 
+         @saveChange="saveChange" @deleteNewDraw="deleteNewDraw" @editDrawConfirm="editDrawConfirm"
+         @showEntrty="showEntrty" @warnDraw="warnDraw"
+         />
     </div>
     
 </template>
@@ -14,6 +18,7 @@ import "../../Cesium/Widgets/widgets.css";
 
 import basicGeoJson from "../../assets/geoJson/basic.json";
 import bw from "@/assets/windimgs/fanSvg/bw.svg";
+import benchmark from "@/assets/cesiumImg/benchmark.png";
 
 import fjMYLonLatJson from "../fjLonLatJson/fj_MY.json"; //迈越风电场
 import fjWHZLonLatJson from "../fjLonLatJson/fj_WHZ.json"; //京能旺海庄
@@ -21,6 +26,10 @@ import fjYPLLonLatJson from "../fjLonLatJson/fj_YPL.json"; //京能营盘梁
 import fjSMSLonLatJson from "../fjLonLatJson/fj_SMS.json"; //京能苏木山
 
 import drawPlotView from "./drawPlotView.vue";
+import dayjs from "dayjs";
+import { ElNotification } from 'element-plus'
+// import booleanPointInPolygon from '@turf/boolean-point-in-polygon'
+// import { point, polygon } from '@turf/helpers'
 
 export default {
     components: {
@@ -29,7 +38,9 @@ export default {
     data() {
         return {
             bw,
+            benchmark,
             selectMethod: "",
+            dataSource: [],
             restLatLon: [
                 {
                 longitude: 114.48789,
@@ -52,6 +63,10 @@ export default {
                 name: "JNSMS",
                 },
             ],
+            handlerAction: null,
+            polygonGeoJSON: [],
+            lineGeoJSON: [],
+            pointGeoJSON: []
         }
     },
     mounted() {
@@ -59,8 +74,9 @@ export default {
     },
     methods: {
         async initCesium() {
-            const box = document.getElementById("cesiumContainer");
-            const viewer = new Cesium.Viewer(box, {
+            Cesium.Ion.defaultAccessToken =
+        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwYTQwNDk3MC05YTZkLTQ2ZTEtODc0MS1lZTFkYjFlOTFmNmQiLCJpZCI6MTcyNDQ1LCJpYXQiOjE3NTQ4ODA4MzF9.KnhENYiHxNwTkhTWRA-lHqG59coLVT2FsIyOru2TV3E";
+            const cesiumOptions = {
                 geocoder: false, // 地址搜索控件
                 homeButton: false, // 返回地图初始位置控件
                 infoBox: false, // 地图默认的信息控件
@@ -74,7 +90,9 @@ export default {
                 vrButton: false,
                 selectionIndicator: false,
                 shouldAnimate: true,
-            });
+            };
+
+            const viewer = new Cesium.Viewer("cesiumContainer", cesiumOptions);
 
             const imageryProvider = new Cesium.UrlTemplateImageryProvider({
                 maximumLevel: 18,
@@ -260,11 +278,116 @@ export default {
                 duration: 3.0,
             });
         },
-
+        saveChange() {
+            // 移除鼠标事件处理器
+            if (this.handlerAction) {
+                this.handlerAction.destroy();
+            }
+        },
+        warnDraw(polygon, point) {
+          // 判断是否在围栏内
+          this.addPersonPosition(this.viewer, point)
+          const inside = this.$turf.booleanPointInPolygon(point, polygon);
+          if (!inside) {
+            ElNotification({
+              title: '警告',
+              message: '有人员越界，已记录',
+              type: 'error',
+            })
+          }
+        },
+        //创建区域与人员位置
+        addPersonPosition(viewer, point) {
+          // 创建闪烁点实体
+            const position = Cesium.Cartesian3.fromDegrees(point.coordinates[0], point.coordinates[1]);
+            const blinkingPoint = viewer.entities.add({
+                position: position,
+                point: {
+                    pixelSize: 10,
+                    color: Cesium.Color.RED,
+                    outlineColor: Cesium.Color.WHITE,
+                    outlineWidth: 2,
+                    // 使用 CallbackProperty 实现闪烁
+                    show: new Cesium.CallbackProperty(function(time) {
+                        // 获取当前时间的秒数（可自定义频率）
+                        const seconds = Cesium.JulianDate.secondsDifference(time, Cesium.JulianDate.fromIso8601('2000-01-01T00:00:00Z'));
+                        // 每 1 秒闪烁一次（可调整）
+                        return Math.floor(seconds * 2) % 2 === 0; // 2 表示每秒闪烁 2 次（频率）
+                    }, false)
+                },
+            });
+            setTimeout(function () {
+              viewer.entities.remove(blinkingPoint);
+            }, 3000);
+        },
+        deleteNewDraw(entity) {
+          this.viewer.entities.remove(entity);
+        },
         switchChange(val) {
+            this.polygonGeoJSON = []
+            this.lineGeoJSON = []
+            this.pointGeoJSON = []
             this.selectMethod = val.name
-            this.drawShapeFn(this.viewer, this.selectMethod)
+            // 移除鼠标事件处理器
+            if (this.handlerAction) {
+                this.handlerAction.destroy();
+            }
+            if (val.name !== 'point') {
+                this.drawShapeFn(this.viewer, this.selectMethod)
+            } else {
+                this.drawPointFn(this.viewer, this.selectMethod)
+            }
         },
+        // 使用保存的电子区域
+        async useGeoJson(geoJson) {
+            await new Cesium.GeoJsonDataSource.load(geoJson, {
+                stroke: Cesium.Color.WHITE,     // 边框颜色
+                fill: Cesium.Color.WHITE.withAlpha(0.4), // 填充颜色（带透明度）
+                strokeWidth: 3,
+                // clampToGround: true           // 贴地（需要地形或开启 globe.depthTestAgainstTerrain）
+            }).then(dataSource =>{
+                this.dataSource.push(dataSource);
+                this.viewer.dataSources.add(dataSource);
+            })
+        },
+        showEntrty(data) {
+          if (data.newdraw) {
+            // flashEntity(data.entity)
+            data.entity.show = false; // 看是否消失
+            setTimeout(() => data.entity.show = true, 100);
+          }
+          function flashEntity(entity, viewer) {
+            if (!entity || !entity.show) return;
+
+            let count = 0;
+            const totalFlashes = 2; // 闪两下（一次闪 = 隐藏+显示）
+            const interval = 80;   // 每次状态切换间隔（毫秒）
+
+            const originalShow = entity.show
+
+            const flash = () => {
+                if (count < totalFlashes * 2) {
+                    entity.show = !entity.show
+                    count++;
+                    setTimeout(flash, interval);
+                } else {
+                    // 闪烁结束后恢复原始状态（可选）
+                    entity.show = originalShow;
+                }
+            };
+            flash();
+          }
+        },
+        removeGeoJsonLayer() {
+            if (this.dataSource && this.dataSource.length > 0) {
+                this.dataSource.forEach(it => {
+                    this.viewer.dataSources.remove(it)
+                })
+                this.dataSource = []; // 清空引用
+            }
+        },
+
+        // 绘制电子围栏与路线
         drawShapeFn(viewer, value) {
             viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
                 Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK,
@@ -274,7 +397,7 @@ export default {
                     position: worldPosition,
                     point: {
                     color: Cesium.Color.WHITE,
-                    pixelSize: 5,
+                    pixelSize: 1,
                     heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                     },
                 });
@@ -282,7 +405,7 @@ export default {
             }
             let drawingMode = value
             let that = this
-            function drawShape(positionData) {
+            function drawShape(positionData, type) {
                 let shape;
                 if (drawingMode === "line") {
                     shape = viewer.entities.add({
@@ -292,7 +415,7 @@ export default {
                             width: 3,
                         },
                     });
-                    that.getDrawlineValue(shape)
+                    that.getDrawlineValue(shape, type)
 
                 } else if (drawingMode === "polygon") {
                     shape = viewer.entities.add({
@@ -303,10 +426,11 @@ export default {
                             ),
                         },
                     });
-                    that.getDrawPolygonValue(shape)
+                    that.getDrawPolygonValue(shape, type)
                 }
                 return shape;
             }
+            
             let activeShapePoints = [];
             let activeShape;
             let floatingPoint;
@@ -327,7 +451,7 @@ export default {
                         }
                         return activeShapePoints;
                     }, false);
-                    activeShape = drawShape(dynamicPositions);
+                    activeShape = drawShape(dynamicPositions, "norecord");
                     }
                     activeShapePoints.push(earthPosition);
                     createPoint(earthPosition);
@@ -358,8 +482,10 @@ export default {
             handler.setInputAction(function (event) {
                 terminateShape();
             }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
+
+            this.handlerAction = handler
         },
-        getDrawlineValue(shape) {
+        getDrawlineValue(shape, type) {
             // 获取到线的数据
             // 获取 Cartesian3 数组
             const cartesianPositions = shape.polyline.positions.getValue(Cesium.JulianDate.now());
@@ -382,10 +508,22 @@ export default {
                 },
                 properties: { name: "巡检路线" }
             };
-            console.log("lineGeoJSON=====>>>>", lineGeoJSON);
+            console.log("lineGeoJSON=====>>>>", JSON.stringify(lineGeoJSON));
+            console.log("shape=====>>>>", shape);
 
+            if (!type) {
+              this.lineGeoJSON.push(JSON.stringify(lineGeoJSON))
+              let obj = {
+                newdraw: true,
+                type: "line",
+                name: `巡检路线-${dayjs().format('YYYYMMDDHHmmss')}`,
+                data: JSON.stringify(lineGeoJSON),
+                entity: shape
+              }
+              this.$refs.drawPlotView.drawTableData.push(obj)
+            }
         },
-        getDrawPolygonValue(shape) {
+        getDrawPolygonValue(shape, type) {
             // 获取到面的数据
             // 获取 hierarchy 对象
             const hierarchy = shape.polygon.hierarchy.getValue(Cesium.JulianDate.now());
@@ -412,8 +550,8 @@ export default {
                     };
                 })
             );
-            console.log('Outer ring:', outerLonLat);
-            console.log('Holes:', holeArrays);
+            console.log('Outer ring:', JSON.stringify(outerLonLat));
+            console.log('Holes:', JSON.stringify(holeArrays));
 
             // 将面的数据转换为geoJson数据
             const coords = [outerLonLat.map(p => [p.lon, p.lat])]; // 外环
@@ -429,8 +567,93 @@ export default {
                 },
                 properties: { name: "电子围栏与区域" }
             };
-            console.log('polygonGeoJSON:', polygonGeoJSON);
-        }
+            console.log('polygonGeoJSON:', JSON.stringify(polygonGeoJSON));
+            if (!type) {
+              this.polygonGeoJSON.push(JSON.stringify(polygonGeoJSON))
+              let obj = {
+                newdraw: true,
+                type: "polygon",
+                name: `电子围栏与区域-${dayjs().format('YYYYMMDDHHmmss')}`,
+                data: JSON.stringify(polygonGeoJSON),
+                entity: shape
+              }
+              this.$refs.drawPlotView.drawTableData.push(obj)
+            }
+            
+        },
+        drawPointFn(viewer, value) {
+            let that = this;
+            // 获取 scene 和 ellipsoid
+            var scene = viewer.scene;
+            var labels = viewer.scene.primitives.add(new Cesium.LabelCollection());
+
+            // 创建 ScreenSpaceEventHandler
+            var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
+
+            // 监听左键点击事件
+            handler.setInputAction(async (click) => {
+                // 获取点击位置的笛卡尔坐标
+                var position = click.position;
+                if (!position) return;
+
+                // 使用 globe.pick 获取包含地形高度的坐标
+                var ray = viewer.camera.getPickRay(position);
+                var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
+
+                if (cartesian) {
+                // 转换为地理坐标
+                var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+                var longitude = Cesium.Math.toDegrees(cartographic.longitude);
+                var latitude = Cesium.Math.toDegrees(cartographic.latitude);
+                var height = cartographic.height;
+
+                const position = Cesium.Cartesian3.fromDegrees(longitude, latitude);
+                const blinkingPoint = viewer.entities.add({
+                    position: position,
+                    billboard: {
+                        image: this.benchmark, // 也可以是 SVG 路径，如 'icon.svg'
+                        scale: 0.8,
+                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                        // 模型贴地
+                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+                    },
+                });
+                
+                let pointObj = {
+                    longitude, latitude
+                } 
+                this.pointGeoJSON.push(pointObj)
+
+                let obj = {
+                  newdraw: true,
+                  type: "point",
+                  name: `事件标记与协同-${dayjs().format('YYYYMMDDHHmmss')}`,
+                  data: JSON.stringify(pointObj),
+                  message: "",
+                  entity: blinkingPoint
+                }
+                console.log("pointGeoJSON===>>>", pointObj)
+                this.$refs.drawPlotView.drawTableData.push(obj)
+                }
+            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+
+            this.handlerAction = handler
+        },
+        editDrawConfirm(message, drawObj) {
+          let msg = message.replace(/(.{7})/g, '$1\n');
+            drawObj.entity.label = new Cesium.LabelGraphics({
+              text: msg,
+              font: '14px sans-serif',
+              fillColor: Cesium.Color.WHITE,
+              outlineColor: Cesium.Color.BLACK,
+              outlineWidth: 2,
+              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+              pixelOffset: new Cesium.Cartesian2(70, 0), // 偏移，避免遮挡
+              // verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+              horizontalOrigin: Cesium.HorizontalOrigin.CENTER
+          });
+        },
     }
 }
 </script>

src/views/cesiumComponents/drawPlotJson.json

@@ -0,0 +1,57 @@
+{
+    "data": [
+        {
+            "name": "电子围栏与区域-20251223152555",
+            "data": 
+                {
+                    "type": "Feature",
+                    "geometry": {
+                        "type": "Polygon",
+                        "coordinates": [
+                        [
+                            [
+                            114.43479050159458,
+                            35.34774400280971
+                            ],
+                            [
+                            114.48266116486637,
+                            35.30638801049682
+                            ],
+                            [
+                            114.54101032889018,
+                            35.33614577638194
+                            ],
+                            [
+                            114.43977999731351,
+                            35.352794604460584
+                            ],
+                            [
+                            114.4350465665738,
+                            35.347677732980976
+                            ],
+                            [
+                            114.43479050159458,
+                            35.34774400280971
+                            ]
+                        ]
+                        ]
+                    },
+                    "properties": {
+                        "name": "电子围栏与区域"
+                    }
+                }
+        }
+    ],
+    "pointData": [
+      [114.44504812927383, 35.34398948274729],
+      [114.50718406607443, 35.31220003461273],
+      [114.45373790801115, 35.33714455530235],
+      [114.4622943981815, 35.33134965381616],
+      [114.46017632985476, 35.31763188915675],
+      [114.48455958120522, 35.33813492896421],
+      [114.50553382545617, 35.33717158623014],
+      [114.49724884755778, 35.33086452115104],
+      [114.48685714806523, 35.31554536267135],
+      [114.47105940330064, 35.35172006103022]
+    ]
+}

src/views/cesiumComponents/drawPlotView.vue

@@ -8,14 +8,19 @@
                     <p class="label">返回</p>
                 </div>
             </aside>
-            <aside class="sidebar-left-top btnms2" v-if="showDraw">
-                <div class="stat-block-lefttop">
-                    <p class="label">保存</p>
+            <aside class="sidebar-left-top btnms2" v-if="!showDraw">
+                <div class="stat-block-lefttop" @click="addDraw">
+                    <p class="label">新增</p>
                 </div>
             </aside>
             <aside class="sidebar-left-top btnms2" v-else>
-                <div class="stat-block-lefttop" @click="addDraw">
-                    <p class="label">新增</p>
+                <div class="stat-block-lefttop" @click="saveDraw">
+                    <p class="label">保存</p>
+                </div>
+            </aside>
+            <aside class="sidebar-left-top btnms2">
+                <div class="stat-block-lefttop" @click="warnDraw">
+                    <p class="label">测试</p>
                 </div>
             </aside>
         </div>
@@ -41,22 +46,140 @@
                 </el-select>
             </aside>
         </div>
+        <div class="panel attention" v-else>
+            <p style="margin-top: 6px">
+              <span style="color: #fff;font-weight: bold">电子围栏与区域：</span>
+              <span>20项</span>
+            </p>
+            <p style="margin-top: 6px">
+              <span style="color: #fff;font-weight: bold">巡检路线：</span>
+              <span>20项</span>
+            </p>
+            <p style="margin-top: 6px">
+              <span style="color: #fff;font-weight: bold">事件标记与协同：</span>
+              <span>20项</span>
+            </p>
+        </div>
         <div class="panel sidebar-left-bot reportTable">
-            <el-table :data="tableData" style="width: 100%">
-                <el-table-column prop="date" align="center" label="名称" />
-                <el-table-column prop="name" align="center" label="操作" width="100" />
+          <div style="display: flex;flex-grow: 1;">
+            <el-select
+              class="drawSel"
+              v-model="windvalue"
+              filterable
+              clearable
+              placeholder="选择筛选方式"
+              size="small"
+          >
+              <el-option
+              v-for="item in drawOption"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+              />
+          </el-select>
+          <el-date-picker
+            style="margin-right: 5px;"
+            v-model="tablePicker"
+            value-format="YYYY-MM-DD"
+            type="date"
+            placeholder="选择时间"
+            size="small"
+          />
+          <svg viewBox="0 0 1024 1024" width="3em" height="1.7em">
+            <path d="M458.496 843.776c-214.528 0-389.12-174.592-389.12-389.12s174.592-389.12 389.12-389.12 389.12 174.592 389.12 389.12-174.592 389.12-389.12 389.12z m0-716.8c-180.736 0-327.68 146.944-327.68 327.68s146.944 327.68 327.68 327.68 327.68-146.944 327.68-327.68-146.944-327.68-327.68-327.68z" fill="#ffffff" p-id="2600"></path><path d="M688.384 429.056c-13.568 0-26.112-8.96-29.696-22.784-20.736-78.08-82.688-137.984-161.28-156.16-16.64-3.84-26.88-20.224-23.04-36.864s20.224-26.88 36.864-23.04c101.12 23.296 180.224 100.096 206.848 200.192 4.352 16.384-5.376 33.28-21.76 37.632-2.56 0.768-5.12 1.024-7.936 1.024zM929.28 964.864c-7.424 0-14.848-2.56-20.736-8.192l-228.352-210.432c-12.544-11.52-13.312-30.976-1.792-43.52s30.976-13.312 43.52-1.792l228.352 210.432c12.544 11.52 13.312 30.976 1.792 43.52-6.144 6.656-14.336 9.984-22.784 9.984z" fill="#ffffff" p-id="2601">
+            </path>
+          </svg>
+          </div>
+          
+            <el-table :data="drawTableData" style="width: 100%;margin-top: 10px" max-height="68vh">
+                <el-table-column prop="name" align="center" label="名称">
+                    <template #default="scope">
+                      <div @click="showEntrty(scope.row)">
+                        <div v-if="scope.row.name.indexOf('-') > 0" style="cursor: pointer">
+                          <div style="font-size: 14px">
+                            {{
+                              scope.row.name.split("-")[0]
+                            }}
+                          </div>
+                          <div style="font-size: 12px">
+                            {{
+                              scope.row.name.split("-")[1]
+                            }}
+                          </div>
+                        </div>
+                        <span style="cursor: pointer" v-else>{{scope.row.name}}</span>
+                      </div>
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" label="操作" width="100">
+                    <template #default="scope">
+                        <div v-if="scope.row.newdraw" style="display: flex;justify-content: space-around;">
+                          <span style="color: #00e5ff;font-size: 12px;cursor:pointer" @click="editDraw(scope.row, scope.$index)">编辑</span>
+                          <span style="color: red;font-size: 12px;cursor:pointer" @click="deleteuseName(scope.row, scope.$index)">删除</span>
+                        </div>
+                        <div v-else style="display: flex;justify-content: space-around;">
+                          <span style="color: #00e5ff;font-size: 12px;cursor:pointer" @click="useGeoJson(scope.row)">使用</span>
+                          <span style="color: red;font-size: 12px;cursor:pointer" @click="deleteuseName(scope.row, scope.$index)">删除</span>
+                        </div>
+                    </template>
+                </el-table-column>
             </el-table>
         </div>
     </aside>
+
+
+    <el-dialog v-model="editDrawForm" title="编辑" width="500">
+      <el-form :model="form">
+        <el-form-item label="名称" label-width="70px">
+          <el-input v-model="form.name" autosize type="textarea" style="width: 80%" />
+        </el-form-item>
+        <el-form-item label="描述" label-width="70px" v-if="drawObj.type === 'point'">
+          <el-input v-model="form.message" autosize type="textarea" style="width: 80%" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="editDrawForm = false">取消</el-button>
+          <el-button type="primary" @click="editDrawConfirm">
+            确认
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-export default {
+import dataJson from "./drawPlotJson.json"
+import dayjs from "dayjs";
+import { point } from '@turf/turf';
 
+export default {
+  props: {
+    polygonGeoJSON: {
+        type: Array,
+        default: () => {
+            return [];
+        },
+    },
+    lineGeoJSON: {
+        type: Array,
+        default: () => {
+            return [];
+        },
+    },
+    pointGeoJSON: {
+        type: Array,
+        default: () => {
+            return [];
+        },
+    }
+  },
   data() {
     return {
       windvalue: "",
+      tablePicker: "",
+      drawTableData: [],
       drawOption: [
         {
           label: "电子围栏与区域",
@@ -74,20 +197,50 @@ export default {
           value: 3
         }
       ],
-      showDraw: false
+      showDraw: false,
+      drawName: "",
+      editDrawForm: false,
+      form: {
+        name: "",
+        message: ""
+      },
+      drawObj: {},
+      drawObjIndex: 0
     };
   },
-
   mounted() {
-    
+    this.tablePicker = dayjs().format('YYYY-MM-DD')
+    this.drawTableData = dataJson.data
   },
 
   methods: {
     addDraw() {
         this.showDraw = true
+        this.windvalue = ""
+    },
+    saveDraw() {
+        this.showDraw = false
+        this.$emit("saveChange", "");
+    },
+    warnDraw() {
+      setInterval(() => {
+        let polygon = {
+          type: "Polygon",
+          coordinates: dataJson.data[0].data.geometry.coordinates
+        };
+        let pointJson = dataJson.pointData[Math.floor(Math.random() * 10)]
+        const point = {
+          type: "Point",
+          coordinates: pointJson
+        };
+        this.$emit("warnDraw", polygon, point);
+        console.log("pointJson===>>>", pointJson)
+      }, 3000);
+      
     },
     switchWind(value) {
       let data = this.drawOption[value-1];
+      this.drawName = this.drawOption[value-1].name
       this.$emit("switchChange", data);
     },
     backStations() {
@@ -95,6 +248,35 @@ export default {
         path: "/",
       });
     },
+    showEntrty(row) {
+      this.$emit("showEntrty", row);
+    },
+    editDraw(row, index) {
+      this.editDrawForm = true
+      this.form = {
+        name: row.name,
+        message: ""
+      }
+      this.drawObj = row
+      this.drawObjIndex = index
+    },
+    useGeoJson(row) {
+        // this.$emit("useGeoJson", JSON.parse(row.data));
+        this.$emit("useGeoJson", row.data);
+    },
+    deleteuseName(row, index) {
+      if (row.newdraw) {
+        this.drawTableData.splice(index, 1)
+        this.$emit("deleteNewDraw", row.entity);
+      }
+    },
+    editDrawConfirm() {
+      this.drawTableData[this.drawObjIndex].name = this.form.name
+      this.editDrawForm = false
+      if (this.drawObj.type === 'point') {
+        this.$emit("editDrawConfirm", this.form.message, this.drawObj)
+      }
+    }
   },
 };
 </script>
@@ -114,7 +296,7 @@ export default {
   position: absolute;
   left: 20px;
   top: 50px;
-  width: 240px;
+  width: 320px;
 }
 .attention{
     margin-top: 10px;
@@ -147,7 +329,7 @@ export default {
   transition: background-color 0.3s ease, border-color 0.3s ease;
 }
 .sidebar-left-bot{
-    width: 300px;
+    width: 320px;
     margin-top: 20px;
     padding: 10px;
 }
@@ -167,7 +349,7 @@ export default {
 /* --- Right Sidebar --- */
 </style>
 <style lang="less">
-.windSty {
+.windSty, .drawSel {
   .el-select__wrapper {
     background: transparent !important;
     box-shadow: none;
@@ -181,6 +363,20 @@ export default {
     font-size: 12px;
   }
 }
+.drawSel{
+  margin-right: 5px;
+  .el-select__wrapper {
+    box-shadow: 0 0 0 1px #fff inset !important;
+  }
+}
+.addDrawname{
+    --el-input-placeholder-color: #fff !important;
+    .el-textarea__inner{
+        color: #fff;
+        background: transparent !important;
+        box-shadow: 0 0 0 1px #80848c inset !important;
+    }
+}
 .el-popper{
     .el-select-dropdown{
         .el-scrollbar{
@@ -202,6 +398,20 @@ export default {
     border: 1px solid rgba(20, 29, 51, 0.3);
 
 }
+.sidebar-left-bot{
+    .el-table{
+      --el-table-bg-color: #162a2e !important;
+    }
+    .el-input{
+      width: 100% !important;
+      .el-input__wrapper{
+        background: transparent !important;
+        .el-input__inner{
+          color: #fff;
+        }
+      }
+    }
+}
 </style>
 
 <style scoped>