Merge branch 'ft_local_dev' into 'main'

feat:新增脚本管理-转换脚本静态页面

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

@@ -4,6 +4,27 @@ import { Rule } from 'ant-design-vue/lib/form/interface';
  *
  */
 
+export const validatorLongitude = (_rule: Rule, value: string) => {
+  const reg =
+    /^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,20})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,20}|180)$/;
+  if (!value) {
+    return Promise.reject('请输入经度');
+  } else if (!reg.test(value)) {
+    return Promise.reject('经度整数部分为0-180,小数部分为0到6位!');
+  }
+  return Promise.resolve();
+};
+export const validatorLatitude = (_rule: Rule, value: string) => {
+  const reg = /^(\-|\+)?([0-8]?\d{1}\.\d{0,20}|90\.0{0,20}|[0-8]?\d{1}|90)$/;
+  if (value === '') {
+    return Promise.reject('请输入维度');
+  } else if (!reg.test(value)) {
+    return Promise.reject('纬度整数部分为0-90,小数部分为0到6位!');
+  }
+
+  return Promise.resolve();
+};
+
 //正整数并且可以是英文
 export const numberAndEngLishRule: Rule[] = [
   {

@@ -46,7 +46,7 @@
       centered
     >
       <div>
-        <Form :label-col="labelCol" :colon="false">
+        <Form :label-col="labelCol" :colon="false" :rules="rules" :model="positionState">
           <Row :gutter="20" class="mt-4">
             <Col :span="20">
               <FormItem label="搜索位置">
@@ -64,13 +64,21 @@
           </Row>
           <Row :gutter="20" class="">
             <Col :span="10">
-              <FormItem label="经度">
-                <Input v-model:value="positionState.longitude" disabled />
+              <FormItem label="经度" name="longitude">
+                <Input
+                  @blur="redirectPosition"
+                  @change="redirectPosition"
+                  v-model:value="positionState.longitude"
+                />
               </FormItem>
             </Col>
             <Col :span="10">
-              <FormItem label="纬度">
-                <Input v-model:value="positionState.latitude" disabled />
+              <FormItem label="纬度" name="latitude">
+                <Input
+                  @blur="redirectPosition"
+                  @change="redirectPosition"
+                  v-model:value="positionState.latitude"
+                />
               </FormItem>
             </Col>
           </Row>
@@ -90,9 +98,11 @@
   import { upload } from '/@/api/oss/ossFileUploader';
   import { FileItem } from '/@/components/Upload/src/typing';
   import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
-  import { generateSNCode } from '/@/api/device/deviceManager.ts';
+  import { generateSNCode } from '/@/api/device/deviceManager';
   import icon from '/@/assets/images/wz.png';
   import { useDebounceFn } from '@vueuse/core';
+  import { validatorLongitude, validatorLatitude } from '/@/utils/rules';
+
   export default defineComponent({
     components: {
       BasicForm,
@@ -115,6 +125,16 @@
     },
     emits: ['next'],
     setup(props, { emit }) {
+      const redirectPosition = () => {
+        if (positionState.longitude && positionState.latitude) {
+          var pt = new BMap.Point(positionState.longitude, positionState.latitude);
+          getAddrByPoint(pt);
+        }
+      };
+      const rules: any = {
+        longitude: [{ required: true, validator: validatorLongitude, trigger: 'blur' }],
+        latitude: [{ required: true, validator: validatorLatitude, trigger: 'blur' }],
+      };
       const devicePic = ref('');
       const loading = ref(false);
 
@@ -202,9 +222,9 @@
         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;
+          positionState.address = res?.address; //记录该点的详细地址信息
+          positionState.longitude = point?.lng; //记录当前坐标点
+          positionState.latitude = point?.lat;
         });
       }
 
@@ -378,6 +398,8 @@
         debounceSearch,
         generateSN,
         loading,
+        rules,
+        redirectPosition,
       };
     },
   });
@@ -387,6 +409,7 @@
     width: 450px;
     margin: 0 auto;
   }
+
   :deep(.ant-radio-group) {
     width: 15vw;
   }

@@ -4,6 +4,95 @@ import { findDictItemByCode } from '/@/api/system/dict';
 import { MessageEnum } from '/@/enums/messageEnum';
 import { numberRule } from '/@/utils/rules';
 
