Merge branch 'sqy_dev' into 'main'

'feat:实时数据(新增前端查询),fix:修复通知管理上传图片,feat:地图增加搜索功能'

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

@@ -38,7 +38,6 @@
   import 'tinymce/plugins/print';
   import 'tinymce/plugins/save';
   import 'tinymce/plugins/searchreplace';
-  import 'tinymce/plugins/spellchecker';
   import 'tinymce/plugins/tabfocus';
   // import 'tinymce/plugins/table';
   import 'tinymce/plugins/template';
@@ -289,7 +288,11 @@
           return;
         }
         const content = editor?.getContent() ?? '';
-        const val = content?.replace(getUploadingImgName(name), `<img src="${url}"/>`) ?? '';
+        const val =
+          content?.replace(
+            getUploadingImgName(name),
+            `<img src="${url}" style="height:6rem;width:6rem"/>`
+          ) ?? '';
         setValue(editor, val);
       }
 

@@ -7,6 +7,7 @@
       :action="uploadUrl"
       :showUploadList="false"
       accept=".jpg,.jpeg,.gif,.png,.webp"
+      :headers="{ 'X-Authorization': 'Bearer' + ' ' + token }"
     >
       <a-button type="primary" v-bind="{ ...getButtonProps }">
         {{ t('component.upload.imgUpload') }}
@@ -21,7 +22,8 @@
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useGlobSetting } from '/@/hooks/setting';
   import { useI18n } from '/@/hooks/web/useI18n';
