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>
 |