'暂存'

@@ -8,7 +8,6 @@
       name="viewport"
       content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
     />
-
     <title><%= title %></title>
     <link rel="icon" href="/favicon.ico" />
   </head>

@@ -59,6 +59,7 @@
     "tinymce": "^5.8.2",
     "vditor": "^3.8.6",
     "vue": "3.2.2",
+    "vue-baidu-map": "^0.21.22",
     "vue-i18n": "9.1.7",
     "vue-json-pretty": "^2.0.4",
     "vue-router": "^4.0.11",

@@ -26,6 +26,9 @@ if (import.meta.env.DEV) {
 async function bootstrap() {
   const app = createApp(App);
 
+  // app.use(VueBaidu, {
+  //   ak: '7uOPPyAHn2Y2ZryeQqHtcRqtIY374vKa',
+  // });
   // Configure store
   setupStore(app);
 

@@ -39,10 +39,11 @@
   import { upload } from '/@/api/oss/ossFileUploader';
   import { message, Upload } from 'ant-design-vue';
   import { FileItem } from '/@/components/Upload/src/typing';
+  import { LoadingOutlined, PlusOutlined } from '@ant-design/icons-vue';
 
   export default defineComponent({
     name: 'DeviceDrawer',
-    components: { BasicDrawer, BasicForm, Upload },
+    components: { BasicDrawer, BasicForm, Upload, PlusOutlined, LoadingOutlined },
     emits: ['success', 'register'],
     setup(_, { emit }) {
       const isUpdate = ref(true);

@@ -5,7 +5,6 @@
       <template #toolbar>
         <a-button type="primary" @click="handleCreate"> 新增设备 </a-button>
       </template>
-
       <template #deviceProfile="{ record }">
         <a-button type="link" class="ml-2" @click="goDeviceProfile">
           {{ record.deviceProfile.name }}
@@ -67,7 +66,7 @@
       </template>
     </BasicTable>
     <ConfigDrawer @register="registerDrawer" @success="handleSuccess" />
-    <DeviceModal @register="registerModal" @success="handleSuccess"></DeviceModal>
+    <DeviceModal @register="registerModal" @success="handleSuccess" />
   </PageWrapper>
 </template>
 <script lang="ts">

@@ -11,38 +11,77 @@
             :customRequest="customUpload"
             :before-upload="beforeUpload"
           >
-            <img v-if="devicePic" :src="devicePic" alt="avatar"/>
+            <img v-if="devicePic" :src="devicePic" alt="avatar" />
             <div v-else>
-              <loading-outlined v-if="loading"></loading-outlined>
-              <plus-outlined v-else></plus-outlined>
+              <!-- <LoadingOutlined v-if="loading" /> -->
+              <PlusOutlined />
               <div class="ant-upload-text">图片上传</div>
             </div>
           </Upload>
         </template>
+        <template #devicePosition>
+          <Input>
+            <template #addonAfter>
+              <EnvironmentTwoTone @click="selectPosition" />
+            </template>
+          </Input>
+        </template>
       </BasicForm>
     </div>
+    <modal v-model:visible="visible" title="设备位置" @ok="handleOk">
+      <div>
+        <a-input-group>
+          <a-row :gutter="8" class="flex">
+            <a-col :span="6" class="flex"> 经度<a-input /> </a-col>
+            <a-col :span="6" class="flex"> 纬度<a-input /> </a-col>
+          </a-row>
+        </a-input-group>
+        <div ref="wrapRef" style="height: 300px; width: 90%" class=""> </div>
+      </div>
+    </modal>
+    >
   </div>
 </template>
 <script lang="ts">
-import {defineComponent, ref} from 'vue';
+  import { defineComponent, ref, onMounted, nextTick, unref, getCurrentInstance } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { step1Schemas } from './data';
-  import {Select, Input, Divider, Upload, message} from 'ant-design-vue';
-  import {upload} from "/@/api/oss/ossFileUploader";
-  import {FileItem} from "/@/components/Upload/src/typing";
+  import { useScript } from '/@/hooks/web/useScript';
+  import { ScrollActionType } from '/@/components/Container/index';
+  import { Input, Divider, Upload, message, Modal, Col, Row } from 'ant-design-vue';
+  import { EnvironmentTwoTone, LoadingOutlined, PlusOutlined } from '@ant-design/icons-vue';
+  import { upload } from '/@/api/oss/ossFileUploader';
+  import { FileItem } from '/@/components/Upload/src/typing';
+
   export default defineComponent({
     components: {
       BasicForm,
-      [Select.name]: Select,
-      ASelectOption: Select.Option,
-      [Input.name]: Input,
+      Input,
       [Input.Group.name]: Input.Group,
       [Divider.name]: Divider,
-      Upload
+      Upload,
+      EnvironmentTwoTone,
+      // LoadingOutlined,
+      PlusOutlined,
+      Modal,
+      [Col.name]: Col,
+      [Row.name]: Row,
+    },
+    props: {
+      width: {
+        type: String,
+        default: '300px',
+      },
+      height: {
+        type: String,
+        default: '300px',
+      },
     },
     emits: ['next'],
     setup(_, { emit }) {
-      const devicePic = ref("");
+      const { proxy } = getCurrentInstance();
+      console.log(proxy);
+      const devicePic = ref('');
       const [register, { validate }] = useForm({
         labelWidth: 100,
         schemas: step1Schemas,
@@ -62,10 +101,10 @@ import {defineComponent, ref} from 'vue';
           emit('next', values);
         } catch (error) {}
       }
-      async function customUpload({file}) {
+      async function customUpload({ file }) {
         if (beforeUpload(file)) {
-          const formData = new FormData()
-          formData.append('file', file)
+          const formData = new FormData();
+          formData.append('file', file);
           const response = await upload(formData);
           if (response.fileStaticUri) {
             devicePic.value = response.fileStaticUri;
@@ -78,14 +117,48 @@ import {defineComponent, ref} from 'vue';
         if (!isJpgOrPng) {
           message.error('只能上传图片文件!');
         }
-        const isLt2M = file.size as number / 1024 / 1024 < 2;
+        const isLt2M = (file.size as number) / 1024 / 1024 < 2;
         if (!isLt2M) {
           message.error('图片大小不能超过2MB!');
         }
         return isJpgOrPng && isLt2M;
       };
+      const visible = ref(false);
+      const selectPosition = () => {
+        visible.value = true;
+        initMap();
+      };
 
-      return { register, beforeUpload, customUpload, devicePic };
+      const BAI_DU_MAP_URL =
+        'https://api.map.baidu.com/getscript?v=3.0&ak=7uOPPyAHn2Y2ZryeQqHtcRqtIY374vKa';
+      const wrapRef = ref<HTMLDivElement | null>(null);
+      const scrollRef = ref<Nullable<ScrollActionType>>(null);
+      const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
+      async function initMap() {
+        await toPromise();
+        await nextTick();
+        const wrapEl = unref(wrapRef);
+        const BMap = (window as any).BMap;
+        console.log(wrapRef, '----------------------------');
+        if (!wrapEl) return;
+        const map = new BMap.Map(wrapEl);
+        const point = new BMap.Point(116.14282, 35.19515);
+        map.centerAndZoom(point, 15);
+        map.enableScrollWheelZoom(true);
+      }
+      const handleOk = () => {};
+
+      return {
+        register,
+        beforeUpload,
+        customUpload,
+        selectPosition,
+        devicePic,
+        visible,
+        scrollRef,
+        handleOk,
+        wrapRef,
+      };
     },
   });
 </script>

 import { FormSchema } from '/@/components/Form';
-import {findDictItemByCode} from "/@/api/system/dict";
+import { findDictItemByCode } from '/@/api/system/dict';
 
 export const step1Schemas: FormSchema[] = [
   {
@@ -12,10 +12,10 @@ export const step1Schemas: FormSchema[] = [
     field: 'name',
     label: '设备名称',
     required: true,
-    component:'Input',
-    componentProps:{
-      maxLength:30
-    }
+    component: 'Input',
+    componentProps: {
+      maxLength: 30,
+    },
   },
   {
     field: 'deviceType',
@@ -23,27 +23,33 @@ export const step1Schemas: FormSchema[] = [
     required: true,
     component: 'ApiSelect',
     componentProps: {
-      api:findDictItemByCode,
-      params:{
-        dictCode:"device_type"
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'device_type',
       },
-      labelField:'itemText',
-      valueField:'itemValue',
+      labelField: 'itemText',
+      valueField: 'itemValue',
     },
   },
   {
     field: 'label',
     label: '设备标签',
-    component:'Input',
-    componentProps:{
-      maxLength:255
-    }
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+    },
+  },
+  {
+    field: 'devicePosition',
+    label: '设备位置',
+    component: 'Input',
+    slot: 'devicePosition',
   },
   {
     label: '备注',
     field: 'remark',
     component: 'InputTextArea',
-  }
+  },
 ];
 
 export const step2Schemas: FormSchema[] = [

@@ -3069,6 +3069,33 @@ bluebird@^3.5.0, bluebird@^3.7.2:
   resolved "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
+bmaplib.curveline@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/bmaplib.curveline/-/bmaplib.curveline-1.0.0.tgz#826eb0bf1c59fad1b23142be66fc360cf009aea2"
+  integrity sha512-9wcFMVhiYxNPqpvsLDAADn3qDhNzXp2mA6VyHSHg2XOAgSooC7ZiujdFhy0sp+0QYjTfJ/MjmLuNoUg2HHxH4Q==
+
+bmaplib.heatmap@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/bmaplib.heatmap/-/bmaplib.heatmap-1.0.4.tgz#30161262771fe78af35705ff92457725de5d9850"
+  integrity sha512-rmhqUARBpUSJ9jXzUI2j7dIOqnc38bqubkx/8a349U2qtw/ulLUwyzRD535OrA8G7w5cz4aPKm6/rNvUAarg/Q==
+
+bmaplib.lushu@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/bmaplib.lushu/-/bmaplib.lushu-1.0.7.tgz#77c17dcf7148d30c46e8430c7ff86b20e418b8b8"
+  integrity sha512-LVvgpESPii6xGxyjnQjq8u+ic4NjvhdCPV/RiSS/PGTUdZKeTDS7prSpleJLZH3ES0+oc0gYn8bw0LtPYUSz2w==
+
+bmaplib.markerclusterer@^1.0.13:
+  version "1.0.13"
+  resolved "https://registry.npmjs.org/bmaplib.markerclusterer/-/bmaplib.markerclusterer-1.0.13.tgz#442d71a6c40844ee47d01f6db2166b54530b5bd1"
+  integrity sha512-VrLyWSiuDEVNi0yUfwOhFQ6z1oEEHS4w36GNu3iASu6p52QIx9uAXMUkuSCHReNR0bj2Cp9SA1dSx5RpojXajQ==
+  dependencies:
+    bmaplib.texticonoverlay "^1.0.2"
+
+bmaplib.texticonoverlay@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/bmaplib.texticonoverlay/-/bmaplib.texticonoverlay-1.0.2.tgz#d78546ea0f036d9fe964983796315b6c112a05bf"
+  integrity sha512-4ZTWr4ZP3B6qEWput5Tut16CfZgII38YwM3bpyb4gFTQyORlKYryFp9WHWrwZZaHlOyYDAXG9SX0hka43jTADg==
+
 boolbase@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
@@ -4558,7 +4585,7 @@ enquirer@^2.3.5, enquirer@^2.3.6:
   dependencies:
     ansi-colors "^4.1.1"
 
-entities@^1.1.1:
+entities@^1.1.1, entities@~1.1.1:
   version "1.1.2"
   resolved "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
   integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
@@ -7442,6 +7469,13 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
+linkify-it@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz#e3b54697e78bf915c70a38acd78fd09e0058b1cf"
+  integrity sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==
+  dependencies:
+    uc.micro "^1.0.1"
+
 lint-staged@^11.1.2:
   version "11.1.2"
   resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-11.1.2.tgz#4dd78782ae43ee6ebf2969cad9af67a46b33cd90"
@@ -7753,6 +7787,17 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+markdown-it@^8.4.0:
+  version "8.4.2"
+  resolved "https://registry.npmjs.org/markdown-it/-/markdown-it-8.4.2.tgz#386f98998dc15a37722aa7722084f4020bdd9b54"
+  integrity sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==
+  dependencies:
+    argparse "^1.0.7"
+    entities "~1.1.1"
+    linkify-it "^2.0.0"
+    mdurl "^1.0.1"
+    uc.micro "^1.0.5"
+
 mathml-tag-names@^2.1.3:
   version "2.1.3"
   resolved "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
@@ -7791,6 +7836,11 @@ mdn-data@2.0.14:
   resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
   integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
 
+mdurl@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
+  integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
+
 memorystream@^0.3.1:
   version "0.3.1"
   resolved "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz#86d7090b30ce455d63fbae12dda51a47ddcaf9b2"
@@ -10912,6 +10962,11 @@ typescript@4.3.5:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4"
   integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==
 
+uc.micro@^1.0.1, uc.micro@^1.0.5:
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
+  integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
+
 uglify-js@^3.1.4:
   version "3.13.9"
   resolved "https://registry.npmjs.org/uglify-js/-/uglify-js-3.13.9.tgz#4d8d21dcd497f29cfd8e9378b9df123ad025999b"
@@ -11442,6 +11497,17 @@ vscode-vue-languageservice@^0.27.0:
     vscode-pug-languageservice "^0.27.1"
     vscode-typescript-languageservice "^0.27.1"
 
+vue-baidu-map@^0.21.22:
+  version "0.21.22"
+  resolved "https://registry.npmjs.org/vue-baidu-map/-/vue-baidu-map-0.21.22.tgz#6b76a91ef34f18a782d732ab0f541a1a3aa069e0"
+  integrity sha512-WQMPCih4UTh0AZCKKH/OVOYnyAWjfRNeK6BIeoLmscyY5aF8zzlJhz/NOHLb3mdztIpB0Z6aohn4Jd9mfCSjQw==
+  dependencies:
+    bmaplib.curveline "^1.0.0"
+    bmaplib.heatmap "^1.0.4"
+    bmaplib.lushu "^1.0.7"
+    bmaplib.markerclusterer "^1.0.13"
+    markdown-it "^8.4.0"
+
 vue-demi@*:
   version "0.9.1"
   resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.9.1.tgz#25d6e1ebd4d4010757ff3571e2bf6a1d7bf3de82"