-
+  import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
+  import { getAuthCache } from '/@/utils/auth';
   export default defineComponent({
     name: 'TinymceImageUpload',
     components: { Upload },
@@ -37,7 +39,7 @@
     emits: ['uploading', 'done', 'error'],
     setup(props, { emit }) {
       let uploading = false;
-
+      const token: string = getAuthCache(JWT_TOKEN_KEY);
       const { uploadUrl } = useGlobSetting();
       const { t } = useI18n();
       const { prefixCls } = useDesign('tinymce-img-upload');
@@ -52,7 +54,7 @@
       function handleChange(info: Recordable) {
         const file = info.file;
         const status = file?.status;
-        const url = file?.response?.url;
+        const url = file?.response?.fileStaticUri;
         const name = file?.name;
 
         if (status === 'uploading') {
@@ -75,6 +77,7 @@
         uploadUrl,
         t,
         getButtonProps,
+        token,
       };
     },
   });

@@ -4,7 +4,7 @@
 // colorpicker/contextmenu/textcolor plugin is now built in to the core editor, please remove it from your editor configuration
 
 export const plugins = [
-  'advlist anchor autolink autosave code codesample  directionality  fullscreen hr insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus  template  textpattern visualblocks visualchars wordcount',
+  'advlist anchor autolink autosave code codesample  directionality  fullscreen hr insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace  tabfocus  template  textpattern visualblocks visualchars wordcount',
 ];
 
 export const toolbar = [

@@ -99,7 +99,7 @@ export const alarmSearchSchemas: FormSchema[] = [
   },
   {
     field: 'endTime',
-    label: '告警时间范围',
+    label: '告警时间',
     component: 'DatePicker',
     componentProps: {
       valueFormat: 'x',
@@ -223,7 +223,6 @@ export const childDeviceSchemas: FormSchema[] = [
     colProps: { span: 6 },
     component: 'Select',
     componentProps: {
-      size: 'small',
       maxLength: 255,
       options: [
         { label: '待激活', value: 'INACTIVE' },

@@ -55,6 +55,16 @@ export const columns: BasicColumn[] = [
 // 查询字段
 export const searchFormSchema: FormSchema[] = [
   {
+    field: 'name',
+    label: '设备名称',
+    component: 'Input',
+    colProps: { span: 6 },
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入设备名称',
+    },
+  },
+  {
     field: 'deviceType',
     label: '设备类型',
     component: 'Select',
@@ -80,27 +90,4 @@ export const searchFormSchema: FormSchema[] = [
     },
     colProps: { span: 6 },
   },
-  {
-    field: 'name',
-    label: '设备名称',
-    component: 'Input',
-    colProps: { span: 6 },
-    componentProps: {
-      maxLength: 255,
-      placeholder: '请输入设备名称',
-    },
-    dynamicRules: () => {
-      return [
-        {
-          required: false,
-          validator: (_, value) => {
-            if (String(value).length > 255) {
-              return Promise.reject('字数不超过255个字');
-            }
-            return Promise.resolve();
-          },
-        },
-      ];
-    },
-  },
 ];

@@ -44,16 +44,31 @@
       centered
     >
       <div>
-        <a-form :label-col="labelCol">
-          <a-row :gutter="20" class="pt-4 pl-6">
-            <a-col :span="8">
+        <a-form :label-col="labelCol" :colon="false">
+          <a-row :gutter="20" class="mt-4">
+            <a-col :span="20">
+              <a-form-item label="搜索位置">
+                <AutoComplete
+                  v-model:value="positionState.address"
+                  :options="dataSource"
+                  style="width: 100%"
+                  placeholder="搜索位置"
+                  @search="debounceSearch"
+                  @select="handleSelect"
+                  backfill
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row :gutter="20" class="">
+            <a-col :span="10">
               <a-form-item label="经度">
-                <Input type="input" v-model:value="positionState.longitude" disabled />
+                <Input v-model:value="positionState.longitude" disabled />
               </a-form-item>
             </a-col>
-            <a-col :span="8">
+            <a-col :span="10">
               <a-form-item label="纬度">
-                <Input type="input" v-model:value="positionState.latitude" disabled />
+                <Input v-model:value="positionState.latitude" disabled />
               </a-form-item>
             </a-col>
           </a-row>
@@ -68,18 +83,19 @@
   import { BasicForm, useForm } from '/@/components/Form';
   import { step1Schemas } from '../../config/data';
   import { useScript } from '/@/hooks/web/useScript';
-  import { Input, Divider, Upload, message, Modal, Form, Row, Col } from 'ant-design-vue';
+  import { Input, Upload, message, Modal, Form, Row, Col, AutoComplete } from 'ant-design-vue';
   import { EnvironmentTwoTone, PlusOutlined } from '@ant-design/icons-vue';
   import { upload } from '/@/api/oss/ossFileUploader';
   import { FileItem } from '/@/components/Upload/src/typing';
   import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
   import icon from '/@/assets/images/wz.png';
+  import { useDebounceFn } from '@vueuse/core';
   export default defineComponent({
     components: {
       BasicForm,
       Input,
+      AutoComplete,
       [Input.Group.name]: Input.Group,
-      [Divider.name]: Divider,
       Upload,
       EnvironmentTwoTone,
       PlusOutlined,
@@ -101,16 +117,7 @@
     emits: ['next'],
     setup(props, { emit }) {
       const devicePic = ref('');
-      let positionState = reactive<{
-        longitude: string;
-        latitude: string;
-        description?: string;
-        address: string;
-      }>({
-        longitude: '',
-        latitude: '',
-        address: '',
-      });
+
       const [register, { validate, resetFields, setFieldsValue, getFieldsValue, updateSchema }] =
         useForm({
           labelWidth: 100,
@@ -169,6 +176,35 @@
         }
       };
 
+      let positionState = reactive<{
+        longitude: string;
+        latitude: string;
+        description?: string;
+        address: string;
+        map: null;
+        marker: null;
+      }>({
+        longitude: '',
+        latitude: '',
+        address: '',
+        map: null,
+        marker: null,
+      });
+      /**
+       * 逆地址解析函数（根据坐标点获取详细地址）
+       * @param {Object} point   百度地图坐标点，必传
+       */
+      function getAddrByPoint(point) {
+        let geco = new BMap.Geocoder();
+        geco.getLocation(point, function (res) {
+          positionState.marker.setPosition(point); //重新设置标注的地理坐标
+          positionState.map.panTo(point); //将地图的中心点更改为给定的点
+          positionState.address = res.address; //记录该点的详细地址信息
+          positionState.longitude = point.lng; //记录当前坐标点
+          positionState.latitude = point.lat;
+        });
+      }
+
       // 地图
       const wrapRef = ref<HTMLDivElement | null>(null);
       const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
@@ -180,48 +216,94 @@
         const BMap = (window as any).BMap;
         if (!wrapEl) return;
         let preMarker = null;
-        const map = new BMap.Map(wrapEl);
+        positionState;
+        positionState.map = new BMap.Map(wrapEl, { enableMapClick: false });
         let myIcon = new BMap.Icon(icon, new BMap.Size(20, 30));
         const point = new BMap.Point(Number(longitude), Number(latitude));
-        let marker = new BMap.Marker(point, { icon: myIcon });
-        if (marker) {
-          map.removeOverlay(preMarker);
+        positionState.marker = new BMap.Marker(point, { icon: myIcon, enableDragging: true });
+        if (positionState.marker) {
+          positionState.map.removeOverlay(preMarker);
         }
-        map.addOverlay(marker);
-        preMarker = marker;
-        map.centerAndZoom(point, 15);
-        map.enableScrollWheelZoom(true);
-        map.addEventListener('click', (e) => {
-          const { lat, lng } = e.point;
-          positionState.latitude = lat + '';
-          positionState.longitude = lng + '';
-          let gc = new BMap.Geocoder();
-          let newPoint = new BMap.Point(lng, lat);
+        positionState.map.addOverlay(positionState.marker);
+        preMarker = positionState.marker;
+        positionState.map.centerAndZoom(point, 15);
+        positionState.map.enableScrollWheelZoom(true);
+        let navigationControl = new BMap.NavigationControl({
+          //创建一个特定样式的地图平移缩放控件
+          anchor: BMAP_ANCHOR_TOP_RIGHT, //靠右上角位置
+          type: BMAP_NAVIGATION_CONTROL_LARGE, //SMALL控件类型
+        });
+        positionState.map.addControl(navigationControl); //将控件添加到地图
 
-          // 添加锚点
-          if (!e.overlay) {
-            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 address = addComp.city + addComp.district + addComp.street + addComp.streetNumber;
-            positionState.address = address;
-          });
+        positionState.marker.addEventListener('dragend', function (e) {
+          getAddrByPoint(e.point); //拖拽结束后调用逆地址解析函数，e.point为拖拽后的地理坐标
+        });
+        positionState.map.addEventListener('click', (e) => {
+          getAddrByPoint(e.point);
         });
       }
+      const dataSource = ref<any[]>([]);
+
+      const onSearch = (searchText: string) => {
+        if (!searchText) {
+          dataSource.value = [];
+          return;
+        }
+        let local = new BMap.LocalSearch(positionState.map, {
+          onSearchComplete(res) {
+            //检索完成后的回调函数
+            if (local.getStatus() == BMAP_STATUS_SUCCESS) {
+              const searchArr = [];
+              for (let i = 0; i < res.getCurrentNumPois(); i++) {
+                const item = res.getPoi(i);
+                console.log(item);
+                searchArr.push({
+                  label: item.address + item.title,
+                  value: item.address + item.title,
+                  point: item.point,
+                });
+              }
+              dataSource.value = searchArr;
+            }
+          },
+        }); //调用search方法，根据检索词searchText发起检索
+        local.search(searchText);
+        console.log(dataSource);
+      };
+      // 防抖函数包装一下，防止频繁执行
+      const debounceSearch = useDebounceFn(onSearch, 500);
+      function handleSelect(value, option) {
+        dataSource.value = [];
+        console.log(option);
+        positionState.address = option.value; //记录详细地址，含建筑物名
+        const { lat, lng } = option.point;
+        positionState.latitude = lat; //记录当前选中地址坐标
+        positionState.longitude = lng; //记录当前选中地址坐标
+        positionState.map.clearOverlays(); //清除地图上所有覆盖物
+        let myIcon = new BMap.Icon(icon, new BMap.Size(20, 30));
+        positionState.marker = new BMap.Marker(option.point, {
+          icon: myIcon,
+          enableDragging: true,
+        }); //根据所选坐标重新创建Marker
+        positionState.marker.addEventListener('dragend', function (e) {
+          getAddrByPoint(e.point); //拖拽结束后调用逆地址解析函数，e.point为拖拽后的地理坐标
+        });
+        positionState.map.addOverlay(positionState.marker); //将覆盖物重新添加到地图中
+        positionState.map.panTo(option.point); //将地图的中心点更改为选定坐标点
+      }
+
       // 确定选择的位置
       const handleOk = () => {
         visible.value = false;
       };
       // 取消选择位置
       const handleCancel = () => {
+        dataSource.value = [];
+
         for (let key in positionState) {
           positionState[key] = '';
         }
+        console.log(positionState);
       };
       // 父组件调用更新字段值的方法
       function parentSetFieldsValue(data) {
@@ -280,7 +362,7 @@
         handleOk,
         handleCancel,
         wrapRef,
-        labelCol: { style: { width: '40px' } },
+        labelCol: { style: { width: '100px' } },
         parentSetFieldsValue,
         parentGetFieldsValue,
         parentValidate,
@@ -288,6 +370,10 @@
         parentResetPositionState,
         disabledDeviceType,
         nextStep,
+        onSearch,
+        handleSelect,
+        dataSource,
+        debounceSearch,
       };
     },
   });

@@ -42,7 +42,7 @@
         columns: alarmColumns,
         useSearchForm: true,
         formConfig: {
-          labelWidth: 120,
+          labelWidth: 100,
           schemas: alarmSearchSchemas,
         },
         showTableSetting: true,

@@ -25,7 +25,7 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, onMounted } from 'vue';
+  import { defineComponent } from 'vue';
   import { Tag } from 'ant-design-vue';
   import { DeviceState } from '/@/api/device/model/deviceModel';
   import { BasicTable, useTable } from '/@/components/Table';
@@ -44,19 +44,14 @@
       },
     },
     setup(props) {
-      console.log(123);
-      onMounted(() => {
-        console.log(props.fromId);
-      });
       const [registerTable] = useTable({
         api: getChildDevicePage,
         columns: childDeviceColumns,
         formConfig: {
-          labelWidth: 120,
+          labelWidth: 100,
           schemas: childDeviceSchemas,
         },
         beforeFetch: (data) => {
-          console.log(props.fromId);
           Reflect.set(data, 'fromId', props.fromId);
         },
         useSearchForm: true,

@@ -48,7 +48,7 @@
         recordList: Array<socketDataType>(),
       });
       const { createMessage } = useMessage();
-      const [registerTable] = useTable({
+      const [registerTable, { getForm, setTableData }] = useTable({
         columns: realTimeDataColumns,
         showTableSetting: true,
         bordered: true,
@@ -56,18 +56,42 @@
         dataSource: state.recordList,
         useSearchForm: true,
         formConfig: {
-          labelWidth: 120,
+          labelWidth: 100,
           schemas: [
             {
-              field: 'icon',
-              label: '设备配置',
-              component: 'Select',
+              field: 'key',
+              label: '键/值',
+              component: 'Input',
               colProps: { span: 6 },
               componentProps: {
+                placeholder: '请输入 键/值',
                 maxLength: 255,
               },
             },
           ],
+          // 自定义前端查询
+          submitFunc() {
+            const { getFieldsValue } = getForm();
+            const { key } = getFieldsValue();
+            if (!key) {
+              setTableData(state.recordList);
+              return;
+            }
+            const newRecordList = state.recordList.find((item) => {
+              if (item.key === key) return item;
+              console.log('--------------------------', item);
+              if (item.value === key) return item;
+            });
+            console.log(newRecordList);
+            if (!newRecordList) {
+              setTableData([]);
+            } else {
+              setTableData([newRecordList]);
+            }
+          },
+          resetFunc() {
+            setTableData(state.recordList);
+          },
         },
       });
 
@@ -115,7 +139,6 @@
           createMessage.error('webSocket连接超时,请联系管理员');
         },
       });
-
       return {
         registerTable,
       };

@@ -162,7 +162,7 @@
         api: devicePage,
         columns,
         formConfig: {
-          labelWidth: 120,
+          labelWidth: 100,
           schemas: searchFormSchema,
           resetFunc: resetFn,
         },

@@ -26,7 +26,7 @@
       render: ({ model, field }) => {
         return h(Tinymce, {
           value: model[field],
-          showImageUpload: false,
+          // showImageUpload: false,
           onChange: (value: string) => {
             model[field] = value;
           },

@@ -101,9 +101,8 @@ export const formSchema: FormSchema[] = [
     field: 'content',
     component: 'Input',
     colProps: { span: 24 },
-    label: '内容',
+    label: '通知内容',
     required: true,
-    defaultValue: '',
     render: ({ model, field }) => {
       return h(Tinymce, {
         value: model[field],
@@ -143,15 +142,6 @@ export const formSchema: FormSchema[] = [
     },
     ifShow: ({ values }) => isOrg(Reflect.get(values, 'receiverType')),
   },
-  {
-    field: 'abc',
-    component: 'Input',
-    label: '',
-    colProps: {
-      span: 12,
-    },
-    slot: 'add',
-  },
 ];
 
 export const searchFormSchema: FormSchema[] = [

@@ -38,7 +38,7 @@
     },
     {
       field: 'type',
-      label: '类型:',
+      label: '类型',
       render: (_, { type }) => {
         return type === 'NOTICE'
           ? '公告'