sctj-components 1.0.9 → 1.0.11

package/README.md

@@ -26,14 +26,8 @@ npm install vue@^3.2.0 element-plus@^2.2.0 @element-plus/icons-vue@^2.0.0
 # 使用图表组件时
 npm install echarts@^5.0.0
 
-# 使用 3D/BIM 组件时
-npm install three@^0.150.0
-
 # 使用地图组件时
 npm install @amap/amap-jsapi-loader@^1.0.0
-
-# 使用 SCTJYsyPlayer 萤石云播放器组件时
-npm install ezuikit-js@^8.1.0
 ```
 
 ### 第二步：引入组件库
@@ -74,8 +68,7 @@ import { SCTJDictTag, SCTJTable, SCTJSearch } from 'sctj-components'
 ```vue
 <template>
   <SCTJDictTag :options="dictOptions" :value="status" />
-  <sctj-table :data="tableData" />
-  <sctj-search :visible="visible" />
+  <sctj-search v-model:visible="showSearch" />
 </template>
 ```
 
@@ -83,47 +76,43 @@ import { SCTJDictTag, SCTJTable, SCTJSearch } from 'sctj-components'
 
 ### 基础组件
 - `SCTJDictTag` - 字典标签
-- `SCTJTreeSelect` - 树形选择器
-- `SCTJSvgIcon` - SVG 图标组件
+- `SCTJIcon` - SVG 图标组件
 
 ### 表单组件
 - `SCTJFileUpload` - 文件上传
 - `SCTJImageUpload` - 图片上传
 - `SCTJImagePreview` - 图片预览
 - `SCTJIconSelect` - 图标选择器
-- `SCTJSearch` - 搜索组件
 - `SCTJDateRangePicker` - 日期范围选择器
+- `SCTJTreeSelect` - 树形选择器
 
 ### 表格组件
 - `SCTJTable` - 表格组件
-- `SCTJTableContainer` - 表格容器（布局组件）
-- `SCTJTablePageContainer` - 表格页面容器
-- `SCTJTableTopActionContainer` - 表格顶部操作容器
 - `SCTJRightToolbar` - 右侧工具栏
 
 ### 布局组件
 - `SCTJBtnContainer` - 按钮容器
+- `SCTJSearch` - 搜索容器
+- `SCTJTablePageContainer` - 表格页面容器
 
 ### 图表组件
 - `SCTJBaseChart` - 基础图表
-- `SCTJCommonChart` - 通用图表
-- `SCTJPieChart` - 饼图
+- `SCTJCommonChart` - 通用图表(支持柱图、折线图)
+- `SCTJPieChart` - 饼图(支持饼图、环形图、玫瑰图)
 
 ### 播放器组件
 - `SCTJFlvPlayer` - FLV 播放器
-- `SCTJH5hkPlayer` - H5 海康播放器
-- `SCTJHelmetPlayer` - 头盔播放器
-- `SCTJYsyPlayer` - 萤石云播放器
+
 
 ### 其他组件
 - `SCTJIframe` - iframe 组件
 - `SCTJImportDialog` - 导入对话框
-- `SCTJDialogTable` - 对话框表格
+- `SCTJDialogTable` - 弹窗表格(支持弹窗选择)
 
 ### 地图组件
-- `SCTJMapViewer` - 地图查看器
-- `SCTJMapDrawingDialog` - 地图绘制对话框
-- `SCTJBusinessMapDrawingDialog` - 业务地图绘制对话框
+- `SCTJMapViewer` - 地图查看器(基于高德地图)
+- `SCTJMapDrawingDialog` - 地图绘制对话框(基于高德地图)
+- `SCTJBusinessMapDrawingDialog` - 业务地图绘制对话框(基于高德地图)
 
 ### Bim组件
 - `SCTJBimViewer` - Bim 查看器
@@ -186,6 +175,7 @@ const treeData = [
     :request="fetchTableData"
     :request-params="queryParams"
     row-key="id"
+    height='100%'
     :show-select="true"
     :show-index="true"
     @selection-change="handleSelectionChange"
@@ -221,7 +211,7 @@ const handleSelectionChange = (selection) => {
 </script>
 ```
 
