CN-599 feat: 新报告功能

src/assets/css/common/right-box-common.scss

@@ -62,10 +62,6 @@
     }
   }
   .el-form-item__content {
-    .el-input-group--prepend {
-      width: 626px;
-      height: 32px;
-    }
     .input-box {
       .el-textarea {
         .el-textarea__inner {
@@ -264,14 +260,7 @@
 .right-box__select {
   width: 100%;
 }
-.right-box-select-dropdown {
-  width: 625px;
-}
-.right-box-select-report.right-box-select-dropdown {
-  width: 640px;
-}
 .el-select-last.right-box-select-dropdown {
-  width: 434px;
   left: 1698px;
 }
 .limit-height .el-cascader-menu {

src/assets/css/components/components/rightBox/report/builtinReportBox.scss

@@ -91,7 +91,7 @@
         display: flex;
       }
       .el-input-single {
-        width: 200px;
+        width: 140px;
         height: 32px;
         margin-top: 10px;
         .el-input__inner {
@@ -105,7 +105,6 @@
         }
       }
       .right-box__select-single {
-        width: 430px;
         height: 32px;
         margin: 10px 0 0 10px;
       }

src/components/rightBox/report/ReportBox.vue

@@ -18,7 +18,6 @@
             <el-select id="account-input-roleIds"
                        v-model="editObject.config.timeConfig.type"
                        class="right-box__select"
-                       clearable
                        collapse-tags
                        :disabled="!!editObject.id"
                        placeholder=""
@@ -66,7 +65,7 @@
             </div>
           </el-form-item>
           <!--startTime-->
-          <el-form-item :label="$t('report.dataStartTime')" prop="startTime" v-if="editObject.config.timeConfig.type === 'customize'">
+          <el-form-item :label="$t('report.dataStartTime')" prop="config.startTime" v-if="editObject.config.timeConfig.type === 'customize'">
             <div class="demo-datetime-picker">
               <div class="block">
                 <el-date-picker
@@ -83,7 +82,7 @@
             </div>
           </el-form-item>
           <!--endTime-->
-          <el-form-item :label="$t('report.dataEndTime')" prop="endTime" v-if="editObject.config.timeConfig.type === 'customize'">
+          <el-form-item :label="$t('report.dataEndTime')" prop="config.endTime" v-if="editObject.config.timeConfig.type === 'customize'">
             <div class="demo-datetime-picker">
               <div class="block">
                 <el-date-picker
@@ -100,7 +99,7 @@
             </div>
           </el-form-item >
           <el-form-item class="el-height">
-            <el-checkbox v-model="scheduleChecked" :disabled="editObject.config.timeConfig.type === 'customize' || editObject.id" :label="$t('report.enableTimeSchedule')" size="large" />
+            <el-checkbox v-model="scheduleChecked" :disabled="editObject.config.timeConfig.type === 'customize' || !!editObject.id" :label="$t('report.enableTimeSchedule')" size="large" />
           </el-form-item>
           <!--Enable time schedule-->
           <el-form-item prop="enableTimeSchedule" v-if="scheduleChecked">
@@ -170,7 +169,7 @@
                              size="small"
                              @change="()=>{ this.$forceUpdate() }">
                     <template v-for="time in weekOptions" :key="time.value">
-                      <el-option :label="time.name" :value="time.value"></el-option>
+                      <el-option :label="$t(time.name)" :value="time.value"></el-option>
                     </template>
                   </el-select>
                   <div class="enable-month-week">
@@ -216,7 +215,7 @@
             </div>
           </el-form-item>
           <!--categoryType-->
-          <el-form-item :label="$t('report.categoryType')" prop="categoryType">
+          <el-form-item :label="$t('report.categoryType')" prop="categoryId">
             <el-select id="account-input-roleIds"
                        v-model="editObject.categoryId"
                        class="right-box__select"
@@ -232,6 +231,12 @@
               </template>
             </el-select>
           </el-form-item>
+          <!-- 参数 -->
+          <el-form-item :label="$t('config.operationlog.params')" prop="params" v-if="categoryParams.length > 0">
+            <el-input v-model="param.value" placeholder="" v-for="(param, index) in categoryParams" :key="index" size="small" style="vertical-align: unset;" :disabled="!!editObject.id">
+              <template #prepend>{{param.key}}</template>
+            </el-input>
+          </el-form-item>
         </el-form>
       </div>
     </div>
@@ -252,13 +257,14 @@ import { storageKey, report } from '@/utils/constants'
 import { api } from '@/utils/api'
 import _ from 'lodash'
 import { post, put } from '@/utils/http'
-import { getMillisecond } from '@/utils/date-util'
+import { dateFormat, getMillisecond } from '@/utils/date-util'
 
 export default {
   name: 'ReportBox',
   mixins: [rightBoxMixin],
   props: {
-    categoryList: Array
+    categoryList: Array,
+    currentCategoryId: Number
   },
   data () {
     return {
@@ -287,9 +293,23 @@ export default {
       monthWeekdayCheckedAll: false,
       monthWeekdayIsIndeterminate: false,
 
+      categoryParams: [],
+
       rules: { // 表单校验规则
         name: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        categoryId: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        schedulerStart: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        'config.startTime': [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        'config.endTime': [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
         ]
       }
     }
@@ -301,6 +321,18 @@ export default {
     scheduleChecked (n) {
       this.editObject.config.isScheduler = n ? 1 : 0
     },
+    'editObject.categoryId': {
+      handler (n) {
+        const category = this.categoryList.find(c => c.id === n)
+        if (category && category.config && category.config.queryParam) {
+          this.categoryParams = Object.keys(category.config.queryParam).map(key => {
+            return { key: key, value: category.config.queryParam[key] }
+          })
+        } else {
+          this.categoryParams = []
+        }
+      }
+    },
     object: {
       deep: true,
       immediate: true,
@@ -310,6 +342,21 @@ export default {
         if (n.config.schedulerConfig && n.config.schedulerConfig.type) {
           this.scheduleType = n.config.schedulerConfig.type
         }
+        if (n.schedulerStart) {
+          this.editObject.schedulerStart = dateFormat(this.editObject.schedulerStart, this.dateFormat)
+        }
+        if (n.schedulerEnd) {
+          this.editObject.schedulerEnd = dateFormat(this.editObject.schedulerEnd, this.dateFormat)
+        }
+        if (n.id) {
+          if (n.config.queryParam && Object.keys(n.config.queryParam).length > 0) {
+            this.categoryParams = Object.keys(n.config.queryParam).map(key => {
+              return { key: key, value: n.config.queryParam[key] }
+            })
+          }
+        } else if (this.currentCategoryId) {
+          this.editObject.categoryId = this.currentCategoryId
+        }
       }
     }
   },
@@ -352,7 +399,6 @@ export default {
           schedulerEnd = getMillisecond(this.editObject.schedulerEnd)
         }
 
-        console.info(this.editObject.config)
         const copyObject = _.cloneDeep(this.editObject)
         if (startTime) {
           copyObject.config.startTime = startTime
@@ -366,6 +412,13 @@ export default {
         if (schedulerEnd) {
           copyObject.schedulerEnd = schedulerEnd
         }
+        if (this.categoryParams.length > 0) {
+          const queryParam = {}
+          this.categoryParams.forEach(p => {
+            queryParam[p.key] = p.value
+          })
+          copyObject.config.queryParam = queryParam
+        }
         copyObject.config = JSON.stringify(copyObject.config)
         if (valid) {
           if (copyObject.id) {

src/components/rightBox/report/reportTestBox.vue

@@ -228,14 +228,6 @@
               </template>
             </el-select>
           </el-form-item>
-<!--          <el-form-item :label="$t('report.categoryType')" prop="categoryType">-->
-<!--            <el-input v-model="editObject.config.queryConfig.key1" placeholder="" size="small">-->
-<!--              <template #prepend>Key</template>-->
-<!--            </el-input>-->
-<!--            <el-input v-model="editObject.config.queryConfig.key2" placeholder="" size="small">-->
-<!--              <template #prepend>Key</template>-->
-<!--            </el-input>-->
-<!--          </el-form-item>-->
         </el-form>
       </div>
     </div>

src/components/table/report/reportTestTable.vue

@@ -4,9 +4,10 @@
       ref="dataTable"
       :data="tableData"
       :height="height"
+      :expand-row-keys="expandedIds"
+      row-key="id"
       border
       tooltip-effect="light"
-      :expand-row-keys="expandedIds"
       @header-dragend="dragend"
       @sort-change="tableDataSort"
       @expand-change="dropExpandChange"
@@ -150,7 +151,7 @@ import { del, get } from '@/utils/http'
 import { api } from '@/utils/api'
 import { storageKey } from '@/utils/constants'
 import { ref } from 'vue'
-import { getSecond } from '@/utils/date-util'
+import { dateFormatToUTC } from '@/utils/date-util'
 import chartDetectionPagination from '@/views/charts/charts/chartDetectionPagination'
 export default {
   name: 'builtinReportTable',
@@ -196,13 +197,7 @@ export default {
           prop: 'total',
           show: true,
           minWidth: 50
-        }, /*{
+        }, {
-          label: this.$t('report.lastModified'),
-          prop: 'utime',
-          show: true,
-          minWidth: 150,
-          sortable: 'custom'
-        }, */{
           label: this.$t('report.lastExecutionTime'),
           prop: 'lastTime',
           show: true,
@@ -276,8 +271,8 @@ export default {
     datePickerChange (row) {
       const param = {
         tempId: row.id,
-        startTime: getSecond(new Date(this.value[0]).getTime()),
+        startTime: dateFormatToUTC(this.value[0]),
-        endTime: getSecond(new Date(this.value[1]).getTime()),
+        endTime: dateFormatToUTC(this.value[1]),
         ...this.pageObj
       }
       this.dropDownQueryChange(param)
@@ -314,7 +309,10 @@ export default {
       })
     },
     pageJump (val) {
-
+      this.pageObj.pageNo = val
+      if (this.expandedIds.length > 0) {
+        this.datePickerChange({ id: this.expandedIds[0] })
+      }
     }
   },
   setup () {

src/mixins/data-list.js

@@ -90,16 +90,7 @@ export default {
           for (let i = 0; i < response.data.list.length; i++) {
             response.data.list[i].status = response.data.list[i].status + ''
           }
-          if (this.tableId === 'builtinReportTable') {
+          this.tableData = response.data.list
-            this.tableData = response.data.list.map(item => {
-              return {
-                ...item,
-                config: item.config ? JSON.parse(item.config) : {}
-              }
-            })
-          } else {
-            this.tableData = response.data.list
-          }
           this.pageObj.total = response.data.total
           // TODO 回到顶部
         }

src/utils/constants.js

@@ -457,10 +457,10 @@ export const report = {
     { name: 'report.december', value: 12 }
   ],
   weekOptions: [
-    { name: '1', value: 1 },
+    { name: 'report.1stWeek', value: 1 },
-    { name: '2', value: 2 },
+    { name: 'report.2ndWeek', value: 2 },
-    { name: '3', value: 3 },
+    { name: 'report.3rdWeek', value: 3 },
-    { name: '4', value: 4 },
+    { name: 'report.4thWeek', value: 4 },
     { name: 'report.lastWeek', value: 5 }
   ]
 }

src/utils/date-util.js

@@ -44,9 +44,9 @@ export function rTime (date) {
 // 时间格式转换
 export function dateFormat (date, format = 'YYYY-MM-DD HH:mm:ss') {
   let d = date
-  // date不是数字，则视为时间字符串，例如2022-02-22 22:22
+  // date不是数字，则视为utc时区的时间字符串，例如2022-02-22 22:22
   if (isNaN(date)) {
-    d = window.$dayJs(date).valueOf() + parseInt(localStorage.getItem('cn-timezone-local-offset'))
+    d = window.$dayJs(date).valueOf() + parseInt(localStorage.getItem(storageKey.timezoneLocalOffset)) * 3600000
   } else {
     d = getMillisecond(date)
   }
@@ -57,3 +57,15 @@ export function dateFormat (date, format = 'YYYY-MM-DD HH:mm:ss') {
 export function dateFormatByAppearance (date) {
   return dateFormat(date, localStorage.getItem(storageKey.dateFormat))
 }
+// 带时区的日期转为utc日期
+export function dateFormatToUTC (date, format = 'YYYY-MM-DD HH:mm:ss') {
+  let d = date
+  // date不是数字，则视为utc时区的时间字符串，例如2022-02-22 22:22
+  if (isNaN(date)) {
+    d = window.$dayJs(date).valueOf() - parseInt(localStorage.getItem(storageKey.timezoneLocalOffset)) * 3600000
+  } else {
+    d = getMillisecond(date)
+  }
+  d = window.$dayJs(d).tz().format(format)
+  return d
+}

src/views/report/reportTest.vue

@@ -61,6 +61,7 @@
         <report-box
             :object="object"
             :category-list="builtinReportLeftMenu"
+            :current-category-id="builtinId"
             @close="closeRightBox"
         />
       </el-drawer>
@@ -88,7 +89,7 @@ export default {
         id: '',
         name: '',
         type: '',
-        source: '',
+        source: 'session_record_cn',
         cTime: '',
         uTime: '',
         remark: '',
@@ -98,7 +99,7 @@ export default {
           cronExpression: '',
           startTime: '',
           endTime: '',
-          queryConfig: {},
+          queryParam: {},
           schedulerConfig: {
             type: 'day',
             weekDates: [],
@@ -110,7 +111,7 @@ export default {
           timeConfig: {
             type: 'yesterday',
             offset: 1,
-            unit: ''
+            unit: 'hour'
           }
         },
         schedulerStart: '',
@@ -153,7 +154,40 @@ export default {
     queryGetTempData () {
       get(api.reportCategory).then(res => {
         if (res.code === 200) {
-          this.builtinReportLeftMenu = res.data.list
+          this.builtinReportLeftMenu = res.data.list.map(c => {
+            return {
+              ...c,
+              config: c.config ? JSON.parse(c.config) : {}
+            }
+          })
+        }
+      })
+    },
+    getTableData (params) {
+      if (params) {
+        this.searchLabel = { ...this.searchLabel, ...params }
+      }
+      this.searchLabel = { ...this.searchLabel, ...this.pageObj }
+      this.tools.loading = true
+      delete this.searchLabel.total
+      let listUrl = this.url
+      if (this.listUrl) {
+        listUrl = this.listUrl
+      }
+      get(listUrl, this.searchLabel).then(response => {
+        this.tools.loading = false
+        if (response.code === 200) {
+          for (let i = 0; i < response.data.list.length; i++) {
+            response.data.list[i].status = response.data.list[i].status + ''
+          }
+          this.tableData = response.data.list.map(item => {
+            return {
+              ...item,
+              config: item.config ? JSON.parse(item.config) : {}
+            }
+          })
+          this.pageObj.total = response.data.total
+          // TODO 回到顶部
         }
       })
     },
@@ -173,7 +207,7 @@ export default {
           cronExpression: '',
           startTime: '',
           endTime: '',
-          queryConfig: {},
+          queryParam: {},
           schedulerConfig: {
             type: 'day',
             weekDates: [],