Merge branch 'f-dev' into 'main'

fix：修改报表配置相关 See merge request huang/yun-teng-iot-front!279

Merge branch 'f-dev' into 'main'
fix：修改报表配置相关 See merge request huang/yun-teng-iot-front!279
xp.Huang
2 parents c0f86739 b93d637f
Showing 9 changed files with 211 additions and 76 deletions
src/api/export/exportManager.ts
src/api/schedue/schedueManager.ts
src/layouts/default/header/components/personal/config.ts
src/views/report/config/ReportConfigDrawer.vue
src/views/report/config/config.data.ts
src/views/report/export/ReportPreviewModal.vue
src/views/report/export/index.vue
src/views/system/scheduled/SchedueLog.vue
src/views/system/scheduled/TaskDetailPreviewModal.vue
--- a/src/api/export/exportManager.ts
View file @7b75749
+++ b/src/api/export/exportManager.ts
View file @7b75749
@@ -4,6 +4,7 @@ import { ExportQueryParam } from './model/exportModel';
 enum ReportManagerApi {
   GET_EXPORT_API = '/report/generate/record',
   DELETE_EXPORT_API = '/report/generate/record',
+  GET_TELEMETRY_API = '/plugins/telemetry/',
 }
 //报表导出分页
@@ -23,3 +24,17 @@ export const deleteExportManage = (ids: string[]) => {
     },
   });
 };
+
+//报表查看趋势图
+export const exportViewChartApi = (entityId, params) => {
+  return defHttp.get<ExportQueryParam>(
+    {
+      url:
+        ReportManagerApi.GET_TELEMETRY_API + 'DEVICE' + '/' + entityId + '/values' + '/timeseries',
+      params,
+    },
+    {
+      joinPrefix: false,
+    }
+  );
+};
--- a/src/api/schedue/schedueManager.ts
View file @7b75749
+++ b/src/api/schedue/schedueManager.ts
View file @7b75749
@@ -12,6 +12,8 @@ enum ReportManagerApi {
   JOB_LOG_PAGE_API = '/monitor/jobLog/page',
   DELETE_LOG_API = '/monitor/jobLog',
   POST_LOG_CLEAN_API = '/monitor/jobLog/clean',
+  QUERY_CORN_API = '/monitor/job/queryCronExpression/',
+  CHECK_CORN_API = '/monitor/job/checkCron/',
 }
 //分页