+import { deviceConfigGetRuleChain } from '/@/api/device/deviceConfigApi';
+
+export const step1Schemas: FormSchema[] = [
+  {
+    field: 'image',
+    label: '上传图片',
+    component: 'Input',
+    slot: 'imageSelect',
+  },
+  {
+    field: 'name',
+    label: '配置名称',
+    required: true,
+    component: 'Input',
+    componentProps() {
+      return {
+        disabled: false,
+        ength: 255,
+        placeholder: '请输入配置名称',
+      };
+    },
+  },
+  {
+    field: 'defaultRuleChainId',
+    label: '规则链',
+    component: 'ApiSelect',
+    componentProps: {
+      api: async () => {
+        const data = await deviceConfigGetRuleChain();
+        const returnData = data.map((m) => {
+          return {
+            getValueField: m.name,
+            getKeyField: m.id.id,
+          };
+        });
+        return returnData;
+      },
+      labelField: 'getValueField',
+      valueField: 'getKeyField',
+      immediate: true,
+    },
+  },
+  {
+    field: 'defaultQueueName',
+    label: '处理队列',
+    component: 'ApiSelect',
+    componentProps: {
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'queen_execute_sequence',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+      resultField: 'items',
+    },
+  },
+
+  {
+    label: '描述',
+    field: 'description',
+    component: 'InputTextArea',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入描述',
+    },
+  },
+];
+
+export const step2Schemas: FormSchema[] = [
+  {
+    field: 'transportType',
+    component: 'Select',
+    label: '接入协议',
+    defaultValue: 'DEFAULT',
+    componentProps() {
+      return {
+        options: [
+          { label: '默认', value: 'DEFAULT' },
+          { label: 'MQTT', value: 'MQTT' },
+          { label: 'CoAP', value: 'COAP' },
+          { label: 'LWM2M', value: 'LWM2M' },
+          { label: 'SNMP', value: 'SNMP' },
+        ],
+      };
+    },
+    colProps: { span: 10 },
+  },
+];
+
 export const columns: BasicColumn[] = [
   {
     title: '配置图片', //图标

@@ -34,7 +34,7 @@
 <script lang="ts" setup>
   import { ref } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { step1Schemas } from './data';
+  import { step1Schemas } from '../device.profile.data';
   import { uploadApi } from '/@/api/personal/index';
   import { Upload } from 'ant-design-vue';
   import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';

 <template>
-  <div class="step2-style">
+  <div
+    class="step2-style"
+    :style="[isMqttType == 'DEFAULT' ? { minHeight: 0 + 'px' } : { minHeight: 800 + 'px' }]"
+  >
     <div
-      style="margin-top: 0.1vh; height: 15vh"
       :style="[
         isMqttType == 'MQTT'
           ? { minHeight: 45 + 'vh' }
@@ -40,7 +42,7 @@
 <script lang="ts" setup>
   import { reactive, ref, onUnmounted, nextTick } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { step2Schemas } from './data';
+  import { step2Schemas } from '../device.profile.data';
   import { Button } from '/@/components/Button';
   import MqttCpns from './cpns/mqtt/Mqtt.vue';
   import CoapCpns from './cpns/coap/Coap.vue';
@@ -52,7 +54,7 @@
   const coapRef = ref<InstanceType<typeof CoapCpns>>();
   const lwm2mRef = ref<InstanceType<typeof Lwm2mCpns>>();
   const snmpRef = ref<InstanceType<typeof SnmpCpns>>();
-  const isMqttType = ref('');
+  const isMqttType = ref('DEFAULT');
   let step2Data = reactive({
     transportConfiguration: {},
   });
@@ -75,7 +77,7 @@
   };
 
   const resetFormData = () => {
-    isMqttType.value = '';
+    isMqttType.value = 'DEFAULT';
     resetFields();
     nextTick(() => {
       mqttRef.value?.resetFormData();
@@ -107,7 +109,7 @@
     });
   });
   onUnmounted(() => {
-    isMqttType.value = '';
+    isMqttType.value = 'DEFAULT';
   });
   const getFormData = async () => {
     const val = await validate();

-import { FormSchema } from '/@/components/Form';
-import { deviceConfigGetRuleChain } from '/@/api/device/deviceConfigApi';
-import { findDictItemByCode } from '/@/api/system/dict';
-
-export const step1Schemas: FormSchema[] = [
-  {
-    field: 'image',
-    label: '上传图片',
-    component: 'Input',
-    slot: 'imageSelect',
-  },
-  {
-    field: 'name',
-    label: '配置名称',
-    required: true,
-    component: 'Input',
-    componentProps() {
-      return {
-        disabled: false,
-        ength: 255,
-        placeholder: '请输入配置名称',
-      };
-    },
-  },
-  {
-    field: 'defaultRuleChainId',
-    label: '规则链',
-    component: 'ApiSelect',
-    componentProps: {
-      api: async () => {
-        const data = await deviceConfigGetRuleChain();
-        const returnData = data.map((m) => {
-          return {
-            getValueField: m.name,
-            getKeyField: m.id.id,
-          };
-        });
-        return returnData;
-      },
-      labelField: 'getValueField',
-      valueField: 'getKeyField',
-      immediate: true,
-    },
-  },
-  {
-    field: 'defaultQueueName',
-    label: '处理队列',
-    component: 'ApiSelect',
-    componentProps: {
-      api: findDictItemByCode,
-      params: {
-        dictCode: 'queen_execute_sequence',
-      },
-      labelField: 'itemText',
-      valueField: 'itemValue',
-      resultField: 'items',
-    },
-  },
-
-  {
-    label: '描述',
-    field: 'description',
-    component: 'InputTextArea',
-    componentProps: {
-      maxLength: 255,
-      placeholder: '请输入描述',
-    },
-  },
-];
-
-export const step2Schemas: FormSchema[] = [
-  {
-    field: 'transportType',
-    component: 'Select',
-    label: '接入协议',
-    defaultValue: 'DEFAULT',
-    componentProps() {
-      return {
-        options: [
-          { label: '默认', value: 'DEFAULT' },
-          { label: 'MQTT', value: 'MQTT' },
-          { label: 'CoAP', value: 'COAP' },
-          { label: 'LWM2M', value: 'LWM2M' },
-          { label: 'SNMP', value: 'SNMP' },
-        ],
-      };
-    },
-    colProps: { span: 10 },
-  },
-];

+<template>
+  <div>
+    <BasicForm @register="registerForm">
+      <template #scriptContent>
+        <Card title="脚本内容" :bodyStyle="{ padding: 0, height: '280px' }">
+          <div ref="aceRef" class="overflow-hidden"></div>
+        </Card>
+        <Button @click="handleCopy" class="mt-4">
+          <template #icon>
+            <CopyOutlined />
+          </template>
+          copy
+        </Button>
+      </template>
+    </BasicForm>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, unref } from 'vue';
+  import { formSchema } from './config.data';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import ace from 'ace-builds';
+  import { Card, Button } from 'ant-design-vue';
+  import 'ace-builds/src-noconflict/theme-chrome'; // 默认设置的主题
+  import 'ace-builds/src-noconflict/mode-javascript'; // 默认设置的语言模式
+  import { beautify } from 'ace-builds/src-noconflict/ext-beautify.js';
+  import { CopyOutlined } from '@ant-design/icons-vue';
+  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  defineEmits(['register']);
+  const { createMessage } = useMessage();
+  const { clipboardRef, copiedRef } = useCopyToClipboard();
+  const aceEditor = ref();
+  const aceRef = ref();
+  const [registerForm, { validate, resetFields }] = useForm({
+    labelWidth: 120,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+  });
+  // 初始化编辑器
+  const initEditor = (jsScript?: string) => {
+    aceEditor.value = ace.edit(aceRef.value, {
+      maxLines: 12, // 最大行数，超过会自动出现滚动条
+      minLines: 12, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
+      fontSize: 14, // 编辑器内字体大小
+      theme: 'ace/theme/chrome', // 默认设置的主题
+      mode: 'ace/mode/javascript', // 默认设置的语言模式
+      tabSize: 2, // 制表符设置为 4 个空格大小
+    });
+
+    aceEditor.value.setOptions({
+      enableBasicAutocompletion: true,
+      enableLiveAutocompletion: true,
+    });
+    aceEditor.value.setValue(
+      jsScript ??
+        `
+    var trimSource =source.replaceAll(" ","");
+    if(trimSource.length==26 && trimSource.startsWith("020308")){
+      var str = "";
+      for(var i = 6;i<20;i+=2){
+        str += String.fromCharCode(parseInt(trimSource[i]+trimSource[i+1],16));
+      }`
+    );
+    beautify(aceEditor.value.session);
+  };
+  const handleCopy = () => {
+    const valueRef = aceEditor.value.getValue();
+    const value = unref(valueRef);
+    if (!value) {
+      createMessage.warning('请输入要拷贝的内容！');
+      return;
+    }
+    clipboardRef.value = value;
+    if (unref(copiedRef)) {
+      createMessage.success('复制成功！');
+    }
+  };
+  const getFormData = async () => {
+    const value = await validate();
+    if (!value) return;
+    return value;
+  };
+  const resetFormData = () => {
+    resetFields();
+  };
+
+  defineExpose({
+    initEditor,
+    getFormData,
+    resetFormData,
+  });
+</script>
+<style lang="less" scoped>
+  @import url('./ConverScriptModal.less');
+</style>

