imp12.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <template>
  2. <div class="impDiv" @click.stop="void(0)" :style="{width:width+'px',top:xy.top+'px',left:xy.left-width+'px'}">
  3. <div class="triangle"></div>
  4. <div class="abs" style="text-align: center;margin-top:0%;width: 100%;letter-spacing: 5px;color: #cdd2fb;font-size: 18px;">
  5. <span style="position: relative;">日期<el-date-picker v-model="startDate" format="YYYY-MM-DD" type="date" placeholder="选择日期" style="z-index:100000"></el-date-picker>
  6. <el-button style="margin-left:10px" @click="impdata">导出</el-button>
  7. </span>
  8. </div>
  9. <div>
  10. </div>
  11. </div>
  12. </template>
  13. <style>
  14. @import '../../styles/main.css';
  15. .el-date-editor.el-input, .el-date-editor.el-input__wrapper{
  16. width:150px;
  17. }
  18. .el-input__wrapper{
  19. background-color:#1f4774;
  20. box-shadow: 0 0 0 1px #7f9bdd inset !important;
  21. }
  22. .el-input__wrapper input{
  23. border:0px !important;
  24. color:#fff;
  25. }
  26. </style>
  27. <script>
  28. import { ref,onMounted,watch } from 'vue';
  29. import api from "@/api/system";
  30. import { ElDatePicker,ElMessage } from 'element-plus';
  31. import 'element-plus/dist/index.css'; // 确保导入样式文件
  32. import * as echarts from 'echarts';
  33. export default {
  34. props:{
  35. xy:{
  36. type:Object
  37. }
  38. },
  39. setup(props,{emit}){
  40. const width=ref(300)
  41. let startDate=ref('');
  42. let endDate = ref('');
  43. function impquery(){
  44. }
  45. function impdata(){
  46. if(startDate.value=='' || startDate.value==null ){
  47. ElMessage({
  48. message: "未选择正确的日期",
  49. type: "error"
  50. })
  51. return;
  52. }
  53. window.open(ApiServer + "/api/export/energy-day?date="+startDate.value);
  54. }
  55. onMounted(()=>{
  56. var day = new Date();
  57. if(day.getHours()<7){
  58. day=day.setDate(day.getDate()-2);
  59. }else{
  60. day=day.setDate(day.getDate()-1);
  61. }
  62. startDate.value = new Date(day).Format("yyyy-MM-dd");
  63. })
  64. return{
  65. width,
  66. startDate,
  67. endDate,
  68. impdata,
  69. impquery,
  70. }
  71. }
  72. }
  73. </script>