262 lines
		
	
	
		
			8.0 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			262 lines
		
	
	
		
			8.0 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
<!--
 | 
						|
    filename: FtoInvest.vue
 | 
						|
    author: liubin
 | 
						|
    date: 2024-04-10 08:59:28
 | 
						|
    description:
 | 
						|
-->
 | 
						|
 | 
						|
<template>
 | 
						|
  <BarChartBase
 | 
						|
    :legend="legend"
 | 
						|
    :series="series"
 | 
						|
    :xAxis="xAxis"
 | 
						|
    in="ftoInvest"
 | 
						|
    class="fto-chart"
 | 
						|
  />
 | 
						|
</template>
 | 
						|
 | 
						|
<script>
 | 
						|
import BarChartBase from "@/views/copilot/components/ftoBarChartBase.vue";
 | 
						|
 | 
						|
export default {
 | 
						|
  name: "FtoInvest",
 | 
						|
  components: { BarChartBase },
 | 
						|
  data() {
 | 
						|
    // 城市数组的顺序必须是固定的
 | 
						|
    const cities = ["瑞昌", "邯郸",
 | 
						|
      // "株洲", "佳木斯", "成都", "凯盛", "蚌埠"
 | 
						|
 | 
						|
    ];
 | 
						|
    return {
 | 
						|
      xAxis: cities,
 | 
						|
    };
 | 
						|
  },
 | 
						|
  props: {
 | 
						|
    period: {
 | 
						|
      type: String,
 | 
						|
      default: "日",
 | 
						|
    },
 | 
						|
    than: {
 | 
						|
      type: String,
 | 
						|
      default: "同比",
 | 
						|
    },
 | 
						|
  },
 | 
						|
  computed: {
 | 
						|
    legend() {
 | 
						|
      let items = [];
 | 
						|
      var day1 = new Date();
 | 
						|
      var day2 = new Date();
 | 
						|
      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
 | 
						|
      day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
 | 
						|
      var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
 | 
						|
      var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
 | 
						|
      //今天的时间
 | 
						|
      // var day2 = new Date();
 | 
						|
      // day2.setTime(day2.getTime());
 | 
						|
      // var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
 | 
						|
      const today = new Date().getDate();
 | 
						|
      // let yesterday = new Date().getDate() -1;
 | 
						|
      const month = new Date().getMonth() + 1;
 | 
						|
      const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
 | 
						|
      const year = new Date().getFullYear();
 | 
						|
      if (this.period === '日' && this.than === '同比') {
 | 
						|
        items = [
 | 
						|
          { label: `${year - 1}年${yesterday}日`, color: "#12f7f1" },
 | 
						|
          { label: `${yesterday}日`, color: "#58adfa" },
 | 
						|
        ];
 | 
						|
      } else if (this.period === '日' && this.than === '环比') {
 | 
						|
        items = [
 | 
						|
          { label: `${dayBeYes}日`, color: "#12f7f1" },
 | 
						|
          { label: `${yesterday}日`, color: "#58adfa" },
 | 
						|
        ];
 | 
						|
      } else if (this.period === '周' && this.than === '同比') {
 | 
						|
        items = [
 | 
						|
          { label: `${year-1}年本周`, color: "#12f7f1" },
 | 
						|
          { label: `本周`, color: "#58adfa" },
 | 
						|
        ];
 | 
						|
      } else if (this.period === '周' && this.than === '环比') {
 | 
						|
        items = [
 | 
						|
          { label: `上周`, color: "#12f7f1" },
 | 
						|
          { label: `本周`, color: "#58adfa" },
 | 
						|
        ];
 | 
						|
      } else if (this.period === '月' && this.than === '同比') {
 | 
						|
        items = [
 | 
						|
          { label: `${year-1}年${month}月`, color: "#12f7f1" },
 | 
						|
          { label: `${month}月`, color: "#58adfa" },
 | 
						|
          // { label: `${month}月目标`, value: valueTuple[2] },
 | 
						|
        ];
 | 
						|
      } else if (this.period === '月' && this.than === '环比') {
 | 
						|
        items = [
 | 
						|
          { label: `${lastMonth}月`, color: "#12f7f1" },
 | 
						|
          { label: `${month}月`, color: "#58adfa" },
 | 
						|
          // { label: `${month}月目标`, value: valueTuple[2] },
 | 
						|
        ];
 | 
						|
      } else {
 | 
						|
        items = [
 | 
						|
          { label: `${year - 1}年`, color: "#12f7f1" },
 | 
						|
          { label: `${year}年`, color: "#58adfa" },
 | 
						|
          // { label: `${year}年目标`, value: valueTuple[2] },
 | 
						|
        ];
 | 
						|
      }
 | 
						|
      return items
 | 
						|
      // switch (this.period) {
 | 
						|
      //   case "日":
 | 
						|
      //     return [{ label: "昨日", color: "#12f7f1" }];
 | 
						|
      //   case "周":
 | 
						|
      //     return [{ label: "本周", color: "#12f7f1" }];
 | 
						|
      //   case "月": {
 | 
						|
      //     const year = new Date().getFullYear();
 | 
						|
      //     const month = new Date().getMonth() + 1;
 | 
						|
      //     return [
 | 
						|
      //       { label: `${year - 1}年${month}月`, color: "#12f7f1" },
 | 
						|
      //       { label: `${year}年${month}月`, color: "#58adfa" },
 | 
						|
      //     ];
 | 
						|
      //   }
 | 
						|
      //   case "年": {
 | 
						|
      //     const year = new Date().getFullYear();
 | 
						|
      //     return [
 | 
						|
      //       { label: `${year - 1}年`, color: "#12f7f1" },
 | 
						|
      //       { label: `${year}年`, color: "#58adfa" },
 | 
						|
      //     ];
 | 
						|
      //   }
 | 
						|
      //   default:
 | 
						|
      //     return [
 | 
						|
      //       { label: `${year - 1}年`, color: "#12f7f1" },
 | 
						|
      //       { label: `${year}年`, color: "#58adfa" },
 | 
						|
      //     ];
 | 
						|
      // }
 | 
						|
    },
 | 
						|
    series() {
 | 
						|
      const { ftoInvest } = this.$store.getters.copilot.yield;
 | 
						|
      // console.log('ftoInvest', this.$store.getters.copilot.yield);
 | 
						|
      let dataList = null;
 | 
						|
      // console.log(ftoInvest)
 | 
						|
      switch (this.period) {
 | 
						|
        case "日":
 | 
						|
          dataList = [];
 | 
						|
          dataList[0] = ftoInvest?.previous;
 | 
						|
          dataList[1] = ftoInvest?.current;
 | 
						|
        case "周":
 | 
						|
          dataList = [];
 | 
						|
          dataList[0] = ftoInvest?.previous;
 | 
						|
          dataList[1] = ftoInvest?.current;
 | 
						|
          break;
 | 
						|
        default:
 | 
						|
          dataList = [];
 | 
						|
          dataList[0] = ftoInvest?.previous;
 | 
						|
          dataList[1] = ftoInvest?.current;
 | 
						|
      }
 | 
						|
      return getTemplate(this.period, dataList,this.than);
 | 
						|
    },
 | 
						|
  },
 | 
						|
};
 | 
						|
 | 
						|