+.wrapper {
+  margin: 10px 60px 60px 60px;
+}
+
+.inner {
+  width: 400px;
+  height: 400px;
+}
+
+.item {
+  text-align: center;
+  font-size: 200%;
+  color: #fff;
+}

+<template>
+  <div>
+    <BasicModal
+      destroyOnClose
+      v-bind="$attrs"
+      width="60rem"
+      @register="register"
+      :title="getTitle"
+      :minHeight="500"
+      @cancel="handleCancel"
+      @ok="handleSubmit"
+    >
+      <ConverScript ref="converScriptRef" />
+    </BasicModal>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import ConverScript from './ConverScript.vue';
+
+  const converScriptRef = ref<InstanceType<typeof ConverScript>>();
+  const getTitle = computed(() => (isUpdate.value ? '编辑转换脚本' : '新增转换脚本'));
+  const isUpdate = ref(false);
+  const isViewDetail = ref('');
+  const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ loading: true });
+    isUpdate.value = data.isUpdate;
+    isViewDetail.value = data.isView;
+    converScriptRef.value?.initEditor(data.record?.configuration?.jsScript);
+    setModalProps({ loading: false });
+    if (!unref(isViewDetail)) {
+      const title = !unref(isUpdate) ? '编辑转换脚本' : '新增转换脚本';
+      setModalProps({ title, showOkBtn: true, showCancelBtn: true });
+      if (!unref(isUpdate)) {
+      }
+    } else {
+      setModalProps({ showOkBtn: false, showCancelBtn: false, title: '查看转换脚本' });
+    }
+  });
+  const handleSubmit = async () => {
+    const val = await converScriptRef.value?.getFormData();
+    console.log(val);
+  };
+  const handleCancel = () => {
+    closeModal();
+    converScriptRef.value?.resetFormData();
+  };
+</script>
+<style lang="less" scoped>
+  @import url('./ConverScriptModal.less');
+</style>

