imp05.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  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="" 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" :value-format="'YYYY-MM-DD'" type="date" placeholder="选择日期"></el-date-picker>
  6. <span> 到 </span>
  7. <el-date-picker v-model="endDate" type="date" :value-format="'YYYY-MM-DD'" placeholder="选择日期"></el-date-picker>
  8. <span> 时间 </span>
  9. <el-select style="width: 100px;" v-model="startH"><el-option v-for="item in startHourList" :key="item.code" :label="item.name" :value="item.code"></el-option> </el-select>
  10. <span> 到 </span>
  11. <el-select style="width: 100px;" v-model="endH"><el-option v-for="item in endHourList" :key="item.code" :label="item.name" :value="item.code"></el-option> </el-select>
  12. <el-button style="margin:10px" @click="impdata">导出</el-button>
  13. </span>
  14. </div>
  15. <div>
  16. </div>
  17. </div>
  18. </template>
  19. <style>
  20. @import '../../styles/main.css';
  21. .el-date-editor.el-input, .el-date-editor.el-input__wrapper{
  22. width:150px;
  23. }
  24. .el-input__wrapper{
  25. background-color:#1f4774;
  26. box-shadow: 0 0 0 1px #7f9bdd inset !important;
  27. }
  28. .el-input__wrapper input{
  29. border:0px !important;
  30. color:#fff;
  31. }
  32. .el-select__wrapper{
  33. background-color: #1f4774;
  34. }
  35. .el-select__selected-item{
  36. color: #fff !important;
  37. }
  38. </style>
  39. <script>
  40. import { ref,onMounted,watch } from 'vue';
  41. import api from "@/api/system";
  42. import { ElDatePicker,ElMessage } from 'element-plus';
  43. import 'element-plus/dist/index.css'; // 确保导入样式文件
  44. import * as echarts from 'echarts';
  45. export default {
  46. props:{
  47. xy:{
  48. type:Object
  49. }
  50. },
  51. setup(props,{emit}){
  52. const width=ref(700)
  53. let startDate=ref('');
  54. let endDate = ref('');
  55. let startH = ref(7);
  56. let endH = ref(19);
  57. let startHourList = ref([]);
  58. let endHourList = ref([]);
  59. function impquery(){
  60. }
  61. function impdata(){
  62. if(startDate.value=='' || endDate.value=='' || startDate.value==null || endDate.value==null){
  63. ElMessage({
  64. message: "未选择正确的日期",
  65. type: "error"
  66. })
  67. return;
  68. }
  69. window.open(ApiServer + "/api/export/stops/type/6?start="+startDate.value+"&end="+endDate.value+"&st="+startH.value+"&et="+endH.value)
  70. }
  71. onMounted(()=>{
  72. var day = new Date();
  73. if(day.getHours()<7){
  74. day=day.setDate(day.getDate()-2);
  75. }else{
  76. day=day.setDate(day.getDate()-1);
  77. }
  78. var day1 = new Date().setDate(new Date(day).getDate() - 7);
  79. startDate.value = new Date(day1).Format("yyyy-MM-dd");
  80. endDate.value =new Date(day).Format("yyyy-MM-dd");
  81. var hour1Opts = [];
  82. var hour2Opts = [];
  83. //var nowHour = new Date().Format("h");
  84. for (var i = 0; i < 24; i++) {
  85. hour1Opts.push({"name":i+'时',"code":i});
  86. hour2Opts.push({"name":i+'时',"code":i});
  87. }
  88. startHourList.value = hour1Opts;
  89. endHourList.value = hour2Opts;
  90. })
  91. return{
  92. width,
  93. startDate,
  94. endDate,
  95. startH,
  96. endH,
  97. startHourList,
  98. endHourList,
  99. impdata,
  100. impquery,
  101. }
  102. }
  103. }
  104. </script>