@@ -57,7 +59,21 @@ export const putSchedueByidAndStatusManage = (id, status) => {
 //执行一次
 export const postRunSchedueConfigManage = (id) => {
   return defHttp.post<ReportModel>({
-    url: ReportManagerApi.RUN_REPORT_API+'/'+id,
+    url: ReportManagerApi.RUN_REPORT_API + '/' + id,
+  });
+};
+
+// 查询cron表达式近5次的执行时间
+export const schedueQueryCornTimeApi = (corn) => {
+  return defHttp.get({
+    url: ReportManagerApi.QUERY_CORN_API + corn,
+  });
+};
+
+// 检查cron表达式是否有效
+export const schedueCheckCornApi = (corn) => {
+  return defHttp.get({
+    url: ReportManagerApi.CHECK_CORN_API + corn,
   });
 };
--- a/src/layouts/default/header/components/personal/config.ts
View file @7b75749
+++ b/src/layouts/default/header/components/personal/config.ts
View file @7b75749
@@ -9,7 +9,6 @@ export const formSchema: FormSchema[] = [
     required: true,
     component: 'Input',
     componentProps: {
-      maxLength: 10,
       placeholder: '请输入用户昵称',
     },
     rules: chineseAndEnlishRule,
--- a/src/views/report/config/ReportConfigDrawer.vue
View file @7b75749
+++ b/src/views/report/config/ReportConfigDrawer.vue
View file @7b75749
@@ -23,7 +23,6 @@
           @deselect="handleDeselect"
           mode="multiple"
           labelInValue
-          allowClear
           notFoundContent="请选择设备"
         />
         <div style="margin-top: 1.5vh"></div>
@@ -66,6 +65,7 @@
     attribute?: string;
     device?: string;
     name?: string;
+    attributes?: string | undefined;
   };
   const emit = defineEmits(['success', 'register']);
   const bindDeviceRefObj = {
@@ -105,8 +105,10 @@
   //设备Select选中
   const handleDeviceChange = (e) => {
     if (unref(isUpdate)) {
+      //编辑
+      let temp: any = [];
       editDeviceAttr.value.forEach((f) => {
-        deviceList.value = [f, ...e];
+        temp = [f, ...e];
       });
       let deWeightThree = () => {
         let map = new Map();
@@ -117,7 +119,11 @@
         }
         return [...map.values()];
       };
-      deviceList.value = deWeightThree();
+      temp = deWeightThree();
+      deviceList.value = temp;
+      if (e.length !== 0) {
+        deviceList.value = e;
+      }
     } else {
       deviceList.value = e;
     }
@@ -125,7 +131,7 @@
   //设备取消删除
   const handleDeselect = (e) => {
     if (unref(isUpdate)) {
-      const eEditDevice = e.key || e.value;
+      //编辑
       let deWeightThree = () => {
         let map = new Map();
         for (let item of deviceList.value) {
@@ -136,8 +142,13 @@
         return [...map.values()];
       };
       deviceList.value = deWeightThree();
-      const findEditValue = deviceList.value.findIndex((f) => f.value == eEditDevice);
+      const findEditValue = deviceList.value.findIndex((f) => f.value == e.value);
       if (findEditValue !== -1) deviceList.value.splice(findEditValue, 1);
+      // try {
+      //   if (deviceList.value[0]?.attributes.length > 0) {
+      //     deviceList.value.splice(0, 1);
+      //   }
+      // } catch {}
     } else {
       const eDevice = e.key || e.value;
       const findValue = deviceList.value.findIndex((f) => f.value == eDevice);
@@ -179,12 +190,29 @@
       await setFieldsValue({
         agg: editResData.data.queryCondition?.agg,
         interval: editResData.data.queryCondition?.interval,
-        limit1: editResData.data.queryCondition?.limit,
+        limit: editResData.data.queryCondition?.limit,
         orderBy: editResData.data.queryCondition?.orderBy,
         useStrictDataTypes: editResData.data.queryCondition?.useStrictDataTypes,
         startTs: editResData.data.queryCondition?.startTs,
         endTs: editResData.data.queryCondition?.endTs,
+        way: editResData.data?.way,
+        queryMode: editResData.data.queryCondition?.queryMode === 0 ? 'latest' : 'timePeriod',
+      });
+      const endTsTime = editResData.data.queryCondition?.endTs;
+      const startTsTime = editResData.data.queryCondition?.startTs;
+      const mathFloor = (endTsTime - startTsTime) / 10;
+      const multTen = Math.floor(mathFloor) * 10;
+      await setFieldsValue({
+        startTs: multTen,
       });
+      if (editResData.data.queryCondition?.queryMode == 1) {
+        await setFieldsValue({
+          dataRange: [
+            editResData.data.queryCondition?.startTs,
+            editResData.data.queryCondition?.endTs,
+          ],
+        });
+      }
       //回显聚合条件
       const dataCompareOpions = [
         { label: '最小值', value: AggregateDataEnum.MIN },
@@ -248,6 +276,10 @@
       deviceList.value = editDeviceAttr.value;
       editDeviceList.value = editResData.data.executeAttributes;
     } else {
+      setFieldsValue({
+        startTs: 1000,
+        interval: 1000,
+      });
       editId.value = '';
       orgId.value = '';
       selectDevice.value = [];
@@ -312,13 +344,17 @@
         if (getAttrDevice.value.length === 0) {
           return createMessage.error('请选择设备及其属性');
         }
+      } else {
+        if (getAttrDevice.value.length === 0) {
+          return createMessage.error('请选择设备及其属性');
+        }
       }
       if (values.executeWay == 0) {
         executeContent = null;
       } else {
         executeContent = values.cronTime;
       }
-      if (values.way === QueryWay.LATEST) {
+      if (values.queryMode === QueryWay.LATEST) {
         startTs.value = moment().subtract(values.startTs, 'ms').valueOf();
         endTs.value = Date.now();
       } else {
@@ -335,6 +371,7 @@
         ...{
           endTs: endTs.value,
         },
+        queryMode: values?.queryMode === 'latest' ? 0 : 1,
       };
       delete values.devices;
@@ -347,6 +384,7 @@
       delete values.cronYear;
       delete values.limit1;
       delete values.startTs;
+      delete values.queryMode;
       postObj = {
         ...values,
         ...{
--- a/src/views/report/config/config.data.ts
View file @7b75749
+++ b/src/views/report/config/config.data.ts
View file @7b75749
@@ -21,7 +21,7 @@ export enum QueryWay {
   TIME_PERIOD = 'timePeriod',
 }
 export enum SchemaFiled {
-  WAY = 'way',
+  WAY = 'queryMode',
   TIME_PERIOD = 'timePeriod',
   KEYS = 'keys',
   DATE_RANGE = 'dataRange',
@@ -214,8 +214,12 @@ export const formSchema: QFormSchema[] = [
         placeholder: '请选择执行方式',
         onChange(e) {
           let dataCompareOpions: any = [];
+          setFieldsValue({
+            startTs: 1000,
+            interval: 1000,
+          });
           if (e.target.value == 0) {
-            setFieldsValue({ way: QueryWay.LATEST });
+            setFieldsValue({ queryMode: QueryWay.LATEST });
             dataCompareOpions = [
               { label: '固定周期', value: QueryWay.LATEST },
               { label: '自定义周期', value: QueryWay.TIME_PERIOD },
@@ -227,7 +231,7 @@ export const formSchema: QFormSchema[] = [
               },
             });
           } else {
-            setFieldsValue({ way: QueryWay.LATEST });
+            setFieldsValue({ queryMode: QueryWay.LATEST });
             dataCompareOpions = [{ label: '固定周期', value: QueryWay.LATEST }];
             updateSchema({
               defaultValue: QueryWay.LATEST,
@@ -492,7 +496,6 @@ export const formSchema: QFormSchema[] = [
         formActionType.setFieldsValue({ [SchemaFiled.LIMIT]: null });
       }
       return {
-        // defaultValue: 1000,
         placeholder: '请选择间隔时间',
         options,
       };
--- a/src/views/report/export/ReportPreviewModal.vue
View file @7b75749
+++ b/src/views/report/export/ReportPreviewModal.vue
View file @7b75749
@@ -10,7 +10,7 @@
       :showOkBtn="false"
     >
       <div class="wrapper">
-        <div class="inner item" v-for="(item, index) in chartData" :key="index">
+        <div class="inner item" v-for="(item, index) in initChartData" :key="index">
           <p style="display: none">{{ item }}</p>
           <div :id="`chart${index}`" :style="{ height, width }"></div>
         </div>
@@ -22,6 +22,8 @@
   import { ref, PropType, nextTick } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import * as echarts from 'echarts';
+  import { exportViewChartApi } from '/@/api/export/exportManager';
+  import moment from 'moment';
   defineProps({
     width: {
@@ -34,72 +36,120 @@
     },
   });
   defineEmits(['register']);
-
   const heightNum = ref(800);
-  const chartData = ref([1, 2, 3, 4]);
-  const [register] = useModalInner((data) => {
-    console.log(data);
-    //TODO待服务端返回值
-    nextTick(() => {
-      chartData.value.forEach((_, index) => {
-        let myChart = echarts.init(document.getElementById(`chart${index}`) as HTMLElement);
-        let myOption = {
-          title: {
-            text: '报表趋势图',
-            subtext: `图${index + 1}`,
-            left: 'left',
-          },
-          tooltip: {
-            trigger: 'axis',
-          },
-          legend: {
-            data: ['CO', 'CO2', 'Temp'],
-            top: '20px',
-          },
-          toolbox: {},
-          grid: {
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true,
-          },
-          xAxis: {
-            type: 'category',
-            data: ['1', '2', '3', '4', '5', '6', '7'],
-            boundaryGap: false,
-          },
-          yAxis: {
-            type: 'value',
-            boundaryGap: false,
-          },
-          series: [
-            {
-              name: 'CO',
-              type: 'line',
-              stack: 'Total',
-              data: [150, 230, 224, 218, 135, 147, 260],
-            },
-            {
-              name: 'CO2',
-              type: 'line',
-              stack: 'Total',
-              data: [15, 23, 22, 28, 15, 17, 20],
-            },
+  const getItem: any = ref([]);
+  const initChartData: any = ref([]);
+  //生成随机颜色
+  let getRandomColor = function () {
+    return (
+      'rgb(' +
+      Math.round(Math.random() * 255) +
+      ',' +
+      Math.round(Math.random() * 255) +
+      ',' +
+      Math.round(Math.random() * 10) +
+      ')'
+    );
+  };
+  const [register, { setModalProps }] = useModalInner(async (data) => {
+    setModalProps({ loading: true });
+    try {
+      const entityId = data.record.executeCondition?.executeAttributes.map((m) => m?.device);
+      let key = data.record.executeCondition?.executeAttributes.map((m) => m?.attributes);
+      let params: any = {};
+      params = {
+        ...data.record.executeCondition?.executeCondition,
+        ...{
+          keys: key.length !== 0 ? key.join(',') : '',
+        },
+      };
+      const result = await exportViewChartApi(entityId[0], params);
+      getItem.value = Object.entries(result).map((item) => {
+        const [attr, val] = item;
+        return { attr, val };
+      });
+      //服务端返回值
+      initChartData.value = getItem.value.map((item): any => {
+        const seriesData = item.val.map((m1) => Number(m1.value));
+        return {
+          attr: item.attr,
+          lengendData: [item.attr],
+          xAxisData: item.val.map((m) => moment(m.ts).format('YYYY-MM-DD HH:mm:ss')),
+          seriesData: [
             {
-              name: 'Temp',
+              name: item.attr,
               type: 'line',
-              stack: 'Total',
-              data: [15, 23, 22, 28, 15, 17, 20],
+              data: seriesData,
+              lineStyle: {
+                color: getRandomColor(),
+              },
             },
           ],
         };
-        myChart.setOption(myOption);
-        //自适应
-        window.addEventListener('resize', () => {
-          myChart.resize();
+      });
+      nextTick(() => {
+        initChartData.value.forEach((item, index) => {
+          let myChart = echarts.init(document.getElementById(`chart${index}`) as HTMLElement);
+          let myOption = {
+            title: {
+              text: `${item.attr}趋势图`,
+              subtext: `${item.attr}`,
+              left: 'left',
+            },
+            tooltip: {
+              trigger: 'axis',
+            },
+            legend: {
+              data: item.lengendData,
+              top: '20px',
+            },
+            toolbox: {},
+            grid: {
+              left: '3%',
+              right: '4%',
+              bottom: '3%',
+              containLabel: true,
+            },
+            dataZoom: [
+              {
+                type: 'slider',
+                show: true,
+                start: 0,
+                end: 30,
+                xAxisIndex: [0],
+              },
+            ],
+            xAxis: {
+              type: 'category',
+              data: item.xAxisData,
+              boundaryGap: false,
+              axisPointer: { type: 'shadow' },
+              axisLabel: {
+                color: '#333',
+                //  让x轴文字方向为竖向
+                interval: 0,
+                rotate: 90,
+                // formatter: function (value) {
+                //   return value.split('').join('\n');
+                // },
+              },
+            },
+            yAxis: {
+              type: 'value',
+              boundaryGap: false,
+            },
+            series: item.seriesData,
+          };
+          myChart.setOption(myOption);
+          //自适应
+          window.addEventListener('resize', () => {
+            myChart.resize();
+          });
         });
       });
-    });
+    } finally {
+      setModalProps({ loading: false });
+    }
   });
 </script>
 <style lang="less" scoped>
--- a/src/views/report/export/index.vue
View file @7b75749
+++ b/src/views/report/export/index.vue
View file @7b75749
@@ -20,8 +20,11 @@
               label: '报表导出',
               icon: 'ant-design:dot-chart-outlined',
               auth: 'api:yt:reportExport:export',
-              onClick: handleExport.bind(null, record),
               ifShow: record.executeStatus === 1,
+              popConfirm: {
+                title: '是否需要导出',
+                confirm: handleExport.bind(null, record),
+              },
             },
             {
               label: '报表查看',
@@ -99,7 +102,7 @@
   });
   const [registerModal, { openModal }] = useModal();
-  const handleView = (_, record) => {
+  const handleView = (record) => {
     openModal(true, {
       isUpdate: true,
       record,
--- a/src/views/system/scheduled/SchedueLog.vue
View file @7b75749
+++ b/src/views/system/scheduled/SchedueLog.vue
View file @7b75749
@@ -59,6 +59,7 @@
           @register="registerTable"
         >
           <template #toolbar>
+            <a-button type="primary" @click="handleClearData"> 刷新 </a-button>
             <Popconfirm
               title="您确定要清空全部数据"
               ok-text="确定"
@@ -261,6 +262,7 @@
     await schedueLogCleanPage();
     createMessage.success(`清空成功`);
     handleSuccess();
+    handleClearData();
   };
   const handleSearchInfo = async () => {
     setProps({
--- a/src/views/system/scheduled/TaskDetailPreviewModal.vue
View file @7b75749
+++ b/src/views/system/scheduled/TaskDetailPreviewModal.vue
View file @7b75749
@@ -2,7 +2,7 @@
   <div>
     <BasicModal
       v-bind="$attrs"
-      width="62rem"
+      width="80rem"
       :height="heightNum"
       @register="register"
       title="任务详细信息"
@@ -22,21 +22,30 @@
   import { personSchema } from './config.data';
   import { Description } from '/@/components/Description/index';
   import { useDescription } from '/@/components/Description';
+  import { schedueQueryCornTimeApi, schedueCheckCornApi } from '/@/api/schedue/schedueManager';
   const heightNum = ref(800);
+  const timeData: any = ref([]);
   let personData = reactive({});
   const [registeDesc, { setDescProps }] = useDescription({
     data: personData,
     schema: personSchema,
     column: 3,
   });
-  const [register] = useModalInner((data) => {
+  const [register] = useModalInner(async (data) => {
+    console.log(data.record.cronExpression);
+    const resuCheck = await schedueCheckCornApi(encodeURIComponent(data.record.cronExpression));
+    if (resuCheck) {
+      const resu = await schedueQueryCornTimeApi(encodeURIComponent(data.record.cronExpression));
+      timeData.value = resu.data;
+    }
     nextTick(() => {
       //回显
       for (let i in data.record) {
         Reflect.set(personData, i, data.record[i]);
       }
       setDescProps(personData);
+      Reflect.set(personData, 'updateTime', timeData.value.join('，'));
     });
   });
   const handleCancel = () => {};