+import { BasicColumn, FormSchema } from '/@/components/Table';
+import moment from 'moment';
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
+
+// 表格配置
+export const columns: BasicColumn[] = [
+  {
+    title: '脚本名称',
+    dataIndex: 'reportConfigName',
+    width: 80,
+  },
+  {
+    title: '脚本状态',
+    dataIndex: 'organizationName',
+    width: 120,
+    customRender: ({ record }) => {
+      const status = record.organizationName;
+      const color = status == 1 ? 'green' : 'red';
+      const text = status == 1 ? '启用' : '禁用';
+      return h(Tag, { color: color }, () => text);
+    },
+  },
+  {
+    title: '脚本内容',
+    dataIndex: 'dataType',
+    width: 120,
+    slots: { customRender: 'dataType' },
+  },
+  {
+    title: '描述',
+    dataIndex: 'executeWay',
+    width: 120,
+  },
+  {
+    title: '创建日期',
+    dataIndex: 'executeTime',
+    width: 180,
+  },
+];
+
+// 查询配置
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'reportConfigName',
+    label: '脚本名称',
+    component: 'Input',
+    colProps: { span: 6 },
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入配置名称',
+    },
+  },
+  {
+    field: 'sendTime',
+    label: '创建时间',
+    component: 'RangePicker',
+    componentProps: {
+      showTime: {
+        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
+      },
+    },
+    colProps: { span: 6 },
+  },
+];
+
+// 新增编辑配置
+export const formSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '名称',
+    colProps: { span: 24 },
+    required: true,
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入脚本名称',
+    },
+  },
+  {
+    field: 'scriptContent',
+    label: '脚本内容',
+    required: true,
+    component: 'Input',
+    slot: 'scriptContent',
+    colProps: { span: 24 },
+  },
+  {
+    field: 'remark',
+    label: '备注',
+    colProps: { span: 24 },
+    component: 'InputTextArea',
+    componentProps: {
+      rows: 6,
+      maxLength: 255,
+      placeholder: '请输入备注',
+    },
+  },
+];

