👈 编写高德地图组件

kicc-ui/src/components/AMap/src/Amap.vue

@@ -13,33 +13,50 @@
         <span title="展开">‹</span>
         <p title="隐藏">›</p>
       </div>
-      <div>
+      <div class="operatePanel-form">
-        <AForm>
+        <AForm :labelCol="{ style: { width: '80px' } }"
-          <AFormItem>
+               :wrapperCol="{ style: { width: '100%', 'margin-right': '10px' } }"
-            <a-input/>
+               :model="mapState.modelRef"
+        >
+          <AFormItem label="起点">
+            <ASelect v-model:value="mapState.modelRef.specimenMarkerId" :options="[]"/>
+          </AFormItem>
+          <AFormItem label="途径点">
+            <ASelect v-model:value="mapState.modelRef.smallHospitalId"
+                     :options="[
+                       { value: '001', label: '下级医院:第三医院'},
+                       { value: '002', label: '下级医院:神经病医院'},
+                       { value: '003', label: '下级医院:湘雅医院'}
+                     ]"
+            />
+          </AFormItem>
+          <AFormItem label="终点">
+            <ASelect v-model:value="mapState.modelRef.largeHospitalId" :options="[]"/>
           </AFormItem>
         </AForm>
       </div>
+      <div class="operatePanel-list">
+        <BasicTable @register="registerTable"/>
+      </div>
     </div>
   </PageWrapper>
 </template>
 <script lang="ts" setup>
   import AMapLoader from '@amap/amap-jsapi-loader';
   import { reactive, getCurrentInstance, onBeforeMount, onUnmounted } from 'vue';
-  import { largeHospitalMapList, smallHospitalMapList, specimenMapList } from './data';
+  import { largeHospitalMapList, smallHospitalMapList, specimenMapList,  columns } from './data';
   import hospital from '/@/assets/images/hospital.svg';
   import medicalKit from '/@/assets/images/medical-kit.svg';
   import hospitalTwinkle from '/@/assets/images/hospital-twinkle.gif';
   import redFlag from '/@/assets/images/redFlag.svg';
   import { PageWrapper } from '/@/components/Page';
-  import { Form } from 'ant-design-vue';
+  import { Form, Select } from 'ant-design-vue';
+  import { BasicTable, useTable } from '/@/components/Table';
 
   let map;
   let largeHospitalMarkerCluster;
   let smallHospitalMarkerCluster;
   let specimenMarkerCluster;
-  const AForm = Form;
-  const AFormItem = Form.Item;
   const instance = getCurrentInstance();
   const mapState = reactive({
     loading: false,
@@ -48,7 +65,32 @@
       p: 'block',
       siderWidth: 371
     },
-    toggleStatus: true
+    toggleStatus: true,
+    modelRef: {
+      largeHospitalId: '',
+      smallHospitalId: '',
+      specimenMarkerId: ''
+    }
+  });
+  const AForm = Form;
+  const AFormItem = Form.Item;
+  const ASelect = Select;
+  const [registerTable, { reload }] = useTable({
+    title: '地图任务列表',
+    rowKey: 'id',
+    dataSource: [{
+      taskName: '测试任务1'
+    },{
+      taskName: '测试任务2'
+    }],
+    columns,
+    showTableSetting: true,
+    tableSetting: {
+      setting: false,
+      fullScreen: true
+    },
+    bordered: true,
+    showIndexColumn: true
   });
 
   onBeforeMount(() => {
@@ -318,7 +360,7 @@
 .operatePanel {
   width: v-bind('mapState.toggleOperatePanelClass.siderWidth + "px"');
   height: 100%;
-  background: #fff;
+  background: #ffffff;
   position: absolute;
   top: 0;
   right: 0;
@@ -328,7 +370,7 @@
     width: 15px;
     height: 94px;
     margin: -48px 0 0 -15px;
-    background: #15a3fa;
+    background: #0075ff;
     position: absolute;
     top: 50%;
     cursor: pointer;
@@ -350,6 +392,14 @@
       display: v-bind('mapState.toggleOperatePanelClass.p');
     }
   }
+
+  .operatePanel-form {
+    margin-top: 10px;
+  }
+
+  .operatePanel-list {
+
+  }
 }
 
 :deep(.amap-marker-label) {

kicc-ui/src/components/AMap/src/data.ts

@@ -1,3 +1,5 @@
+import {BasicColumn} from '/@/components/Table';
+
 /**
  * @program: kicc-ui
  * @description: 地图静态数据
@@ -10,7 +12,7 @@ type mapType = {
   orientation: number;
   lng: number;
   lat: number;
-  notify: boolean;
+  notify?: boolean;
 };
 
 export const largeHospitalMapList: mapType[] = [
@@ -30,3 +32,10 @@ export const specimenMapList: mapType[] = [
   {title: '收样员:小红', orientation: 0, lng: 112.914481, lat: 28.294977},
   {title: '收样员:小明', orientation: 0, lng: 112.913864, lat: 28.295114}
 ];
+
+export const columns: BasicColumn[] = [
+  {
+    title: '任务名称',
+    dataIndex: 'taskName'
+  }
+];