feat: 列表刷新，分页

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

@@ -267,6 +267,13 @@
 .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 {
   max-height: 200px;
   overflow: auto;

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

@@ -1,9 +1,18 @@
 .right-box.right-box-report {
   .right-box__container {
     .container__form {
+      .el-height.el-form-item {
+        margin-bottom: 18px;
+        .el-form-item__content {
+          height: 20px;
+          line-height: 20px;
+        }
+      }
       .enable-tab {
         display: flex;
+        width: 100%;
         .enable-tabs {
+          flex: 1;
           height: 32px;
           width: 160px;
           text-align: center;

src/assets/css/components/views/report/builtinReport.scss

@@ -46,17 +46,34 @@
           border-left: none;
           display: none;
         }
+        .el-table__row .el-table-column--selection .cell {
+          padding: 0;
+        }
         .el-table__expanded-cell {
+          .down {
+            margin-left: 32px;
+            height: 100%;
+            width: 1256px;
+            .cn-detection__footer {
+              text-align: center;
+              .el-pagination__jump {
+                margin-left: 3px;
+              }
+            }
+          }
+          .block.drop-down-time {
+            margin: 15px 0 14px 0;
+          }
           .expand {
-            width: 100%;
+            margin: auto;
             display: flex;
-            justify-content: center;
+            flex-wrap: wrap;
             .expand-cell {
               display: flex;
               background: #FFFFFF;
               border: 1px solid #E7EAED;
               border-radius: 2px;
-              margin-right: 16px;
+              margin: 0 12px 16px 0;
               width: 300px;
               height: 97px;
               .expand-right {
@@ -89,15 +106,23 @@
                 }
                 .expand-time {
                   font-size: 12px;
-                  color: #999999;
+                  color: #666666;
-                  font-weight: 400;
                   margin-bottom: 4px;
+                  div:nth-of-type(1) {
+                    font-size: 12px;
+                    color: #999999;
+                  }
                 }
                 .expand-icon {
                   display: flex;
                   justify-content: space-evenly;
                   margin: 0 8px;
                   font-size: 14px;
+                  .table-operation-item--no-border {
+                    cursor: pointer;
+                    position: relative;
+                    font-size: 16px;
+                  }
                 }
               }
             }

src/components/rightBox/report/reportTestBox.vue

@@ -15,57 +15,91 @@
           </el-form-item>
           <!--time limit-->
           <el-form-item :label="$t('report.timeLimit')" prop="timeLimit">
-            <template v-if="tabNum === 2">
+            <el-select id="account-input-roleIds"
+                       v-model="editObject.config.timeConfig.type"
+                       class="right-box__select"
+                       clearable
+                       collapse-tags
+                       placeholder=""
+                       popper-class="right-box-select-dropdown right-box-select-report prevent-clickoutside"
+                       size="small"
+                       @change="timeLimitChange">
+              <template v-for="time in timeLimit" :key="time.value">
+                <el-option :label="time.name" :value="time.value"></el-option>
+              </template>
+            </el-select>
+            <template v-if="showChange === 'this'">
               <el-select id="account-input-roleIds"
                          v-model="editObject.id"
                          class="right-box__select"
                          clearable
                          collapse-tags
-                         placeholder="select"
+                         placeholder=""
-                         popper-class="right-box-select-dropdown prevent-clickoutside"
+                         popper-class="right-box-select-dropdown right-box-select-report prevent-clickoutside"
                          size="small"
                          @change="()=>{ this.$forceUpdate() }">
-                <template v-for="time in perMonthList" :key="time.value">
+                <template v-for="time in latsList" :key="time.value">
                   <el-option :label="time.name" :value="time.value"></el-option>
                 </template>
               </el-select>
             </template>
-            <el-select id="account-input-roleIds"
+            <template v-if="showChange === 'last' || showChange === 'previous'">
-                       v-model="editObject.name"
+              <el-input v-model="single" @change="singleChange" size="small" class="el-input-single" placeholder="">
-                       class="right-box__select"
-                       clearable
-                       collapse-tags
-                       placeholder=""
-                       popper-class="right-box-select-dropdown prevent-clickoutside"
-                       size="small"
-                       @change="()=>{ this.$forceUpdate() }">
-              <template v-for="time in timeLimit" :key="time.value">
-                <el-option :label="time.name" :value="time.value"></el-option>
-              </template>
-            </el-select>
-            <template v-if="tabNum === 3">
-              <el-input v-model="single" @change="singleChange" size="small" class="el-input-single" placeholder="Please input">
                 <template #prepend><i @click="add" class="cn-icon cn-icon-a-1"></i></template>
                 <template #append><i @click="piece" class="cn-icon cn-icon-a-"></i></template>
               </el-input>
               <el-select id="account-input-roleIds"
-                         v-model="editObject.id"
+                         v-model="editObject.type"
                          class="right-box__select right-box__select-single"
                          clearable
                          collapse-tags
-                         placeholder="1"
+                         placeholder=""
-                         popper-class="right-box-select-dropdown prevent-clickoutside"
+                         popper-class="right-box-select-dropdown prevent-clickoutside el-select-last"
                          size="small"
                          @change="()=>{ this.$forceUpdate() }">
-                <template v-for="time in timeLimit" :key="time.value">
+                <template v-for="time in latsList" :key="time.value">
                   <el-option :label="time.name" :value="time.value"></el-option>
                 </template>
               </el-select>
             </template>
           </el-form-item>
+          <!--startTime-->
+          <el-form-item :label="$t('report.startTime')" prop="startTime" v-if="showChange === 'customize'">
+            <div class="demo-datetime-picker">
+              <div class="block">
+                <el-date-picker
+                    style="width: 100%"
+                    v-model="editObject.config.startTime"
+                    size="small"
+                    :format="format"
+                    prefix-icon="cn-icon cn-icon-shijian"
+                    type="datetime"
+                    placeholder="Select date and time"
+                />
+              </div>
+            </div>
+          </el-form-item>
+          <!--endTime-->
+          <el-form-item :label="$t('report.endTime')" prop="endTime" v-if="showChange === 'customize'">
+            <div class="demo-datetime-picker">
+              <div class="block">
+                <el-date-picker
+                    style="width: 100%"
+                    v-model="editObject.config.endTime"
+                    size="small"
+                    :format="format"
+                    prefix-icon="cn-icon cn-icon-shijian"
+                    type="datetime"
+                    placeholder="Select date and time"
+                />
+              </div>
+            </div>
+          </el-form-item >
+          <el-form-item class="el-height">
+            <el-checkbox v-model="scheduleChecked" @change="scheduleCheckedChange" :disabled="showChange === 'customize'" :label="$t('report.enableTimeSchedule')" size="large" />
+          </el-form-item>
           <!--Enable time schedule-->
-          <el-form-item prop="enableTimeSchedule">
+          <el-form-item prop="enableTimeSchedule" v-if="scheduleChecked">
-            <el-checkbox v-model="scheduleChecked" :label="$t('report.enableTimeSchedule')" size="large" />
             <div class="enable-tab">
               <div class="enable-tabs" @click="enableTabs(0)" :class="{'active': tabNum === 0}">{{$t('report.daily')}}</div>
               <div class="enable-tabs" @click="enableTabs(1)" :class="{'active': tabNum === 1}">{{$t('report.weekly')}}</div>
@@ -83,15 +117,15 @@
               <el-input v-model="week" size="small" placeholder="Please input">
                 <template #append>{{$t('report.week')}}</template>
               </el-input>
-              <el-checkbox-group v-model="checkWeeklyList">
+              <el-checkbox-group v-model="checkWeeklyList" @change="checkWeeklyChange">
-                <el-checkbox v-for="(item, index) in citiesWeekly" :key="index" :label="item" />
+                <el-checkbox v-for="(item, index) in citiesWeekly" :key="index" :label="$t(item)" />
               </el-checkbox-group>
             </div>
             <div class="enable-tabs-per-month" v-if="tabNum === 2">
               <div class="enable-month-tab">
                 <div class="enable-month-tabs" @click="enableMonthTabs(0)" :class="{'active': tabMonthNum === 0}">{{$t('report.date')}}</div>
                 <div class="enable-month-tabs" @click="enableMonthTabs(1)" :class="{'active': tabMonthNum === 1}">{{$t('report.week')}}</div>
-                <el-checkbox v-model="perMonthChecked" @change="checkboxChange" :label="$t('report.cycle')" size="large" />
+                <el-checkbox v-model="perMonthChecked" @change="checkboxCycleChange" :label="$t('report.cycle')" size="large" />
               </div>
               <div class="enable-month-data-tab" v-if="tabMonthNum === 0">
                 <div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
@@ -103,7 +137,7 @@
                     <el-checkbox v-model="dateCheckedAll" :indeterminate="isIndeterminateDate" @change="checkAllChange" :label="$t('report.all')" size="large" />
                   </div>
                   <el-checkbox-group v-model="dateList" @change="checkedCitiesChange">
-                    <el-checkbox v-for="(item, index) in citiesDate" :key="index" :label="item" />
+                    <el-checkbox v-for="(item, index) in citiesDate" :key="index" :label="item" @change="(val)=>checkboxChange(val, item)" />
                   </el-checkbox-group>
                 </div>
                 <div class="enable-month-value">*一月，三月，五月，七月，八月，十月和12月含31天;闰年二月含29天*</div>
@@ -113,8 +147,8 @@
                   <div class="enable-month-moon-custom">{{$t('report.custom')}}</div>
                   <div class="enable-month-all">
                     <el-checkbox v-model="allMonthsChecked" class="enable-month-all-months" :indeterminate="isIndeterminateMonths" @change="checkMonthsAllChange" :label="$t('report.allMonths')" size="large" />
-                    <el-checkbox-group v-model="checkMonthsList">
+                    <el-checkbox-group v-model="checkMonthsList" @change="checkedMonthsCitiesChange">
-                      <el-checkbox v-for="(item, index) in citiesMonths" :key="index" :label="item" @change="checkedMonthsCitiesChange" />
+                      <el-checkbox v-for="(item, index) in citiesMonths" :key="index" :label="$t(item)" />
                     </el-checkbox-group>
                   </div>
                 </template>
@@ -125,11 +159,11 @@
                   </el-input>
                 </template>
                 <el-select id="account-input-roleIds"
-                           v-model="editObject.id"
+                           v-model="editObject.type"
                            class="right-box__select"
                            multiple
-                           placeholder="Select"
+                           placeholder=""
-                           popper-class="right-box-select-dropdown prevent-clickoutside"
+                           popper-class="right-box-select-dropdown right-box-select-report prevent-clickoutside"
                            size="small"
                            @change="()=>{ this.$forceUpdate() }">
                   <template v-for="time in timeLimit" :key="time.value">
@@ -138,8 +172,8 @@
                 </el-select>
                 <div class="enable-month-week">
                   <el-checkbox v-model="checkedAll" class="enable-month-week-all" :label="$t('report.all')" :indeterminate="isIndeterminateWeek" @change="checkWeekAllChange" size="large" />
-                  <el-checkbox-group v-model="checkWeekList" >
+                  <el-checkbox-group v-model="checkWeekList" @change="checkedWeekCitiesChange">
-                    <el-checkbox v-for="(item, index) in citiesWeek" @change="checkedWeekCitiesChange" :key="index" :label="item" />
+                    <el-checkbox v-for="(item, index) in citiesWeek"  :key="index" :label="$t(item)" />
                   </el-checkbox-group>
                 </div>
 
@@ -147,12 +181,12 @@
             </div>
           </el-form-item>
           <!--startTime-->
-          <el-form-item :label="$t('report.startTime')" prop="startTime">
+          <el-form-item :label="$t('report.startTime')" prop="startTime" v-if="scheduleChecked">
             <div class="demo-datetime-picker">
               <div class="block">
                 <el-date-picker
                     style="width: 100%"
-                    v-model="editObject.startTime"
+                    v-model="editObject.schedulerStart"
                     size="small"
                     :format="format"
                     prefix-icon="cn-icon cn-icon-shijian"
@@ -163,12 +197,12 @@
             </div>
           </el-form-item>
           <!--endTime-->
-          <el-form-item :label="$t('report.endTime')" prop="endTime">
+          <el-form-item :label="$t('report.endTime')" prop="endTime" v-if="scheduleChecked">
             <div class="demo-datetime-picker">
               <div class="block">
                 <el-date-picker
                     style="width: 100%"
-                    v-model="editObject.endTime"
+                    v-model="editObject.schedulerEnd"
                     size="small"
                     :format="format"
                     prefix-icon="cn-icon cn-icon-shijian"
@@ -186,7 +220,7 @@
                        clearable
                        collapse-tags
                        placeholder=""
-                       popper-class="right-box-select-dropdown prevent-clickoutside"
+                       popper-class="right-box-select-dropdown right-box-select-report prevent-clickoutside"
                        size="small"
                        @change="()=>{ this.$forceUpdate() }">
               <template v-for="time in timeLimit" :key="time.value">
@@ -194,6 +228,14 @@
               </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>
@@ -211,7 +253,7 @@
 <script>
 import rightBoxMixin from '@/mixins/right-box'
 import { get, post, put } from '@/utils/http'
-import { themeData, langData, storageKey, timeLimit, perMonthList } from '@/utils/constants'
+import { themeData, langData, storageKey, timeLimit, latsList } from '@/utils/constants'
 import { api } from '@/utils/api'
 import { ref } from 'vue'
 export default {
@@ -227,7 +269,7 @@ export default {
   },
   data () {
     return {
-      url: api.user,
+      url: api.reportTemp,
       loginName: localStorage.getItem(storageKey.username),
       format: localStorage.getItem(storageKey.dateFormat),
       rules: { // 表单校验规则
@@ -237,31 +279,43 @@ export default {
       },
       scheduleChecked: false,
       perMonthChecked: false,
-      tabNum: '',
+      tabNum: 0,
-      tabMonthNum: '',
+      tabMonthNum: 0,
       single: 0,
+      showChange: '',
       themeData,
       langData,
       timeLimit,
-      perMonthList
+      latsList
     }
   },
   setup (props) {
     // weekly
-    const checkWeeklyList = ref([props.checkWeekListData[0]])
+    const checkWeeklyList = ref([])
     let citiesWeekly = ref([])
     citiesWeekly = props.checkWeekListData
+    const checkWeeklyChange = (val) => {
+      if (val) {
+        props.object.config.schedulerConfig.week_dates = val.map((item, index) => { return index + 1 })
+      }
+    }
     // week
-    const checkWeekList = ref([props.checkWeekListData[0]])
+    const checkWeekList = ref([])
     const checkedAll = ref(false)
     const isIndeterminateWeek = ref(true)
     const citiesWeek = ref([])
     citiesWeek.value = props.checkWeekListData
     const checkWeekAllChange = (val) => {
       checkWeekList.value = val ? citiesWeek.value : []
+      if (checkWeekList.value) {
+        props.object.config.schedulerConfig.month_week_dates = checkWeekList.value.map((item, index) => { return index + 1 })
+      }
       isIndeterminateWeek.value = false
     }
     const checkedWeekCitiesChange = (val) => {
+      if (val) {
+        props.object.config.schedulerConfig.month_week_dates = val.map((item, index) => { return index + 1 })
+      }
       const checkedCount = val.length
       checkedAll.value = checkedCount === citiesWeek.value.length
       isIndeterminateWeek.value = checkedCount > 0 && checkedCount < citiesWeek.value.length
@@ -273,24 +327,36 @@ export default {
     const citiesDate = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]
     const checkAllChange = (val) => {
       dateList.value = val ? citiesDate : []
+      if (dateList.value) {
+        props.object.config.schedulerConfig.month_dates = dateList.value.map((item, index) => { return index + 1 })
+      }
       isIndeterminateDate.value = false
     }
     const checkedCitiesChange = (val) => {
+      if (val) {
+        props.object.config.schedulerConfig.month_dates = val.map((item, index) => { return index + 1 })
+      }
       const checkedCount = val.length
       dateCheckedAll.value = checkedCount === citiesDate.length
       isIndeterminateDate.value = checkedCount > 0 && checkedCount < citiesDate.length
     }
     // months
-    const checkMonthsList = ref([props.checkMonthsListData[0]])
+    const checkMonthsList = ref([])
     const allMonthsChecked = ref(false)
     const isIndeterminateMonths = ref(true)
     const citiesMonths = ref([])
     citiesMonths.value = props.checkMonthsListData
     const checkMonthsAllChange = (val) => {
       checkMonthsList.value = val ? citiesMonths.value : []
+      if (checkMonthsList.value) {
+        props.object.config.schedulerConfig.month = checkMonthsList.value.map((item, index) => { return index + 1 })
+      }
       isIndeterminateMonths.value = false
     }
     const checkedMonthsCitiesChange = (val) => {
+      if (val) {
+        props.object.config.schedulerConfig.month = val.map((item, index) => { return index + 1 })
+      }
       const checkedCount = val.length
       allMonthsChecked.value = checkedCount === citiesMonths.value.length
       isIndeterminateMonths.value = checkedCount > 0 && checkedCount < citiesMonths.value.length
@@ -299,6 +365,7 @@ export default {
       // weekly
       checkWeeklyList,
       citiesWeekly,
+      checkWeeklyChange,
       // week
       checkWeekList,
       citiesWeek,
@@ -330,6 +397,7 @@ export default {
       this.blockOperation.save = true
       this.$refs.userForm.validate((valid) => {
         if (valid) {
+          console.log(this.editObject)
           if (this.editObject.id) {
             put(this.url, this.editObject).then(res => {
               this.blockOperation.save = false
@@ -363,9 +431,28 @@ export default {
     enableMonthTabs (num) {
       this.tabMonthNum = num
     },
-    checkboxChange (val) {
+    checkboxCycleChange (val) {
       this.perMonthChecked = val
     },
+    scheduleCheckedChange (val) {
+      this.scheduleChecked = val
+      if (!val) {
+        this.tabNum = ''
+        this.tabMonthNum = ''
+        this.editObject.config.isRepeat = 0
+      } else {
+        this.editObject.config.isRepeat = 1
+      }
+    },
+    timeLimitChange (val) {
+      if (val === 'customize') {
+        this.scheduleChecked = false
+        this.editObject.config.isRepeat = 0
+      } else if (val === 'this') {
+        this.editObject.config.timeConfig.offset = 0
+      }
+      this.showChange = val
+    },
     singleChange (val) {
       this.single = val
     },
@@ -375,6 +462,13 @@ export default {
     piece () {
       if (this.single <= 0) return
       this.single--
+    },
+    checkboxChange (val, item) {
+      if (val) {
+        this.citiesDate.push(item)
+      } else {
+        this.citiesDate = this.citiesDate.filter(item => item !== item)
+      }
     }
   },
   watch: {
@@ -382,6 +476,10 @@ export default {
       deep: true,
       immediate: true,
       handler (n) {
+        if (n.id) {
+          this.editObject = n
+          console.log(this.editObject)
+        }
       }
     }
   }

src/components/table/CnDataList.vue

@@ -11,7 +11,7 @@
           <div class="top-tool-right">
 <!--           <el-input v-model="keyWord" value="keyWord"></el-input>
             <el-button @click="onsearch" icon="el-icon-search" type="info" size="mini" style="margin-right: 10px"></el-button>-->
-            <div v-if="showLayout.indexOf('search') > -1" class="top-tool-search" :class="{'margin-r-20': from !== fromRoute.builtinReport}">
+            <div v-if="showLayout.indexOf('search') > -1" class="top-tool-search margin-r-20">
               <div style="display: flex">
                 <el-input
                     v-model="keyWord"  size="small" @keyup.enter="onsearch"></el-input>

src/components/table/report/reportTestTable.vue

@@ -7,147 +7,68 @@
       border
       @header-dragend="dragend"
       @sort-change="tableDataSort"
+      @expand-change="dropExpandChange"
       @selection-change="selectionChange"
   >
     <el-table-column type="expand">
       <template #default="props">
-        <div class="expand">
+        <div class="down">
-          <dov class="expand-cell">
+          <loading :loading="loadingDown"></loading>
-            <div class="expand-right">
+          <div class="block drop-down-time">
-              <div class="demo-progress">
+            <el-date-picker
-                <el-progress type="circle" :percentage="percentage" :color="percentage === 100 ? '#5cb87a' : '#1989fa'" />
+                v-model="value"
-              </div>
+                size="small"
-            </div>
+                :format="format"
-            <div class="expand-left">
+                type="datetimerange"
-              <div class="expand-name"><i class="cn-icon"></i>admin</div>
+                range-separator="To"
-              <div class="expand-time">
+                start-placeholder="Start date"
-                <div>{{ $t('report.creationTime') }}</div>
+                end-placeholder="End date"
-                <div>{{props.row.startTime}}</div>
+                @change="datePickerChange(props)"
-              </div>
+            />
-              <div class="expand-icon">
+          </div>
-                <div class="table-operation-item--no-border" @click="tableOperation(['download', props.row, 1])">
+          <div class="expand">
-                  <loading :loading="loadingTableId === props.row.id"></loading>
+            <div class="expand-cell" v-for="(item, index) in downDataList" :key="index">
-                  <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingTableId}">
+              <div class="expand-right">
-                    <use xlink:href="#cn-icon-download2"></use>
+                <div class="demo-progress">
-                  </svg>
+                  <el-progress type="circle" :percentage="item.percent" :color="item.percent === 100 ? '#5cb87a' : '#1989fa'" />
                 </div>
-                <div class="table-operation-item--no-border" @click="tableOperation(['preview', props.row])">
+              </div>
-                  <loading :loading="loadingPreviewId === props.row.id"></loading>
+              <div class="expand-left">
-                  <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
+                <div class="expand-name"><i class="cn-icon cn-icon-user"></i>{{ username }}</div>
-                    <use xlink:href="#cn-icon-preview"></use>
+                <div class="expand-time">
-                  </svg>
+                  <div>{{ $t('report.creationTime') }}</div>
+                  <div>{{dateFormatByAppearance(item.ctime)}}</div>
                 </div>
-                <div class="table-operation-item--no-border" @click="tableOperation(['delete', props.row])">
+                <div class="expand-icon">
-                  <loading :loading="loadingPreviewId === props.row.id"></loading>
+                  <div class="table-operation-item--no-border" @click="tableOperation(['download', item])">
-                  <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
+                    <loading :loading="loadingTableId === item.id"></loading>
-                    <use xlink:href="#cn-icon-shanchu"></use>
+                    <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingTableId}">
-                  </svg>
+                      <use xlink:href="#cn-icon-download2"></use>
+                    </svg>
+                  </div>
+                  <div class="table-operation-item--no-border" @click="tableOperation(['preview', item])">
+                    <loading :loading="loadingPreviewId === item.id"></loading>
+                    <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
+                      <use xlink:href="#cn-icon-preview"></use>
+                    </svg>
+                  </div>
+                  <div class="table-operation-item--no-border" @click="downDeleteQueryChange(item, props)">
+                    <svg class="icon" aria-hidden="true">
+                      <use xlink:href="#cn-icon-shanchu"></use>
+                    </svg>
+                  </div>
                 </div>
               </div>
             </div>
-          </dov>
+          </div>
-          <dov class="expand-cell">
+          <div class="cn-detection__footer">
-            <div class="expand-right">
+            <chart-detection-pagination
-              <div class="demo-progress">
+                ref="pagination"
-                <el-progress type="circle" :percentage="percentage" :color="percentage === 100 ? '#5cb87a' : '#1989fa'" />
+                :page-obj="pageObj"
-              </div>
+                @pageJump="pageJump"
-            </div>
+                :pageSizeForAlarm="pageObj.pageSize"
-            <div class="expand-left">
+            ></chart-detection-pagination>
-              <div class="expand-name"><i class="cn-icon"></i>admin</div>
+          </div>
-              <div class="expand-time">
-                <div>{{ $t('report.creationTime') }}</div>
-                <div>{{props.row.startTime}}</div>
-              </div>
-              <div class="expand-icon">
-                <div class="table-operation-item--no-border" @click="tableOperation(['download', props.row, 1])">
-                  <loading :loading="loadingTableId === props.row.id"></loading>
-                  <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingTableId}">
-                    <use xlink:href="#cn-icon-download2"></use>
-                  </svg>
-                </div>
-                <div class="table-operation-item--no-border" @click="tableOperation(['preview', props.row])">
-                  <loading :loading="loadingPreviewId === props.row.id"></loading>
-                  <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
-                    <use xlink:href="#cn-icon-preview"></use>
-                  </svg>
-                </div>
-                <div class="table-operation-item--no-border" @click="tableOperation(['delete', props.row])">
-                  <loading :loading="loadingPreviewId === props.row.id"></loading>
-                  <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
-                    <use xlink:href="#cn-icon-shanchu"></use>
-                  </svg>
-                </div>
-              </div>
-            </div>
-          </dov>
-          <dov class="expand-cell">
-            <div class="expand-right">
-              <div class="demo-progress">
-                <el-progress type="circle" :percentage="percentage" :color="percentage === 100 ? '#5cb87a' : '#1989fa'" />
-              </div>
-            </div>
-            <div class="expand-left">
-              <div class="expand-name"><i class="cn-icon"></i>admin</div>
-              <div class="expand-time">
-                <div>{{ $t('report.creationTime') }}</div>
-                <div>{{props.row.startTime}}</div>
-              </div>
-              <div class="expand-icon">
-                <div class="table-operation-item--no-border" @click="tableOperation(['download', props.row, 1])">
-                  <loading :loading="loadingTableId === props.row.id"></loading>
-                  <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingTableId}">
-                    <use xlink:href="#cn-icon-download2"></use>
-                  </svg>
-                </div>
-                <div class="table-operation-item--no-border" @click="tableOperation(['preview', props.row])">
-                  <loading :loading="loadingPreviewId === props.row.id"></loading>
-                  <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
-                    <use xlink:href="#cn-icon-preview"></use>
-                  </svg>
-                </div>
-                <div class="table-operation-item--no-border" @click="tableOperation(['delete', props.row])">
-                  <loading :loading="loadingPreviewId === props.row.id"></loading>
-                  <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
-                    <use xlink:href="#cn-icon-shanchu"></use>
-                  </svg>
-                </div>
-              </div>
-            </div>
-          </dov>
-          <dov class="expand-cell">
-            <div class="expand-right">
-              <div class="demo-progress">
-                <el-progress type="circle" :percentage="percentage" :color="percentage === 100 ? '#5cb87a' : '#1989fa'" />
-              </div>
-            </div>
-            <div class="expand-left">
-              <div class="expand-name"><i class="cn-icon"></i>admin</div>
-              <div class="expand-time">
-                <div>{{ $t('report.creationTime') }}</div>
-                <div>{{props.row.startTime}}</div>
-              </div>
-              <div class="expand-icon">
-                <div class="table-operation-item--no-border" @click="tableOperation(['download', props.row, 1])">
-                  <loading :loading="loadingTableId === props.row.id"></loading>
-                  <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingTableId}">
-                    <use xlink:href="#cn-icon-download2"></use>
-                  </svg>
-                </div>
-                <div class="table-operation-item--no-border" @click="tableOperation(['preview', props.row])">
-                  <loading :loading="loadingPreviewId === props.row.id"></loading>
-                  <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
-                    <use xlink:href="#cn-icon-preview"></use>
-                  </svg>
-                </div>
-                <div class="table-operation-item--no-border" @click="tableOperation(['delete', props.row])">
-                  <loading :loading="loadingPreviewId === props.row.id"></loading>
-                  <svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
-                    <use xlink:href="#cn-icon-shanchu"></use>
-                  </svg>
-                </div>
-              </div>
-            </div>
-          </dov>
         </div>
       </template>
     </el-table-column>
@@ -174,20 +95,14 @@
         <div class="col-resize-area"></div>
       </template>
       <template #default="scope" :column="item">
-        <span v-if="item.prop === 'dataRange'">
+        <span v-if="item.prop === 'timeLimit'">
-          <template v-if="scope.row.startTime && scope.row.endTime">
+          {{scope.row.config.timeConfig.type}}
-            {{dateFormatByAppearance(scope.row.startTime)}}<span style="padding: 0 5px">-</span>{{dateFormatByAppearance(scope.row.endTime)}}
-          </template>
         </span>
-        <span v-else-if="item.prop === 'type'">
+        <span v-else-if="item.prop === 'utime'">
-            {{scope.row.reportTemp.name}}
+          {{dateFormatByAppearance(scope.row.utime)}}
-        </span>
-        <span v-else-if="item.prop === 'state'">
-            {{getJobStatus(scope.row)}}
         </span>
         <span v-else>{{scope.row[item.prop]}}</span>
       </template>
-
     </el-table-column>
     <el-table-column
         :resizable="false"
@@ -197,7 +112,7 @@
         <div class="table-operation-title">{{$t('overall.option')}}</div>
       </template>
       <template #default="scope">
-        <div class="table-operation-items" v-if="scope.row.state === 1">
+        <div class="table-operation-items">
           <button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-bianji"></i></button>
           <button class="table-operation-item" @click="tableOperation(['delete', scope.row])"><i class="cn-icon cn-icon-shanchu"></i></button>
           <!--          <div class="table-operation-item&#45;&#45;no-border" @click="tableOperation(['rerun', scope.row])">
@@ -225,19 +140,30 @@
 <script>
 import table from '@/mixins/table'
 import Loading from '@/components/common/Loading'
+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 chartDetectionPagination from '@/views/charts/charts/chartDetectionPagination'
 export default {
   name: 'builtinReportTable',
   mixins: [table],
   components: {
-    Loading
+    Loading,
+    chartDetectionPagination
   },
+  inject: ['reload'],
   data () {
     return {
+      format: localStorage.getItem(storageKey.dateFormat),
+      username: localStorage.getItem(storageKey.username),
       tableTitle: [ // 原始table列
         {
           label: 'ID',
           prop: 'id',
-          show: true
+          show: true,
+          minWidth: 80
         }, {
           label: this.$t('config.user.name'),
           prop: 'name',
@@ -249,29 +175,30 @@ export default {
           show: true
         }, {
           label: this.$t('report.timePlan'),
-          prop: 'timePlan',
+          prop: 'type',
           show: true,
           minWidth: 110
         }, {
           label: this.$t('report.operationUserName'),
-          prop: 'operationUserName',
+          prop: 'userName',
-          show: true
+          show: true,
+          minWidth: 170
         }, {
           label: this.$t('report.resultCount'),
           prop: 'resultCount',
           show: true,
-          width: 130
+          minWidth: 130
         }, {
           label: this.$t('report.lastModified'),
-          prop: 'LastModified',
+          prop: 'utime',
           show: true,
-          width: 130,
+          minWidth: 150,
           sortable: 'custom'
         }, {
           label: this.$t('report.lastExecutionTime'),
           prop: 'lastExecutionTime',
           show: true,
-          width: 130,
+          minWidth: 200,
           sortable: 'custom'
         }
       ],
@@ -281,9 +208,16 @@ export default {
       builtinId: '',
       indeterminate: false,
       loading: false,
+      loadingDown: false,
       loadingTableId: '',
       loadingPreviewId: '',
-      percentage: 80
+      downDataList: [],
+      pageObj: {
+        pageNo: 1,
+        pageSize: 30,
+        total: 0,
+        resetPageNo: true
+      }
     }
   },
   methods: {
@@ -308,6 +242,55 @@ export default {
       } else {
         this.$refs.dataTable.clearSelection()
       }
+    },
+    dropExpandChange (row, rows) {
+      const isExpand = rows.some(t => t.id === row.id)
+      if (isExpand) {
+        this.dropDownQueryChange({ tempId: row.id })
+      }
+    },
+    datePickerChange (props) {
+      const row = {
+        tempId: props.row.id,
+        startTime: getSecond(new Date(this.value[0]).getTime()),
+        endTime: getSecond(new Date(this.value[1]).getTime())
+      }
+      this.dropDownQueryChange(row)
+    },
+    dropDownQueryChange (row) {
+      this.loadingDown = true
+      get(api.reportJob, row).then(res => {
+        if (res.code === 200) {
+          this.downDataList = res.data.list
+        }
+        this.loadingDown = false
+      })
+    },
+    downDeleteQueryChange (row, props) {
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        del(api.reportJob + '?ids=' + row.id).then(response => {
+          if (response.code === 200) {
+            this.delFlag = true
+            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.dropDownQueryChange({ tempId: props.row.id })
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      })
+    },
+    pageJump (val) {
+
+    }
+  },
+  setup () {
+    const value = ref('')
+    return {
+      value
     }
   }
 }

src/mixins/data-list.js

@@ -44,7 +44,7 @@ export default {
     asce: tableSort.asce,
     desc: tableSort.desc,
     strToDate: tableSort.strToDate,
-    tableOperation ([command, row, param]) {
+    tableOperation ([command, row]) {
       switch (command) {
         case 'edit': {
           this.edit(row)
@@ -59,7 +59,7 @@ export default {
           break
         }
         case 'download': {
-          this.download(row, param)
+          this.download(row)
           break
         }
         case 'preview': {
@@ -90,7 +90,16 @@ export default {
           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
+          if (this.tableId === 'builtinReportTable') {
+            this.tableData = response.data.list.map(item => {
+              return {
+                ...item,
+                config: JSON.parse(item.config)
+              }
+            })
+          } else {
+            this.tableData = response.data.list
+          }
           this.pageObj.total = response.data.total
           // TODO 回到顶部
         }
@@ -148,44 +157,25 @@ export default {
       this.object = { ...u, name: 'Copy from ' + u.name, id: '' }
       this.rightBox.show = true
     },
-    download (u, n) {
+    download (u) {
-      if (this.$refs.dataTable.loading && n === 2) { // 批量下载
+      if (this.$refs.dataTable.loadingTableId === u.id) { // 列表单个下载
-        return
-      } else if (this.$refs.dataTable.loadingTableId === u.id && n === 1) { // 列表单个下载
         return
       }
       let fileName = ''
       let url = ''
       let params = {}
-      if (n === 2) { // 批量下载
+      fileName = u.name + '.pdf' // 文件名称
-        fileName = 'builtinReport' + '-' + this.getTimeString() + '.zip' // 文件名称
+      url = api.reportDownloadPdf // 单个 pdf 下载
-        url = api.reportBatchDownloadPdf // 批量 zip 下载
+      params = {
-        params = {
+        id: u.id
-          ids: u
-        }
-      } else if (n === 1) {
-        fileName = u.name + '.pdf' // 文件名称
-        url = api.reportDownloadPdf // 单个 pdf 下载
-        params = {
-          id: u.id
-        }
       }
-      if (n === 2) { // 批量下载
+      this.$refs.dataTable.loadingTableId = u.id // 列表单个下载
-        this.$refs.dataTable.loading = true
+      if (!u) { // 列表单个下载
-      } else if (n === 1) { // 列表单个下载
-        this.$refs.dataTable.loadingTableId = u.id // 列表单个下载
-      }
-      if (!u && n === 2) { // 批量下载
-        this.$refs.dataTable.loading = false
-        return
-      } else if (!u && n === 1) { // 列表单个下载
         this.$refs.dataTable.loadingTableId = u.id
         return
       }
       // 判断是否成功登陆成功
-      if (!localStorage.getItem(storageKey.token) && n === 2) {
+      if (!localStorage.getItem(storageKey.token)) {
-        return window.location.replace('/')
-      } else if (!localStorage.getItem(storageKey.token) && n === 1) {
         return window.location.replace('/')
       }
       get(api.reportTemp).then(res => {
@@ -205,11 +195,7 @@ export default {
               a.click()
               a.remove() // 将a标签移除
             }
-            if (n === 2) { // 批量下载
+            this.$refs.dataTable.loadingTableId = !u.id
-              this.$refs.dataTable.loading = false
-            } else if (n === 1) { // 列表单个下载
-              this.$refs.dataTable.loadingTableId = !u.id
-            }
           }, error => {
             const $self = this
             const reader = new FileReader()
@@ -223,17 +209,9 @@ export default {
               }
             }
             reader.readAsText(error.response.data)
-            if (n === 2) { // 批量下载
+            this.$refs.dataTable.loadingTableId = !u.id
-              this.$refs.dataTable.loading = false
-            } else if (n === 1) { // 列表单个下载
-              this.$refs.dataTable.loadingTableId = !u.id
-            }
           }).catch(() => {
-            if (n === 2) { // 批量下载
+            this.$refs.dataTable.loadingTableId = !u.id
-              this.$refs.dataTable.loading = false
-            } else if (n === 1) { // 列表单个下载
-              this.$refs.dataTable.loadingTableId = !u.id
-            }
           })
         }
       })

src/mixins/table.js

@@ -38,10 +38,10 @@ export default {
     }
   },
   methods: {
-    tableOperation ([command, row, param]) {
+    tableOperation ([command, row]) {
       switch (command) {
         default:
-          this.$emit(command, row, param)
+          this.$emit(command, row)
           break
       }
     },

src/utils/api.js

@@ -34,7 +34,9 @@ export const api = {
 
   // 报告相关
   reportJob: '/report/job',
+  reportJobCount: '/report/job/count',
   reportTemp: '/report/temp',
+  reportCategory: '/report/category',
   reportBatchDownloadPdf: '/report/job/batchDownloadPdf',
   reportDownloadPdf: '/report/job/downloadPdf',
   reportView: '/report/job/view',

src/views/charts/charts/chartDetectionService.vue

@@ -63,7 +63,6 @@ export default {
         pageNo: val,
         pageSize: this.pageObj.pageSize
       }
-      console.log(this.pag)
       this.$emit('getDetectionData', this.chartInfo.params.url, extraParams, false, {
         startTime: this.queryParams.startTime,
         endTime: this.queryParams.endTime

src/views/report/reportTest.vue

@@ -39,9 +39,9 @@
               :custom-table-title="tools.customTableTitle"
               :height="mainTableHeight"
               :table-data="tableData"
-              @download="download"
               @delete="del"
               @edit="edit"
+              @download="download"
               @preview="preview"
               @orderBy="tableDataSort"
               @reload="getTableData"
@@ -84,38 +84,67 @@ export default {
       builtinReportLeftMenu: [], // 左侧列表菜单数据
       builtinColor: false,
       builtinId: '',
-      url: api.reportJob,
+      url: api.reportTemp,
-      blankObject: { // 空白对象
+      blankObject: {
         id: '',
         name: '',
-        ctime: '',
+        type: '',
+        // config: '',
+        source: '',
+        cTime: '',
+        uTime: '',
+        htmContent: '',
         remark: '',
         uniq: '',
-        startTime: '',
+        config: {
-        endTime: ''
+          isRepeat: 0,
+          cronExpression: '',
+          startTime: '',
+          endTime: '',
+          queryConfig: {
+            key1: '',
+            key2: ''
+          },
+          schedulerConfig: {
+            // type: '',
+            week_dates: [1, 2, 3, 4, 5, 6, 7],
+            months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+            month_dates: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
+            month_week_dates: [0, 1, 2, 3, 4, 5, 6],
+            interval: 1
+          },
+          timeConfig: {
+            type: 'day',
+            offset: 0,
+            unit: ''
+          }
+        },
+        schedulerStart: '',
+        schedulerEnd: '',
+        category_id: 1
       },
       checkWeekListData: [
-        this.$t('report.sunday'),
+        'report.sunday',
-        this.$t('report.onMonday'),
+        'report.onMonday',
-        this.$t('report.tuesday'),
+        'report.tuesday',
-        this.$t('report.wednesday'),
+        'report.wednesday',
-        this.$t('report.thursday'),
+        'report.thursday',
-        this.$t('report.friday'),
+        'report.friday',
-        this.$t('report.saturday')
+        'report.saturday'
       ],
       checkMonthsListData: [
-        this.$t('report.january'),
+        'report.january',
-        this.$t('report.february'),
+        'report.february',
-        this.$t('report.march'),
+        'report.march',
-        this.$t('report.april'),
+        'report.april',
-        this.$t('report.may'),
+        'report.may',
-        this.$t('report.june'),
+        'report.june',
-        this.$t('report.july'),
+        'report.july',
-        this.$t('report.august'),
+        'report.august',
-        this.$t('report.september'),
+        'report.september',
-        this.$t('report.october'),
+        'report.october',
-        this.$t('report.november'),
+        'report.november',
-        this.$t('report.december')
+        'report.december'
       ],
       tableId: 'builtinReportTable'
     }
@@ -128,7 +157,14 @@ export default {
   },
   methods: {
     queryGetTempData () {
-      get(api.reportTemp).then(res => {
+      console.log(api.reportCategory)
+      get(api.reportCategory).then(res => {
+        this.builtinReportLeftMenu = [
+          { id: 1, name: 'Tencent网络服务质量监测报告(IDC精简版)' },
+          { id: 2, name: '网络服务质量监测报告(IDC精简版)' },
+          { id: 3, name: '出入口整体流量监测报告' },
+          { id: 4, name: '出入口字节跳动流量监测报告' }
+        ]
         if (res.code === 200) {
           this.builtinReportLeftMenu = res.data.list
         }
@@ -137,6 +173,21 @@ export default {
     builtinTabs (id) {
       this.getTableData({ tempId: id })
       this.builtinId = id
+    },
+    edit (u) {
+      get(this.url, { id: u.id, name: u.name }).then(response => {
+        if (response.code === 200) {
+          let dataList = []
+          dataList = response.data.list.map(item => {
+            return {
+              ...item,
+              config: JSON.parse(item.config)
+            }
+          })
+          this.object = dataList[0]
+          this.rightBox.show = true
+        }
+      })
     }
   },
   mounted () {