+<template>
+  <div>
+    <BasicTable :clickToRowSelect="false" @register="registerTable" :searchInfo="searchInfo">
+      <template #toolbar>
+        <Authority value="">
+          <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增转换脚本 </a-button>
+        </Authority>
+        <Authority value="">
+          <Popconfirm
+            title="您确定要批量删除数据"
+            ok-text="确定"
+            cancel-text="取消"
+            @confirm="handleDeleteOrBatchDelete(null)"
+          >
+            <a-button type="primary" color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
+          </Popconfirm>
+        </Authority>
+      </template>
+      <template #dataType="{ record }">
+        <a-button type="text" @click="handleScriptView(record)">
+          <span style="color: #377dff">查看脚本</span>
+        </a-button>
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              icon: 'clarity:note-edit-line',
+              auth: '',
+              onClick: handleCreateOrEdit.bind(null, record),
+            },
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              auth: '',
+              color: 'error',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDeleteOrBatchDelete.bind(null, record),
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <ConverScriptModal @register="registerModal" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { reactive, nextTick } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { searchFormSchema, columns } from './config.data';
+  import { Authority } from '/@/components/Authority';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { Popconfirm } from 'ant-design-vue';
+  import { useModal } from '/@/components/Modal';
+  import ConverScriptModal from './ConverScriptModal.vue';
+  import { exportPage, deleteExportManage } from '/@/api/export/exportManager';
+
+  const searchInfo = reactive<Recordable>({});
+  const [registerTable, { reload, setProps, setTableData }] = useTable({
+    title: '转换脚本列表',
+    api: exportPage,
+    columns,
+    showIndexColumn: false,
+    clickToRowSelect: false,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      fieldMapToTime: [['sendTime', ['startTime', 'endTime'], 'x']],
+    },
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    rowKey: 'id',
+    actionColumn: {
+      width: 200,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: 'right',
+    },
+  });
+
+  const handleSuccess = () => {
+    reload();
+  };
+
+  const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
+    deleteExportManage,
+    handleSuccess,
+    setProps
+  );
+
+  nextTick(() => {
+    setProps(selectionOptions);
+  });
+
+  const [registerModal, { openModal }] = useModal();
+
+  // 新增或编辑
+  const handleCreateOrEdit = (record: Recordable | null) => {
+    setTableData([
+      {
+        id: 1,
+        reportConfigName: '11',
+        organizationName: 0,
+        dataType: '11',
+        executeWay: '11',
+        executeTime: '2022-05-21',
+      },
+      {
+        id: 2,
+        reportConfigName: '11',
+        organizationName: 0,
+        dataType: '11',
+        executeWay: '11',
+        executeTime: '2022-05-21',
+      },
+    ]);
+    if (record) {
+      openModal(true, {
+        isUpdate: false,
+        record,
+        isView: false,
+      });
+    } else {
+      openModal(true, {
+        isUpdate: true,
+        isView: false,
+      });
+    }
+  };
+  const handleScriptView = (record: Recordable | null) => {
+    if (record) {
+      openModal(true, {
+        isUpdate: true,
+        record,
+        isView: true,
+      });
+    }
+  };
+</script>