-### SCTJSearch 搜索组件
+### SCTJSearch 搜索容器
 
 ```vue
 <template>
@@ -275,146 +265,6 @@ const handleDateChange = (val) => {
 </script>
 ```
 
-### SCTJH5hkPlayer 海康播放器
-
-> ⚠️ **前置准备**：使用此组件前，需要拷贝静态资源：
-> 1. 从 `node_modules/sctj-components/public/hkPlayerPlugin/` 目录（及其所有文件）拷贝到宿主项目的 `public/` 根目录
-> 2. 在宿主 `index.html` 中添加：`<script src="/hkPlayerPlugin/h5player.min.js" type="application/javascript"></script>`
-
-```vue
-<template>
-  <SCTJH5hkPlayer
-    :device-serial="deviceSerial"
-    :channel-no="channelNo"
-    :device-name="deviceName"
-    :channel-name="channelName"
-    :get-live-address="getLiveAddress"
-    :get-replay-address="getReplayAddress"
-    :download-certificate="downloadCertificate"
-  />
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { SCTJH5hkPlayer } from 'sctj-components'
-
-const deviceSerial = ref('your-device-serial')
-const channelNo = ref('1')
-const deviceName = ref('摄像头名称')
-const channelName = ref('通道名称')
-
-// 获取实时播放地址的函数，需要返回 Promise<{ code: number, data: { url: string }, msg?: string }>
-const getLiveAddress = async (params) => {
-  const response = await fetch('/api/camera/live', {
-    method: 'POST',
-    body: JSON.stringify(params)
-  })
-  return await response.json()
-}
-
-// 获取回放地址的函数，需要返回 Promise<{ code: number, data: { url: string }, msg?: string }>
-const getReplayAddress = async (params) => {
-  const response = await fetch('/api/camera/replay', {
-    method: 'POST',
-    body: JSON.stringify(params)
-  })
-  return await response.json()
-}
-
-// 下载证书的函数，需要返回 Promise
-const downloadCertificate = async (deviceSerial) => {
-  const response = await fetch(`/api/camera/certificate/${deviceSerial}`, {
-    method: 'GET'
-  })
-  return await response.blob()
-}
-</script>
-```
-
-### SCTJHelmetPlayer 头盔播放器
-
-```vue
-<template>
-  <SCTJHelmetPlayer
-    :device-id="deviceId"
-    :call-api="callApi"
-    :handle-streaming-api="handleStreamingApi"
-    :query-admin-sip-info-api="queryAdminSipInfoApi"
-  />
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { SCTJHelmetPlayer } from 'sctj-components'
-
-const deviceId = ref('your-device-id')
-
-// 发起通话的 API 函数，需要返回 Promise<{ status: boolean, sip_id?: string, msg?: string }>
-// 参数: { deviceId: string, v_type: number }
-const callApi = async (params) => {
-  const response = await fetch('/api/helmet/call', {
-    method: 'POST',
-    body: JSON.stringify(params)
-  })
-  return await response.json()
-}
-
-// 处理流媒体的 API 函数，需要返回 Promise<any>
-// 参数: { deviceId: string, isPush: number } (isPush: 1-开启, 0-停止)
-const handleStreamingApi = async (params) => {
-  const response = await fetch('/api/helmet/streaming', {
-    method: 'POST',
-    body: JSON.stringify(params)
-  })
-  return await response.json()
-}
-
-// 获取管理员 SIP 信息的 API 函数，需要返回 Promise<{ status: boolean, admin_info: { sip_info: any }, msg?: string }>
-const queryAdminSipInfoApi = async () => {
-  const response = await fetch('/api/helmet/sip-info')
-  return await response.json()
-}
-</script>
-```
-
-### SCTJYsyPlayer 萤石云播放器
-
-> ⚠️ **前置准备**：使用此组件前，需要安装依赖：
-> ```bash
-> npm install ezuikit-js@^8.1.0
-> ```
-
-```vue
-<template>
-  <SCTJYsyPlayer
-    :device-serial="deviceSerial"
-    :channel-no="channelNo"
-    :play-type="playType"
-    :start-time="startTime"
-    :end-time="endTime"
-    :get-ys-token="getYsToken"
-  />
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { SCTJYsyPlayer } from 'sctj-components'
-
-const deviceSerial = ref('your-device-serial')
-const channelNo = ref(1)
-const playType = ref(0) // 0-直播, 1-回放
-const startTime = ref('2023-01-01 12:00:00')
-const endTime = ref('2023-01-01 13:00:00')
-
-// 获取 Token 的函数，需要返回 Promise<{ code: number, data: { accessToken: string, expireTime: number }, msg?: string }>
-const getYsToken = async () => {
-  const response = await fetch('/api/threeController/getYsToken', {
-    method: 'GET'
-  })
-  return await response.json()
-}
-</script>
-```
 
 ### SCTJFileUpload 文件上传
 
