Merge branch 'main_dev' of http://git.yunteng.com/yunteng/thingskit-front into f…

…ix/board-style-issues

@@ -28,6 +28,8 @@ enum DeviceManagerApi {
 
   DEVICE_ALARM_URL = '/alarm',
 
+  ALARM_BATCH_ACK = '/alarm/batch/ack',
+
   DEVICE_CREDENTIALS = '/device/credentials',
 
   COMMAND_ISSUANCE = '/rpc',
@@ -346,3 +348,13 @@ export const getDevicesByDeviceIds = (ids: string[]) => {
     data: ids,
   });
 };
+
+export const doBatchAckAlarm = (ids: string[]) => {
+  return defHttp.post(
+    {
+      url: DeviceManagerApi.ALARM_BATCH_ACK,
+      data: { alarmIds: ids },
+    },
+    { joinPrefix: false }
+  );
+};

@@ -18,6 +18,9 @@
           查看告警详情
         </a-button>
       </template>
+      <template #toolbar>
+        <Button @click="handleBatchAck" type="primary">批量处理</Button>
+      </template>
     </BasicTable>
     <AlarmDetailDrawer @register="registerDetailDrawer" @success="handleSuccess" />
   </div>
@@ -26,10 +29,10 @@
   import { defineComponent, nextTick, h } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { alarmColumns, alarmSearchSchemas } from './config/detail.config';
-  import { getDeviceAlarm } from '/@/api/device/deviceManager';
+  import { doBatchAckAlarm, getDeviceAlarm } from '/@/api/device/deviceManager';
   import { useDrawer } from '/@/components/Drawer';
   import AlarmDetailDrawer from './cpns/AlarmDetailDrawer.vue';
-  import { Modal } from 'ant-design-vue';
+  import { Modal, Button } from 'ant-design-vue';
   import { JsonPreview } from '/@/components/CodeEditor';
   import { getDeviceDetail } from '/@/api/device/deviceManager';
   import { getAttribute } from '/@/api/ruleengine/ruleengineApi';
@@ -38,17 +41,21 @@
     operationString,
     operationBoolean,
   } from '/@/views/rule/linkedge/config/formatData';
