Merge branch 'sqy_dev' into 'main'

'feat:(设备页面功能及接口调试)'

See merge request huang/yun-teng-iot-front!8

@@ -72,9 +72,17 @@ export const deviceProfile = () => {
   });
 };
 
+// 创建或编辑设备
 export const createOrEditDevice = (data) => {
   return defHttp.post({
     url: DeviceManagerApi.DEVICE_URL,
     data,
   });
 };
+
+// 获取设备唯一token
+export const getDeviceToken = () => {
+  return defHttp.get({
+    url: '/common',
+  });
+};

@@ -2,8 +2,8 @@
   <BasicModal
     v-bind="$attrs"
     width="55rem"
-    @register="register"
     :title="getTitle"
+    @register="register"
     @cancel="handleCancel"
     @ok="handleOk"
     centered
@@ -15,25 +15,30 @@
       </a-steps>
     </div>
     <div class="mt-5">
-      <DeviceStep1 @next="handleStep1Next" v-show="current === 0" ref="DeviceStep1Ref" />
+      <DeviceStep1
+        @next="handleStep1Next"
+        v-show="current === 0"
+        ref="DeviceStep1Ref"
+        :deviceInfo="deviceInfo"
+      />
       <DeviceStep2
         ref="DeviceStep2Ref"
         @prev="handleStepPrev"
         @next="handleStep2Next"
         v-show="current === 1"
-        v-if="initStep2"
       />
     </div>
   </BasicModal>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, computed, unref, reactive, toRefs } from 'vue';
+  import { defineComponent, ref, computed, unref } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { createOrEditDevice } from '/@/api/device/deviceManager';
+  import { createOrEditDevice, getDeviceToken } from '/@/api/device/deviceManager';
   import DeviceStep1 from '/@/views/device/step/DeviceStep1.vue';
   import DeviceStep2 from '/@/views/device/step/DeviceStep2.vue';
   import { Steps } from 'ant-design-vue';
   import { useMessage } from '/@/hooks/web/useMessage';
