数据大盘：0.0.1

src/api/dataBig.js

@@ -0,0 +1,29 @@
+import request from "@/utils/request";
+
+console.log(3, request,request.baseURL);
+const commonUrl = "http://10.179.162.122:10086/api";
+
+export function getGlobalInterface(data) {
+  return request({
+    url: "http://10.179.162.122:10086/render/menu",
+    method: "get",
+    data
+  });
+}
+
+export function postForm(path, data) {
+  return request({
+    url: commonUrl + path,
+    method: "post",
+    data
+  });
+}
+
+export function testPost() {
+  return request({
+    url:
+      "http://127.0.0.1:4523/mock/368525/dataMarket/quality/getOnlineProcessData",
+    method: "post",
+    data: {}
+  });
+}

src/utils/request.js

@@ -1,84 +1,85 @@
-import axios from 'axios'
+import axios from "axios";
 // import store from '@/store'
 // import { getToken } from '@/utils/auth'
-import { loginUrl } from '@/apiConfig/requestIP.js'
-import { Encrypt } from '@/utils/crypto-js.js'
-import { message } from '@/utils/mesDebounce'
-import router from '@/router/index.js'
-import store from '@/store/index.js'
+import { loginUrl } from "@/apiConfig/requestIP.js";
+import { Encrypt } from "@/utils/crypto-js.js";
+import { message } from "@/utils/mesDebounce";
+import router from "@/router/index.js";
+import store from "@/store/index.js";
 
 // create an axios instance
 const service = axios.create({
-  baseURL: '/apis', // url = base url + request url
+  baseURL: "/apis", // url = base url + request url
   timeout: 5000, // request timeout
   withCredentials: true
-})
+});
 
 service.interceptors.request.use(
   config => {
-    config.headers['secret'] = Encrypt()
+    config.headers["secret"] = Encrypt();
     // config.retry = 2// 如果请求超时，重试次数
     // config.retryInterval = 1000 // 重试间隔
-    return config
+    console.log(config, 22);
+    return config;
   },
   error => {
-    return Promise.reject(error)
+    return Promise.reject(error);
   }
-)
+);
 service.interceptors.response.use(
   response => {
-    const res = response.data
-    if (typeof res.code !== 'undefined' && res.code !== 200 && res.code !== 0) {
+    const res = response.data;
+    if (typeof res.code !== "undefined" && res.code !== 200 && res.code !== 0) {
       message({
-        message: res.msg || 'Error',
-        type: 'error',
+        message: res.msg || "Error",
+        type: "error",
         duration: 5 * 1000
-      })
-    } else if (typeof res.retCode !== 'undefined' && res.retCode !== 0) {
+      });
+    } else if (typeof res.retCode !== "undefined" && res.retCode !== 0) {
       message({
-        message: res.retMsg || 'Error',
-        type: 'error',
+        message: res.retMsg || "Error",
+        type: "error",
         duration: 5 * 1000
-      })
+      });
     }
-    return res
+    return res;
   },
   error => {
     if (error && error.response) {
       switch (error.response.status) {
         case 400:
-          error.message = '错误请求'
-          break
+          error.message = "错误请求";
+          break;
         case 401:
-          error.message = '未授权，请重新登录'
-          break
+          error.message = "未授权，请重新登录";
+          break;
         case 404:
-          error.message = '请求错误,未找到该资源'
-          break
+          error.message = "请求错误,未找到该资源";
+          break;
         case 405:
-          error.message = '请求方法未允许'
-          break
+          error.message = "请求方法未允许";
+          break;
         default:
-          error.message = '服务出现异常，请稍后再试或联系管理员'
+          error.message = "服务出现异常，请稍后再试或联系管理员";
       }
       if (error.response.status !== 403) {
         message({
           message: error.message,
-          type: 'warning',
+          type: "warning",
           duration: 5 * 1000
-        })
+        });
       }
       if (error.response.status === 401) {
-        location.href = loginUrl
+        location.href = loginUrl;
       } else if (error.response.status === 403) {
-        store.dispatch('global/setBizId', -1)
-        store.dispatch('global/setBizName', '')
-        router.push({ name: 'notAccess' })
+        store.dispatch("global/setBizId", -1);
+        store.dispatch("global/setBizName", "");
+        router.push({ name: "notAccess" });
       }
     }
-    return Promise.reject(error)
+    return Promise.reject(error);
   }
-)
+);
 // function axiosRetryInterceptor(res) {
 //   const config = res.config
 //   // 无网络状态或者请求超时
