添加监控点位标记

app/Admin/Controllers/MonitorModeController.php

@@ -6,12 +6,14 @@ use Slowlyo\OwlAdmin\Renderers\Page;
 use Slowlyo\OwlAdmin\Renderers\Form;
 use Slowlyo\OwlAdmin\Renderers\TableColumn;
 use Slowlyo\OwlAdmin\Renderers\TextControl;
+use Slowlyo\OwlAdmin\Renderers\SwitchControl;
 use Slowlyo\OwlAdmin\Controllers\AdminController;
 use App\Services\Admin\MonitorModeService;
 use App\Admin\Components;
 use App\Models\MonitorMode;
 use App\Models\Device;
 use App\Models\Keyword;
+use Illuminate\Http\Request;
 
 /**
  * @property MonitorModeService $service
@@ -35,16 +37,20 @@ class MonitorModeController extends AdminController
                 amis('button')->label(__('admin.reset'))->actionType('clear-and-submit'),
                 amis('submit')->label(__('admin.search'))->level('primary'),
             ]))
+            ->quickSaveItemApi(admin_url('quick-edit/monitor-modes/$id'))
             ->columns([
                 TableColumn::make()->name('id')->label('ID')->sortable(true),
 				TableColumn::make()->name('name')->label('名称'),
                 TableColumn::make()->name('type')->type('mapping')->map(MonitorMode::typeMap())->label('类型'),
+                TableColumn::make()->name('is_enable')->type('switch')->label(__('monitor-mode.is_enable'))->quickEdit(SwitchControl::make()->saveImmediately(true)->mode('inline')),
                 TableColumn::make()->name('tags')->type('mapping')->map(Keyword::tagsMap('monitor-mode-group'))->label('分组'),
 				TableColumn::make()->name('created_at')->label(__('admin.created_at'))->type('datetime')->sortable(true),
                 amisMake()->Operation()->label(__('admin.actions'))->buttons([
                     $this->setAboutDevice(),
                     $this->rowEditButton(true, 'lg'),
-                    $this->rowDeleteButton()
+                    $this->rowDeleteButton(),
+                    amisMake()->Button()->label('设置大屏位置')->level('link')->actionType('url')->blank(true)
+                        ->url(url('/monitor-mode-position').'/'.'${id}')
                 ]),
             ]);
 
@@ -248,4 +254,32 @@ class MonitorModeController extends AdminController
 
         return $this->autoResponse($result, __('admin.save'));
     }
+
+    public function setMonitorModePosition($id, Request $request){
+        $monitorMode = MonitorMode::find($id);
+        $x = $monitorMode?->position_x ?? 0;
+        $y = $monitorMode?->position_y ?? 0;
+        return view('monitor-mode-position', compact('id', 'x', 'y'));
+    }
+
+    public function saveMonitorModePosition(Request $request)
+    {
+        $id = $request->input('id', 0);
+        $positionX = $request->input('x', 0);
+        $positionY = $request->input('y', 0);
+        $monitorMode = MonitorMode::find($id);
+        if(!$monitorMode){
+            return response()->json(['code'=>1, 'msg'=> '非法请求']);
+        }
+        if($positionX <= 0 || $positionY <= 0){
+            return response()->json(['code'=>2, 'msg'=>'请点击地图，标记位置']);
+        }
+        $monitorMode->update([
+            'position_x'=> $positionX,
+            'position_y'=> $positionY
+        ]);
+        //直接关闭窗口
+        echo '<script>window.opener=null;window.close();</script>';
+        return ;
+    }
 }

app/Admin/routes.php

@@ -60,6 +60,7 @@ Route::group([
 
     //监测点位
     $router->resource('monitor-modes', \App\Admin\Controllers\MonitorModeController::class);
+    $router->post('quick-edit/monitor-modes/{monitor_mode}', [\App\Admin\Controllers\MonitorModeController::class, 'update']);
     $router->post('monitor-mode-save-devices', '\App\Admin\Controllers\MonitorModeController@saveDevices');
 
     //区域分类

app/Http/Resources/MonitorModeResource.php

@@ -17,7 +17,11 @@ class MonitorModeResource extends JsonResource
         return [
             'id' => $this->id,
             'type' => $this->type,
-            'name' => $this->name
+            'is_enable' => $this->is_enable,
+            'name' => $this->name,
+            'position_x'=> $this->position_x,
+            'position_y'=> $this->position_y,
+            'canvasbox'=> '1350,900',
         ];
     }
 }

app/Models/MonitorMode.php

@@ -13,7 +13,8 @@ class MonitorMode extends Model
     protected $fillable = [
         'name', 'type',
         'is_enable', 'sort', 'is_recommend',
-        'group_tags'
+        'group_tags',
+        'position_x', 'position_y'
     ];
 
     protected $appends = ['tags'];

database/migrations/2023_09_02_095922_add_map_info_to_monitor_modes_table.php

@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('monitor_modes', function (Blueprint $table) {
+            //
+            $table->decimal('position_x')->nullable()->comment('x轴位置');
+            $table->decimal('position_y')->nullable()->comment('y轴位置');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('monitor_modes', function (Blueprint $table) {
+            //
+            $table->dropColumn(['position_x', 'position_y']);
+        });
+    }
+};

lang/zh_CN/monitor-mode.php

@@ -0,0 +1,10 @@
+<?php
+
+return [
+    'id' => 'ID',
+    'created_at' => '创建时间',
+    'is_enable' => '显示',
+    'is_recommend' => '推荐',
+    'published_at' => '发布时间',
+    'sort' => '排序(倒序)',
+];

resources/views/monitor-mode-position.blade.php

@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html>
+
+  <head>
+    <meta charset="UTF-8">
+    <title>在地图上打标点</title>
+    <style>
+      /* html,body{
+        width: 100%;
+        height: 100%;
+      } */
+      canvas {
+        cursor: crosshair;
+        width:1350px;
+        height: 900px;
+      }
+
+    </style>
+    <script src="{{asset('/admin/js/uuidv4.min.js')}}"></script>
+  </head>
+
+  <body>
+    <canvas id="myCanvas"></canvas>
+    <div style="position: relative;top:-900px;left: 1360px;width: 100px;">
+        <form id='positionForm' action="{{url('monitor-mode-position/save')}}" method="post" enctype="multipart/form-data">
+            @csrf
+            <input type="hidden" name="id" value="{{$id}}">
+            <input type="hidden" name="x" id="x" value="{{$x}}">
+            <input type="hidden" name="y" id="y" value="{{$y}}">
+            <button type="submit" onclick="return submitXY(this.form)">保存</button>
+            <button onclick="script:window.close();">返回</button>
+        </form>
+    </div>
+    <script>
+      const canvas = document.getElementById("myCanvas");
+      const ctx = canvas.getContext("2d");
+      const sx = '{{$x}}';
+      const sy = '{{$y}}';
+
+      const map = new Image();
+      map.src = "/admin/dashboard-map.png";
+      map.onload = function () {
+        resizeCanvas();
+        drawMarkers();
+      };
+
+      const markerImage = new Image();
+      markerImage.src = "/admin/map-marker.png";
+      const markerRadius = 15;
+
+      const markers = [];
+
+      if(sx >0 && sy >0) {
+        markers.push({id: uuidv4(),
+            x:sx,
+            y:sy,
+          selected: false});
+      }
+
+      function addMarker(x, y) {
+        const marker = {
+          id: uuidv4(),
+          x,
+          y,
+          selected: false
+        };
+        markers.length = 0;
+        markers.push(marker);
+        document.getElementById("x").value = x;
+        document.getElementById("y").value = y;
+        console.log("新增", marker);
+        drawMarkers();
+      }
+
+      function drawMarkers() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        // 获取父容器的宽度和高度
+        const canvasWrapper = document.getElementById("myCanvas");
+        const canvasWrapperWidth = canvasWrapper.offsetWidth;
+        const canvasWrapperHeight = canvasWrapper.offsetHeight;
+        // 设置Canvas的大小为父容器的大小
+        canvas.width = canvasWrapperWidth;
+        canvas.height = canvasWrapperHeight;
+
+        // 绘制地图图片并调整大小以铺满Canvas
+        const scale = Math.max(canvas.width / map.width, canvas.height / map.height);
+        const newWidth = map.width * scale;
+        const newHeight = map.height * scale;
+        const offsetX = (canvas.width - newWidth) / 2;
+        const offsetY = (canvas.height - newHeight) / 2;
+        ctx.drawImage(map, offsetX, offsetY, newWidth, newHeight);
+
+        markers.forEach(marker => {
+          
+        //   if (marker.selected) {
+        //     ctx.beginPath();
+        //     ctx.arc(marker.x, marker.y, 15, 0, 8 * Math.PI);
+        //     ctx.strokeStyle = "red";
+        //     ctx.stroke();
+        //   }
+
+          ctx.drawImage(markerImage, marker.x - markerRadius, marker.y - markerRadius, markerRadius * 2, markerRadius * 2);
+        });
+      }
+
+      function resizeCanvas() {//初始化地图
+        drawMarkers();
+      }
+
+      window.addEventListener("resize", resizeCanvas);
+
+      let isDragging = false;
+      let dragIndex = -1;
+
+      canvas.addEventListener("mousedown", event => {
+        const x = event.offsetX;
+        const y = event.offsetY;
+
+        markers.forEach((marker, index) => {
+          if (x >= marker.x - markerRadius / 2 && x <= marker.x + markerRadius / 2 && y >= marker.y - markerRadius / 2 && y <= marker.y + markerRadius / 2) {
+            isDragging = true;
+            dragIndex = index;
+            markers[index].selected = true;
+          } else {
+            markers[index].selected = false;
+          }
+        });
+
+        if (!isDragging) {
+          addMarker(x, y);
+        }
+
+        drawMarkers();
+      });
+
+      canvas.addEventListener("mousemove", event => {
+        if (isDragging) {
+          const x = event.offsetX;
+          const y = event.offsetY;
+
+          markers[dragIndex].x = x;
+          markers[dragIndex].y = y;
+
+          drawMarkers();
+        }
+      });
+
+      canvas.addEventListener("mouseup", event => {
+        isDragging = false;
+        dragIndex = -1;
+      });
+
+      function submitXY(theform)
+      {
+        var ttx = document.getElementById("x").value;
+        var tty = document.getElementById("y").value;
+        if(ttx <=0 || tty <=0){
+            alert('请点击地图，标记位置');
+            return false;
+        }
+ 
+        var res = theform.submit();
+
+        if($res['code'] != undefined){
+            if($res['code'] > 0){
+                alert($res['msg']);
+                return false;
+            }
+        }
+        return false;
+      }
+    </script>
+  </body>
+
+</html>

routes/web.php

@@ -21,3 +21,6 @@ Route::redirect('/', '/admin', 302);
 
 $router->get('regions-position/{id}', [\App\Admin\Controllers\RegionController::class, 'setRegionPosition']);
 $router->post('regions-position/save', [\App\Admin\Controllers\RegionController::class, 'saveRegionPosition']);
+
+$router->get('monitor-mode-position/{id}', [\App\Admin\Controllers\MonitorModeController::class, 'setMonitorModePosition']);
+$router->post('monitor-mode-position/save', [\App\Admin\Controllers\MonitorModeController::class, 'saveMonitorModePosition']);