+
   export default defineComponent({
     name: 'DeviceModal',
     components: {
@@ -46,27 +51,31 @@
     props: {
       userData: { type: Object },
     },
+    emits: ['reload'],
     setup(_, { emit }) {
       const DeviceStep1Ref = ref<InstanceType<typeof DeviceStep1>>();
       const DeviceStep2Ref = ref<InstanceType<typeof DeviceStep2>>();
       const { createMessage } = useMessage();
-      const state = reactive({
-        initStep2: false,
-      });
       const current = ref(0);
       const isUpdate = ref(true);
+      const deviceInfo = ref({});
       const getTitle = computed(() => (!unref(isUpdate) ? '新增设备' : '编辑设备'));
       // 所有参数
       let stepState = ref();
       // 编辑回显
       const [register, { closeModal }] = useModalInner((data) => {
         if (data.isUpdate) {
-          DeviceStep1Ref.value?.parentSetFieldsValue(data.record);
-          DeviceStep1Ref.value?.parentSetFieldsValue({
+          DeviceStep1Ref?.value?.parentSetFieldsValue(data.record);
+          DeviceStep1Ref?.value?.parentSetFieldsValue({
             profile: data.record.deviceProfile.name,
             remark: data.record.deviceInfo.description,
             profileId: data.record.profileId,
           });
+          deviceInfo.value = data.record.deviceInfo;
+        } else {
+          DeviceStep1Ref?.value?.parentResetDevicePic();
+          DeviceStep1Ref?.value?.parentResetPositionState();
+          deviceInfo.value = {};
         }
         isUpdate.value = !!data?.isUpdate;
       });
@@ -78,12 +87,11 @@
       // 下一步
       function handleStep1Next(step1Values: any) {
         current.value++;
-        state.initStep2 = true;
-        stepState = { ...step1Values };
+        stepState.value = { ...step1Values };
       }
       //
       function handleStep2Next(step2Values: any) {
-        stepState = { ...stepState, ...step2Values };
+        stepState.value = { ...stepState, ...step2Values };
       }
       function handleCancel() {
         current.value = 0;
@@ -111,17 +119,40 @@
         }
         // 验证成功 --掉新增或者编辑接口
         const msg = computed(() => (stepState.value.id ? '更新设备成功' : '新增设备成功'));
-        await createOrEditDevice(stepState.value);
+        console.log(stepState);
+        if (stepState.value.id) {
+          const editData = {
+            ...stepState.value,
+            deviceInfo: {
+              avatar: DeviceStep1Ref.value?.devicePic,
+              ...DeviceStep1Ref.value?.positionState,
+            },
+          };
+          await createOrEditDevice(editData);
+        } else {
+          let deviceToken = await getDeviceToken();
+          // 需要携带唯一的设备token
+          const createData = {
+            ...stepState.value,
+            deviceToken,
+            deviceInfo: {
+              avatar: DeviceStep1Ref.value?.devicePic,
+              ...DeviceStep1Ref.value?.positionState,
+            },
+          };
+
+          await createOrEditDevice(createData);
+        }
         createMessage.success(msg.value);
         emit('reload');
       }
       return {
-        register,
         getTitle,
         current,
         DeviceStep1Ref,
         DeviceStep2Ref,
-        ...toRefs(state),
+        deviceInfo,
+        register,
         handleStepPrev,
         handleStep1Next,
         handleStep2Next,

@@ -162,12 +162,12 @@
         handleDelete,
         handleSuccess,
         goDeviceProfile,
-        DeviceTypeEnum,
-        DeviceState,
         handleSelect,
-        searchInfo,
         registerModal,
         handleReload,
+        DeviceTypeEnum,
+        DeviceState,
+        searchInfo,
       };
     },
   });

@@ -41,12 +41,12 @@
           <a-row :gutter="20" class="pt-4 pl-6">
             <a-col :span="8">
               <a-form-item label="经度">
-                <Input type="input" v-model:value="positionState.lng" disabled />
+                <Input type="input" v-model:value="positionState.longitude" disabled />
               </a-form-item>
             </a-col>
             <a-col :span="8">
               <a-form-item label="纬度">
-                <Input type="input" v-model:value="positionState.lat" disabled />
+                <Input type="input" v-model:value="positionState.latitude" disabled />
               </a-form-item>
             </a-col>
           </a-row>
@@ -57,11 +57,10 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, nextTick, unref, reactive } from 'vue';
+  import { defineComponent, ref, nextTick, unref, reactive, watch } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { step1Schemas } from './data';
   import { useScript } from '/@/hooks/web/useScript';
-  import { ScrollActionType } from '/@/components/Container/index';
   import { Input, Divider, Upload, message, Modal, Form, Row, Col } from 'ant-design-vue';
   import { EnvironmentTwoTone, PlusOutlined } from '@ant-design/icons-vue';
   import { upload } from '/@/api/oss/ossFileUploader';
@@ -82,12 +81,23 @@
       [Row.name]: Row,
       [Col.name]: Col,
     },
+    props: {
+      deviceInfo: {
+        type: Object,
+        default: () => ({}),
+      },
+    },
     emits: ['next'],