function getTemplate(period, dataList,than) {
 | 
						|
  let items = [];
 | 
						|
  // var day1 = new Date();
 | 
						|
  // day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
 | 
						|
  // var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
 | 
						|
  var day1 = new Date();
 | 
						|
  var day2 = new Date();
 | 
						|
  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
 | 
						|
  day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
 | 
						|
  var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
 | 
						|
  var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
 | 
						|
  //今天的时间
 | 
						|
  // var day2 = new Date();
 | 
						|
  // day2.setTime(day2.getTime());
 | 
						|
  // var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
 | 
						|
  const today = new Date().getDate();
 | 
						|
  // let yesterday = new Date().getDate() -1;
 | 
						|
  const month = new Date().getMonth() + 1;
 | 
						|
  const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
 | 
						|
  const year = new Date().getFullYear();
 | 
						|
  if (period === '日' && than === '同比') {
 | 
						|
    items = [
 | 
						|
      {
 | 
						|
        name: `${year - 1}年${yesterday}日`,
 | 
						|
        data: dataList ? dataList[0] : [],
 | 
						|
      },
 | 
						|
      {
 | 
						|
        name: `${yesterday}日`,
 | 
						|
        data: dataList ? dataList[1] : [],
 | 
						|
        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
 | 
						|
      },
 | 
						|
    ];
 | 
						|
  } else if (period === '日' && than === '环比') {
 | 
						|
    items = [
 | 
						|
      {
 | 
						|
        name: `${dayBeYes}日`,
 | 
						|
        data: dataList ? dataList[0] : [],
 | 
						|
      },
 | 
						|
      {
 | 
						|
        name: `${yesterday}日`,
 | 
						|
        data: dataList ? dataList[1] : [],
 | 
						|
        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
 | 
						|
      },
 | 
						|
    ];
 | 
						|
  } else if (period === '周' && than === '同比') {
 | 
						|
    items = [
 | 
						|
      {
 | 
						|
        name: `${year-1}年本周`,
 | 
						|
        data: dataList ? dataList[0] : [],
 | 
						|
      },
 | 
						|
      {
 | 
						|
        name: `本周`,
 | 
						|
        data: dataList ? dataList[1] : [],
 | 
						|
        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
 | 
						|
      },
 | 
						|
    ];
 | 
						|
  } else if (period === '周' && than === '环比') {
 | 
						|
    items = [
 | 
						|
      {
 | 
						|
        name: `上周`,
 | 
						|
        data: dataList ? dataList[0] : [],
 | 
						|
      },
 | 
						|
      {
 | 
						|
        name: `本周`,
 | 
						|
        data: dataList ? dataList[1] : [],
 | 
						|
        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
 | 
						|
      },
 | 
						|
    ];
 | 
						|
  } else if (period === '月' && than === '同比') {
 | 
						|
    items = [
 | 
						|
      {
 | 
						|
        name: `${year-1}年${month}月`,
 | 
						|
        data: dataList ? dataList[0] : [],
 | 
						|
      },
 | 
						|
      {
 | 
						|
        name: `${month}月`,
 | 
						|
        data: dataList ? dataList[1] : [],
 | 
						|
        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
 | 
						|
      },
 | 
						|
    ];
 | 
						|
  } else if (period === '月' && than === '环比') {
 | 
						|
    items = [
 | 
						|
      {
 | 
						|
        name: `${lastMonth}月`,
 | 
						|
        data: dataList ? dataList[0] : [],
 | 
						|
      },
 | 
						|
      {
 | 
						|
        name: `${month}月`,
 | 
						|
        data: dataList ? dataList[1] : [],
 | 
						|
        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
 | 
						|
      },
 | 
						|
    ];
 | 
						|
  } else {
 | 
						|
    items = [
 | 
						|
      {
 | 
						|
        name: `${year - 1}年`,
 | 
						|
        data: dataList ? dataList[0] : [],
 | 
						|
      },
 | 
						|
      {
 | 
						|
        name: `${year}年`,
 | 
						|
        data: dataList ? dataList[1] : [],
 | 
						|
        // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
 | 
						|
      },
 | 
						|
    ];
 | 
						|
  }
 | 
						|
  return items
 | 
						|
}
 | 
						|
</script>
 |