'fix:更新地理位置页面以及修复设备位置bug'

sqy
1 parent f0e317ed
Showing 5 changed files with 112 additions and 94 deletions
src/api/alarm/contact/alarmContact.ts
src/views/alarm/position/config.data.ts
src/views/alarm/position/index.vue
src/views/device/profile/step/DeviceProfileStep3.vue
src/views/device/step/DeviceStep1.vue
--- a/src/api/alarm/contact/alarmContact.ts
View file @18eaea5
+++ b/src/api/alarm/contact/alarmContact.ts
View file @18eaea5
@@ -6,9 +6,11 @@ import type {
   ContactInfo,
 } from './model/alarmContactModal';
 import { getPageData } from '../../base';
-enum Api {
+import { DeviceModel, DeviceQueryParam } from '../../device/model/deviceModel';
+enum API {
   alarmContact = '/alarmContact',
   updateAlarmContact = '/alarmContact/update',
+  devicePage = '/device',
 }
 // 获取
@@ -19,7 +21,7 @@ export const getAlarmContact = (params: ContactPageParams) => {
 // 新增
 export const addAlarmContact = (params: ContactParams) => {
   return defHttp.post({
-    url: Api.alarmContact,
+    url: API.alarmContact,
     data: params,
   });
 };
@@ -27,7 +29,7 @@ export const addAlarmContact = (params: ContactParams) => {
 // 更新
 export const updateAlarmContact = (params: ContactParams) => {
   return defHttp.post({
-    url: Api.updateAlarmContact,
+    url: API.updateAlarmContact,
     data: params,
   });
 };
@@ -35,7 +37,7 @@ export const updateAlarmContact = (params: ContactParams) => {
 // 删除
 export const deleteAlarmContact = (ids: string[]) => {
   return defHttp.delete({
-    url: Api.alarmContact,
+    url: API.alarmContact,
     data: ids,
   });
 };
@@ -45,3 +47,10 @@ export const saveOrEditAlarmContact = (params: ContactInfo, isUpdate: boolean) =
   if (isUpdate) return updateAlarmContact(params);
   addAlarmContact(params);
 };
+
+export const devicePage = (params: DeviceQueryParam) => {
+  return defHttp.get<DeviceModel>({
+    url: API.devicePage,
+    params,
+  });
+};
--- a/src/views/alarm/position/config.data.ts
View file @18eaea5
+++ b/src/views/alarm/position/config.data.ts
View file @18eaea5
+import { BasicColumn } from '/@/components/Table';
+
 import { FormSchema } from '/@/components/Table';
 export const formSchema: FormSchema[] = [
   {
     field: 'organization',
     label: '',
     component: 'TreeSelect',
-    componentProps: {},
+    componentProps: {
+      placeholder: '请选择组织',
+    },
   },
   {
     field: 'organization',
     label: '',
     component: 'Select',
-    componentProps: {},
+    componentProps: {
+      placeholder: '请选择设备配置',
+    },
   },
   {
     field: 'device',
     label: '',
-    slot: 'device',
     component: 'Input',
+    componentProps: {
+      placeholder: '请输入设备名称',
+    },
+  },
+  {
+    field: 'status',
+    label: '',
+    component: 'RadioGroup',
+    componentProps: {
+      size: 'small',
+      options: [
+        { label: '全部', value: 'Apple' },
+        { label: '离线', value: 'Pear' },
+        { label: '在线', value: 'Orange' },
+        { label: '报警', value: 'hhh' },
+      ],
+    },
+  },
+];
+
+export const columns: BasicColumn[] = [
+  {
+    title: '名称',
+    dataIndex: 'name',
+    width: 100,
+  },
+  {
+    title: '位置',
+    dataIndex: 'deviceInfo.address',
+    width: 100,
+  },
+  {
+    title: '状态',
+    dataIndex: 'deviceState',
+    width: 100,
   },
 ];
--- a/src/views/alarm/position/index.vue
View file @18eaea5
+++ b/src/views/alarm/position/index.vue
View file @18eaea5
@@ -2,68 +2,21 @@
   <div class="wrapper">
     <div ref="wrapRef" :style="{ height, width }"> </div>
     <div class="right-wrap">
-      <BasicForm @register="registerForm">
-        <template #device>
-          <div class="flex justify-between">
-            <a-input v-model:value="deviceValue" placeholder="请输入设备名称" style="width: 70%" />
-            <a-button color="success" @click="handleReset" class="w-1/4">复位查询</a-button>
-          </div>
-        </template>
-      </BasicForm>
-      <div>
-        <RadioGroup v-model:value="deviceStatus">
-          <Radio :value="1">全部</Radio>
-          <Radio :value="2">在线</Radio>
-          <Radio :value="3">离线</Radio>
-          <Radio :value="4">报警</Radio>
-        </RadioGroup>
-        <div class="scroll-wrap">
-          <ScrollContainer ref="scrollRef">
-            <template
-              v-for="(item, index) in 10"
-              :key="index"
-              :class="{ active: currentIndex == index }"
-              @click="bander(index)"
-            >
-              <div class="flex" style="border-bottom: 1px solid #ccc">
-                <div>
-                  <div class="flex">
-                    <div class="font-bold ml-5">名称 </div>
-                    <div class="ml-5">发动机{{ item }}</div>
-                  </div>
-                  <div class="flex">
-                    <div class="font-bold ml-5">位置 </div>
-                    <div class="ml-5 font-bold">四川省成都市高新区{{ item }}</div>
-                  </div>
-                </div>
-                <div class="self-center ml-10"><Tag color="default">离线</Tag></div>
-              </div>
-            </template>
-          </ScrollContainer>
-        </div>
-        <div class="flex justify-end">
-          <Pagination v-model:current="current" :total="50" size="small" show-less-items />
-        </div>
-      </div>
+      <BasicTable @register="registerTable" />
     </div>
   </div>
 </template>
 <script lang="ts">
   import { defineComponent, ref, nextTick, unref, onMounted } from 'vue';
   import { useScript } from '/@/hooks/web/useScript';
-  import { BasicForm, useForm } from '/@/components/Form/index';
-  import { formSchema } from './config.data';
-  import { RadioGroup, Radio, Tag, Pagination } from 'ant-design-vue';
-  import { ScrollContainer, ScrollActionType } from '/@/components/Container/index';
+  import { formSchema, columns } from './config.data';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { devicePage } from '/@/api/alarm/contact/alarmContact';
+
   export default defineComponent({
     name: 'BaiduMap',
     components: {
-      BasicForm,
-      RadioGroup,
-      Radio,
-      Tag,
-      ScrollContainer,
-      Pagination,
+      BasicTable,
     },
     props: {
       width: {
@@ -75,12 +28,10 @@
         default: 'calc(100vh - 78px)',
       },
     },
-
     setup() {
       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();
@@ -96,31 +47,26 @@
       onMounted(() => {
         initMap();
       });
-      const deviceValue = ref('');
-      const deviceStatus = ref(1);
-      const current = ref(2);
-      const currentIndex = ref(1);
-      const bander = (index: number) => {
-        currentIndex.value = index;
-      };
-      const [registerForm] = useForm({
-        labelWidth: 90,
-        schemas: formSchema,
-        showActionButtonGroup: false,
+
+      const [registerTable, { reload }] = useTable({
+        api: devicePage,
+        columns,
+        formConfig: {
+          labelWidth: 120,
+          schemas: formSchema,
+          showAdvancedButton: false,
+          showActionButtonGroup: false,
+        },
+        showIndexColumn: false,
+        useSearchForm: true,
       });
-      const handleReset = () => {
-        deviceValue.value = '';
+      const handleSuccess = () => {
+        reload();
       };
       return {
         wrapRef,
-        registerForm,
-        deviceValue,
-        deviceStatus,
-        handleReset,
-        scrollRef,
-        current,
-        currentIndex,
-        bander,
+        registerTable,
+        handleSuccess,
       };
     },
   });
@@ -135,15 +81,13 @@
   }
   .right-wrap {
     padding-top: 10px;
-    width: 20%;
+    width: 22%;
     height: 80%;
     position: absolute;
     right: 5%;
     top: 10%;
-    background-color: #f3f8fe;
   }
   .scroll-wrap {
     height: 450px;
-    background-color: #f3f8fe;
   }
 </style>
--- a/src/views/device/profile/step/DeviceProfileStep3.vue
View file @18eaea5
+++ b/src/views/device/profile/step/DeviceProfileStep3.vue
View file @18eaea5
@@ -24,7 +24,7 @@
           </div>
           <a-form :wrapper-col="wrapperCol" labelAlign="left" v-if="item.isPass">
-            <a-form-item label="要传递的关联类型" :labelCol="{ style: { width: '120px' } }">
+            <a-form-item label="传递的关联类型" :labelCol="{ style: { width: '120px' } }">
               <a-input />
             </a-form-item>
           </a-form>
@@ -47,7 +47,11 @@
                   <EditOutlined class="cursor-pointer ml-4" style="font-size: 20px"
                 /></p>
                 <p class="mt-4 ml-4"
-                  >详情：1 <EditOutlined class="cursor-pointer ml-4" style="font-size: 20px"
+                  >详情：1
+                  <EditOutlined
+                    @click="editCreateDetail(index, index1)"
+                    class="cursor-pointer ml-4"
+                    style="font-size: 20px"
                 /></p>
                 <p class="mt-4 ml-4">dashboard: <a-select style="width: 180px" /></p>
               </div>
@@ -66,6 +70,10 @@
         <a-button class="mt-5" @click="addCreateRole(index)"
           ><PlusCircleOutlined />添加创建条件</a-button
         >
+        <!-- 创建报警规则的弹框 -->
+        <a-modal v-model:visible="visible" title="详情" centered>
+          <a-textarea placeholder="报警详细信息" :rows="4" />
+        </a-modal>
         <p style="color: #3c3c3c">清除报警规则</p>
         <template v-for="(item2, index2) in item.removeRule" :key="item2">
@@ -81,8 +89,9 @@
                   <EditOutlined class="cursor-pointer ml-4" style="font-size: 20px"
                 /></p>
                 <p class="mt-4 ml-4"
-                  >详情：1 <EditOutlined class="cursor-pointer ml-4" style="font-size: 20px"
-                /></p>
+                  >详情：1 <EditOutlined class="cursor-pointer ml-4" style="font-size: 20px" />
+                </p>
+
                 <p class="mt-4 ml-4">Mobile dashboard: <a-select style="width: 150px" /></p>
               </div>
             </div>
@@ -98,7 +107,7 @@
           </div>
         </template>
         <a-button class="mt-5" @click="addRemoveRule(index)"
-          ><PlusCircleOutlined />添加创建条件</a-button
+          ><PlusCircleOutlined />添加清除条件</a-button
         >
       </CollapseContainer>
     </template>
@@ -119,6 +128,8 @@
     Button,
     Select,
     Tooltip,
+    Modal,
+    Textarea,
   } from 'ant-design-vue';
   import {
     DeleteOutlined,
@@ -143,6 +154,8 @@
       CollapseContainer,
       EditOutlined,
       PlusOutlined,
+      [Modal.name]: Modal,
+      [Textarea.name]: Textarea,
       [Tooltip.name]: Tooltip,
       [Button.name]: Button,
       [Input.name]: Input,
@@ -157,6 +170,7 @@
     emits: ['prev'],
     setup(_, { emit }) {
       const alarmList = ref<alarmListItem[]>([]);
+      const visible = ref(false);
       const options = ref([
         {
           value: '1',
@@ -207,7 +221,9 @@
       };
       // 添加创建条件
       const addCreateRole = (index) => {
-        alarmList.value[index].alarmRule.push('1');
+        alarmList.value[index].alarmRule.push({
+          detail: '',
+        });
       };
       const handleDeleteCondition = (index, index1) => {
         alarmList.value[index].alarmRule.splice(index1, 1);
@@ -221,10 +237,17 @@
         alarmList.value[index].removeRule.splice(index1, 1);
       };
+      // 编辑创建规则的详情
+      const editCreateDetail = (index, index1) => {
+        visible.value = true;
+        console.log(alarmList.value[index].alarmRule[index1].detail);
+      };
+
       return {
         rules,
         alarmList,
         options,
+        visible,
         prevStep,
         addAlarmRule,
         addCreateRole,
@@ -232,6 +255,7 @@
         handleDeleteCondition,
         addRemoveRule,
         handleDeleteRemoveCondition,
+        editCreateDetail,
         labelCol: { style: { width: '150px' } },
         wrapperCol: { span: 18 },
       };
--- a/src/views/device/step/DeviceStep1.vue
View file @18eaea5
+++ b/src/views/device/step/DeviceStep1.vue
View file @18eaea5
@@ -152,7 +152,9 @@
       const selectPosition = () => {
         visible.value = true;
         if (!positionState.longitude) {
-          initMap('104.04666605565338', '30.543516387560476');
+          positionState.longitude = '104.04666605565338';
+          positionState.latitude = '30.543516387560476';
+          initMap(positionState.longitude, positionState.latitude);
         } else {
           initMap(positionState.longitude, positionState.latitude);
         }
@@ -191,7 +193,6 @@
         map.enableScrollWheelZoom(true);
         map.addEventListener('click', (e) => {
           const { lat, lng } = e.point;
-          console.log(lat, lng);
           positionState.latitude = lat + '';
           positionState.longitude = lng + '';
           let gc = new BMap.Geocoder();