CN-599 feat: 新报告功能列表开发静态页面

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

@@ -0,0 +1,113 @@
+.right-box.right-box-report {
+  .right-box__container {
+    .container__form {
+      .enable-tab {
+        display: flex;
+        .enable-tabs {
+          height: 32px;
+          width: 160px;
+          text-align: center;
+          border: 1px solid #E7EAED;
+          border-right: none;
+          line-height: 32px;
+        }
+        .enable-tabs:nth-of-type(4) {
+          border-right: 1px solid #E7EAED;
+        }
+        .enable-tabs.active {
+          border: 1px solid #1890FF;
+          border-radius: 2px;
+        }
+      }
+      .enable-tabs-per-month {
+        margin-top: 10px;
+        .enable-month-tab {
+          display: flex;
+          .el-checkbox {
+            height: 32px;
+            line-height: 32px;
+            margin-left: 14px;
+          }
+          .enable-month-tabs {
+            height: 32px;
+            width: 290px;
+            text-align: center;
+            border: 1px solid #E7EAED;
+            border-right: none;
+            line-height: 32px;
+          }
+          .enable-month-tabs:nth-of-type(2) {
+            border-right: 1px solid #E7EAED;
+          }
+          .enable-month-tabs.active {
+            border: 1px solid #1890FF;
+            border-radius: 2px;
+          }
+        }
+        .enable-month-data-tab {
+          margin-bottom: 20px;
+          .enable-month-data-tabs {
+            .el-checkbox-group {
+              width: calc(100% + 20px);
+              .el-checkbox:nth-of-type(10) {
+                margin-right: 0;
+              }
+              .el-checkbox {
+                height: 20px;
+                width: 36px;
+                line-height: 20px;
+              }
+            }
+          }
+          .enable-month-value {
+            width: 393px;
+            height: 17px;
+            font-size: 12px;
+            color: #666666;
+            letter-spacing: 0;
+            font-weight: 400;
+          }
+        }
+      }
+      .enable-month-moon {
+        .enable-month-moon-custom {
+          height: 30px;
+        }
+        .enable-month-all {
+          display: flex;
+          .enable-month-all-months.el-checkbox {
+            margin-right: 20px;
+          }
+        }
+        .enable-month-week {
+          display: flex;
+          .enable-month-week-all.el-checkbox {
+            margin-right: 20px;
+            height: 35px;
+            line-height: 35px;
+          }
+          .el-checkbox-group {
+            width: calc(100% - 52px);
+            height: 35px;
+            .el-checkbox {
+              line-height: 35px;
+            }
+          }
+        }
+      }
+      .el-input-single {
+        width: 200px;
+        height: 32px;
+        margin-top: 10px;
+        .el-input__inner {
+          text-align: center;
+        }
+      }
+      .right-box__select-single {
+        width: 430px;
+        height: 32px;
+        margin: 10px 0 0 10px;
+      }
+    }
+  }
+}

src/assets/css/components/index.scss

@@ -43,6 +43,7 @@
 @import './views/charts/chartMap';
 @import 'views/charts/chartRelationShipList';
 @import './views/report/builtinReport';
+@import './components/rightBox/report/builtinReportBox';
 
 
 //@import '../chart';

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

@@ -39,12 +39,72 @@
         .el-table--fit.el-table--border {
           height: calc(100% - 55px) !important;
         }
+        .el-table__header th:first-of-type {
+          border-right: none;
         }
