|
@@ -9,10 +9,32 @@
|
|
|
<label>交付已延期</label>
|
|
|
<div class="number">1</div>
|
|
|
</div>
|
|
|
+ <div class="data-item" />
|
|
|
+ <div class="data-item" />
|
|
|
+ <div class="data-item" />
|
|
|
+ <div class="data-item" />
|
|
|
+ <div class="data-item" />
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="statistics-chart">
|
|
|
+ <div v-if="title !=='缺陷'" class="statistics-chart">
|
|
|
<h2>未上线{{ title }}状态分布</h2>
|
|
|
+ <div class="chart-contain">
|
|
|
+ <normal-echart v-if="echartsOption" :chart-id="type+title" :option="echartsOption" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="title ==='缺陷'" class="statistics-chart">
|
|
|
+ <div class="two-title">
|
|
|
+ <h2>我提报的-未完成缺陷状态分布</h2>
|
|
|
+ <h2>提给我的-未完成缺陷状态分布</h2>
|
|
|
+ </div>
|
|
|
+ <div class="two-chart-contain">
|
|
|
+ <div class="chart-contain">
|
|
|
+ <normal-echart v-if="echartsOption" :chart-id="type+title+'1'" :option="echartsOption" />
|
|
|
+ </div>
|
|
|
+ <div class="chart-contain">
|
|
|
+ <normal-echart v-if="echartsOption" :chart-id="type+title+'2'" :option="echartsOption2" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</transition>
|
|
@@ -26,10 +48,12 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import normalEchart from '@/components/chart/normalEchart'
|
|
|
export default {
|
|
|
name: 'StatisticsSectionVue',
|
|
|
+ components: { normalEchart },
|
|
|
props: {
|
|
|
- searchForm: {
|
|
|
+ searchForm: { // 搜索项的信息
|
|
|
type: Object,
|
|
|
default: () => {
|
|
|
return {
|
|
@@ -39,7 +63,7 @@ export default {
|
|
|
},
|
|
|
required: true
|
|
|
},
|
|
|
- type: {
|
|
|
+ type: { // 个人还是团队
|
|
|
type: String,
|
|
|
default: 'person',
|
|
|
required: false
|
|
@@ -48,11 +72,34 @@ export default {
|
|
|
type: String,
|
|
|
default: '需求',
|
|
|
required: false
|
|
|
+ },
|
|
|
+ requestObj: { // 请求的接口
|
|
|
+ type: Object,
|
|
|
+ default: () => null,
|
|
|
+ required: false
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- show: true
|
|
|
+ show: true,
|
|
|
+ echartsOption: null,
|
|
|
+ echartsOption2: null,
|
|
|
+ tips: {
|
|
|
+ '需求': [
|
|
|
+ '交付日期为今天,且状态仍未变更为“已上线”的需求数量。',
|
|
|
+ '已过交付日期,状态仍未变更为“已上线”的需求数量。',
|
|
|
+ '交付日期在本周内的需求数量。',
|
|
|
+ '交付日期在本周,且状态仍未变更为“已上线”的需求数量。',
|
|
|
+ '交付日期在下周的需求数量。'
|
|
|
+ ],
|
|
|
+ '任务': [
|
|
|
+ '交付日期为今天,且状态仍未变更为“已上线”的任务数量。',
|
|
|
+ '已过交付日期,状态仍未变更为“已上线”的任务数量。',
|
|
|
+ '交付日期在本周内的任务数量。',
|
|
|
+ '交付日期在本周,且状态仍未变更为“已上线”的任务数量。',
|
|
|
+ '交付日期在下周任务数量。'
|
|
|
+ ]
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
@@ -61,11 +108,24 @@ export default {
|
|
|
|
|
|
},
|
|
|
deep: true
|
|
|
- },
|
|
|
- type: {
|
|
|
- handler(newV) {
|
|
|
-
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initData() {
|
|
|
+ if (this.requestObj) {
|
|
|
+ const { requestData, requestChart } = this.requestObj
|
|
|
+ this.getData(requestData)
|
|
|
+ this.getChart(requestChart)
|
|
|
}
|
|
|
+ },
|
|
|
+ async getData(requestUrl) {
|
|
|
+ const res = await requestUrl()
|
|
|
+ },
|
|
|
+ async getChart(requestUrl) {
|
|
|
+ const res = await requestUrl()
|
|
|
+ },
|
|
|
+ changeData() {
|
|
|
+ this.$emit('change', this.title)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -93,7 +153,7 @@ export default {
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
height: 474px;
|
|
|
- padding: 35px;
|
|
|
+ padding: 27px 35px;
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(2,50%);
|
|
|
h2 {
|
|
@@ -130,6 +190,23 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.statistics-chart {
|
|
|
+ .two-title {
|
|
|
+ width: 100%;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2,50%);
|
|
|
+ }
|
|
|
+ .two-chart-contain {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2,50%);
|
|
|
+ }
|
|
|
+ .chart-contain {
|
|
|
+ width: 100%;
|
|
|
+ height: 350px;
|
|
|
+ }
|
|
|
+}
|
|
|
.drawer-statistics:after {
|
|
|
content: '';
|
|
|
width: 100%;
|