|
|
@@ -0,0 +1,267 @@
|
|
|
+<template>
|
|
|
+ <div class="defect-container">
|
|
|
+ <div class="defect-main">
|
|
|
+ <el-form :model="defectForm" class="demo-form-inline">
|
|
|
+ <el-form-item label="时间：">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="stratAndEnd"
|
|
|
+ type="daterange"
|
|
|
+ align="right"
|
|
|
+ unlink-panels
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ size="small"
|
|
|
+ value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
+ :default-time="['00:00:00','23:59:59']"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ @change="changDate"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="团队：">
|
|
|
+ <el-select v-model="defectForm.team" placeholder="请选择" size="small">
|
|
|
+ <el-option
|
|
|
+ v-for="item in teamsOptions"
|
|
|
+ :key="item.code"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.code"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="模块：">
|
|
|
+ <el-cascader
|
|
|
+ v-model="defectForm.moduleIds"
|
|
|
+ size="small"
|
|
|
+ clearable
|
|
|
+ collapse-tags
|
|
|
+ :props="{ multiple: true }"
|
|
|
+ :options="moduleList"
|
|
|
+ placeholder="请选择"
|
|
|
+ @click.native="bugDataGet"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <section class="charts-main">
|
|
|
+ <el-tabs v-model="activeName" @tab-click="tabChange">
|
|
|
+ <el-tab-pane name="first">
|
|
|
+ <span slot="label" class="tab-item">新增缺陷</span>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane name="second">
|
|
|
+ <span slot="label" class="tab-item">累计修复缺陷</span>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ <div class="chart-item">
|
|
|
+ <h3>分布图</h3>
|
|
|
+ <el-row type="flex" align="middle">
|
|
|
+ <el-col :span="4" :offset="1">
|
|
|
+ <el-select v-model="defectStatus" placeholder="缺陷状态" size="small">
|
|
|
+ <el-option
|
|
|
+ v-for="item in defectStatusList"
|
|
|
+ :key="item.code"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.code"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4" :offset="13">柱状图</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row type="flex" align="middle">
|
|
|
+ <el-col :span="22" :offset="1">
|
|
|
+ <div class="chart-contain">
|
|
|
+ <normal-echart :chart-id="'chartFirst'" :option="echartsOption1" />
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="chart-item">
|
|
|
+ <h3>平均修复时长</h3>
|
|
|
+ <el-row type="flex" align="middle">
|
|
|
+ <el-col v-for="(item, index) in repairTimeList" :key="'time'+index" :span="4" :offset="1">
|
|
|
+ <div class="repair-item">
|
|
|
+ <span>{{ item.label }}</span>
|
|
|
+ <div>{{ item.time }}</div>
|
|
|
+ <span>环比：{{ item.circle }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row type="flex" align="middle">
|
|
|
+ <el-col :span="4" :offset="18">折线图</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row type="flex" align="middle">
|
|
|
+ <el-col :span="22" :offset="1">
|
|
|
+ <div class="chart-contain">
|
|
|
+ <normal-echart :chart-id="'chartSecond'" :option="echartsOption2" />
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import moment from 'moment'
|
|
|
+import { settingQueryBizModuleList } from '@/api/defectManage'
|
|
|
+import normalEchart from '@/components/chart/normalEchart'
|
|
|
+export default {
|
|
|
+ components: { normalEchart },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pickerOptions: {
|
|
|
+ shortcuts: [{
|
|
|
+ text: '本周',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date()
|
|
|
+ start.setTime(moment().startOf('week').valueOf() + 3600 * 1000 * 24)
|
|
|
+ picker.$emit('pick', [start, end])
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: '本月',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date()
|
|
|
+ start.setTime(moment().startOf('month').valueOf())
|
|
|
+ picker.$emit('pick', [start, end])
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ text: '本年',
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date()
|
|
|
+ start.setTime(moment().startOf('year').valueOf())
|
|
|
+ picker.$emit('pick', [start, end])
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ echartsOption1: {
|
|
|
+ color: ['#3398DB'],
|
|
|
+ tooltip: { trigger: 'axis', axisPointer: { type: 'line' }}, // 默认为直线，可选为：'line' | 'shadow'
|
|
|
+ grid: { left: '0', right: '10%', top: '3%', bottom: '3%', containLabel: true },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ data: ['待修复', '修复中', '待测试', '测试中', '已完成', 'Reopen'],
|
|
|
+ axisTick: { alignWithLabel: true }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis: [{ type: 'value' }],
|
|
|
+ series: [{ name: '时长', type: 'bar', barWidth: '30%', data: [10, 52, 200, 334, 390, 330] }]
|
|
|
+ },
|
|
|
+ echartsOption2: {
|
|
|
+ color: ['#3398DB', '#F56C6C'],
|
|
|
+ tooltip: { trigger: 'axis', axisPointer: { type: 'line' }},
|
|
|
+ grid: { left: '0', right: '10%', top: '3%', bottom: '3%', containLabel: true },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: '邮件营销',
|
|
|
+ type: 'line',
|
|
|
+ stack: '总量',
|
|
|
+ data: [120, 132, 101, 134, 90, 230, 210]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '联盟广告',
|
|
|
+ type: 'line',
|
|
|
+ stack: '总量',
|
|
|
+ data: [220, 182, 191, 234, 290, 330, 310]
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ defectForm: {}, // 筛选表单
|
|
|
+ stratAndEnd: [], // 开始结束日期
|
|
|
+ teamsOptions: [{ code: 1, label: '团队' }],
|
|
|
+ modulesOptions: [{ code: 1, label: '模块' }],
|
|
|
+ moduleList: [], // 模块列表
|
|
|
+ activeName: 'first',
|
|
|
+ defectStatus: null, // 缺陷状态
|
|
|
+ defectStatusList: [{ code: 1, label: '缺陷状态' }],
|
|
|
+ repairTimeList: [
|
|
|
+ { label: '全部', time: '12.4', circle: '12.1%' },
|
|
|
+ { label: 'P0', time: '12.4', circle: '12.1%' },
|
|
|
+ { label: 'P1', time: '12.4', circle: '12.1%' },
|
|
|
+ { label: 'P2', time: '12.4', circle: '12.1%' },
|
|
|
+ { label: 'P3', time: '12.4', circle: '12.1%' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async bugDataGet() { // 所属模块
|
|
|
+ const res = await settingQueryBizModuleList(Number(localStorage.getItem('bizId')))
|
|
|
+ this.moduleList = this.handlerModules(res.data)
|
|
|
+ },
|
|
|
+ handlerModules(arr) {
|
|
|
+ return arr.map(item => ({
|
|
|
+ ...item,
|
|
|
+ value: item.id,
|
|
|
+ label: item.moduleName,
|
|
|
+ children: item.childModules.length ? this.handlerModules(item.childModules) : null
|
|
|
+ }))
|
|
|
+ },
|
|
|
+ changDate() {
|
|
|
+ console.log(this.stratAndEnd)
|
|
|
+ },
|
|
|
+ tabChange() {
|
|
|
+ console.log(this.activeName)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.defect-container {
|
|
|
+ width: 100%;
|
|
|
+ height:100%;
|
|
|
+ background:#F2F3F6;
|
|
|
+ display: inline-block;
|
|
|
+ .defect-main {
|
|
|
+ padding: 20px;
|
|
|
+ height:100%;
|
|
|
+ width:98%;
|
|
|
+ background:#ffffff;
|
|
|
+ margin: 1%;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ .charts-main {
|
|
|
+ border: 1px solid #F2F3F6;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ .chart-item {
|
|
|
+ padding: 0 20px;
|
|
|
+ .repair-item {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: bold;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ color: #909399;
|
|
|
+ margin-bottom: 40px;
|
|
|
+ * {
|
|
|
+ margin: 5px 0;
|
|
|
+ }
|
|
|
+ div {
|
|
|
+ color: #303133;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .chart-contain {
|
|
|
+ height: 400px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.tab-item {
|
|
|
+ padding: 0 20px;
|
|
|
+}
|
|
|
+/deep/.el-tabs__item {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+.el-cascader {
|
|
|
+ width: auto;
|
|
|
+}
|
|
|
+</style>
|
PrinceLee