-    setup(_, { emit }) {
+    setup(props, { emit }) {
       const devicePic = ref('');
-      let positionState = reactive({
-        lng: '',
-        lat: '',
+      let positionState = reactive<{
+        longitude: string;
+        latitude: string;
+        description?: string;
+        address: string;
+      }>({
+        longitude: '',
+        latitude: '',
         address: '',
       });
       const [register, { validate, resetFields, setFieldsValue, getFieldsValue }] = useForm({
@@ -141,49 +151,62 @@
       const visible = ref(false);
       const selectPosition = () => {
         visible.value = true;
-        initMap();
+        if (!positionState.longitude) {
+          initMap('104.04666605565338', '30.543516387560476');
+        } else {
+          initMap(positionState.longitude, positionState.latitude);
+        }
       };
 
       // 地图
       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() {
+
+      async function initMap(longitude, latitude) {
         await toPromise();
         await nextTick();
         const wrapEl = unref(wrapRef);
         const BMap = (window as any).BMap;
         if (!wrapEl) return;
+        let preMarker = null;
         const map = new BMap.Map(wrapEl);
-        const point = new BMap.Point(104.04813399999999, 30.54348986021446);
+        let myIcon = new BMap.Icon(
+          'http://api.map.baidu.com/img/markers.png',
+          new BMap.Size(40, 25),
+          {
+            offset: new BMap.Size(0, 0), // 指定定位位置
+            imageOffset: new BMap.Size(20, -260), // 设置图片偏移
+          }
+        );
+        const point = new BMap.Point(Number(longitude), Number(latitude));
+        let marker = new BMap.Marker(point, { icon: myIcon });
+        if (marker) {
+          map.removeOverlay(preMarker);
+        }
+        map.addOverlay(marker);
+        preMarker = marker;
         map.centerAndZoom(point, 15);
         map.enableScrollWheelZoom(true);
-        let preMarker = null;
         map.addEventListener('click', (e) => {
-          const { lat, lng } = map.he;
-          positionState.lat = lat + '';
-          positionState.lng = lng + '';
+          const { lat, lng } = e.point;
+          console.log(lat, lng);
+          positionState.latitude = lat + '';
+          positionState.longitude = lng + '';
           let gc = new BMap.Geocoder();
           let newPoint = new BMap.Point(lng, lat);
+
+          // 添加锚点
           if (!e.overlay) {
-            let myIcon = new BMap.Icon(
-              'http://api.map.baidu.com/img/markers.png',
-              new BMap.Size(40, 25),
-              {
-                offset: new BMap.Size(0, 0), // 指定定位位置
-                imageOffset: new BMap.Size(20, -260), // 设置图片偏移
-              }
-            );
             let marker = new BMap.Marker(e.point, { icon: myIcon });
             map.removeOverlay(preMarker);
             map.addOverlay(marker);
             preMarker = marker;
           }
+          //获取详细的地址，精确到街道的名称
           gc.getLocation(newPoint, (rs) => {
             let addComp = rs.addressComponents;
-            //获取详细的地址，精确到街道的名称
             let addrname = addComp.city + addComp.district + addComp.street + addComp.streetNumber;
             positionState.address = addrname;
           });
@@ -203,16 +226,38 @@
       function parentSetFieldsValue(data) {
         setFieldsValue(data);
       }
-
+      // 父组件调用获取字段值的方法
       function parentGetFieldsValue() {
         return getFieldsValue();
       }
 
+      // 父组件调用表单验证
       async function parentValidate() {
         const valid = await validate();
         return valid;
       }
 
+      // 父组件重置图片
+      function parentResetDevicePic() {
+        devicePic.value = '';
+      }
+      // 父组件重置位置
+      function parentResetPositionState() {
+        for (let key in positionState) {
+          positionState[key] = '';
+        }
+      }
+
+      watch(
+        () => props.deviceInfo,
+        (newValue) => {
+          positionState.longitude = newValue.longitude;
+          positionState.latitude = newValue.latitude;
+          positionState.address = newValue.address;
+          devicePic.value = newValue.avatar;
+        }
+      );
+
       return {
         resetFields,
         positionState,
@@ -222,7 +267,6 @@
         selectPosition,
         devicePic,
         visible,
-        scrollRef,
         handleOk,
         handleCancel,
         wrapRef,
@@ -230,6 +274,8 @@
         parentSetFieldsValue,
         parentGetFieldsValue,
         parentValidate,
+        parentResetDevicePic,
+        parentResetPositionState,
       };
     },
   });

@@ -117,7 +117,7 @@
       });
 
       // 切换凭证类型时，重置字段
-      const handleChange = (value) => {
+      const handleChange = (value: string) => {
         if (value === 'Access token') {
           resetCreantialsType();
         } else if (value === 'X.509') {