-    }
+        .has-gutter .el-table-column--selection .el-checkbox {
-    .el-table__header th:first-of-type .el-checkbox:last-of-type {
           border-left: none;
           display: none;
         }
+        .el-table__expanded-cell {
+          .expand {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            .expand-cell {
+              display: flex;
+              background: #FFFFFF;
+              border: 1px solid #E7EAED;
+              border-radius: 2px;
+              margin-right: 16px;
+              width: 300px;
+              height: 97px;
+              .expand-right {
+                background: #F9F9F9;
+                border-radius: 2px;
+                width: 97px;
+                height: 95px;
+                position: relative;
+                .demo-progress {
+                  position: absolute;
+                  top: 21px;
+                  left: 18.5px;
+                }
+                .demo-progress,.demo-progress .el-progress-circle {
+                  width: 57px !important;
+                  height: 57px !important;
+                }
+              }
+              .expand-left {
+                text-align: center;
+                width: calc(100% - 97px);
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                .expand-name {
+                  font-size: 12px;
+                  color: #666666;
+                  font-weight: 400;
+                  margin-bottom: 4px;
+                }
+                .expand-time {
+                  font-size: 12px;
+                  color: #999999;
+                  font-weight: 400;
+                  margin-bottom: 4px;
+                }
+                .expand-icon {
+                  display: flex;
+                  justify-content: space-evenly;
+                  margin: 0 8px;
+                  font-size: 14px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
     .table-operation-all {
       width: 300px;
       position: absolute;
@@ -81,7 +141,6 @@
           border-radius: 2px;
           line-height: 21px;
           cursor: pointer;
-          position: relative;
           span {
             margin: 3px 8px;
             font-size: 12px;
@@ -110,6 +169,8 @@
       .table-operation-item--no-border {
         margin-right: 16px;
         cursor: pointer;
+        position: relative;
+        font-size: 16px;
       }
       .table-operation-item--no-border:last-of-type {
         margin-right: 0;
@@ -119,21 +180,6 @@
         justify-content: center;
         flex-direction: column;
         position: relative;
-        .chart__loading {
-          .el-icon-loading {
-            font-size: 12px;
-            left: calc(50% - 6px);
-            top: calc(50% - 6px);
-          }
-        }
-        .icon {
-          height: 25px;
-          width: 25px;
-        }
-        .icon2 {
-          height: 16px;
-          width: 16px;
-        }
       }
     }
   }

src/assets/css/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "cn-icon"; /* Project id 2614877 */
-  src: url('iconfont.woff2?t=1652249170229') format('woff2'),
+  src: url('iconfont.woff2?t=1653978200371') format('woff2'),
-       url('iconfont.woff?t=1652249170229') format('woff'),
+       url('iconfont.woff?t=1653978200371') format('woff'),
-       url('iconfont.ttf?t=1652249170229') format('truetype');
+       url('iconfont.ttf?t=1653978200371') format('truetype');
 }
 
 .cn-icon {
@@ -13,6 +13,38 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.cn-icon-a-:before {
+  content: "\e77b";
+}
+
+.cn-icon-a-1:before {
+  content: "\e781";
+}
+
+.cn-icon-bianji:before {
+  content: "\e77c";
+}
+
+.cn-icon-chuangjian:before {
+  content: "\e77d";
+}
+
+.cn-icon-shijian:before {
+  content: "\e77e";
+}
+
+.cn-icon-shijianjihua:before {
+  content: "\e77f";
+}
+
+.cn-icon-shanchu:before {
+  content: "\e780";
+}
+
+.cn-icon-a-allclear:before {
+  content: "\e779";
+}
+
 .cn-icon-org:before {
   content: "\e770";
 }

src/components/rightBox/report/reportTestBox.vue

@@ -0,0 +1,389 @@
+<template>
+  <div v-click-outside="{object: editObject, func: esc}" class="right-box right-box-report">
+    <div class="right-box__header">
+      <div class="header__title">{{editObject.id ? $t('report.editBuiltin') : $t('report.createBuiltin')}}</div>
+      <div class="header__operation">
+        <span v-cancel="{object: editObject, func: esc}"><i class="cn-icon cn-icon-close"></i></span>
+      </div>
+    </div>
+    <div class="right-box__container">
+      <div class="container__form">
+        <el-form ref="userForm" :model="editObject" :rules="rules" label-position="top" label-width="120px">
+          <!--name-->
+          <el-form-item :label="$t('report.name')" prop="name">
+            <el-input id="account-input-name" v-model="editObject.name" maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
+          </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.id"
+                         class="right-box__select"
+                         clearable
+                         collapse-tags
+                         placeholder="select"
+                         popper-class="right-box-select-dropdown prevent-clickoutside"
+                         size="small"
+                         @change="()=>{ this.$forceUpdate() }">
+                <template v-for="time in perMonthList" :key="time.value">
+                  <el-option :label="time.name" :value="time.value"></el-option>
+                </template>
+              </el-select>
+            </template>
+            <el-select id="account-input-roleIds"
+                       v-model="editObject.name"
+                       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"
+                         class="right-box__select right-box__select-single"
+                         clearable
+                         collapse-tags
+                         placeholder="1"
+                         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>
+          </el-form-item>
+          <!--Enable time schedule-->
+          <el-form-item prop="enableTimeSchedule">
+            <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>
+              <div class="enable-tabs" @click="enableTabs(2)" :class="{'active': tabNum === 2}">{{$t('report.perMonth')}}</div>
+              <div class="enable-tabs" @click="enableTabs(3)" :class="{'active': tabNum === 3}">{{$t('report.single')}}</div>
+            </div>
+            <div class="enable-tabs-daily" v-if="tabNum === 0">
+              <div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
+              <el-input v-model="day" size="small" placeholder="Please input">
+                <template #append>{{$t('report.day')}}</template>
+              </el-input>
+            </div>
+            <div class="enable-tabs-weekly" v-if="tabNum === 1">
+              <div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
+              <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 v-for="(item, index) in citiesWeekly" :key="index" :label="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" />
+              </div>
+              <div class="enable-month-data-tab" v-if="tabMonthNum === 0">
+                <div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
+                <el-input v-model="moon" size="small" placeholder="Please input">
+                  <template #append>{{$t('report.moon')}}</template>
+                </el-input>
+                <div class="enable-month-data-tabs">
+                  <div>
+                    <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-group>
+                </div>
+                <div class="enable-month-value">*一月，三月，五月，七月，八月，十月和12月含31天;闰年二月含29天*</div>
+              </div>
+              <div class="enable-month-moon" v-if="tabMonthNum === 1">
+                <template v-if="perMonthChecked">
+                  <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 v-for="(item, index) in citiesMonths" :key="index" :label="item" @change="checkedMonthsCitiesChange" />
+                    </el-checkbox-group>
+                  </div>
+                </template>
+                <template v-else>
+                  <div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
+                  <el-input v-model="moon" size="small" placeholder="Please input">
+                    <template #append>{{$t('report.moon')}}</template>
+                  </el-input>
+                </template>
+                <el-select id="account-input-roleIds"
+                           v-model="editObject.id"
+                           class="right-box__select"
+                           multiple
+                           placeholder="Select"
+                           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>
+                <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 v-for="(item, index) in citiesWeek" @change="checkedWeekCitiesChange" :key="index" :label="item" />
+                  </el-checkbox-group>
+                </div>
+
+              </div>
+            </div>
+          </el-form-item>
+          <!--startTime-->
+          <el-form-item :label="$t('report.startTime')" prop="startTime">
+            <div class="demo-datetime-picker">
+              <div class="block">
+                <el-date-picker
+                    style="width: 100%"
+                    v-model="editObject.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">
+            <div class="demo-datetime-picker">
+              <div class="block">
+                <el-date-picker
+                    style="width: 100%"
+                    v-model="editObject.endTime"
+                    size="small"
+                    :format="format"
+                    prefix-icon="cn-icon cn-icon-shijian"
+                    type="datetime"
+                    placeholder="Select date and time"
+                />
+              </div>
+            </div>
+          </el-form-item>
+          <!--categoryType-->
+          <el-form-item :label="$t('report.categoryType')" prop="categoryType">
+            <el-select id="account-input-roleIds"
+                       v-model="editObject.type"
+                       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>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div class="right-box__footer">
+      <button id="asset-edit-cancel" v-cancel="{object: editObject, func: esc}" class="footer__btn footer__btn--light">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button id="asset-edit-save" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import rightBoxMixin from '@/mixins/right-box'
+import { get, post, put } from '@/utils/http'
+import { themeData, langData, storageKey, timeLimit, perMonthList } from '@/utils/constants'
+import { api } from '@/utils/api'
+import { ref } from 'vue'
+export default {
+  name: 'builtinReportBox',
+  mixins: [rightBoxMixin],
+  props: {
+    checkMonthsListData: {
+      type: Array
+    },
+    checkWeekListData: {
+      type: Array
+    }
+  },
+  data () {
+    return {
+      url: api.user,
+      loginName: localStorage.getItem(storageKey.username),
+      format: localStorage.getItem(storageKey.dateFormat),
+      rules: { // 表单校验规则
+        name: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      },
+      scheduleChecked: false,
+      perMonthChecked: false,
+      tabNum: '',
+      tabMonthNum: '',
+      single: 0,
+      themeData,
+      langData,
+      timeLimit,
+      perMonthList
+    }
+  },
+  setup (props) {
+    // weekly
+    const checkWeeklyList = ref([props.checkWeekListData[0]])
+    let citiesWeekly = ref([])
+    citiesWeekly = props.checkWeekListData
+    // week
+    const checkWeekList = ref([props.checkWeekListData[0]])
+    const checkedAll = ref(false)
+    const isIndeterminateWeek = ref(true)
+    const citiesWeek = ref([])
+    citiesWeek.value = props.checkWeekListData
+    const checkWeekAllChange = (val) => {
+      checkWeekList.value = val ? citiesWeek.value : []
+      isIndeterminateWeek.value = false
+    }
+    const checkedWeekCitiesChange = (val) => {
+      const checkedCount = val.length
+      checkedAll.value = checkedCount === citiesWeek.value.length
+      isIndeterminateWeek.value = checkedCount > 0 && checkedCount < citiesWeek.value.length
+    }
+    // date
+    const dateList = ref([])
+    const dateCheckedAll = ref(false)
+    const isIndeterminateDate = ref(true)
+    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 : []
+      isIndeterminateDate.value = false
+    }
+    const checkedCitiesChange = (val) => {
+      const checkedCount = val.length
+      dateCheckedAll.value = checkedCount === citiesDate.length
+      isIndeterminateDate.value = checkedCount > 0 && checkedCount < citiesDate.length
+    }
+    // months
+    const checkMonthsList = ref([props.checkMonthsListData[0]])
+    const allMonthsChecked = ref(false)
+    const isIndeterminateMonths = ref(true)
+    const citiesMonths = ref([])
+    citiesMonths.value = props.checkMonthsListData
+    const checkMonthsAllChange = (val) => {
+      checkMonthsList.value = val ? citiesMonths.value : []
+      isIndeterminateMonths.value = false
+    }
+    const checkedMonthsCitiesChange = (val) => {
+      const checkedCount = val.length
+      allMonthsChecked.value = checkedCount === citiesMonths.value.length
+      isIndeterminateMonths.value = checkedCount > 0 && checkedCount < citiesMonths.value.length
+    }
+    return {
+      // weekly
+      checkWeeklyList,
+      citiesWeekly,
+      // week
+      checkWeekList,
+      citiesWeek,
+      checkedAll,
+      isIndeterminateWeek,
+      checkWeekAllChange,
+      checkedWeekCitiesChange,
+      // date
+      dateList,
+      citiesDate,
+      dateCheckedAll,
+      isIndeterminateDate,
+      checkAllChange,
+      checkedCitiesChange,
+      // months
+      checkMonthsList,
+      citiesMonths,
+      allMonthsChecked,
+      isIndeterminateMonths,
+      checkMonthsAllChange,
+      checkedMonthsCitiesChange
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    save () {
+      if (this.blockOperation.save) { return }
+      this.blockOperation.save = true
+      this.$refs.userForm.validate((valid) => {
+        if (valid) {
+          if (this.editObject.id) {
+            put(this.url, this.editObject).then(res => {
+              this.blockOperation.save = false
+              if (res.code === 200) {
+                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
+          } else {
+            post(this.url, this.editObject).then(res => {
+              this.blockOperation.save = false
+              if (res.code === 200) {
+                this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(res.msg)
+              }
+            })
+          }
+        } else {
+          this.blockOperation.save = false
+          return false
+        }
+      })
+    },
+    enableTabs (num) {
+      this.tabNum = num
+    },
+    enableMonthTabs (num) {
+      this.tabMonthNum = num
+    },
+    checkboxChange (val) {
+      this.perMonthChecked = val
+    },
+    singleChange (val) {
+      this.single = val
+    },
+    add () {
+      this.single++
+    },
+    piece () {
+      if (this.single <= 0) return
+      this.single--
+    }
+  },
+  watch: {
+    object: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+      }
+    }
+  }
+}
+</script>

src/components/table/report/reportTestTable.vue

@@ -0,0 +1,314 @@
+<template>
+  <el-table
+      id="userTable"
+      ref="dataTable"
+      :data="tableData"
+      :height="height"
+      border
+      @header-dragend="dragend"
+      @sort-change="tableDataSort"
+      @selection-change="selectionChange"
+  >
+    <el-table-column type="expand">
+      <template #default="props">
+        <div class="expand">
+          <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>
+          <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>
+    <el-table-column
+        :resizable="false"
+        align="center"
+        type="selection"
+        width="55">
+    </el-table-column>
+    <el-table-column
+        v-for="(item, index) in customTableTitles"
+        :key="`col-${index}`"
+        :fixed="item.fixed"
+        :label="item.label"
+        :min-width="`${item.minWidth}`"
+        :prop="item.prop"
+        :resizable="true"
+        :sort-orders="['ascending', 'descending']"
+        :sortable="item.sortable"
+        :width="`${item.width}`"
+    >
+      <template #header>
+        <span class="data-column__span">{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template #default="scope" :column="item">
+        <span v-if="item.prop === 'dataRange'">
+          <template v-if="scope.row.startTime && scope.row.endTime">
+            {{dateFormatByAppearance(scope.row.startTime)}}<span style="padding: 0 5px">-</span>{{dateFormatByAppearance(scope.row.endTime)}}
+          </template>
+        </span>
+        <span v-else-if="item.prop === 'type'">
+            {{scope.row.reportTemp.name}}
+        </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"
+        :width="operationWidth"
+        fixed="right">
+      <template #header>
+        <div class="table-operation-title">{{$t('overall.option')}}</div>
+      </template>
+      <template #default="scope">
+        <div class="table-operation-items" v-if="scope.row.state === 1">
+          <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])">
+                      <loading :loading="loadingPreviewId === scope.row.id"></loading>
+                      <svg class="icon2" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
+                        <use xlink:href="#cn-icon-refresh"></use>
+                      </svg>
+                    </div>-->
+        </div>
+      </template>
+    </el-table-column>
+  </el-table>
+  <div class="table-operation-all">
+    <el-checkbox v-model="checkboxAll" @change="selectAll(tableData)"></el-checkbox>
+    <div class="table-operation-all-span">
+      <span>{{ $t('overall.all') }}</span>
+      <div class="table-operation-back-down" :class="{'table-operation-all-checkbox': batchDow, 'table-operation-all-loading': loading}" @click="tableOperation(['delete', this.checkboxIds])">
+        <loading :loading="loading"></loading>
+        <span>{{$t('report.batchDeletion')}}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import table from '@/mixins/table'
+import Loading from '@/components/common/Loading'
+export default {
+  name: 'builtinReportTable',
+  mixins: [table],
+  components: {
+    Loading
+  },
+  data () {
+    return {
+      tableTitle: [ // 原始table列
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true
+        }, {
+          label: this.$t('config.user.name'),
+          prop: 'name',
+          show: true,
+          sortable: 'custom'
+        }, {
+          label: this.$t('report.timeLimit'),
+          prop: 'timeLimit',
+          show: true
+        }, {
+          label: this.$t('report.timePlan'),
+          prop: 'timePlan',
+          show: true,
+          minWidth: 110
+        }, {
+          label: this.$t('report.operationUserName'),
+          prop: 'operationUserName',
+          show: true
+        }, {
+          label: this.$t('report.resultCount'),
+          prop: 'resultCount',
+          show: true,
+          width: 130
+        }, {
+          label: this.$t('report.lastModified'),
+          prop: 'LastModified',
+          show: true,
+          width: 130,
+          sortable: 'custom'
+        }, {
+          label: this.$t('report.lastExecutionTime'),
+          prop: 'lastExecutionTime',
+          show: true,
+          width: 130,
+          sortable: 'custom'
+        }
+      ],
+      checkboxAll: false,
+      checkboxIds: '',
+      batchDow: false,
+      builtinId: '',
+      indeterminate: false,
+      loading: false,
+      loadingTableId: '',
+      loadingPreviewId: '',
+      percentage: 80
+    }
+  },
+  methods: {
+    getJobStatus (report) {
+      if (report.state === 1 && report.upload === 1) {
+        return this.$t('overall.completed')
+      } else {
+        return this.$t('overall.inProgress')
+      }
+    },
+    selectionChange (objs) {
+      this.$emit('selectionChange', objs)
+      this.checkboxIds = objs.map(item => { return item.id }).join(',')
+      this.checkboxAll = objs.length > 0 || objs.length === this.tableData.length
+      this.batchDow = objs.length > 0
+    },
+    selectAll (objs) {
+      if (objs) {
+        objs.forEach(item => {
+          this.$refs.dataTable.toggleAllSelection(item)
+        })
+      } else {
+        this.$refs.dataTable.clearSelection()
+      }
+    }
+  }
+}
+</script>

src/router/index.js

@@ -34,6 +34,10 @@ const routes = [
         path: '/report/builtIn',
         component: () => import('@/views/report/builtinReport')
       },
+      {
+        path: '/report/test',
+        component: () => import('@/views/report/reportTest')
+      },
       {
         path: '/operationLog',
         component: () => import('@/views/settings/OperationLog')

src/views/charts/charts/ChartRelationShip.vue

@@ -228,47 +228,6 @@ export default {
           _this.queryEntityDetail(_this.relationShipDomainUrl, params, queryParams)
         }
       })
-      /*this.myChart.on('mouseover', function (params) {
-        this.tableName = params.data.name
-        _this.timer = setTimeout(() => {
-          _this.timers = setTimeout(() => {
-            if (dom.offsetHeight > (params.event.event.offsetY + div.offsetHeight)) {
-              div.style.top = params.event.event.offsetY + 'px'
-              div.style.left = params.event.event.offsetX + 'px'
-            } else {
-              div.style.top = params.event.event.offsetY - div.offsetHeight + 'px'
-              div.style.left = params.event.event.offsetX + 'px'
-            }
-            _this.showList = true
-          }, 300)
-          if (params.data.type === 'ip') {
-            queryParams = {
-              ip: params.data.name,
-              startTime: getSecond(_this.timeFilter.startTime),
-              endTime: getSecond(_this.timeFilter.endTime)
-            }
-            _this.queryEntityDetail(_this.relationShipIpUrl, params, queryParams)
-          } else if (params.data.type === 'app_name') {
-            queryParams = {
-              appName: params.data.name,
-              startTime: getSecond(_this.timeFilter.startTime),
-              endTime: getSecond(_this.timeFilter.endTime)
-            }
-            _this.queryEntityDetail(_this.relationShipAppUrl, params, queryParams)
-          } else if (params.data.type === 'domain') {
-            queryParams = {
-              domain: params.data.name,
-              startTime: getSecond(_this.timeFilter.startTime),
-              endTime: getSecond(_this.timeFilter.endTime)
-            }
-            _this.queryEntityDetail(_this.relationShipDomainUrl, params, queryParams)
-          }
-        }, 500)
-      })
-      this.myChart.on('mouseout', function (params) {
-        clearTimeout(_this.timer)
-        clearTimeout(_this.timers)
-      })*/
       this.chartOption.series[0].data = data
       this.chartOption.series[0].links = links
       this.myChart.setOption(this.chartOption)

src/views/report/reportTest.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="cn-builtin">
+    <div class="cn-builtin-left">
+      <div class="cn-builtin-left-title">
+        {{$t('report.category')}}
+      </div>
+      <div class="cn-builtin-left-menu" :class="{'cn-active': !builtinId}" @click="builtinTabs(null)">
+        {{$t('dns.all')}}
+      </div>
+      <div class="cn-builtin-left-menu" :class="{'cn-active': builtinId === item.id}" v-for="item in builtinReportLeftMenu" :key="item.id" @click="builtinTabs(item.id)">
+        {{item.name}}
+      </div>
+    </div>
+    <div class="cn-builtin-right">
+      <cn-data-list
+          ref="dataList"
+          :tableId="tableId"
+          v-model:custom-table-title="tools.customTableTitle"
+          :api="url"
+          :from="fromRoute.builtinReport"
+          :layout="['search']"
+          @search="search"
+      >
+        <template #top-tool-right>
+          <button
+              id="account-add"
+              class="top-tool-btn"
+              type="button"
+              @click="add"
+          >
+            <i class="cn-icon-add cn-icon"/>
+          </button>
+        </template>
+        <template #default>
+          <builtin-report-table
+              ref="dataTable"
+              v-loading="tools.loading"
+              :api="url"
+              :custom-table-title="tools.customTableTitle"
+              :height="mainTableHeight"
+              :table-data="tableData"
+              @download="download"
+              @delete="del"
+              @edit="edit"
+              @preview="preview"
+              @orderBy="tableDataSort"
+              @reload="getTableData"
+              @selectionChange="selectionChange"
+          />
+        </template>
+        <template #pagination>
+          <pagination ref="pagination" :page-obj="pageObj" :tableData="tableData" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
+        </template>
+      </cn-data-list>
+      <el-drawer
+          v-model="rightBox.show"
+          direction="rtl"
+          :with-header="false"
+          :size="700"
+          destroy-on-close>
+        <builtin-report-box
+            :object="object"
+            :check-week-list-data="checkWeekListData"
+            :check-months-list-data="checkMonthsListData"
+            @close="closeRightBox"
+        />
+      </el-drawer>
+    </div>
+  </div>
+</template>
+
+<script>
+import { get } from '@/utils/http'
+import builtinReportTable from '@/components/table/report/reportTestTable'
+import cnDataList from '@/components/table/CnDataList'
+import dataListMixin from '@/mixins/data-list'
+import { api } from '@/utils/api'
+import builtinReportBox from '@/components/rightBox/report/reportTestBox'
+
+export default {
+  name: 'Report',
+  data () {
+    return {
+      builtinReportLeftMenu: [], // 左侧列表菜单数据
+      builtinColor: false,
+      builtinId: '',
+      url: api.reportJob,
+      blankObject: { // 空白对象
+        id: '',
+        name: '',
+        ctime: '',
+        remark: '',
+        uniq: '',
+        startTime: '',
+        endTime: ''
+      },
+      checkWeekListData: [
+        this.$t('report.sunday'),
+        this.$t('report.onMonday'),
+        this.$t('report.tuesday'),
+        this.$t('report.wednesday'),
+        this.$t('report.thursday'),
+        this.$t('report.friday'),
+        this.$t('report.saturday')
+      ],
+      checkMonthsListData: [
+        this.$t('report.january'),
+        this.$t('report.february'),
+        this.$t('report.march'),
+        this.$t('report.april'),
+        this.$t('report.may'),
+        this.$t('report.june'),
+        this.$t('report.july'),
+        this.$t('report.august'),
+        this.$t('report.september'),
+        this.$t('report.october'),
+        this.$t('report.november'),
+        this.$t('report.december')
+      ],
+      tableId: 'builtinReportTable'
+    }
+  },
+  mixins: [dataListMixin],
+  components: {
+    cnDataList,
+    builtinReportTable,
+    builtinReportBox
+  },
+  methods: {
+    queryGetTempData () {
+      get(api.reportTemp).then(res => {
+        if (res.code === 200) {
+          this.builtinReportLeftMenu = res.data.list
+        }
+      })
+    },
+    builtinTabs (id) {
+      this.getTableData({ tempId: id })
+      this.builtinId = id
+    }
+  },
+  mounted () {
+    this.queryGetTempData()
+  }
+}
+</script>