+  import { AlarmLogItem } from '/@/api/device/model/deviceConfigModel';
+  import { AlarmStatus } from '/@/enums/alarmEnum';
+  import { useMessage } from '/@/hooks/web/useMessage';
 
   export default defineComponent({
     name: 'AlarmCenter',
     components: {
+      Button,
       BasicTable,
       TableAction,
       AlarmDetailDrawer,
     },
 
     setup() {
-      const [registerTable, { reload }] = useTable({
+      const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
         title: '告警记录列表',
         api: getDeviceAlarm,
         columns: alarmColumns,
@@ -61,6 +68,14 @@
         bordered: true,
         showIndexColumn: false,
         showTableSetting: true,
+        rowSelection: {
+          type: 'checkbox',
+          getCheckboxProps: (record: AlarmLogItem) => {
+            return {
+              disabled: record.status === AlarmStatus.CLEARED_ACK,
+            };
+          },
+        },
         actionColumn: {
           width: 200,
           title: '操作',
@@ -148,12 +163,24 @@
           attribute,
         };
       };
+
+      const { createMessage } = useMessage();
+      const handleBatchAck = async () => {
+        const ids = getSelectRows<AlarmLogItem>().map((item) => item.id);
+
+        await doBatchAckAlarm(ids);
+        createMessage.success('操作成功');
+        clearSelectedRowKeys();
+        reload();
+      };
+
       return {
         registerTable,
         registerDetailDrawer,
         handleDetail,
         handleSuccess,
         handleViewAlarmDetails,
+        handleBatchAck,
       };
     },
   });

@@ -91,7 +91,7 @@ export const formSchema: FormSchema[] = [
     valueField: 'fileList',
     componentProps: () => {
       return {
-        // listType: 'picture-card',
+        listType: 'picture-card',
         maxFileLimit: 1,
         api: async (file: File) => {
           try {
@@ -110,10 +110,10 @@ export const formSchema: FormSchema[] = [
         onPreview: (fileList: FileItem) => {
           createImgPreview({ imageList: [fileList.url!] });
         },
-        showUploadList: {
-          showDownloadIcon: true,
-          showRemoveIcon: true,
-        },
+        // showUploadList: {
+        //   showDownloadIcon: true,
+        //   showRemoveIcon: true,
+        // },
       };
     },
   },

@@ -22,7 +22,7 @@
   watch(
     () => props.customerList,
     (newValue) => {
-      const transferResult = newValue.map((item) => [item.ts, item.value]);
+      const transferResult = newValue.map((item) => [item.date, item.value]);
 
       setOptions({
         tooltip: {
@@ -35,7 +35,7 @@
           },
         },
         xAxis: {
-          type: 'time',
+          type: 'category',
           splitLine: {
             show: true,
             lineStyle: {
@@ -90,7 +90,7 @@
       trend: props.type,
     });
 
-    const transferResult = res.map((item) => [item.ts, item.value]);
+    const transferResult = res.map((item) => [item.date, item.value]);
     setOptions({
       tooltip: {
         trigger: 'axis',

@@ -31,7 +31,7 @@
           },
         },
         xAxis: {
-          type: 'time',
+          type: 'category',
           splitLine: {
             show: true,
             lineStyle: {
@@ -79,11 +79,11 @@
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
   onMounted(async () => {
     const res = await getTrendData({
-      ...getDateByShortcutQueryKey(ShortcutQueryKeyEnum.LATEST_30_DAY),
+      ...getDateByShortcutQueryKey(ShortcutQueryKeyEnum.LATEST_1_MONTH),
       trend: 'CUSTOMER_TREND',
     });
 
-    const transferResult = res.map((item) => [item.ts, item.value]);
+    const transferResult = res.map((item) => [item.date, item.value]);
     setOptions({
       tooltip: {
         trigger: 'axis',
@@ -95,7 +95,7 @@
         },
       },
       xAxis: {
-        type: 'time',
+        type: 'category',
         splitLine: {
           show: true,
           lineStyle: {

@@ -37,7 +37,15 @@
         <DatePicker
           @change="(_, DateString) => onDateChange(_, DateString, role === RoleEnum.CUSTOMER_USER)"
           v-model:value="dateValue"
-        />
+        >
+          <Button
+            type="link"
+            class="!px-0"
+            :style="dateValue ? { color: '#0960bd', fontWeight: 500 } : { color: '#000000d9' }"
+          >
+            {{ dateValue ? (dateValue as moment.Moment).format('YYYY-MM-DD') : '自定义' }}
+          </Button>
+        </DatePicker>
       </div>
     </template>
     <div v-if="activeKey === '1'">
@@ -99,13 +107,13 @@
           <Tooltip :overlayStyle="{ maxWidth: '340px' }">
             <template #title>
               <section>
-                <div>30天: 查询最近30天的数据,间隔时间为1天.</div>
+                <div>最近一个月: 查询最近一个月的数据,间隔时间为1天.</div>
                 <div>最近三个月: 查询最近三个月的数据,间隔时间为1天.</div>
-                <div>最近一年: 查询最近一年的数据,间隔时间为30天.</div>
+                <div>最近一年: 查询最近一年的数据,间隔时间为1月.</div>
                 <div>
                   间隔时间:
                   <span class="font-bold underline"> 以当天的(最后时间)作为结束时间 </span>
-                  ,往前推移对应天数或小时的时间作为开始时间,然后在此时间区间内进行分组聚合查询.
+                  ,往前推移对应天数或月的时间作为开始时间,然后在此时间区间内进行分组聚合查询.
                 </div>
               </section>
             </template>
@@ -120,9 +128,28 @@
           </template>
           <DatePicker.RangePicker
             @change="onDateCustomerChange"
+            :disabledDate="handleDisableDate"
+            @calendarChange="handleCalendarChange"
             size="small"
             v-model:value="customerDateValue"
-          />
+          >
+            <Button
+              type="link"
+              class="!px-0"
+              :style="
+                customerDateValue && customerDateValue.length
+                  ? { color: '#0960bd', fontWeight: 500 }
+                  : { color: '#000000d9' }
+              "
+              >{{
+                customerDateValue && customerDateValue.length
+                  ? `${(customerDateValue?.[0] as moment.Moment)?.format('YYYY-MM-DD')}
+                ~
+                ${(customerDateValue?.[1] as moment.Moment)?.format('YYYY-MM-DD')}`
+                  : '自定义'
+              }}</Button
+            >
+          </DatePicker.RangePicker>
         </div>
       </template>
       <CustomerTrend :customerTrendList="customerTrendList" />
@@ -130,8 +157,8 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, reactive } from 'vue';
-  import { Card, DatePicker, Tooltip } from 'ant-design-vue';
+  import { ref, reactive, unref } from 'vue';
+  import { Card, DatePicker, Tooltip, Button } from 'ant-design-vue';
   import VisitAnalysis from './VisitAnalysis.vue';
   import VisitAnalysisBar from './VisitAnalysisBar.vue';
   import { RoleEnum, isAdmin } from '/@/enums/roleEnum';
@@ -146,6 +173,7 @@
   import { getTrendData } from '/@/api/dashboard';
   import { useGlobSetting } from '/@/hooks/setting';
   import { QuestionCircleOutlined } from '@ant-design/icons-vue';
+  import { RangePickerValue } from 'ant-design-vue/lib/date-picker/interface';
 
   defineExpose({
     isAdmin,
@@ -496,6 +524,18 @@
     // onDateTenantChange,
     onDateCustomerChange,
   } = useDate();
+
+  const handleCalendarChange = (val: RangePickerValue) => {
+    customerDateValue.value = val as any;
+  };
+
+  const handleDisableDate = (current: moment.Moment) => {
+    if (!unref(customerDateValue) || unref(customerDateValue).length === 0) {
+      return false;
+    }
+    const diffDate = current.diff(unref(customerDateValue)[0], 'days');
+    return Math.abs(diffDate) > 30;
+  };
 </script>
 
 <style lang="less">

@@ -47,7 +47,15 @@
         <DatePicker
           @change="(_, DateString) => onDateChange(_, DateString, role === RoleEnum.CUSTOMER_USER)"
           v-model:value="dateValue"
-        />
+        >
+          <Button
+            type="link"
+            class="!px-0"
+            :style="dateValue ? { color: '#0960bd', fontWeight: 500 } : { color: '#000000d9' }"
+          >
+            {{ dateValue ? (dateValue as moment.Moment).format('YYYY-MM-DD') : '自定义' }}
+          </Button>
+        </DatePicker>
       </div>
     </template>
     <!-- <div v-if="activeKey === '1'">
@@ -84,13 +92,13 @@
           <Tooltip :overlayStyle="{ maxWidth: '340px' }">
             <template #title>
               <section>
-                <div>30天: 查询最近30天的数据,间隔时间为1天.</div>
+                <div>最近一个月: 查询最近一个月的数据,间隔时间为1天.</div>
                 <div>最近三个月: 查询最近三个月的数据,间隔时间为1天.</div>
-                <div>最近一年: 查询最近一年的数据,间隔时间为30天.</div>
+                <div>最近一年: 查询最近一年的数据,间隔时间为1月.</div>
                 <div>
                   间隔时间:
                   <span class="font-bold underline"> 以当天的(最后时间)作为结束时间 </span>
-                  ,往前推移对应天数或小时的时间作为开始时间,然后在此时间区间内进行分组聚合查询.
+                  ,往前推移对应天数或月的时间作为开始时间,然后在此时间区间内进行分组聚合查询.
                 </div>
               </section>
             </template>
@@ -106,8 +114,27 @@
           <DatePicker.RangePicker
             @change="onDateTenantChange"
             size="small"
+            @calendarChange="handleCalendarChange"
+            :disabledDate="handleDisableDate"
             v-model:value="tenantDateValue"
-          />
+          >
+            <Button
+              type="link"
+              class="!px-0"
+              :style="
+                tenantDateValue && tenantDateValue.length
+                  ? { color: '#0960bd', fontWeight: 500 }
+                  : { color: '#000000d9' }
+              "
+              >{{
+                tenantDateValue && tenantDateValue.length
+                  ? `${(tenantDateValue?.[0] as moment.Moment)?.format('YYYY-MM-DD')}
+                ~
+                ${(tenantDateValue?.[1] as moment.Moment)?.format('YYYY-MM-DD')}`
+                  : '自定义'
+              }}</Button
+            >
+          </DatePicker.RangePicker>
         </div>
       </template>
       <TenantTrend :tenantTrendList="tenantTrendList" />
@@ -139,8 +166,8 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, reactive } from 'vue';
-  import { Card, DatePicker, Tooltip } from 'ant-design-vue';
+  import { ref, reactive, unref } from 'vue';
+  import { Card, DatePicker, Tooltip, Button } from 'ant-design-vue';
   import { QuestionCircleOutlined } from '@ant-design/icons-vue';
   // import VisitAnalysis from './VisitAnalysis.vue';
   import VisitAnalysisBar from './VisitAnalysisBar.vue';
@@ -155,6 +182,7 @@
   import { useDate } from '../hooks/useDate';
   import { getTrendData } from '/@/api/dashboard';
   import { useGlobSetting } from '/@/hooks/setting';
+  import { RangePickerValue } from 'ant-design-vue/lib/date-picker/interface';
 
   defineExpose({
     isAdmin,
@@ -514,6 +542,18 @@
     onDateTenantChange,
     // onDateCustomerChange,
   } = useDate();
+
+  const handleCalendarChange = (val: RangePickerValue) => {
+    tenantDateValue.value = val as any;
+  };
+
+  const handleDisableDate = (current: moment.Moment) => {
+    if (!unref(tenantDateValue) || unref(tenantDateValue).length === 0) {
+      return false;
+    }
+    const diffDate = current.diff(unref(tenantDateValue)[0], 'days');
+    return Math.abs(diffDate) > 30;
+  };
 </script>
 
 <style lang="less">

@@ -31,7 +31,7 @@
           },
         },
         xAxis: {
-          type: 'time',
+          type: 'category',
           splitLine: {
             show: true,
             lineStyle: {
@@ -79,10 +79,10 @@
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
   onMounted(async () => {
     const res = await getTrendData({
-      ...getDateByShortcutQueryKey(ShortcutQueryKeyEnum.LATEST_30_DAY),
+      ...getDateByShortcutQueryKey(ShortcutQueryKeyEnum.LATEST_1_MONTH),
       trend: 'TENANT_TREND',
     });
-    const transferResult = res.map((item) => [item.ts, item.value]);
+    const transferResult = res.map((item) => [item.date, item.value]);
     setOptions({
       tooltip: {
         trigger: 'axis',
@@ -94,7 +94,7 @@
         },
       },
       xAxis: {
-        type: 'time',
+        type: 'category',
         splitLine: {
           show: true,
           lineStyle: {

 import { dateUtil, formatToDateTime } from '/@/utils/dateUtil';
 import { ref } from 'vue';
 import { getTrendData } from '/@/api/dashboard';
+import { RangePickerValue } from 'ant-design-vue/lib/date-picker/interface';
 
 export enum ShortcutQueryKeyEnum {
-  LATEST_30_DAY = 'LATEST_30_DAY',
+  LATEST_1_MONTH = 'LATEST_1_MONTH',
   LATEST_3_MONTH = 'LATEST_3_MONTH',
   LATEST_1_YEAR = 'LATEST_1_YEAR',
 }
 
 export function getDateByShortcutQueryKey(value: ShortcutQueryKeyEnum) {
   const mapping = {
-    [ShortcutQueryKeyEnum.LATEST_30_DAY]: () => {
+    [ShortcutQueryKeyEnum.LATEST_1_MONTH]: () => {
       return {
-        startTs: dateUtil().subtract(30, 'day').startOf('day').valueOf(),
+        startTs: dateUtil().subtract(1, 'month').startOf('day').valueOf(),
         interval: 24 * 60 * 60 * 1000,
       };
     },
@@ -40,13 +41,13 @@ export function getDateByShortcutQueryKey(value: ShortcutQueryKeyEnum) {
 
 export function useDate() {
   const tenantDateValue = ref([]);
-  const customerDateValue = ref([]);
+  const customerDateValue = ref<RangePickerValue>([]);
   const tenantTrendList = ref([]);
   const customerTrendList = ref([]);
   const activeTenantIndex = ref(0);
   const activeCustomerIndex = ref(0);
   const TenantOrCustomerDateList = ref([
-    { label: '30天', value: ShortcutQueryKeyEnum.LATEST_30_DAY },
+    { label: '最近一个月', value: ShortcutQueryKeyEnum.LATEST_1_MONTH },
     { label: '最近三个月', value: ShortcutQueryKeyEnum.LATEST_3_MONTH },
     { label: '最近一年', value: ShortcutQueryKeyEnum.LATEST_1_YEAR },
   ]);
@@ -65,7 +66,7 @@ export function useDate() {
         ...getDateByShortcutQueryKey(value),
         trend: 'TENANT_TREND',
       });
-      tenantTrendList.value = res.map((item) => [item.ts, item.value]);
+      tenantTrendList.value = res.map((item) => [item.date, item.value]);
     } else {
       if (activeCustomerIndex.value === index) return;
       activeCustomerIndex.value = index;
@@ -74,7 +75,7 @@ export function useDate() {
         ...getDateByShortcutQueryKey(value),
         trend: 'CUSTOMER_TREND',
       });
-      customerTrendList.value = res.map((item) => [item.ts, item.value]);
+      customerTrendList.value = res.map((item) => [item.date, item.value]);
     }
   }
 

@@ -103,7 +103,9 @@
               const value = {
                 ['触发属性']: findName,
                 ['触发条件']: `${findLogin}${curr.value.logicValue}`,
-                ['触发值']: `${curr.value.realValue}${findAttribute.detail?.dataType?.specs?.unit?.key}`,
+                ['触发值']: `${curr.value.realValue}${
+                  findAttribute.detail?.dataType?.specs?.unit?.key ?? ''
+                }`,
               };
               const data = {
                 [item.name]: value,

@@ -60,7 +60,7 @@
         span: 12,
       },
       componentProps: {
-        maxLength: 255,
+        maxLength: 64,
         placeholder: '请输入邮件主题',
       },
     },
@@ -72,7 +72,7 @@
       colProps: {
         span: 12,
       },
-      rules: [...emailRule, { required: true ,message:'主送人不能为空'}],
+      rules: [...emailRule, { required: true, message: '主送人不能为空' }],
       componentProps: {
         maxLength: 255,
         placeholder: '请输入主送',

@@ -43,7 +43,7 @@
                 <div
                   v-show="!item.notFoundData"
                   :id="`chart-${item.device}`"
-                  style="width: 100%; height: 400px"
+                  class="w-full h-96"
                 ></div>
               </div>
             </div>
@@ -273,6 +273,9 @@
         series,
         xAxis: { data: xAxisData },
       } as echarts.EChartsOption);
+
+      await nextTick();
+      resize();
     } catch (error) {
     } finally {
       loading.value = false;

@@ -67,7 +67,7 @@
     if (credentials) {
       for (let i in credentials) Reflect.set(credentialsFile, i, credentials[i]);
     }
-    setFieldsValue(value);
+    setFieldsValue({ ...value, type: credentials.type });
   };
 
   const resetValue = () => resetFields();

@@ -576,7 +576,17 @@ export const actionSchema: FormSchema[] = [
       const { setFieldsValue } = formActionType;
       return {
         placeholder: '请选择类型',
-        api: findDictItemByCode,
+        api: async (parmas: Recordable) => {
+          try {
+            const record = await findDictItemByCode(parmas);
+            return record.filter(
+              (item) =>
+                item.itemValue !== CommandTypeEnum.ATTRIBUTE.toString() || item.itemText != '属性'
+            );
+          } catch (error) {
+            return [];
+          }
+        },
         labelField: 'itemText',
         valueField: 'itemValue',
         params: {

@@ -267,8 +267,10 @@
     const validate = getFieldsValue();
     //ft-add-2022-11-22
     const type = validate?.outTarget;
-    if (type === 'DEVICE_OUT' && validate.device == 'PART') {
-      if (validate.deviceId == undefined) return createMessage.error('请选择设备');
+    if (type === 'DEVICE_OUT') {
+      if (!validate.deviceProfileId) return createMessage.error('请选择产品');
+      if (validate.device == 'PART' && validate.deviceId == undefined)
+        return createMessage.error('请选择设备');
     }
     //ft-add-2022-11-22
     //TODO-fengtao-设备验证

@@ -191,7 +191,8 @@
   const updateFn: DataFetchUpdateFn = (message, attribute) => {
     const { data = {} } = message;
     const [latest] = data[attribute] || [];
-    const [_, value] = latest;
+    const [name, value] = latest;
+    if (!name && !value) return;
     noSendValue.value = getNumberValue(value);
     sliderValue.value = getNumberValue(value);
   };