@@ -104,4 +105,4 @@ service.interceptors.response.use(
 //   })
 // }
 
-export default service
+export default service;

src/views/dataBigManage/components/drawerAll.vue

@@ -0,0 +1,411 @@
+<template>
+  <el-drawer v-if="drawer_" :title="Statistics.title" :visible.sync="drawer_" :direction="direction" :modal="false" class="drawer-box" size="100%" :before-close="handleClose">
+    <div v-if="Statistics.title === '任务分布图数据'" class="qz-drawer-grade">按任务等级分布</div>
+    <div v-if="Statistics.title === '分布图数据'" class="qz-drawer-grade-tow">按缺陷等级分布</div>
+    <div>
+      <div v-if="Statistics.title !== '模块分布数据' && Statistics.title !== '需求方向分布图数据' && Statistics.title !== '责任人分布数据' && Statistics.title !== `模块分布图数据` && show === true " :class="[Statistics.towTimeLine ? 'qz-drawer-padding' : 'qz-drawer-padding-s', 'qz-drawer-header']">
+        <div id="index" class="qz-drawer-scll">
+          <timeline :data="list" :num="defaultKey" :bgmargin="bgMargin" @update="getvalue" />
+        </div>
+        <div v-if="Statistics.towTimeLine" id="index1" class="qz-drawer-scll">
+          <timeline :data="Statistics.towTimeLine" :num="defaultKey2" :bgmargin="bgMargin" @update="getvalueTow" />
+        </div>
+      </div>
+      <div v-if="Statistics.title === '需求分布图数据' || Statistics.title === '任务分布图数据'" class="qz-drawer-H"><span>{{ status }}</span>为<span>{{ type }}</span>的{{ Statistics.toType }}</div>
+      <div v-if="Statistics.title === '状态停留分布图数据'" class="qz-drawer-H">在<span>{{ type }}</span>状态停留时长为<span>{{ typeTow }}</span>的{{ Statistics.toType }}</div>
+      <div v-if="Statistics.title === '模块分布数据'" class="qz-drawer-H qz-margin-H"> 模块<span>{{ Statistics.name }}</span>的缺陷</div>
+      <div v-if="Statistics.title === `${Statistics.qz_holiday}的修复时长区间数据`" class="qz-drawer-H qz-margin-H">{{ Statistics.qz_holiday }}修复时间区间为<span>{{ type }}</span>的<span>{{ typeTow }}</span>级缺陷</div>
+      <div v-if="Statistics.title === `状态累积流量图数据`" class="qz-drawer-H qz-margin-H"><span>{{ type }}</span>流入到<span>{{ typeTow }}</span>的{{ Statistics.toType }}</div>
+      <div v-if="Statistics.title === `需求方向分布图数据` || Statistics.title === '所属需求方向分布图数据'" class="qz-drawer-H qz-margin-H">需求方向为<span>{{ type }}</span>的{{ Statistics.toType }}</div>
+      <div v-if="Statistics.title === `责任人分布数据`" class="qz-drawer-H qz-margin-H">责任人<span>{{ type }}</span>的缺陷</div>
+      <div v-if="Statistics.title === `趋势图数据`" class="qz-drawer-H qz-margin-H"><span>{{ type }}</span>新增的缺陷</div>
+      <div v-if="Statistics.title === `模块分布图数据`" class="qz-drawer-H qz-margin-H">模块为<span>{{ type }}</span>的任务</div>
+      <div v-if="Statistics.title === '新增趋势图数据' && Statistics.toType === '任务' || Statistics.title === '上线趋势图数据' && Statistics.toType === '任务'" class="qz-drawer-H qz-margin-H"><span>{{ type }}</span>{{ Statistics.title.substring(0, Statistics.title.length - 5 ) }}的任务</div>
+      <div v-if="Statistics.toType === '需求' && Statistics.title === '新增趋势图数据' || Statistics.title === '上线趋势图数据' && Statistics.toType === '需求' || Statistics.title === 'PRD评审趋势图数据' || Statistics.title === '技术准入趋势图数据'" class="qz-drawer-H qz-margin-H"><span>{{ type }}</span>{{ Statistics.title.substring(0, Statistics.title.length - 5 ) }}的需求</div>
+      <qzTable
+        :data="tableData"
+        :title="Statistics.title"
+        :type="Statistics.title === '需求分布图数据' || Statistics.title === '任务分布图数据' || Statistics.title === '分布图数据' ? status : Statistics.toType"
+        :oftype="type"
+        :mintitle="Statistics.title === '周期统计数据' || Statistics.title === '人力统计数据' ? min_title : ''"
+      />
+    </div>
+    <div class="qz-footer-laout">
+      <el-pagination
+        :current-page.sync="currentPage"
+        :page-size="10"
+        :pager-count="5"
+        layout="total, prev, pager, next, jumper"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+
+  </el-drawer>
+</template>
+
+<script>
+import { getRequirement, requirementDownload } from '@/api/requirement.js'
+import { taskList, taskDownload } from '@/api/taskIndex'
+import { bugList, bugDownload } from '@/api/defectManage'
+import { getReportList } from '@/api/reportTemplate'
+import timeline from '@/components/timeline'
+import qzTable from './tables'
+export default {
+  components: { timeline, qzTable },
+  props: {
+    data: { type: Object, required: true },
+    drawer: { type: Boolean, default: false },
+    status: { type: String, default: '' }
+  },
+  data() {
+    return {
+      list: [],
+      show: true,
+      responseDownload: '',
+      min_title: '', // 周期统计表头标题
+      bgMargin: false,
+      dataList: [],
+      Statistics: {}, // title
+      direction: 'rtl',
+      defaultKey2: 0,
+      defaultKey: 0,
+      bugList: [],
+      type: '',
+      typeTow: '',
+      towVal: '',
+      oneVal: '',
+      currentPage: 1,
+      total: 0,
+      reportData: {},
+      paging: {
+        curIndex: 1, // 分页
+        pageSize: 10 // 分页
+      },
+      tableData: []
+    }
+  },
+  computed: {
+    drawer_: {
+      get() { return this.drawer },
+      set(v) { this.$emit('clone', v) }
+    }
+  },
+  watch: {
+    data: {
+      handler(newV, oldV) {
+        if (newV) {
+          this.Statistics = newV
+          this.list = newV.xaxis
+          this.type = newV.name
+          this.bgMargin = false
+          this.currentPage = 1
+          this.paging = { curIndex: 1, pageSize: 10 }
+          this.setDrawerDate()
+        }
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    // this.$nextTick(() => {
+    //   const dateId = document.getElementById('index')
+    //   dateId.scrollLeft = Number(this.defaultKey) * 100 - 60
+    // })
+  },
+  methods: {
+    setDrawerDate() {
+      this.show = true
+      if (this.Statistics.title === '需求分布图数据' || this.Statistics.title === '任务分布图数据' || this.Statistics.title === '分布图数据' || this.Statistics.title === '所属需求方向分布图数据' || this.Statistics.title === '趋势图数据') {
+        this.defaultKey = this.Statistics.dataIndex
+        this.dataList = this.Statistics.yaxis[0].idList[this.defaultKey]
+        this.getTableData(this.dataList)
+      } else if (this.Statistics.title === '责任人分布数据') {
+        this.dataList = this.Statistics[this.Statistics.key].idList
+        this.getTableData(this.dataList)
+      } else if (this.Statistics.title === '缺陷统计数据' || this.Statistics.title === '去除节假日的修复时长数据' || this.Statistics.title === '周期统计数据' || this.Statistics.title === '人力统计数据' || this.Statistics.title === '平均修复时长数据') {
+        const key = this.Statistics.title === '周期统计数据' || this.Statistics.title === '人力统计数据' ? this.Statistics.xaxis.indexOf(this.Statistics.label.substr(2)) : this.Statistics.xaxis.indexOf(this.Statistics.label)
+        this.Statistics.title === '周期统计数据' || this.Statistics.title === '人力统计数据' ? this.min_title = this.Statistics.label.substr(2) : ''
+        this.defaultKey = key === -1 ? 0 : key
+        this.dataList = this.Statistics.idList
+        this.getTableData(this.dataList)
+      } else if (this.Statistics.title === '状态累积流量图数据') {
+        this.bgMargin = true
+        this.typeTow = this.Statistics.seriesName
+        this.defaultKey = this.Statistics.dataIndex
+        this.defaultKey2 = Number(this.Statistics.seriesIndex)
+        const statusArr = this.Statistics.statusList[this.Statistics.seriesName]
+        this.dataList = statusArr[this.defaultKey].idList
+        this.getTableData(this.dataList)
+      } else if (this.Statistics.title === '状态停留分布图数据') {
+        this.bgMargin = true
+        this.typeTow = this.Statistics.seriesName // 停留时长
+        this.defaultKey = this.Statistics.dataIndex
+        this.defaultKey2 = Number(this.Statistics.seriesIndex)
+        this.dataList = this.Statistics.statusList.yaxis[this.defaultKey2].idList[this.defaultKey]
+        this.getTableData(this.dataList)
+      } else if (this.Statistics.title === '报告统计数据') {
+        const key = this.Statistics.xaxis.indexOf(this.Statistics.label)
+        this.defaultKey = key === -1 ? 0 : key
+        this.Statistics.label === '总数' ? this.getIdList({ deliverTestReportIdList: this.Statistics.subCountList[0].idList, dailyReportIdList: this.Statistics.subCountList[1].idList, releaseReportIdList: this.Statistics.subCountList[2].idList }) : ''
+        key === 1 ? this.getIdList({ deliverTestReportIdList: this.Statistics.subCountList[0].idList }) : '' // 提测
+        key === 2 ? this.getIdList({ dailyReportIdList: this.Statistics.subCountList[0].idList }) : '' // 日报
+        key === 3 ? this.getIdList({ releaseReportIdList: this.Statistics.subCountList[0].idList }) : '' // 准出
+      } else if (this.Statistics.title === '模块分布数据') {
+        this.getTableData(this.Statistics.newData.idList)
+      } else if (this.Statistics.title === '需求方向分布图数据' || this.Statistics.title === `模块分布图数据`) {
+        this.mapChildren(this.Statistics)
+      } else if (this.Statistics.title === `${this.Statistics.qz_holiday}的修复时长区间数据`) {
+        this.bgMargin = true
+        this.typeTow = this.Statistics.seriesName
+        this.defaultKey = this.Statistics.dataIndex
+        this.defaultKey2 = Number(this.Statistics.seriesIndex)
+        this.dataList = this.Statistics.series[this.defaultKey2].idList[this.defaultKey]
+        this.getTableData(this.dataList)
+      } else if (this.Statistics.title === '新增趋势图数据' || this.Statistics.title === '上线趋势图数据' || this.Statistics.title === 'PRD评审趋势图数据' || this.Statistics.title === '技术准入趋势图数据') {
+        this.defaultKey = this.Statistics.dataIndex
+        this.defaultKey2 = this.Statistics.seriesIndex
+        this.dataList = this.Statistics.yaxis[0].idList[this.defaultKey]
+        this.getTableData(this.dataList)
+      } else if (this.Statistics.title === '累计新增' || this.Statistics.title === 'PRD评审通过' || this.Statistics.title === '技术准入' || this.Statistics.title === '累计上线' || this.Statistics.title === '累计hold' || this.Statistics.title === '累计修复' || this.Statistics.title === '累计reopen') {
+        this.show = false
+        this.dataList = this.Statistics.idList
+        this.getTableData(this.dataList)
+      }
+      this.$nextTick(() => { // 时间轴定位
+        const dateId = document.getElementById('index')
+        dateId.scrollLeft = Number(this.defaultKey) * 109 - 60
+        if (this.Statistics.towTimeLine) {
+          const dateIds = document.getElementById('index1')
+          dateIds.scrollLeft = Number(this.defaultKey2) * 100 - 60
+        }
+      })
+    },
+    getvalue(e) { // 时间轴one
+      this.oneVal = e
+      this.type = e.name
+      this.defaultKey = e.value
+      this.getTimeLine()
+    },
+    getvalueTow(e) { // 时间轴tow
+      this.towVal = e
+      this.typeTow = e.name
+      this.defaultKey2 = e.value
+      this.getTimeLine()
+    },
+    getTimeLine() { // 数据筛选
+      this.dataList = []
+      this.currentPage = 1
+      this.paging = { curIndex: 1, pageSize: 10 }
+      if (this.Statistics.title === '需求分布图数据' || this.Statistics.title === '任务分布图数据' || this.Statistics.title === '分布图数据' || this.Statistics.title === '新增趋势图数据' || this.Statistics.title === '上线趋势图数据' || this.Statistics.title === 'PRD评审趋势图数据' || this.Statistics.title === '技术准入趋势图数据' || this.Statistics.title === '所属需求方向分布图数据' || this.Statistics.title === '趋势图数据') {
+        this.dataList = this.Statistics.yaxis[0].idList[this.oneVal.value]
+      } else if (this.Statistics.title === '缺陷统计数据' || this.Statistics.title === '平均修复时长数据') {
+        this.dataList = this.Statistics.yaxis[this.oneVal.value].idList
+      } else if (this.Statistics.title === '周期统计数据' || this.Statistics.title === '人力统计数据') {
+        this.min_title = this.type
+        this.dataList = this.Statistics.yaxis[this.defaultKey].idList
+      } else if (this.Statistics.title === '状态累积流量图数据') {
+        const statusArr = this.Statistics.statusList[this.typeTow]
+        this.dataList = statusArr[this.defaultKey].idList
+      } else if (this.Statistics.title === '状态停留分布图数据') {
+        this.dataList = this.Statistics.statusList.yaxis[this.defaultKey2].idList[this.defaultKey]
+      } else if (this.Statistics.title === '报告统计数据') {
+        this.defaultKey === 0 ? this.getIdList({ deliverTestReportIdList: this.Statistics.reportData[1].subCountList[0].idList, dailyReportIdList: this.Statistics.reportData[2].subCountList[0].idList, releaseReportIdList: this.Statistics.reportData[3].subCountList[0].idList }) : ''
+        this.defaultKey === 1 ? this.getIdList({ deliverTestReportIdList: this.Statistics.reportData[1].subCountList[0].idList }) : '' // 提测
+        this.defaultKey === 2 ? this.getIdList({ dailyReportIdList: this.Statistics.reportData[2].subCountList[0].idList }) : '' // 日报
+        this.defaultKey === 3 ? this.getIdList({ releaseReportIdList: this.Statistics.reportData[3].subCountList[0].idList }) : '' // 准出
+        return
+      } else if (this.Statistics.title === '去除节假日的修复时长数据') {
+        this.dataList = this.Statistics[this.defaultKey].idList
+      } else if (this.Statistics.title === `${this.Statistics.qz_holiday}的修复时长区间数据`) {
+        this.dataList = this.Statistics.series[this.defaultKey2].idList[this.defaultKey]
+      }
+      if (this.dataList[0]) { // 判断idList有没有数据
+        this.getTableData(this.dataList)
+      } else { // 没有数据初始化table
+        this.tableData = []
+        this.total = 0
+      }
+    },
+    async getTableData(taskIdList) { // 获取需求、任务、缺陷表格数据
+      if (!taskIdList || taskIdList.length <= 0) {
+        this.tableData = []
+        this.total = 0
+        return
+      }
+      const data = { ids: taskIdList, ...this.paging }
+      if (this.Statistics.title === '周期统计数据') { data.statisticsType = 1 }
+      if (this.Statistics.title === '人力统计数据') { data.statisticsType = 2 }
+      if (this.Statistics.title === '需求方向分布图数据' || this.Statistics.title === '所属需求方向分布图数据' || this.Statistics.title === '需求分布图数据' || this.Statistics.title === '状态停留分布图数据' && this.Statistics.toType === '需求' || this.Statistics.title === '状态累积流量图数据' && this.Statistics.toType === '需求' || this.Statistics.title === '周期统计数据' && this.Statistics.toType === '需求' || this.Statistics.title === '人力统计数据' && this.Statistics.toType === '需求' || this.Statistics.title === '新增趋势图数据' && this.Statistics.toType === '需求' || this.Statistics.title === '上线趋势图数据' && this.Statistics.toType === '需求' || this.Statistics.title === 'PRD评审趋势图数据' || this.Statistics.title === '技术准入趋势图数据' || this.Statistics.title === '累计新增' && this.Statistics.toType === '需求' || this.Statistics.title === 'PRD评审通过' && this.Statistics.toType === '需求' || this.Statistics.title === '技术准入' && this.Statistics.toType === '需求' || this.Statistics.title === '累计上线' && this.Statistics.toType === '需求' || this.Statistics.title === '累计hold' && this.Statistics.toType === '需求') {
+        const res = await getRequirement(data)
+        if (res.code === 200) {
+          this.tableData = res.data.list
+          this.total = res.data.total
+        }
+      } else if (this.Statistics.title === '任务分布图数据' || this.Statistics.title === '状态停留分布图数据' && this.Statistics.toType === '任务' || this.Statistics.title === '状态累积流量图数据' && this.Statistics.toType === '任务' || this.Statistics.title === '新增趋势图数据' && this.Statistics.toType === '任务' || this.Statistics.title === '上线趋势图数据' && this.Statistics.toType === '任务' || this.Statistics.title === '人力统计数据' && this.Statistics.toType === '任务' || this.Statistics.title === '周期统计数据' && this.Statistics.toType === '任务' || this.Statistics.title === `模块分布图数据` || this.Statistics.title === '累计新增' && this.Statistics.toType === '任务' || this.Statistics.title === '技术准入' && this.Statistics.toType === '任务' || this.Statistics.title === '累计上线' && this.Statistics.toType === '任务' || this.Statistics.title === '累计hold' && this.Statistics.toType === '任务') {
+        const res = await taskList(data)
+        if (res.code === 200) {
+          this.tableData = res.data
+          this.total = res.total
+        }
+      } else if (this.Statistics.title === '缺陷统计数据' || this.Statistics.title === '分布图数据' || this.Statistics.title === `责任人分布数据` || this.Statistics.title === '去除节假日的修复时长数据' || this.Statistics.title === '模块分布数据' || this.Statistics.title === `${this.Statistics.qz_holiday}的修复时长区间数据` || this.Statistics.title === '平均修复时长数据' || this.Statistics.title === '趋势图数据' || this.Statistics.title === '累计修复' && this.Statistics.toType === '缺陷' || this.Statistics.title === '累计reopen' && this.Statistics.toType === '缺陷' || this.Statistics.title === '累计新增' && this.Statistics.toType === '缺陷') {
+        const res = await bugList(data)
+        if (res.code === 200) {
+          this.tableData = res.data
+          this.total = res.total
+        }
+      }
+    },
+    async getIdList(value) {
+      this.reportData = value
+      const data = { ...value, ...this.paging }
+      const res = await getReportList(data)
+      if (res.code === 200) {
+        this.tableData = res.data
+        this.total = res.total
+      }
+    },
+    handleSizeChange(val) {
+      this.paging.pageSize = val
+      this.Statistics.title === '报告统计数据' ? this.getIdList(this.reportData) : this.getTableData(this.dataList)
+    },
+    handleCurrentChange(val) {
+      this.paging.curIndex = val
+      this.Statistics.title === '报告统计数据' ? this.getIdList(this.reportData) : this.getTableData(this.dataList)
+    },
+    mapChildren(item) {
+      if (this.Statistics.name === '需求方向分布' || this.Statistics.name === '模块分布') {
+        this.dataList = []
+        item.children.map(i => {
+          this.dataList = this.dataList.concat(i.idList)
+        })
+        this.getTableData(this.dataList)
+        return
+      }
+      item.children.map(i => {
+        if (i.name === this.Statistics.name) {
+          this.dataList = i.idList
+          this.getTableData(this.dataList)
+        } else {
+          if (i.children) {
+            this.mapChildren(i)
+          }
+        }
+      })
+    },
+    async exportTable() {
+      const data = { ids: this.dataList }
+      if (this.Statistics.title === '需求方向分布图数据' || this.Statistics.title === '需求分布图数据' || this.Statistics.title === '状态停留分布图数据' && this.Statistics.toType === '需求' || this.Statistics.title === '状态累积流量图数据' && this.Statistics.toType === '需求' || this.Statistics.title === '周期统计数据' && this.Statistics.toType === '需求' || this.Statistics.title === '人力统计数据' && this.Statistics.toType === '需求' || this.Statistics.title === '新增趋势图数据' && this.Statistics.toType === '需求' || this.Statistics.title === '上线趋势图数据' && this.Statistics.toType === '需求' || this.Statistics.title === '所属需求方向分布图数据' || this.Statistics.title === 'PRD评审趋势图数据' || this.Statistics.title === '技术准入趋势图数据' || this.Statistics.title === '累计新增' && this.Statistics.toType === '需求' || this.Statistics.title === '技术准入' && this.Statistics.toType === '需求' || this.Statistics.title === '累计上线' && this.Statistics.toType === '需求' || this.Statistics.title === '累计hold' && this.Statistics.toType === '需求') {
+        this.responseDownload = await requirementDownload(data)
+      } else if (this.Statistics.title === '任务分布图数据' || this.Statistics.title === '状态停留分布图数据' && this.Statistics.toType === '任务' || this.Statistics.title === '状态累积流量图数据' && this.Statistics.toType === '任务' || this.Statistics.title === '新增趋势图数据' && this.Statistics.toType === '任务' || this.Statistics.title === '上线趋势图数据' && this.Statistics.toType === '任务' || this.Statistics.title === '人力统计数据' && this.Statistics.toType === '任务' || this.Statistics.title === '周期统计数据' && this.Statistics.toType === '任务' || this.Statistics.title === `模块分布图数据` || this.Statistics.title === '累计新增' && this.Statistics.toType === '任务' || this.Statistics.title === '技术准入' && this.Statistics.toType === '任务' || this.Statistics.title === '累计上线' && this.Statistics.toType === '任务' || this.Statistics.title === '累计hold' && this.Statistics.toType === '任务') {
+        this.responseDownload = await taskDownload(data)
+      } else if (this.Statistics.title === '缺陷统计数据' || this.Statistics.title === '分布图数据' || this.Statistics.title === `责任人分布数据` || this.Statistics.title === '去除节假日的修复时长数据' || this.Statistics.title === '模块分布数据' || this.Statistics.title === `${this.Statistics.qz_holiday}的修复时长区间数据` || this.Statistics.title === '平均修复时长数据' || this.Statistics.title === '趋势图数据' || this.Statistics.title === '累计修复' && this.Statistics.toType === '缺陷' || this.Statistics.title === '累计reopen' && this.Statistics.toType === '缺陷' || this.Statistics.title === '累计新增' && this.Statistics.toType === '缺陷') {
+        this.responseDownload = await bugDownload(data)
+      }
+      const aLink = document.createElement('a')
+      const blob = new Blob([this.responseDownload], { type: 'application/vnd.ms-excel' })
+      aLink.href = URL.createObjectURL(blob)
+      aLink.download = this.Statistics.title + '.xlsx'
+      aLink.style.display = 'none'
+      aLink.click()
+    },
+    handleClose(done) { // 关闭
+      this.$emit('clone')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.qz-drawer-header {
+  text-align: center;
+  background: #F7F7F7;
+  border-radius: 4px;
+  min-height: 120px;
+  margin: 20px 30px;
+  overflow: hidden;
+}
+.qz-drawer-padding {
+  padding: 20px 0;
+}
+.qz-drawer-padding-s {
+  padding: 1px 0;
+}
+.qz-drawer-scll {
+  overflow-x: scroll;
+}
+.qz-drawer-scll::-webkit-scrollbar { width: 0 !important; height: 0 !important }
+.qz-drawer-H {
+  font-size: 16px;
+  margin: 0 30px;
+  color: #444444;
+}
+.qz-drawer-H span {
+  color: #333333;
+  font-weight: 600;
+}
+.qz-message { color: #444; font-size: 14px;}
+.qz-drawer-grade {
+  @extend .qz-message;
+  position: absolute;
+  top: 28px;
+  left: 185px;
+}
+.qz-drawer-grade-tow {
+  @extend .qz-message;
+  position: absolute;
+  top: 28px;
+  left: 150px;
+}
+>>> :focus{outline:0;}
+>>>.el-table::before {
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 0px;
+}
+>>>.el-drawer__header {
+    color: #444;
+    font-size: 20px;
+    font-weight: 500;
+    margin-bottom: 0px;
+    padding: 20px 30px;
+    border-bottom: 1px solid #E2E2E2;
+}
+  .drawer-box {
+    box-shadow: 0 8px 10px -5px rgba(0,0,0,.2), 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12);
+  }
+ .el-drawer__wrapper {
+    width: 100%;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 50%;
+    overflow: hidden;
+    margin: 0;
+}
+>>>.el-drawer__container {
+    left: 0;
+    right: 0;
+    width: 50%;
+}
+>>>.el-table td, .el-table th {
+    padding: 5px 0;
+}
+.qz-margin-H {
+  margin: 20px 30px 10px;
+}
+.qz-footer-laout {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 30px;
+}
+</style>
+<style>
+.el-drawer__open .el-drawer.rtl {
+    -webkit-animation: none;
+    animation: none;
+}
+</style>

src/views/dataBigManage/components/tables/index.vue

@@ -0,0 +1,244 @@
+<template>
+  <div style="margin: 0 30px;">
+    <el-table v-if="title === '状态停留分布图数据' || title === '需求分布图数据' || title === '需求方向分布图数据' || title === '任务分布图数据' || title === '状态累积流量图数据' || title === '周期统计数据' || title === '人力统计数据' || title === '新增趋势图数据' || title === '上线趋势图数据' || title === 'PRD评审趋势图数据' || title === '技术准入趋势图数据' || title === '所属需求方向分布图数据' || title === `模块分布图数据` || title === '累计新增' && type === '需求' || title === 'PRD评审通过' && type === '需求' || title === '累计新增' && type === '任务' || title === '技术准入' && type === '需求' || title === '技术准入' && type === '任务' || title === '累计上线' && type === '需求' || title === '累计上线' && type === '任务' || title === '累计hold' && type === '需求' || title === '累计hold' && type === '任务'" :data="data" style="width: 100%;" :height="setTitleHeight()" :header-cell-style="{ 'color':'rgba(74,74,74,1)','font-size':'14px','font-weight':'500' }">
+      <el-table-column label="优先级" min-width="80" align="left">
+        <template slot-scope="scope" style="text-align: center;">
+          <span class="div_priority" :style="{background: priorityColors[scope.row.priority % priorityColors.length]}">{{ 'P'+scope.row.priority }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="type === '需求' || type === '需求状态' || type === '需求等级' || type === '需求类型' || title === '所属需求方向分布图数据' || title === '需求分布图数据' && type === '跟版客户端' || type === 'pm' || title === '状态累积流量图数据' && type === '需求' || title === '周期统计数据' && type === '需求' || title === '人力统计数据' && type === '需求' || title === '新增趋势图数据' && type === '需求' || title === '上线趋势图数据' && type === '需求' || title === 'PRD评审趋势图数据' || title === '技术准入趋势图数据' || title === '需求方向分布图数据' || title === 'PRD评审通过' && type === '需求' || title === '累计新增' && type === '需求' || title === '技术准入' && type === '需求' || title === '累计上线' && type === '需求' || title === '累计hold' && type === '需求'" label="需求名称" :min-width="title === '周期统计数据' || title === '人力统计数据' ? '120' : '360'" align="left" show-overflow-tooltip>
+        <template slot-scope="scope">
+          <div class="drawer-id">{{ scope.row.requirementDisplayId }}</div>
+          <div class="drawer-name" @click="jumper(scope.row, '需求')">{{ scope.row.name }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="type === '任务' || type === '任务状态' || type === '任务等级' || type === '开发负责人' || type === '测试负责人' || title === '任务分布图数据' && type === '跟版客户端' || type === '直接归属' || title === '状态累积流量图数据' && type === '任务' || title === '周期统计数据' && type === '任务' || title === '新增趋势图数据' && type === '任务' || title === '上线趋势图数据' && type === '任务' || title === '人力统计数据' && type === '任务' || title === `模块分布图数据` || title === '累计新增' && type === '任务' || title === '技术准入' && type === '任务' || title === '累计上线' && type === '任务' || title === '累计hold' && type === '任务'" label="任务名称" :min-width="title === '周期统计数据' || title === '人力统计数据' ? '120' : '360'" align="left" show-overflow-tooltip>
+        <template slot-scope="scope">
+          <div class="drawer-id">{{ scope.row.taskIdSting }}</div>
+          <div class="drawer-name" @click="jumper(scope.row, '任务')">{{ scope.row.name }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="title === '周期统计数据' && mintitle !== ''" :label="mintitle" min-width="150" align="center">
+        <template slot="header">
+          <span>{{ mintitle }}</span>
+          <el-tooltip placement="top" popper-class="cycleStatistic-tips">
+            <i class="el-icon-info" style="cursor: pointer;color:rgba(121,132,150,0.8);margin-left:5px;" />
+            <div slot="content" class="tooltip-content">
+              <div v-if="mintitle === '产品技术侧总周期'">'产品技术侧总周期定义：需求从BRD评审通过到交付的总周期。计算条件：仅计算需求计划里 BRD评审通过时间不为空，且需求状态已变更为“已排期”且排期不为空的需求。（没有BRD评审通过状态的业务线按需求创建时间计算）'</div>
+              <div v-if="mintitle === '产品侧总周期'">'产品侧总周期定义：需求从BRD评审通过到技术准入的总周期。计算条件：仅计算需求计划里BRD评审通过时间和技术准入时间均不为空的需求。（没有BRD评审通过状态的业务线按需求创建时间计算、没有技术准入状态的业务线按PRD评审通过时间计算）'</div>
+              <div v-if="mintitle === '技术侧总周期'">'技术侧总周期定义：需求从技术准入到交付的总周期。计算条件：仅计算需求计划里技术准入时间不为空，且需求状态已变更为“已排期”且需求排期不为空的需求。（没有技术准入状态的业务线按PRD评审通过时间计算）'</div>
+              <div v-if="mintitle === '研发交付周期'">'研发交付周期定义：{{ type }}排期里开发、联调、上线类型排期的总周期。计算条件：仅计算{{ type }}状态已变更为“已排期”且{{ type }}排期不为空的{{ type }}。'</div>
+              <div v-if="mintitle === '研发周期'">'研发周期定义：{{ type }}排期里开发、联调类型排期的总周期。计算条件：仅计算需求状态已变更为“已排期”且{{ type }}排期不为空的{{ type }}。计算规则：'</div>
+              <div v-if="mintitle === '测试周期'">'测试周期定义：{{ type }}排期里测试类型排期的总周期。计算条件：仅计算{{ type }}状态已变更为“已排期”且需求排期不为空的{{ type }}。'</div>
+              <div v-if="mintitle === '提测等待测试时长'">'提测等待测试时长定义：任务排期里提测排期结束日期距离测试排期开始日期的天数。计算条件：仅计算任务状态已变更为“已排期”且排期不为空，且提测、测试类型排期不为空的任务。'</div>
+            </div>
+          </el-tooltip>
+        </template>
+        <template slot-scope="scope">{{ getCountDataList(scope.row) }}</template>
+      </el-table-column>
+      <el-table-column v-if="title === '人力统计数据' && mintitle !== ''" :label="mintitle" min-width="150" align="center">
+        <template slot-scope="scope">
+          {{ getCountDataList(scope.row) }}
+        </template>
+      </el-table-column>
+      <el-table-column v-if="type === '开发负责人'" label="开发负责人" min-width="100" align="center">
+        <template slot-scope="scope">{{ scope.row.rdObject !== null? scope.row.rdObject.name: '' }}</template>
+      </el-table-column>
+      <el-table-column v-if="type === '测试负责人'" label="测试负责人" min-width="100" align="center">
+        <template slot-scope="scope">{{ scope.row.qaObject !== null?scope.row.qaObject.name: '' }}</template>
+      </el-table-column>
+      <el-table-column v-if="title === '需求分布图数据' && type === '跟版客户端'" label="跟版客户端" min-width="100" align="center">
+        {{ oftype }}
+      </el-table-column>
+      <el-table-column v-if="title === '任务分布图数据' && type === '跟版客户端'" label="跟版客户端" min-width="100" align="center">
+        {{ oftype }}
+      </el-table-column>
+      <el-table-column v-if="type === '直接归属'" label="直接归属" min-width="110" align="center" show-overflow-tooltip>
+        {{ oftype }}
+      </el-table-column>
+      <el-table-column v-if="type === 'pm'" label="PM" min-width="100" show-overflow-tooltip align="center">
+        <template v-if="scope.row.pmMemberInfoResponse" slot-scope="scope">
+          <span>{{ scope.row.pmMemberInfoResponse.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="type === '需求类型'" label="需求类型" min-width="100" show-overflow-tooltip align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.typeName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="type === '需求' || type === '需求状态' || type === '需求等级' || title === '所属需求方向分布图数据' || title === '状态累积流量图数据' && type === '需求' || title === '周期统计数据' && type === '需求' || title === '人力统计数据' && type === '需求' || title === '新增趋势图数据' && type === '需求' || title === '上线趋势图数据' && type === '需求' || title === 'PRD评审趋势图数据' || title === '技术准入趋势图数据' || title === '需求方向分布图数据' || title === 'PRD评审通过' && type === '需求' || title === '累计新增' && type === '需求' || title === '技术准入' && type === '需求' || title === '累计上线' && type === '需求' || title === '累计hold'" label="状态" prop="statusName" min-width="100" align="center" />
+      <el-table-column v-if="type === '任务' || type === '任务状态' || type === '任务等级' || title === '状态累积流量图数据' && type === '任务' || title === '周期统计数据' && type === '任务' || title === '人力统计数据' && type === '任务' || title === '新增趋势图数据' && type === '任务' || title === '上线趋势图数据' && type === '任务' || title === `模块分布图数据` || title === '累计新增' && type === '任务' || title === '技术准入' && type === '任务' || title === '累计上线' && type === '任务' || title === '累计hold' && type === '任务'" label="状态" prop="statusString" min-width="100" align="center" />
+    </el-table>
+
+    <el-table v-if="title === '去除节假日的修复时长区间数据' || title === '不去除节假日的修复时长区间数据'" :data="data" style="width: auto;" height="calc(100vh - 355px)" :header-cell-style="{ 'color':'rgba(74,74,74,1)','font-size':'14px','font-weight':'500' }">
+      <el-table-column label="缺陷等级" min-width="80" align="left">
+        <template slot-scope="scope" style="text-align: center;">
+          <span class="div_priority" :style="{background: priorityColors[scope.row.priority % priorityColors.length]}">{{ scope.row.priorityName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="bugName" label="缺陷名称" min-width="200" align="left" show-overflow-tooltip>
+        <template slot-scope="scope">
+          <div class="drawer-id">{{ 'BUG-' + scope.row.id }}</div>
+          <span class="drawer-name" @click.stop="jumper(scope.row, '缺陷')">{{ scope.row.bugName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="title === '不去除节假日的修复时长区间数据'" prop="devFixTime" label="缺陷修复时长" min-width="80" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.devFixTime/(1000 * 3600) | numFilter }}
+        </template>
+      </el-table-column>
+      <el-table-column v-if="title === '去除节假日的修复时长区间数据'" prop="fixTimePurgeNH" label="缺陷修复时长(去除节假日)" min-width="80" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.devFixTimePurgeNH/(1000 * 3600) | numFilter }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="bugStatusName" label="状态" min-width="100" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.bugStatusName }}
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-table v-if="title === '分布图数据' || title === '去除节假日的修复时长数据' || title === '模块分布数据' || title === '缺陷统计数据' || title === '责任人分布数据' || title === '平均修复时长数据' || title === '趋势图数据' || title === '累计修复' && type === '缺陷' || title === '累计reopen' && type === '缺陷' || title === '累计新增' && type === '缺陷'" :data="data" style="width: auto;" :height="setTitleHeight()" :header-cell-style="{ 'color':'rgba(74,74,74,1)','font-size':'14px','font-weight':'500' }">
+      <el-table-column label="缺陷等级" min-width="80" align="left">
+        <template slot-scope="scope" style="text-align: center;">
+          <span class="div_priority" :style="{background: priorityColors[scope.row.priority % priorityColors.length]}">{{ scope.row.priorityName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="bugName" label="缺陷名称" min-width="200" align="left" show-overflow-tooltip>
+        <template slot-scope="scope">
+          <div class="drawer-id">{{ 'BUG-' + scope.row.id }}</div>
+          <span class="drawer-name" @click.stop="jumper(scope.row, '缺陷')">{{ scope.row.bugName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column v-if="title === '模块分布数据' || title === '缺陷统计数据' || title === '责任人分布数据' || title === '平均修复时长数据'" prop="devFixTime" label="缺陷修复时长" min-width="110" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.devFixTime/(1000 * 3600) | numFilter }}
+        </template>
+      </el-table-column>
+      <el-table-column v-if="title === '模块分布数据' || title === '去除节假日的修复时长数据' || title === '责任人分布数据'" prop="fixTimePurgeNH" label="缺陷修复时长(去除节假日)" :min-width="title === '模块分布数据' || title === '责任人分布数据' ? '110': '80'" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.devFixTimePurgeNH/(1000 * 3600) | numFilter }}
+        </template>
+      </el-table-column>
+      <el-table-column v-if="type === '端类型' || type === '发现方式' || type === '发现阶段' || type === '缺陷类型'" :label="type" min-width="100" align="center">
+        {{ oftype }}
+      </el-table-column>
+      <el-table-column prop="bugStatusName" label="状态" min-width="100" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.bugStatusName }}
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-table v-if="title === '报告统计数据'" :data="data" style="width: auto;" height="calc(100vh - 296px)" :header-cell-style="{ 'color':'rgba(74,74,74,1)','font-size':'14px','font-weight':'500' }">
+      <el-table-column label="报告名称" min-width="200" show-overflow-tooltip>
+        <template slot-scope="scope">
+          <span v-if="scope.row.typeString === '日报'" class="drawer-name" @click.stop="jumper(scope.row, '日报')">{{ scope.row.reportName || '' }}</span>
+          <span v-if="scope.row.typeString === '准出'" class="drawer-name" @click.stop="jumper(scope.row, '准出')">{{ scope.row.reportName || '' }}</span>
+          <span v-if="scope.row.typeString === '提测报告'" class="drawer-name" @click.stop="jumper(scope.row, '提测')">{{ scope.row.reportName || '' }}</span>
+          <div v-if="scope.row.typeString === '准出' && scope.row.passStatus === 1" style="color: red;">不通过</div>
+          <div v-if="scope.row.typeString === '提测报告' && scope.row.returnReason" style="color: red;">打回报告：{{ scope.row.returnReason }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="statusString" label="状态" min-width="110">
+        <template slot-scope="scope">
+          {{ scope.row.statusString }}
+        </template>
+      </el-table-column>
+      <el-table-column label="报告人" min-width="110">
+        <template slot-scope="scope">
+          {{ scope.row.creatorObject.name || '' }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="typeString" label="类型" min-width="110" />
+    </el-table>
+  </div>
+</template>
+
+<script>
+import '@/styles/PublicStyle/index.scss'
+import { EncryptId } from '@/utils/crypto-js.js'
+export default {
+  filters: {
+    numFilter(value) {
+      let realVal = ''
+      if (!isNaN(value) && value !== '' && value !== 0) {
+        realVal = parseFloat(value).toFixed(1) + 'H' // 截取当前数据到小数点后两位
+      } else {
+        realVal = '--'
+      }
+      return realVal
+    }
+  },
+  props: {
+    data: { type: Array, default: null },
+    title: { type: String, required: true },
+    type: { type: String, default: null },
+    oftype: { type: String, default: null },
+    mintitle: { type: String, default: '' }
+  },
+  data() {
+    return {
+      priorityColors: ['#F56C6C', '#FF8952', '#F5E300', '#7ED321', '#61D3B8', '#69B3FF', '#BDBDBD']
+    }
+  },
+  methods: {
+    getCountDataList(list) {
+      let str = ''
+      if (list.countDataList) {
+        list.countDataList.map(item => {
+          if ('平均' + this.mintitle === item.label) {
+            str = item.countStr
+          }
+        })
+      }
+      return str + '天'
+    },
+    setTitleHeight() {
+      if (this.title === '状态停留分布图数据' || this.title === '状态累积流量图数据') {
+        return 'calc(100vh - 363px)'
+      } else if (this.title === '需求方向分布图数据' || this.title === `模块分布图数据`) {
+        return 'calc(100vh - 200px)'
+      } else if (this.title === '累计新增' || this.title === 'PRD评审通过' || this.title === '技术准入' || this.title === '累计上线' || this.title === '累计hold' || this.title === '累计修复' || this.title === '累计reopen') {
+        return 'calc(100vh - 134px)'
+      } else if (this.title === '模块分布数据') {
+        return 'calc(100vh - 175px)'
+      } else {
+        return 'calc(100vh - 318px)'
+      }
+    },
+    jumper(val, name) { // 需求、任务、缺陷跳转
+      const { bizId = null } = this.$store.state.global || {}
+      const bizId_id = EncryptId(`${bizId}_${val.id}`)
+      const newTab = this.$router.resolve({ name: name + '详情', query: { bizId_id: bizId_id }})
+      window.open(newTab.href, '_blank')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.div_priority {
+  color: #ffffff;
+  width:fit-content;
+  padding: 0 12px;
+  border-radius: 4px;
+  margin-left: 4px;
+}
+.drawer-name:hover {
+  color: #409eff;
+  cursor: pointer;
+}
+.drawer-id {
+  color: rgb(167, 174, 188);
+  font-size: 10px;
+}
+</style>
+<style>
+.cycleStatistic-tips {
+  width: 500px !important;
+  background:rgba(121,132,150,0.8) !important;
+  color: #FFF !important;
+}
+</style>

src/views/dataBigManage/index.vue

@@ -1,20 +1,33 @@
 <template>
   <div class="data-big-wrapper">
-    <div :class="['filter-wrapper',DetailedScreening && 'padding-bottom-10']">
-      <el-form :model="form_all" class="form-wrapper" inline label-position="right">
+    <div :class="['filter-wrapper', DetailedScreening && 'padding-bottom-10']">
+      <el-form
+        :model="form_all"
+        class="form-wrapper"
+        inline
+        label-position="right"
+      >
         <el-form-item label="部门">
           <el-cascader
             size="small"
             :options="sectorOptions"
             :props="{ checkStrictly: true }"
-            clearable></el-cascader>
+            clearable
+          ></el-cascader>
         </el-form-item>
         <el-form-item label="时间：">
           <div class="date-select">
-                <span v-for="item in dateSelect" :key="item.key" :class="[dateType===item.key?'date-active':'']"
-                      class="date-item" @click.stop="dateType=item.key;setDate(item.key)">
-                  {{ item.label }}
-                </span>
+            <span
+              v-for="item in dateSelect"
+              :key="item.key"
+              :class="[dateType === item.key ? 'date-active' : '']"
+              class="date-item"
+              @click.stop="
+                dateType = item.key;
+                setDate(item.key);
+              "
+              >{{ item.label }}</span
+            >
           </div>
           <el-date-picker
             v-model="stratAndEnd"
@@ -26,14 +39,13 @@
             end-placeholder="结束日期"
             size="small"
             value-format="yyyy.MM.dd"
-            :default-time="['00:00:00','23:59:59']"
+            :default-time="['00:00:00', '23:59:59']"
             @change="dateType = ''"
           />
         </el-form-item>
         <el-button type="text" @click="DetailedScreening = !DetailedScreening">
-          {{ !DetailedScreening ? '更多' : '收起' }}筛选
+          {{ !DetailedScreening ? "更多" : "收起" }}筛选
         </el-button>
-
       </el-form>
       <div v-show="DetailedScreening" class="stylus-more">
         <div>
@@ -43,29 +55,33 @@
                 size="small"
                 :options="teamOptions"
                 :props="{ checkStrictly: true }"
-                clearable></el-cascader>
+                clearable
+              ></el-cascader>
             </el-form-item>
           </el-form>
         </div>
         <div class="more-btn-wrapper">
-          <el-button type="primary" size="mini" @click="query_project(form_all)">筛 选</el-button>
+          <el-button type="primary" size="mini" @click="query_project(form_all)"
+            >筛 选
+          </el-button>
           <el-button size="mini" @click="query_Reset">重 置</el-button>
         </div>
       </div>
     </div>
     <div class="data-wrapper">
-      <dataTitle title="质量"/>
-      <dataTitle title="吞吐量"/>
-      <dataTitle title="效率"/>
+      <dataTitle title="质量" />
+      <dataTitle title="吞吐量" />
+      <dataTitle title="效率" />
     </div>
   </div>
 </template>
 
 <script>
-import moment from 'moment'
-import {projectList} from "@/api/projectIndex";
+import moment from "moment";
+import { projectList } from "@/api/projectIndex";
+import { testPost } from "@/api/dataBig";
 /*页面专有展示组件*/
-import dataTitle from './components/dataTitle';
+import dataTitle from "./components/dataTitle";
 
 export default {
   data() {
@@ -73,97 +89,117 @@ export default {
       // enum
       dateSelect: [
         {
-          key: 'week',
-          label: '本周'
-        }, {
-          key: 'month',
-          label: '本月'
-        }, {
-          key: 'year',
-          label: '本年'
+          key: "week",
+          label: "本周"
+        },
+        {
+          key: "month",
+          label: "本月"
+        },
+        {
+          key: "year",
+          label: "本年"
         }
       ],
       // 筛选
       form_all: {},
       DetailedScreening: false,
       stratAndEnd: [], // 开始结束日期
-      dateType: 'week', // 时间选择类型
+      dateType: "week", // 时间选择类型
       bugCountTimeType: 1, // 获取趋缺陷势图数据接口入参：1本周 2本月 3本年
-      timeTypeList: [ // 日期选择
-        {code: 1, label: '周'},
-        {code: 2, label: '月'},
-        {code: 3, label: '年'}
+      timeTypeList: [
+        // 日期选择
+        { code: 1, label: "周" },
+        { code: 2, label: "月" },
+        { code: 3, label: "年" }
       ],
       sectorOptions: [], // 部门数据
       teamOptions: [] // 团队数据
-    }
+    };
+  },
+  created() {
+    this.init();
   },
   methods: {
-    setDate(type) { // 日期筛选
-      let startDate = null
-      let endDate = null
+    setDate(type) {
+      // 日期筛选
+      let startDate = null;
+      let endDate = null;
       switch (type) {
-        case 'week':
-          startDate = moment().startOf('week').format('YYYY.MM.DD')
-          endDate = moment().endOf('week').format('YYYY.MM.DD')
-          this.bugCountTimeType = this.timeTypeList[0].code
-          break
-        case 'month':
-          startDate = moment().startOf('month').format('YYYY.MM.DD')
-          endDate = moment().endOf('month').format('YYYY.MM.DD')
-          this.bugCountTimeType = this.timeTypeList[1].code
-          break
-        case 'year':
-          startDate = moment().startOf('year').format('YYYY.MM.DD')
-          endDate = moment().endOf('year').format('YYYY.MM.DD')
-          this.bugCountTimeType = this.timeTypeList[2].code
-          break
+        case "week":
+          startDate = moment()
+            .startOf("week")
+            .format("YYYY.MM.DD");
+          endDate = moment()
+            .endOf("week")
+            .format("YYYY.MM.DD");
+          this.bugCountTimeType = this.timeTypeList[0].code;
+          break;
+        case "month":
+          startDate = moment()
+            .startOf("month")
+            .format("YYYY.MM.DD");
+          endDate = moment()
+            .endOf("month")
+            .format("YYYY.MM.DD");
+          this.bugCountTimeType = this.timeTypeList[1].code;
+          break;
+        case "year":
+          startDate = moment()
+            .startOf("year")
+            .format("YYYY.MM.DD");
+          endDate = moment()
+            .endOf("year")
+            .format("YYYY.MM.DD");
+          this.bugCountTimeType = this.timeTypeList[2].code;
+          break;
       }
-      this.stratAndEnd = [startDate, endDate]
-      this.onSubmit()
+      this.stratAndEnd = [startDate, endDate];
+      this.onSubmit();
     },
     query_project(e) {
       // 查询
       if (this.isToOne) {
-        this.curIndex = 1
-        this.currentPage = 1
+        this.curIndex = 1;
+        this.currentPage = 1;
       }
-      this.table_loading = true
-      this.query_object = {}
-      this.query_object = e
-      this.query_object.bizId = this.bizId
-      this.query_object.curIndex = this.curIndex
-      this.query_object.pageSize = this.pageSize
+      this.table_loading = true;
+      this.query_object = {};
+      this.query_object = e;
+      this.query_object.bizId = this.bizId;
+      this.query_object.curIndex = this.curIndex;
+      this.query_object.pageSize = this.pageSize;
       projectList(this.query_object).then(res => {
-        this.table_project = res.data
-        this.total = res.total
-        this.table_loading = false
-      })
-      this.isToOne = true
+        this.table_project = res.data;
+        this.total = res.total;
+        this.table_loading = false;
+      });
+      this.isToOne = true;
     },
     query_Reset() {
       // 重置
-      this.$set(this.form_all, 'priority', this.query_object.priority)
-      this.$set(this.form_all, 'name', this.query_object.name)
-      this.$set(this.form_all, 'projectOwner', this.query_object.projectOwner)
-      this.$set(this.form_all, 'bizType', '')
-      this.$set(this.form_all, 'creater', '')
+      this.$set(this.form_all, "priority", this.query_object.priority);
+      this.$set(this.form_all, "name", this.query_object.name);
+      this.$set(this.form_all, "projectOwner", this.query_object.projectOwner);
+      this.$set(this.form_all, "bizType", "");
+      this.$set(this.form_all, "creater", "");
       this.$message({
-        message: '已重置',
-        type: 'success',
+        message: "已重置",
+        type: "success",
         duration: 1000,
         offset: 150
-      })
-      this.query_project(this.form_all)
+      });
+      this.query_project(this.form_all);
     },
     init() {
+      testPost().then(res => {
+        console.log(res);
+      });
     },
-    onSubmit() {
-    }
-
+    onSubmit() {}
   },
-  components: {dataTitle}
-}
+  components: { dataTitle }
+};
 </script>
 <style lang="scss">
 .data-big-wrapper {
@@ -172,7 +208,7 @@ export default {
   .filter-wrapper {
     background-color: #ffffff;
     padding: 10px 13px 0;
-    box-shadow: 0px 0px 11px #EEF0F5;
+    box-shadow: 0px 0px 11px #eef0f5;
     border-radius: 0px 0px 6px 6px;
 
     &.padding-bottom-10 {
@@ -184,7 +220,7 @@ export default {
       padding-left: 16px;
 
       .el-form-item:nth-child(2) {
-        margin-left: 97px
+        margin-left: 97px;
       }
 
       > button {
@@ -204,22 +240,22 @@ export default {
         text-align: center;
         cursor: pointer;
         border-radius: 2px;
+        margin-right: 5px;
       }
 
       .date-active {
-        color: #FFFFFF;
-        background-color: #409EFF;
+        color: #ffffff;
+        background-color: #409eff;
       }
-
     }
 
     /*更多筛选*/
     .stylus-more {
       height: 98px;
-      background: #FCFCFC;
+      background: #fcfcfc;
       padding: 15px;
       margin-bottom: 15px;
-      border: 1px solid #DDDFE5;
+      border: 1px solid #dddfe5;
       position: relative;
 
       .more-btn-wrapper {
@@ -238,7 +274,7 @@ export default {
   .data-wrapper {
     padding: 0 30px;
     margin-top: 10px;
-    box-shadow: 0px 0px 11px #EEF0F5;
+    box-shadow: 0px 0px 11px #eef0f5;
     border-radius: 6px;
     background-color: #ffffff;
   }