|
@@ -1,145 +1,175 @@
|
|
|
<template
|
|
|
>
|
|
|
<el-card header="">
|
|
|
- <div slot="header" class="clearfix">
|
|
|
- <searchHeader
|
|
|
- v-if="mdate.length>0"
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <searchHeader
|
|
|
+ v-if="mdate.length > 0"
|
|
|
:dates="mdate"
|
|
|
:title="'业务数据'"
|
|
|
- :isShowQuert='false'
|
|
|
+ :isShowQuert="false"
|
|
|
@changeValue="changeValue"
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
<statistic class="statistic" :cols="0">
|
|
|
- <statistic-item v-for="(item, key) in items" :key="key" :class="{active: active === key}" @click="active = key">
|
|
|
+ <statistic-item
|
|
|
+ v-for="(item, key) in items"
|
|
|
+ :key="key"
|
|
|
+ :class="{ active: active === key }"
|
|
|
+ @click="active = key"
|
|
|
+ >
|
|
|
<span>
|
|
|
- {{item.title}}
|
|
|
- <el-tooltip v-if="item.desc" :content="item.desc" :open-delay=".3" placement="top">
|
|
|
- <i style="margin-left: 5px;cursor: pointer;" class="el-icon-warning-outline"/>
|
|
|
+ {{ item.title }}
|
|
|
+ <el-tooltip
|
|
|
+ v-if="item.desc"
|
|
|
+ :content="item.desc"
|
|
|
+ :open-delay="0.3"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ style="margin-left: 5px; cursor: pointer"
|
|
|
+ class="el-icon-warning-outline"
|
|
|
+ />
|
|
|
</el-tooltip>
|
|
|
</span>
|
|
|
- <span>
|
|
|
- <count-to :endVal="item.percent" :decimals="2"/>%
|
|
|
- </span>
|
|
|
+ <span> <count-to :endVal="item.percent" :decimals="2" />% </span>
|
|
|
</statistic-item>
|
|
|
</statistic>
|
|
|
<!-- :data-zoom="dataZoom" -->
|
|
|
<ve-line
|
|
|
- style="width: 100%;"
|
|
|
+ style="width: 100%"
|
|
|
height="350px"
|
|
|
:data="chartData"
|
|
|
:data-empty="dataEmpty"
|
|
|
-
|
|
|
:extend="chartExtend"
|
|
|
- :legend='legend'
|
|
|
+ :legend="legend"
|
|
|
></ve-line>
|
|
|
</el-card>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import 'v-charts/lib/style.css'
|
|
|
-import 'echarts/lib/component/dataZoom'
|
|
|
-import countTo from 'vue-count-to'
|
|
|
+import "v-charts/lib/style.css";
|
|
|
+import "echarts/lib/component/dataZoom";
|
|
|
+import countTo from "vue-count-to";
|
|
|
import veLine from "v-charts/lib/line.common";
|
|
|
import searchHeader from "./modals/searchHeader";
|
|
|
import { getTimes } from "@/utils";
|
|
|
import { getIndex } from "../api";
|
|
|
-import { descs,chioseNum } from "../constant";
|
|
|
-import {
|
|
|
- getNowDateAndSunday,
|
|
|
- getNowDateAndMonday,
|
|
|
-} from "@/utils/date";
|
|
|
+import { descs, chioseNum } from "../constant";
|
|
|
+import { getNowDateAndSunday, getNowDateAndMonday } from "@/utils/date";
|
|
|
export default {
|
|
|
- props: ['data',"search"],
|
|
|
+ props: ["data", "search"],
|
|
|
components: {
|
|
|
-
|
|
|
- 'count-to': countTo,
|
|
|
- "ve-line": veLine,
|
|
|
- searchHeader
|
|
|
+ "count-to": countTo,
|
|
|
+ "ve-line": veLine,
|
|
|
+ searchHeader,
|
|
|
},
|
|
|
computed: {
|
|
|
- legend() {
|
|
|
+ legend() {
|
|
|
return {
|
|
|
left: "10px",
|
|
|
};
|
|
|
},
|
|
|
items() {
|
|
|
return {
|
|
|
- HOMEWORK_CREATE_RATE: this.data['HOMEWORK_CREATE_RATE'] || {},
|
|
|
- HOMEWORK_SUBMIT_RATE: this.data['HOMEWORK_SUBMIT_RATE'] || {},
|
|
|
- HOMEWORK_COMMENT_RATE: this.data['HOMEWORK_COMMENT_RATE'] || {},
|
|
|
- }
|
|
|
+ HOMEWORK_CREATE_RATE: this.data["HOMEWORK_CREATE_RATE"] || {},
|
|
|
+ HOMEWORK_SUBMIT_RATE: this.data["HOMEWORK_SUBMIT_RATE"] || {},
|
|
|
+ HOMEWORK_COMMENT_RATE: this.data["HOMEWORK_COMMENT_RATE"] || {},
|
|
|
+ };
|
|
|
},
|
|
|
chartExtend() {
|
|
|
return {
|
|
|
+ series: {
|
|
|
+ smooth: false,
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ //纵轴标尺固定
|
|
|
+ type: "value",
|
|
|
+ scale: true,
|
|
|
+ min: 0,
|
|
|
+ max:100,
|
|
|
+ axisLabel:{
|
|
|
+ formatter:'{value}%'
|
|
|
+ }
|
|
|
+ },
|
|
|
tooltip: {
|
|
|
axisPointer: {
|
|
|
- type: 'shadow',
|
|
|
+ type: "shadow",
|
|
|
shadowStyle: {
|
|
|
- color: 'rgba(150,150,150,0.2)'
|
|
|
+ color: "rgba(150,150,150,0.2)",
|
|
|
},
|
|
|
},
|
|
|
- formatter: item => {
|
|
|
- return [item[0].axisValueLabel, ...item.map(d => `<br/>${d.marker}${d.seriesName}: ${d.value} %`)].join('')
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
+ formatter: (item) => {
|
|
|
+ return [
|
|
|
+ item[0].axisValueLabel,
|
|
|
+ ...item.map(
|
|
|
+ (d) => `<br/>${d.marker}${d.seriesName}: ${d.value} %`
|
|
|
+ ),
|
|
|
+ ].join("");
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
},
|
|
|
dataZoom() {
|
|
|
return [
|
|
|
{
|
|
|
- grid:{
|
|
|
- left:'0%'
|
|
|
- },
|
|
|
- type: 'slider',
|
|
|
+ grid: {
|
|
|
+ left: "0%",
|
|
|
+ },
|
|
|
+ type: "slider",
|
|
|
start: 40,
|
|
|
- end: 100
|
|
|
- }
|
|
|
- ]
|
|
|
+ end: 100,
|
|
|
+ },
|
|
|
+ ];
|
|
|
},
|
|
|
chartData() {
|
|
|
- const values = Object.values(this.items)
|
|
|
- const months = {}
|
|
|
+ const values = Object.values(this.items);
|
|
|
+ const months = {};
|
|
|
for (const item of values) {
|
|
|
- for (const row of (item.indexMonthData || [])) {
|
|
|
- const key = this.$helpers.dayjs(row.month).format('YYYY-MM-DD')
|
|
|
+ for (const row of item.indexMonthData || []) {
|
|
|
+ const key = this.$helpers.dayjs(row.month).format("YYYY-MM-DD");
|
|
|
if (!months[key]) {
|
|
|
months[key] = {
|
|
|
- '日期': key+'/'+getNowDateAndSunday(key),
|
|
|
- }
|
|
|
+ 日期: key + "/" + getNowDateAndSunday(key),
|
|
|
+ };
|
|
|
}
|
|
|
- months[key][item.title] = row.percent
|
|
|
+ months[key][item.title] = row.percent;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
return {
|
|
|
- columns: ['日期', ...values.map(item => {
|
|
|
- return item.title
|
|
|
- })],
|
|
|
- rows: Object.values(months)
|
|
|
- }
|
|
|
+ columns: [
|
|
|
+ "日期",
|
|
|
+ ...values.map((item) => {
|
|
|
+ return item.title;
|
|
|
+ }),
|
|
|
+ ],
|
|
|
+ rows: Object.values(months),
|
|
|
+ };
|
|
|
},
|
|
|
dataEmpty() {
|
|
|
- return !this.chartData.rows.length
|
|
|
+ return !this.chartData.rows.length;
|
|
|
},
|
|
|
},
|
|
|
- data () {
|
|
|
+ data() {
|
|
|
return {
|
|
|
- active: 'ACTIVATION_RATE',
|
|
|
- mdate: [],
|
|
|
- loading:false
|
|
|
- }
|
|
|
+ active: "ACTIVATION_RATE",
|
|
|
+ mdate: [],
|
|
|
+ loading: false,
|
|
|
+ };
|
|
|
},
|
|
|
- mounted(){
|
|
|
- let nowTiem = this.$helpers.dayjs(new Date()).format('YYYY-MM-DD')
|
|
|
- let startTime = this.$helpers.dayjs(getNowDateAndMonday(nowTiem)).subtract(56,'day').format('YYYY-MM-DD')
|
|
|
- let endTime = getNowDateAndSunday(nowTiem)
|
|
|
- this.mdate = [startTime,endTime];
|
|
|
+ mounted() {
|
|
|
+ let nowTiem = this.$helpers.dayjs(new Date()).format("YYYY-MM-DD");
|
|
|
+ let startTime = this.$helpers
|
|
|
+ .dayjs(getNowDateAndMonday(nowTiem))
|
|
|
+ .subtract(56, "day")
|
|
|
+ .format("YYYY-MM-DD");
|
|
|
+ let endTime = getNowDateAndSunday(nowTiem);
|
|
|
+ this.mdate = [startTime, endTime];
|
|
|
this.FetchDetail();
|
|
|
-
|
|
|
},
|
|
|
- methods:{
|
|
|
- changeValue(date) {
|
|
|
+ methods: {
|
|
|
+ changeValue(date) {
|
|
|
// 请求更改数据
|
|
|
this.mdate = date;
|
|
|
// this.isDayOrMoth(date)
|
|
@@ -153,11 +183,12 @@ export default {
|
|
|
const res = await getIndex({
|
|
|
...rest,
|
|
|
...getTimes(this.mdate, ["startDate", "endDate"]),
|
|
|
+ dataTypes:
|
|
|
+ "HOMEWORK_CREATE_RATE,HOMEWORK_SUBMIT_RATE,HOMEWORK_COMMENT_RATE",
|
|
|
});
|
|
|
for (const item of res.data) {
|
|
|
// 再循环一遍
|
|
|
for (const key in this.items) {
|
|
|
-
|
|
|
if (item.dataType == key) {
|
|
|
data[item.dataType] = {
|
|
|
...item,
|
|
@@ -166,27 +197,26 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
} catch (error) {
|
|
|
console.log(error);
|
|
|
}
|
|
|
- this.loading = false
|
|
|
+ this.loading = false;
|
|
|
this.dataInfo = data;
|
|
|
this.$emit("resetDate", data);
|
|
|
},
|
|
|
- }
|
|
|
-}
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
- // .statistic{
|
|
|
- // /deep/ .statistic-content{
|
|
|
- // cursor: pointer;
|
|
|
- // &.active > span{
|
|
|
- // color: #14928a !important;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- .chioseBox {
|
|
|
+// .statistic{
|
|
|
+// /deep/ .statistic-content{
|
|
|
+// cursor: pointer;
|
|
|
+// &.active > span{
|
|
|
+// color: #14928a !important;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+.chioseBox {
|
|
|
position: absolute;
|
|
|
right: 20px;
|
|
|
z-index: 1000;
|