@@ -453,7 +303,12 @@ const customUpload = async (options) => {
     method: 'POST',
     body: formData
   })
-  return await response.json()
+  options.onSuccess({
+      code:response.code,
+      fileName:response.name,
+      url:response.url,
+      msg:response.msg
+  });
 }
 
 const handleUploadSuccess = (response) => {
@@ -536,65 +391,19 @@ const handleIconSelected = (iconName) => {
 </script>
 ```
 
-### SCTJSvgIcon SVG 图标
+### SCTJIcon SVG 图标
 
 ```vue
 <template>
-  <SCTJSvgIcon icon-class="user" :color="'#409EFF'" />
+  <SCTJIcon icon-class="user" :color="'#409EFF'" />
 </template>
 
 <script setup>
-import { SCTJSvgIcon } from 'sctj-components'
+import { SCTJIcon } from 'sctj-components'
 </script>
 ```
 
-### SCTJTableContainer 表格容器
-
-```vue
-<template>
-  <SCTJTableContainer>
-    <SCTJTableTopActionContainer
-      v-model:show-search="showSearch"
-      :show-refresh="true"
-      @refresh="handleRefresh"
-    >
-      <template #left>
-        <el-button type="primary" @click="handleAdd">新增</el-button>
-      </template>
-    </SCTJTableTopActionContainer>
-    
-    <SCTJSearch v-model:visible="showSearch">
-      <!-- 搜索表单内容 -->
-    </SCTJSearch>
-    
-    <SCTJTable :request="fetchData" />
-  </SCTJTableContainer>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { 
-  SCTJTableContainer, 
-  SCTJTableTopActionContainer,
-  SCTJSearch,
-  SCTJTable 
-} from 'sctj-components'
-
-const showSearch = ref(true)
 
-const handleRefresh = () => {
-  // 刷新表格数据
-}
-
-const handleAdd = () => {
-  // 新增逻辑
-}
-
-const fetchData = async (params) => {
-  // 获取表格数据
-}
-</script>
-```
 
 ### SCTJRightToolbar 右侧工具栏
 
@@ -699,7 +508,7 @@ const seriesConfig = ref([
   {
     name: '销售额',
     type: 'bar',
-    dataKey: 'value'
+    prop: 'value'
   }
 ])
 </script>
@@ -793,6 +602,10 @@ const handleContextMenuClick = (key) => {
 
 ### SCTJDwgViewer DWG 查看器
 
+> ⚠️ **前置准备**：使用此组件前，需要拷贝静态资源：
+> 1. 从 `node_modules/sctj-components/public/BimfaceSDKLoader@latest-release.js` 文件拷贝到宿主项目的 `public/` 根目录
+> 2. 在宿主 `index.html` 中添加：`<script src="/BimfaceSDKLoader@latest-release.js" type="application/javascript" charset="utf-8"></script>`
+
 ```vue
 <template>
   <SCTJDwgViewer
@@ -843,27 +656,36 @@ const iframeUrl = ref('https://example.com')
 
 ```vue
 <template>
-  <el-button @click="dialogVisible = true">导入数据</el-button>
+  <el-button @click="handleImport">导入数据</el-button>
   <SCTJImportDialog
-    v-model:open="dialogVisible"
-    title="用户"
-    :upload-url="'/api/import/users'"
-    :template-title="'用户导入模板'"
-    :template-url="'/api/import/template/users'"
-    :show-check-box="true"
-    @success="handleImportSuccess"
-  />
+        :headers="{ Authorization: 'Bearer ' + getToken() }"
+        @loadSucccess="refreshTable"
+        v-bind="importConfig"
+        ref="importDialogRef"
+    />
 </template>
 
 <script setup>
+import {getToken} from "@/utils/auth";
 import { ref } from 'vue'
 import { SCTJImportDialog } from 'sctj-components'
 
-const dialogVisible = ref(false)
+const importConfig = reactive({
+  templateTitle: '作业设备工作区域模板',
+  templateUrl: `${import.meta.env.VITE_APP_BASE_API}/business/deviceWorkArea/importTemplate`,
+  uploadUrl: `${import.meta.env.VITE_APP_BASE_API}/business/deviceWorkArea/importData`,
+  showCheckBox: false,
+  title: "作业设备工作区域信息"
+})
+const refreshTable=()=>{
+  //导入成功后要做什么...
+}
 
-const handleImportSuccess = (response) => {
-  console.log('导入成功:', response)
-  dialogVisible.value = false
+const importDialogRef = ref(null)
+
+// 导入
+const handleImport = () => {
+  importDialogRef.value?.init()
 }
 </script>
 ```
@@ -872,77 +694,117 @@ const handleImportSuccess = (response) => {
 
 ```vue
 <template>
-  <el-button @click="dialogVisible = true">选择数据</el-button>
+  <el-button @click="open">选择数据</el-button>
   <SCTJDialogTable
-    v-model:open="dialogVisible"
-    title="选择用户"
-    :columns="columns"
-    :request="fetchUsers"
-    :select-options="{
-      show: true,
-      multiple: true,
-      valueKey: 'id',
-      reserveSelection: true
-    }"
-    :query-columns="queryColumns"
-    @confirm="handleConfirm"
-  />
+        v-model:select="addCarForm.vehicleManageList"
+        v-modal:value="addCarForm.vehicleManageListIds"
+        v-modal:names="addCarForm.vehicleManageListNames"
+        @change="selectChange"
+        :tableColumns="columns"
+        ref="addDialogTableRef"
+        :request="getList"
+        :selectOptions="{
+          show: true,//开启选择模式
+          multiple: true,// 是否复选
+          valueKey:  'id',// 要提取对象的值prop
+          nameKey:'licensePlate',// 要提取对象的中文prop
+          reserveSelection: true,// 是否翻页记忆
+        }"
+    />
 </template>
 
 <script setup>
 import { ref } from 'vue'
+import {getList} from "@/api/baseModule";
 import { SCTJDialogTable } from 'sctj-components'
 
-const dialogVisible = ref(false)
+const addDialogTableRef = ref(null)
 
-const columns = ref([
-  { prop: 'name', label: '姓名' },
-  { prop: 'age', label: '年龄' },
-  { prop: 'email', label: '邮箱' }
-])
-
-const queryColumns = ref([
-  {
-    prop: 'name',
-    label: '姓名',
-    query: {
-      type: 'input',
-      queryKey: 'name',
-      placeholder: '请输入姓名'
-    }
-  }
-])
+const addCarForm = reactive({
+  projectId: '',
+  vehicleManageList: [],
+  vehicleManageListIds:'',
+  vehicleManageListNames:''
+})
 
-const fetchUsers = async (params) => {
-  const response = await fetch('/api/users', {
-    method: 'POST',
-    body: JSON.stringify(params)
-  })
-  return await response.json()
+const columns = ref([
+        {
+            label: '车牌号',
+            prop: 'licensePlate',
+            minWidth: 170,
+            query: {
+                type: 'input',
+                placeholder: '请输入车牌号'
+            }
+        },
+        {
+            label: '设备类型',
+            prop: 'vehicleType',
+            minWidth: 80,
+            dict: dz_work_device_type.value,// 字典数据源
+            query: {
+                type: 'select',//查询组件
+                placeholder: '请选择设备类型',
+                queryKey:"vehicleType",//查询字段
+                data: dz_work_device_type.value//下拉选择数据源
+            }
+        },
+        {
+            label: '所属项目',
+            prop: 'projectName',
+            minWidth: 170,
+        },
+        {
+            label: '所属工区',
+            prop: 'areaName',
+            minWidth: 170,
+        },
+        {
+            label: '入场时间',
+            prop: 'entryTime',
+            minWidth: 170,
+        }
+    ])
+// 打开选择弹窗
+const open = async (row) => {
+  addDialogTableRef.value?.open({
+    title: '选择数据',
+    open: true,
+  }, {projectId: row.projectId})
 }
 
-const handleConfirm = (selectedRows) => {
+
+const selectChange = (selectedRows) => {
   console.log('选中的行:', selectedRows)
-  dialogVisible.value = false
 }
 </script>
 ```
 
 ### SCTJMapViewer 地图查看器
 
+> ⚠️ **前置准备**
+> 1. npm install @amap/amap-jsapi-loader@^1.0.0; 
+> 2. 在 `main.js` 文件中添加window._AMapSecurityConfig = {securityJsCode: 替换为你的Web端密钥};
+
+
 ```vue
 <template>
   <SCTJMapViewer
-    :height="'600px'"
-    :width="'100%'"
-    :center="[116.397428, 39.90923]"
-    :static-markers="staticMarkers"
-    :dynamic-markers="dynamicMarkers"
+    :amapKey="amapKey"
+    :center="center" 
+    :auto-fit-view="false" 
+    changeMapType 
+    ref="mapViewerRef"
+    :staticMarkers="staticMarkers" 
+    :dynamicMarkers="dynamicMarkers" 
     :polylines="polylines"
-    :polygons="polygons"
+    :polygons="polygons" 
+    :circles="circles" 
     :legend-config="legendConfig"
-    :change-map-type="true"
-    @marker-click="handleMarkerClick"
+    view-mode="3D"
+    mapStyle="amap://styles/darkblue" 
+    @loaded="maploaded" 
+    @overlay-click="handleOverlayClick"
   />
 </template>
 
@@ -950,105 +812,238 @@ const handleConfirm = (selectedRows) => {
 import { ref } from 'vue'
 import { SCTJMapViewer } from 'sctj-components'
 
+const center=ref("104.122744,30.668903")
+const amapKey='你的web端key'
+
 const staticMarkers = ref([
   {
-    position: [116.397428, 39.90923],
-    title: '标记点1',
-    icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'
+    id:'1',
+    position: [116.397428, 39.90923],//或者"116.397428, 39.90923"
+    icon: getAssetURL(`cockpit/'invasionDevice.png'`),
+    label: `入侵检测仪`,//显示的名称
+    blink: true,// 是否闪烁
+    textLabelDefaultStyle: {//label样式
+      color: '#FF0000' 
+    },
+    type: 'invasionDevice',//业务类型，联动legendConfig使用，点击显示图例显示隐藏
   }
 ])
 
 const dynamicMarkers = ref([
   {
     id: '1',
-    position: [116.407428, 39.91923],
-    title: '动态标记点',
-    icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png'
+    position: [116.407428, 39.91923],//或者"116.397428, 39.90923"
+    label: `川AXXXX(在线)`,
+    icon: getAssetURL(`cockpit/vehicle.png`),
+    blink: false,
+    textLabelDefaultStyle: {
+       color:  '#00FF00'
+    }，
+    type: 'workDevice',
   }
 ])
 
 const polylines = ref([
   {
-    path: [
-      [116.397428, 39.90923],
-      [116.407428, 39.91923]
-    ],
-    strokeColor: '#3366FF',
-    strokeWeight: 3
+    path: ["104.12034,30.66797","104.125375,30.669477"],
+    dirImg: getAssetURL(`cockpit/yyxTielu.png`),
+    strokeOpacity: 0.5,
+    strokeColor: "#fff",// 完全不透明
+    strokeWeight: 6,
+    outlineColor: '#fff',
+    borderWeight: 2,
+    lineJoin: 'miter',
+    lineCap: 'butt',
+    type: 'yyx'
   }
 ])
 
 const polygons = ref([
   {
-    path: [
-      [116.397428, 39.90923],
-      [116.407428, 39.91923],
-      [116.417428, 39.92923]
-    ],
-    fillColor: '#FF0000',
-    strokeColor: '#0000FF',
-    strokeWeight: 2
+    path: ["104.12034,30.66797","104.125375,30.669477"],
+    strokeColor: '#409EFF',
+    strokeOpacity: 1,
+    fillColor:'#409EFF',
+    strokeWeight: 2,
+    fillOpacity: 0.05,
+    strokeStyle: 'dashed',
+    strokeDasharray: [20, 5],
+    label: '一工区', 
+    labelStyle: {
+      'background-color': 'transparent',
+      'text-align': 'center',
+      'font-size': '40px',
+      'font-weight': 'bold',
+      'border': 'none',
+      'font-family': 'YEBTH',
+      'color':'#409EFF',
+      'opacity': 0.8,
+    },
+    type: 'workArea',
+  }
+])
+
+const circles=ref([
+  {
+    center: "104.12473,30.668512",//中心点
+    radius: "30",//圆形半径
+    strokeColor:'#409EFF',
+    strokeOpacity: 1,
+    fillColor:'#409EFF',
+    strokeWeight: 2,
+    fillOpacity: 0.05,
+    strokeStyle: 'dashed',
+    strokeDasharray: [20, 5],
+    label: '人员区域', // 工区名称
+    labelStyle: {
+      'background-color': 'transparent',
+      'text-align': 'center',
+      'font-size': '40px',
+      'font-weight': 'bold',
+      'border': 'none',
+      'font-family': 'YEBTH',
+      'color': '#409EFF',
+      'opacity': 0.8,
+    },
+    type: 'peopleArea',
   }
 ])
 
 const legendConfig = ref([
-  { label: '类型A', value: 'typeA' },
-  { label: '类型B', value: 'typeB' }
+  {
+      label: '入侵检测仪',
+      value: 'invasionDevice'
+    },
+    {
+      label: '作业设备',
+      value: 'workDevice'
+    },
+    {
+      label: '工区',
+      value: 'workArea'
+    },
+    {
+      label: '营业线',
+      value: 'yyx'
+    },
+    {
+      label: '人员区域',
+      value: 'peopleArea',
+      defaultVisible: false
+    }
 ])
 
-const handleMarkerClick = (marker) => {
-  console.log('点击了标记点:', marker)
+const maploaded = () => {
+  // 地图加载成后的回调
+}
+// 地图覆盖物点击事件
+const handleOverlayClick = (Overlay) => {
+  console.log('点击了覆盖物:', Overlay)
 }
 </script>
 ```
 
 ### SCTJMapDrawingDialog 地图绘制对话框
 
+> ⚠️ **前置准备**
+> 1. npm install @amap/amap-jsapi-loader@^1.0.0; 
+> 2. 在 `main.js` 文件中添加window._AMapSecurityConfig = {securityJsCode: 替换为你的Web端密钥};
+
 ```vue
 <template>
-  <el-button @click="dialogVisible = true">绘制地图</el-button>
   <SCTJMapDrawingDialog
-    v-model:open="dialogVisible"
-    title="绘制区域"
-    @confirm="handleConfirm"
-  />
+    width="80vw"
+    :map-zoom="18" 
+    center="104.12473,30.668512"
+    v-model:markers="form.markers"
+    v-model:polygons="form.polygons"
+    v-model:circles="form.circles"
+    v-model:polylines="form.polylines"
+    v-model:bezierCurve="form.bezierCurves"
+    :multiple="['point', 'polyline', 'polygon', 'circle', 'bezierCurve']" // multiple接受布尔值或者数组
+    :allowedTypes="['point', 'polyline', 'polygon', 'circle', 'bezierCurve']"
+    :amapKey="amapKey">
+     <!-- trigger 有默认插槽，也可以不传入按钮 -->
+    <template #trigger={openDialog}>
+       <el-button @click="openDialog">地图绘制</el-button>
+    </template>
+  </SCTJMapDrawingDialog>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { SCTJMapDrawingDialog } from 'sctj-components'
+const form = reactive({
+  markers: [],
+  polygons: [],
+  circles:[],
+  polylines:[],
+  bezierCurves:[]
+})
 
-const dialogVisible = ref(false)
-
-const handleConfirm = (drawingData) => {
-  console.log('绘制的数据:', drawingData)
-  dialogVisible.value = false
-}
 </script>
 ```
 
 ### SCTJBusinessMapDrawingDialog 业务地图绘制对话框
 
+> ⚠️ **前置准备**
+> 1. npm install @amap/amap-jsapi-loader@^1.0.0; 
+> 2. 在 `main.js` 文件中添加window._AMapSecurityConfig = {securityJsCode: 替换为你的Web端密钥};
+
 ```vue
 <template>
-  <el-button @click="dialogVisible = true">业务绘制</el-button>
   <SCTJBusinessMapDrawingDialog
-    v-model:open="dialogVisible"
-    title="业务区域绘制"
-    @confirm="handleConfirm"
-  />
+    width="80vw"
+    center="104.12473,30.668512"
+    v-model:markers="form.markers"
+    v-model:polygons="form.polygons"
+    v-model:circles="form.circles"
+    v-model:polylines="form.polylines"
+    :businessConfig="businessConfig"
+    :amapKey="amapKey">
+       <!-- trigger 有默认插槽，也可以不传入按钮 -->
+    <template #trigger="{openDialog}">
+      <el-button type="primary" @click="openDialog" size="small">点击绘制</el-button>
+    </template>
+  </SCTJBusinessMapDrawingDialog>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { SCTJBusinessMapDrawingDialog } from 'sctj-components'
 
-const dialogVisible = ref(false)
-
-const handleConfirm = (drawingData) => {
-  console.log('业务绘制数据:', drawingData)
-  dialogVisible.value = false
-}
+const businessConfig=[
+      {
+        key: 'lngLat',
+        label: '项目中心点',
+        multiple: false,
+        drawTypes: ['point']
+      },
+      {
+        key: 'yyxLngLat',
+        label: '项目营业线',
+        multiple: true,
+        drawTypes: ['polyline']
+      },
+      {
+        key: 'projectWorkArea',
+        label: '项目工区',
+        multiple: true,
+        drawTypes: ['polygon', 'circle']
+      },
+      {
+        key: 'workDeviceArea',
+        label: '作业设备限制区域',
+        multiple: true,
+        drawTypes: ['polygon', 'circle']
+      },
+      {
+        key: 'workPersonnelArea',
+        label: '作业人员区域',
+        multiple: true,
+        drawTypes: ['polygon', 'circle']
+      }
+    ]
 </script>
 ```
 
@@ -1058,9 +1053,6 @@ const handleConfirm = (drawingData) => {
 
 部分组件需要通过 props 传入业务 API 函数：
 
-- **SCTJH5hkPlayer**：需要传入 `getLiveAddress`、`getReplayAddress`、`downloadCertificate` 函数
-- **SCTJHelmetPlayer**：需要传入 `callApi`、`handleStreamingApi`、`queryAdminSipInfoApi` 函数
-- **SCTJYsyPlayer**：需要传入 `getYsToken` 函数
 - **SCTJFileUpload、SCTJImageUpload、SCTJImagePreview**：可选传入 `baseUrl` prop 处理相对路径
 
 ### 2. 样式