|
@@ -1,243 +1,244 @@
|
|
-<template
|
|
|
|
->
|
|
|
|
- <el-card header="">
|
|
|
|
- <div slot="header" class="clearfix">
|
|
|
|
- <searchHeader
|
|
|
|
- v-if="mdate.length > 0"
|
|
|
|
- :dates="mdate"
|
|
|
|
- :title="'业务数据'"
|
|
|
|
- :isShowQuert="false"
|
|
|
|
- @changeValue="changeValue"
|
|
|
|
- />
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <div class="wall" style="height:68px;" v-if="JSON.stringify(items) == '{}'"></div>
|
|
|
|
- <statistic class="statistic" :cols="0">
|
|
|
|
- <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="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>
|
|
|
|
- </statistic-item>
|
|
|
|
- </statistic>
|
|
|
|
- <!-- :data-zoom="dataZoom" -->
|
|
|
|
- <ve-line
|
|
|
|
- style="width: 100%"
|
|
|
|
- height="350px"
|
|
|
|
- :data="chartData"
|
|
|
|
- :data-empty="dataEmpty"
|
|
|
|
- :extend="chartExtend"
|
|
|
|
- :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 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";
|
|
|
|
-export default {
|
|
|
|
- props: ["data", "search"],
|
|
|
|
- components: {
|
|
|
|
- "count-to": countTo,
|
|
|
|
- "ve-line": veLine,
|
|
|
|
- searchHeader,
|
|
|
|
- },
|
|
|
|
- computed: {
|
|
|
|
- legend() {
|
|
|
|
- return {
|
|
|
|
- left: "10px",
|
|
|
|
- };
|
|
|
|
- },
|
|
|
|
- items() {
|
|
|
|
- let obj = {}
|
|
|
|
- let arr = ["HOMEWORK_CREATE_RATE","HOMEWORK_SUBMIT_RATE","HOMEWORK_COMMENT_RATE"]
|
|
|
|
- arr.forEach(str=>{
|
|
|
|
- if(this.data[str]){
|
|
|
|
- obj[str]=this.data[str]
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- /**
|
|
|
|
- * {
|
|
|
|
- HOMEWORK_CREATE_RATE:this.data["HOMEWORK_CREATE_RATE"] || {},
|
|
|
|
- HOMEWORK_SUBMIT_RATE: this.data["HOMEWORK_SUBMIT_RATE"] || {},
|
|
|
|
- HOMEWORK_COMMENT_RATE: this.data["HOMEWORK_COMMENT_RATE"] || {},
|
|
|
|
- };
|
|
|
|
- */
|
|
|
|
- return obj
|
|
|
|
- },
|
|
|
|
- chartExtend() {
|
|
|
|
- return {
|
|
|
|
- series: {
|
|
|
|
- type: 'line',
|
|
|
|
- smooth: false,
|
|
|
|
- },
|
|
|
|
- yAxis: {
|
|
|
|
- //纵轴标尺固定
|
|
|
|
- minInterval: 1,
|
|
|
|
- type: "value",
|
|
|
|
- scale: true,
|
|
|
|
- min: 0,
|
|
|
|
- max: 100,
|
|
|
|
- axisLabel: {
|
|
|
|
- formatter: "{value}%",
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- tooltip: {
|
|
|
|
- axisPointer: {
|
|
|
|
- type: "shadow",
|
|
|
|
- shadowStyle: {
|
|
|
|
- color: "rgba(150,150,150,0.2)",
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- formatter: (item) => {
|
|
|
|
- return [
|
|
|
|
- item[0].axisValueLabel,
|
|
|
|
- ...item.map(
|
|
|
|
- (d) => `<br/>${d.marker}${d.seriesName}: ${d.value[1]} %`
|
|
|
|
- ),
|
|
|
|
- ].join("");
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- };
|
|
|
|
- },
|
|
|
|
- dataZoom() {
|
|
|
|
- return [
|
|
|
|
- {
|
|
|
|
- grid: {
|
|
|
|
- left: "0%",
|
|
|
|
- },
|
|
|
|
- type: "slider",
|
|
|
|
- start: 40,
|
|
|
|
- end: 100,
|
|
|
|
- },
|
|
|
|
- ];
|
|
|
|
- },
|
|
|
|
- chartData() {
|
|
|
|
- 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");
|
|
|
|
- if (!months[key]) {
|
|
|
|
- months[key] = {
|
|
|
|
- 日期: key + "/" + getNowDateAndSunday(key),
|
|
|
|
- };
|
|
|
|
- }
|
|
|
|
- months[key][item.title] = row.percent;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- return {
|
|
|
|
- columns: [
|
|
|
|
- "日期",
|
|
|
|
- ...values.map((item) => {
|
|
|
|
- return item.title;
|
|
|
|
- }),
|
|
|
|
- ],
|
|
|
|
- rows: Object.values(months),
|
|
|
|
- };
|
|
|
|
- },
|
|
|
|
- dataEmpty() {
|
|
|
|
- return !this.chartData.rows.length;
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- active: "ACTIVATION_RATE",
|
|
|
|
- mdate: [],
|
|
|
|
- loading: false,
|
|
|
|
- };
|
|
|
|
- },
|
|
|
|
- mounted() {
|
|
|
|
- this.init()
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- init() {
|
|
|
|
- let nowTiem = this.$helpers.dayjs(new Date()).format("YYYY-MM-DD");
|
|
|
|
- let startTime = this.$helpers
|
|
|
|
- .dayjs(getNowDateAndMonday(nowTiem))
|
|
|
|
- .subtract(49, "day")
|
|
|
|
- .format("YYYY-MM-DD");
|
|
|
|
- let endTime = getNowDateAndSunday(nowTiem);
|
|
|
|
- this.mdate = [startTime, endTime];
|
|
|
|
- this.FetchDetail();
|
|
|
|
- },
|
|
|
|
- changeValue(date) {
|
|
|
|
- // 请求更改数据
|
|
|
|
- this.mdate = date;
|
|
|
|
- // this.isDayOrMoth(date)
|
|
|
|
- this.FetchDetail();
|
|
|
|
- },
|
|
|
|
- async FetchDetail() {
|
|
|
|
- this.loading = true;
|
|
|
|
- let data = [];
|
|
|
|
- try {
|
|
|
|
- const { dates, ...rest } = this.search;
|
|
|
|
- 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,
|
|
|
|
- desc: descs[item.dataType],
|
|
|
|
- };
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- } catch (error) {
|
|
|
|
- console.log(error);
|
|
|
|
- }
|
|
|
|
- this.loading = false;
|
|
|
|
- // this.dataInfo = data;
|
|
|
|
- this.$emit("resetDate", data);
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
-};
|
|
|
|
-</script>
|
|
|
|
-<style lang="less" scoped>
|
|
|
|
-// .statistic{
|
|
|
|
-// ::v-deep .statistic-content{
|
|
|
|
-// cursor: pointer;
|
|
|
|
-// &.active > span{
|
|
|
|
-// color: var(--color-primary) !important;
|
|
|
|
-// }
|
|
|
|
-// }
|
|
|
|
-// }
|
|
|
|
-.chioseBox {
|
|
|
|
- position: absolute;
|
|
|
|
- right: 20px;
|
|
|
|
- z-index: 1000;
|
|
|
|
-}
|
|
|
|
-.wrap {
|
|
|
|
- position: relative;
|
|
|
|
-}
|
|
|
|
-</style>
|
|
|
|
|
|
+<template
|
|
|
|
+>
|
|
|
|
+ <el-card header="">
|
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
|
+ <searchHeader
|
|
|
|
+ v-if="mdate.length > 0"
|
|
|
|
+ :dates="mdate"
|
|
|
|
+ :title="'业务数据'"
|
|
|
|
+ :isShowQuert="false"
|
|
|
|
+ @changeValue="changeValue"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="wall" style="height:68px;" v-if="JSON.stringify(items) == '{}'"></div>
|
|
|
|
+ <statistic class="statistic" :cols="0">
|
|
|
|
+ <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="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>
|
|
|
|
+ </statistic-item>
|
|
|
|
+ </statistic>
|
|
|
|
+ <!-- :data-zoom="dataZoom" -->
|
|
|
|
+ <ve-line
|
|
|
|
+ style="width: 100%"
|
|
|
|
+ height="350px"
|
|
|
|
+ :data="chartData"
|
|
|
|
+ :data-empty="dataEmpty"
|
|
|
|
+ :extend="chartExtend"
|
|
|
|
+ :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 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";
|
|
|
|
+export default {
|
|
|
|
+ props: ["data", "search"],
|
|
|
|
+ components: {
|
|
|
|
+ "count-to": countTo,
|
|
|
|
+ "ve-line": veLine,
|
|
|
|
+ searchHeader,
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ legend() {
|
|
|
|
+ return {
|
|
|
|
+ left: "10px",
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ items() {
|
|
|
|
+ let obj = {}
|
|
|
|
+ let arr = ["HOMEWORK_CREATE_RATE","HOMEWORK_SUBMIT_RATE","HOMEWORK_COMMENT_RATE"]
|
|
|
|
+ arr.forEach(str=>{
|
|
|
|
+ if(this.data[str]){
|
|
|
|
+ obj[str]=this.data[str]
|
|
|
|
+ }else {
|
|
|
|
+ obj[str] = {}
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ /**
|
|
|
|
+ * {
|
|
|
|
+ HOMEWORK_CREATE_RATE:this.data["HOMEWORK_CREATE_RATE"] || {},
|
|
|
|
+ HOMEWORK_SUBMIT_RATE: this.data["HOMEWORK_SUBMIT_RATE"] || {},
|
|
|
|
+ HOMEWORK_COMMENT_RATE: this.data["HOMEWORK_COMMENT_RATE"] || {},
|
|
|
|
+ };
|
|
|
|
+ */
|
|
|
|
+ return obj
|
|
|
|
+ },
|
|
|
|
+ chartExtend() {
|
|
|
|
+ return {
|
|
|
|
+ series: {
|
|
|
|
+ type: 'line',
|
|
|
|
+ smooth: false,
|
|
|
|
+ },
|
|
|
|
+ yAxis: {
|
|
|
|
+ //纵轴标尺固定
|
|
|
|
+ minInterval: 1,
|
|
|
|
+ type: "value",
|
|
|
|
+ scale: true,
|
|
|
|
+ min: 0,
|
|
|
|
+ max: 100,
|
|
|
|
+ axisLabel: {
|
|
|
|
+ formatter: "{value}%",
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ tooltip: {
|
|
|
|
+ axisPointer: {
|
|
|
|
+ type: "shadow",
|
|
|
|
+ shadowStyle: {
|
|
|
|
+ color: "rgba(150,150,150,0.2)",
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ formatter: (item) => {
|
|
|
|
+ return [
|
|
|
|
+ item[0].axisValueLabel,
|
|
|
|
+ ...item.map(
|
|
|
|
+ (d) => `<br/>${d.marker}${d.seriesName}: ${d.value[1]} %`
|
|
|
|
+ ),
|
|
|
|
+ ].join("");
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ dataZoom() {
|
|
|
|
+ return [
|
|
|
|
+ {
|
|
|
|
+ grid: {
|
|
|
|
+ left: "0%",
|
|
|
|
+ },
|
|
|
|
+ type: "slider",
|
|
|
|
+ start: 40,
|
|
|
|
+ end: 100,
|
|
|
|
+ },
|
|
|
|
+ ];
|
|
|
|
+ },
|
|
|
|
+ chartData() {
|
|
|
|
+ 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");
|
|
|
|
+ if (!months[key]) {
|
|
|
|
+ months[key] = {
|
|
|
|
+ 日期: key + "/" + getNowDateAndSunday(key),
|
|
|
|
+ };
|
|
|
|
+ }
|
|
|
|
+ months[key][item.title] = row.percent;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ return {
|
|
|
|
+ columns: [
|
|
|
|
+ "日期",
|
|
|
|
+ ...values.map((item) => {
|
|
|
|
+ return item.title;
|
|
|
|
+ }),
|
|
|
|
+ ],
|
|
|
|
+ rows: Object.values(months),
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ dataEmpty() {
|
|
|
|
+ return !this.chartData.rows.length;
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ active: "ACTIVATION_RATE",
|
|
|
|
+ mdate: [],
|
|
|
|
+ loading: false,
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ init() {
|
|
|
|
+ let nowTiem = this.$helpers.dayjs(new Date()).format("YYYY-MM-DD");
|
|
|
|
+ let startTime = this.$helpers
|
|
|
|
+ .dayjs(getNowDateAndMonday(nowTiem))
|
|
|
|
+ .subtract(49, "day")
|
|
|
|
+ .format("YYYY-MM-DD");
|
|
|
|
+ let endTime = getNowDateAndSunday(nowTiem);
|
|
|
|
+ this.mdate = [startTime, endTime];
|
|
|
|
+ this.FetchDetail();
|
|
|
|
+ },
|
|
|
|
+ changeValue(date) {
|
|
|
|
+ // 请求更改数据
|
|
|
|
+ this.mdate = date;
|
|
|
|
+ // this.isDayOrMoth(date)
|
|
|
|
+ this.FetchDetail();
|
|
|
|
+ },
|
|
|
|
+ async FetchDetail() {
|
|
|
|
+ this.loading = true;
|
|
|
|
+ let data = [];
|
|
|
|
+ try {
|
|
|
|
+ const { dates, ...rest } = this.search;
|
|
|
|
+ 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,
|
|
|
|
+ desc: descs[item.dataType],
|
|
|
|
+ };
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ } catch (error) {
|
|
|
|
+ console.log(error);
|
|
|
|
+ }
|
|
|
|
+ this.loading = false;
|
|
|
|
+ // this.dataInfo = data;
|
|
|
|
+ this.$emit("resetDate", data);
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+<style lang="less" scoped>
|
|
|
|
+// .statistic{
|
|
|
|
+// ::v-deep .statistic-content{
|
|
|
|
+// cursor: pointer;
|
|
|
|
+// &.active > span{
|
|
|
|
+// color: var(--color-primary) !important;
|
|
|
|
+// }
|
|
|
|
+// }
|
|
|
|
+// }
|
|
|
|
+.chioseBox {
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 20px;
|
|
|
|
+ z-index: 1000;
|
|
|
|
+}
|
|
|
|
+.wrap {
|
|
|
|
+ position: relative;
|
|
|
|
+}
|
|
|
|
+</style>
|