提交一下

1

src/views/main/baseinfo/management.vue

@@ -30,7 +30,7 @@ import "echarts/lib/component/dataZoom";
 import countTo from "vue-count-to";
 import veLine from "v-charts/lib/line.common";
 import histogram from "v-charts/lib/histogram.common";
-import searchHeader from "./modals/searchHeader";
+import searchHeader from "./modals/searchDayHeader";
 import { getIndex } from "../api";
 import { getTimes } from "@/utils";
 import { descs, chioseNum } from "../constant";

src/views/main/baseinfo/modals/manageOrgan.vue

@@ -14,6 +14,7 @@
         :data-empty="dataEmpty"
         :extend="chartExtend"
         :legend="legend"
+        :data-zoom="dataZoom"
       />
       <!-- <ve-line
       v-else
@@ -55,7 +56,6 @@ export default {
     legend() {
       return {
         left: "10px",
-        itemWidth: 30,
       };
     },
     items() {
@@ -94,6 +94,19 @@ export default {
       return {
         series: {
           smooth: false,
+          barwidth: 80,
+          label: {
+            show: true,
+            position: "top",
+            color: "#000",
+            formatter: function (value) {
+              var val = value.data;
+              return val + "%";
+            },
+          },
+        },
+        markerPoint: {
+          data: { name: "百分比" },
         },
 
         yAxis: {
@@ -103,7 +116,20 @@ export default {
           scale: true,
           min: 0,
           axisLabel: {
-            formatter: "{value}元",
+            formatter: "{value}%",
+          },
+        },
+
+        xAxis: {
+          interval: 0,
+          axisLabel: {
+            show: true, // 是否显示刻度标签，默认显示
+            interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
+            inside: false, // 刻度标签是否朝内，默认朝外
+            margin: 6, // 刻度标签与轴线之间的距离
+            formatter: function (value) {
+              return value.split("").join("\n");
+            },
           },
         },
 
@@ -116,10 +142,24 @@ export default {
           },
 
           formatter: (item) => {
+            // console.log(item);
+            // console.log(this.values, item[0].axisValue, "organ");
+            let arr = [
+              { name: "总收入", dot: "元" },
+              { name: "总收入占比", dot: "%" },
+              { name: "报名缴费收入", dot: "元" },
+              { name: "乐团续费收入", dot: "元" },
+              { name: "VIP课收入", dot: "元" },
+              { name: "网管课收入", dot: "元" },
+              { name: "其他收入", dot: "元" },
+            ];
             return [
               item[0].axisValueLabel,
-              ...item.map(
-                (d) => `<br/>${d.marker}${d.seriesName}: ${d.value[1]} 元`
+              ...arr.map(
+                (d) =>
+                  `<br/>${d.name}:${this.values[item[0].axisValue][d.name]}${
+                    d.dot
+                  }`
               ),
             ].join("");
           },
@@ -129,9 +169,10 @@ export default {
     dataZoom() {
       return [
         {
+          show: true,
           type: "slider",
-          start: 50,
-          end: 100,
+          start: 0,
+          end: 20,
           filterMode: "empty",
         },
       ];
@@ -153,21 +194,18 @@ export default {
           }
 
           if (item.title == "总收入" && row.title == "总收入") {
-            organ[key]["百分比"] = ((row.percent / item.percent) * 100).toFixed(
-              2
-            );
+            organ[key]["总收入占比"] = (
+              (row.percent / item.percent) *
+              100
+            ).toFixed(2);
           }
         }
       }
       for (const item of values) {
         for (const row of item.organIndexMonthData || []) {
-
-          if(item.title == row.title){
-             console.log(item.title,row.title,row.percent, row.organName)
-
-              // organ[row.organName][row.title] = row.percent
+          if (item.title == row.title) {
+            organ[row.organName][row.title] = row.percent;
           }
-
         }
       }
 
@@ -184,10 +222,11 @@ export default {
       //   }
       // }
       console.log(organ);
-      console.log(values);
-      return;
+      this.values = organ;
+      // console.log(values);
+      // return;
       return {
-        columns: ["分部", "百分比"],
+        columns: ["分部", "总收入占比"],
         rows: Object.values(organ),
         loading: true,
       };
@@ -249,6 +288,7 @@ export default {
       show: true,
       activeName: "first",
       timer: "day",
+      values: "",
     };
   },
   mounted() {

src/views/main/baseinfo/modals/searchDayHeader.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="titleWrap">
+    <div class="box">
+      <span class="shape"></span>
+      <span>{{ title }}</span>
+    </div>
+    <div class="right">
+      <el-radio-group v-model="timer" @change="changeQuick" v-if="isShowQuert">
+        <el-radio-button label="day">今日</el-radio-button>
+        <el-radio-button label="month">本月</el-radio-button>
+        <el-radio-button label="year">本年度</el-radio-button>
+        <el-radio-button label="lastYear">去年</el-radio-button>
+      </el-radio-group>
+      <el-date-picker
+        v-if="isShowQuert"
+        v-model="date"
+        type="daterange"
+        style="width: 300px; padding: 0 10px"
+        range-separator="-"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        value-format="yyyy-MM-dd"
+        format="yyyy-MM-dd"
+        @change="changeValue"
+        :picker-options="bigin()"
+      >
+      </el-date-picker>
+      <el-date-picker
+        v-else
+        v-model="date"
+        type="daterange"
+        style="width: 300px; padding: 0 10px"
+        range-separator="-"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        value-format="yyyy-MM-dd"
+        format="yyyy-MM-dd"
+        @change="changeWeek"
+        :picker-options="bigin()"
+      >
+      </el-date-picker>
+    </div>
+  </div>
+</template>
+<script>
+import { getNowDateAndSunday, getNowDateAndMonday } from "@/utils/date";
+export default {
+  props: ["title", "dates", "isShowQuert", "endDate"],
+
+  data() {
+    return {
+      timer: "",
+      date: this.dates,
+    };
+  },
+  mounted() {},
+
+  watch: {
+    dates(val) {
+      this.date = val;
+    },
+  },
+
+  methods: {
+    changeWeek(val) {
+      this.date = [getNowDateAndMonday(val[0]), getNowDateAndSunday(val[1])];
+      this.submitDate(this.date);
+    },
+    changeValue(val) {
+      this.timer = "";
+      this.date = val;
+      this.submitDate(this.date);
+    },
+    changeQuick(val) {
+      let startDate;
+      let endDate;
+      if (val == "month") {
+        // 获取本月的第一天 获取本月的今天
+        startDate = this.$helpers
+          .dayjs(new Date())
+          .set("date", 1)
+          .format("YYYY-MM-DD");
+        this.endDate
+          ? (endDate = this.endDate)
+          : (endDate = this.$helpers
+              .dayjs(new Date())
+              .subtract(1, "day")
+              .format("YYYY-MM-DD"));
+        this.date = [startDate, endDate];
+        this.submitDate(this.date);
+      } else if (val == "day") {
+        startDate = this.$helpers
+          .dayjs(new Date())
+
+          .format("YYYY-MM-DD");
+        this.endDate
+          ? (endDate = this.endDate)
+          : (endDate = this.$helpers
+              .dayjs(new Date())
+
+              .format("YYYY-MM-DD"));
+        this.date = [startDate, endDate];
+         this.submitDate(this.date);
+      } else if (val == "year") {
+        startDate = this.$helpers
+          .dayjs(new Date())
+          .set("month", 0)
+          .set("date", 1)
+          .format("YYYY-MM-DD");
+        this.endDate
+          ? (endDate = this.endDate)
+          : (endDate = this.$helpers
+              .dayjs(new Date())
+              .subtract(1, "day")
+              .format("YYYY-MM-DD"));
+        this.date = [startDate, endDate];
+        this.submitDate(this.date);
+      } else if (val == "lastYear") {
+        startDate = this.$helpers
+          .dayjs(new Date())
+          .subtract(1, "year")
+          .set("month", 0)
+          .set("date", 1)
+          .format("YYYY-MM-DD");
+        endDate = this.$helpers
+          .dayjs()
+          .subtract(1, "year")
+          .endOf("year")
+          .format("YYYY-MM-DD");
+        this.date = [startDate, endDate];
+        this.submitDate(this.date);
+      }
+    },
+    submitDate(date) {
+      this.$emit("changeValue", date);
+    },
+    bigin() {
+      let self = this;
+      return {
+        firstDayOfWeek: 1,
+        disabledDate(time) {
+          if (self.endDate) {
+            let endTime = self.$helpers.dayjs(self.endDate).valueOf();
+            return time.getTime() > endTime;
+          } else {
+            return time.getTime() >= Date.now() - 24 * 60 * 60 * 1000;
+          }
+        },
+      };
+    },
+    initStatue(val) {
+      if (val) {
+        this.timer = val;
+      } else {
+        this.timer = "";
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.titleWrap {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: 55px;
+}
+</style>