feat : 新增图表多日期选择功能

src/api/largeScreen.js

@@ -22,38 +22,44 @@ export const getTunnelBySiteId = (siteId) => {
   })
 }
 // 传感器echarts数据
-export const getEchartsInfo = (id,time,type) => {
+export const getEchartsInfo = (id,time,type,startTime,endTime) => {
   return request({
     url: '/tunnel/large/screen/echarts/sensor',
     method: 'get',
     params: {
       id: id,
       time: time,
-      type: type
+      type: type,
+      startTime:startTime,
+      endTime:endTime,
     }
   })
 }
 // 有害气体echarts数据
-export const getBadGasEchartsInfo = (id,time,type) => {
+export const getBadGasEchartsInfo = (id,time,type,startTime,endTime) => {
   return request({
     url: '/tunnel/large/screen/echarts/gas/sensor/',
     method: 'get',
     params: {
       id: id,
       time: time,
-      type: type
+      type: type,
+      startTime:startTime,
+      endTime:endTime,
     }
   })
 }
 //电流监控数据
-export const getFanEchartsInfo = (id,time,type) => {
+export const getFanEchartsInfo = (id,time,type,startTime,endTime) => {
   return request({
     url: '/tunnel/large/screen/echarts/current',
     method: 'get',
     params: {
       id: id,
       time: time,
-      type: type
+      type: type,
+      startTime:startTime,
+      endTime:endTime,
     }
   })
 }

src/assets/styles/index.scss

@@ -538,7 +538,7 @@ body,
     margin: 0;
 
     .el-dialog__header {
-      padding: 0 0 28px 0;
+      padding: 0 0 46px 0;
       //display: none;
       .el-dialog__title {
         font-size: 50px;
@@ -608,13 +608,30 @@ body,
     top: 20px;
     right: 200px;
     display: flex;
-
+    .choose-dates{
+      .el-date-editor {
+        width: 600px!important;
+      }
+    }
     .choose-day {
       margin-right: 40px;
 
       .el-date-editor {
         width: 370px;
+        //width: 600px;
         height: 92px;
+        .el-range__icon,.el-range__close-icon{
+          font-size: 40px;
+          color: #FFFFFF;
+        }
+        .el-range-input{
+          font-size: 37px;
+          color: #FFFFFF;
+        }
+        .el-range-separator{
+          font-size: 36px;
+          color: #f5f5f5;
+        }
       }
 
       .el-input__wrapper {

src/components/chooseDates/index.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="choose-day choose-dates">
+    <el-date-picker
+        v-model="selectButton"
+        type="daterange"
+        size="large"
+        range-separator="To"
+        value-format="YYYY-MM-DD"
+        @change="dataSelect"
+        popper-class="choose-day-popper"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        :disabled-date="disabledDate"
+    />
+  </div>
+</template>
+
+
+<script setup>
+import {ElMessage} from "element-plus";
+
+const selectButton = ref();
+const emit = defineEmits(["update:modelValue", "select"]);
+const disabledDate = (time) => {
+  // return time.getTime() > Date.now()//不能选择之后的数据
+  let curDate = (new Date()).toString() // 当前时间戳转为字符串
+  let curDateYear = (new Date()).getFullYear() // 当前时间的年份
+  let oneYearAgoDate = curDate.replace(curDateYear, curDateYear - 1)// 字符串年份替换为一年前
+  let oneYear = new Date(oneYearAgoDate).getTime() //一年前字符串转为时间戳
+  return time.getTime() > Date.now() || time.getTime() < oneYear;
+}
+const dataSelect = (val) => {
+  if (val !== null) {
+    const startDate = new Date(val[0]).getTime();
+    const endDate = new Date(val[1]).getTime();
+    if (endDate - startDate > 4 * 24 * 60 * 60 * 1000) {
+      ElMessage.warning('所选日期范围不能大于5天!')
+      clearData()
+      // emit("select", false);//clear重新加载
+    } else {
+      emit("select", val);
+    }
+  } else {
+    emit("select", false);
+  }
+  emit("update:modelValue", val);
+
+  // }
+};
+const clearData = () => {
+  selectButton.value = ''
+}
+defineExpose({
+  clearData
+})
+</script>
+
+<style lang="scss">
+.el-picker__popper.el-popper {
+  border: 2px solid #0F82AF !important;
+}
+
+.choose-day-popper {
+  margin-left: 0 !important;
+  width: auto !important;
+
+  .el-picker-panel__body {
+    background-color: #062247;
+
+    .el-date-range-picker__header, .el-date-picker__header {
+      margin: 0;
+      height: 40px;
+      line-height: 40px;
+
+      .el-picker-panel__icon-btn, .el-date-picker__header-label {
+        font-size: 20px;
+        color: #FFFFFF;
+      }
+
+      > div:last-child {
+        font-size: 20px;
+        color: #f5f5f5;
+      }
+    }
+
+    .el-picker-panel__content {
+      .el-month-table {
+        td .cell {
+          font-size: 18px;
+          color: #FFFFFF;
+        }
+
+        td.disabled .cell {
+          background-color: transparent;
+          color: #a8abb2;
+        }
+
+        td.today .cell {
+          color: #0BE9FA;
+        }
+      }
+
+      .el-date-table th {
+        color: #FFFFFF;
+        font-size: 17px;
+      }
+
+      .el-date-table__row {
+        .prev-month, .available, .normal, .next-month {
+          .el-date-table-cell__text {
+            font-size: 18px;
+          }
+        }
+
+        .available {
+          color: #FFFFFF;
+          font-weight: bold;
+
+        }
+
+        .available.in-range {
+          .el-date-table-cell {
+            background-color: #264A78;
+
+            .el-date-table-cell__text {
+              background-color: transparent;
+            }
+          }
+        }
+
+        .available.today {
+          .el-date-table-cell__text {
+            color: #0BE9FA;
+          }
+        }
+
+        .disabled {
+          .el-date-table-cell {
+            background-color: #062247;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+

src/components/chooseMonth/index.vue

@@ -35,7 +35,3 @@ defineExpose({
   clearData
 })
 </script>
-
-<style scoped>
-
-</style>

src/components/content/airInfo/AirInfo.vue

@@ -63,7 +63,7 @@ import ItemInfo from "./childComps/ItemInfo.vue";
 import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
 import * as echarts from 'echarts';
 import {getEchartsInfo} from "@/api/largeScreen";
-import ChooseDay from "@/components/chooseDay/index.vue"
+import ChooseDay from "@/components/chooseDates/index.vue"
 import ChooseMonth from "@/components/chooseMonth/index.vue"
 import elementResizeDetectorMaker from "element-resize-detector";
 
@@ -158,7 +158,11 @@ const handleExport = () => {
     }
   } else if (selectTimeButton.value === 2) {
     if (clickDay.value) {
-      time = clickDay.value
+      if (clickDay.value[1]) {
+        time = clickDay.value.map(item => item).join('到')
+      } else {
+        time = clickDay.value
+      }
     } else {
       time = getNowFormatDate(true)
     }
@@ -169,13 +173,21 @@ const handleExport = () => {
   CsvExportor.downloadCsv(newArray, {header}, `${name}.csv`);
 }
 const daySelect = (val) => {
-  clickDay.value = val
+  if (val) {
-  if (isFullScreen.value) {
+    clickDay.value = val
-    getChartInfo(openDialogId.value, 'day', val)
+    if (isFullScreen.value) {
+      getChartInfo(openDialogId.value, 'day', '', '', val[0], val[1])
+    } else {
+      getChartInfo(openDialogId.value, 'day', '', true, val[0], val[1])
+    }
   } else {
-    getChartInfo(openDialogId.value, 'day', val,true)
+  if (isFullScreen.value) {
+    getChartInfo(openDialogId.value, 'day', '')
+  } else {
+    getChartInfo(openDialogId.value, 'day', '', true)
   }
 }
+}
 const monthSelect = (val) => {
   clickMonth.value = val
   if (isFullScreen.value) {
@@ -214,7 +226,7 @@ const shrinkScreen = () => {
     initChart(chartData.dates, chartData.values,dataZoomTop)
   })
 }
-const getChartInfo = (equipmentId, type = 'day', time = '', flag) => {
+const getChartInfo = (equipmentId, type = 'day', time = '', flag, startTime, endTime) => {
   showSpeedLoading.value = true
   nextTick(() => {
     if (flag) {
@@ -226,7 +238,7 @@ const getChartInfo = (equipmentId, type = 'day', time = '', flag) => {
       }
     }
   })
-  getEchartsInfo(equipmentId, time, type).then(res => {
+  getEchartsInfo(equipmentId, time, type, startTime, endTime).then(res => {
     if (res?.code === 1000) {
       showSpeedLoading.value = false
       chartData=res.data

src/components/content/badGasInfo/BadGasInfo.vue

@@ -37,7 +37,7 @@
           <div class="export-btn" @click="handleExport">
             导出
           </div>
-          <choose-day v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
+          <choose-dates v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
           <choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
           <time-range-btn
               :buttonList="timeList"
@@ -64,7 +64,7 @@ import GasInfoItem from "./childComps/GasInfoItem.vue";
 import * as echarts from "echarts";
 import TimeRangeBtn from "@/components/timeRangeBtn/index.vue";
 import {getBadGasEchartsInfo} from "@/api/largeScreen";
-import ChooseDay from "@/components/chooseDay/index.vue"
+import ChooseDates from "@/components/chooseDates/index.vue"
 import ChooseMonth from "@/components/chooseMonth/index.vue"
 import elementResizeDetectorMaker from "element-resize-detector";
 
@@ -176,7 +176,11 @@ const handleExport = () => {
     }
   } else if (selectTimeButton.value === 2) {
     if (clickDay.value) {
-      time = clickDay.value
+      if (clickDay.value[1]) {
+        time = clickDay.value.map(item => item).join('到')
+      } else {
+        time = clickDay.value
+      }
     } else {
       time = getNowFormatDate(true)
     }
@@ -217,11 +221,19 @@ const shrinkScreen = () => {
   })
 }
 const daySelect = (val) => {
-  clickDay.value = val
+  if (val) {
-  if (isFullScreen.value) {
+    clickDay.value = val
-    getBadGasChartInfo('day', val)
+    if (isFullScreen.value) {
-  } else {
+      getBadGasChartInfo('day', '','', val[0], val[1])
-    getBadGasChartInfo('day', val, true)
+    } else {
+      getBadGasChartInfo('day', '', true, val[0], val[1])
+    }
+  }else {
+    if (isFullScreen.value) {
+      getBadGasChartInfo('day', '')
+    } else {
+      getBadGasChartInfo('day', '', true)
+    }
   }
 }
 const monthSelect = (val) => {
@@ -279,7 +291,7 @@ const changeData = (item) => {
     unit: item.unit,
   };
 };
-const getBadGasChartInfo = (type, time = '', flag) => {
+const getBadGasChartInfo = (type, time = '', flag,startTime,endTime) => {
   showLoading.value = true
   let id = props.tunnelId
   nextTick(() => {
@@ -292,7 +304,7 @@ const getBadGasChartInfo = (type, time = '', flag) => {
       }
     }
   })
-  getBadGasEchartsInfo(id, time, type).then(res => {
+  getBadGasEchartsInfo(id, time, type,startTime,endTime).then(res => {
     if (res?.code === 1000) {
       showLoading.value = false
       chartData = res.data

src/components/content/fanInfo/FanInfo.vue

@@ -101,7 +101,7 @@
           <div class="export-btn" @click="handleExport">
             导出
           </div>
-          <choose-day v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
+          <choose-dates v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
           <choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
           <time-range-btn
               :buttonList="timeList"
@@ -127,7 +127,7 @@
 import * as echarts from "echarts";
 import FanInfoItem from "./FanInfoItem.vue";
 import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
-import ChooseDay from "@/components/chooseDay/index.vue"
+import ChooseDates from "@/components/chooseDates/index.vue"
 import ChooseMonth from "@/components/chooseMonth/index.vue"
 import {
   editFrequency,
@@ -245,7 +245,11 @@ const handleExport = () => {
     }
   } else if (selectTimeButton.value === 2) {
     if (clickDay.value) {
-      time = clickDay.value
+      if (clickDay.value[1]) {
+        time = clickDay.value.map(item => item).join('到')
+      } else {
+        time = clickDay.value
+      }
     } else {
       time = getNowFormatDate(true)
     }
@@ -256,11 +260,19 @@ const handleExport = () => {
   CsvExportor.downloadCsv(newArray, {header}, `${name}.csv`);
 }
 const daySelect = (val) => {
-  clickDay.value = val
+  if (val) {
-  if (isFullScreen.value) {
+    clickDay.value = val
-    getFanInfo(openEquipmentId.value, 'day', val)
+    if (isFullScreen.value) {
+      getFanInfo(openEquipmentId.value, 'day', '', '', val[0], val[1])
+    } else {
+      getFanInfo(openEquipmentId.value, 'day', '', true, val[0], val[1])
+    }
   } else {
-    getFanInfo(openEquipmentId.value, 'day', val, true)
+    if (isFullScreen.value) {
+      getFanInfo(openEquipmentId.value, 'day', '')
+    } else {
+      getFanInfo(openEquipmentId.value, 'day', '', true)
+    }
   }
 }
 const monthSelect = (val) => {
@@ -398,7 +410,7 @@ const changeModel = (item) => {
     item.autoMode = !item.autoMode
   });
 }
-const getFanInfo = (equipmentId, type = 'day', time = '', flag) => {
+const getFanInfo = (equipmentId, type = 'day', time = '', flag, startTime, endTime) => {
   showLoading.value = true
   nextTick(() => {
     if (flag) {
@@ -410,7 +422,7 @@ const getFanInfo = (equipmentId, type = 'day', time = '', flag) => {
       }
     }
   })
-  getFanEchartsInfo(equipmentId, time, type).then(res => {
+  getFanEchartsInfo(equipmentId, time, type, startTime, endTime).then(res => {
     if (res?.code === 1000) {
       showLoading.value = false
       chartData = res.data
@@ -444,8 +456,8 @@ const handleOpenChart = (item) => {
       chooseDayRef.value.clearData()
     }
   })
-  clickMonth.value=''
+  clickMonth.value = ''
-  clickDay.value=''
+  clickDay.value = ''
   isVisited.value = true
   selectTimeButton.value = 2
   openEquipmentId.value = item.equipmentId

src/components/content/windPressure/WindPressureList.vue

@@ -53,7 +53,7 @@ import WindPressureItem from "./childComps/WindPressureItem.vue";
 import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
 import * as echarts from 'echarts';
 import {getEchartsInfo} from "@/api/largeScreen";
-import ChooseDay from "@/components/chooseDay/index.vue"
+import ChooseDay from "@/components/chooseDates/index.vue"
 import ChooseMonth from "@/components/chooseMonth/index.vue"
 import elementResizeDetectorMaker from "element-resize-detector";
 import CsvExportor from "csv-exportor";
@@ -120,7 +120,11 @@ const handleExport = () => {
     }
   } else if (selectTimeButton.value === 2) {
     if (clickDay.value) {
-      time = clickDay.value
+      if (clickDay.value[1]) {
+        time = clickDay.value.map(item => item).join('到')
+      } else {
+        time = clickDay.value
+      }
     } else {
       time = getNowFormatDate(true)
     }
@@ -161,11 +165,19 @@ const shrinkScreen = () => {
   })
 }
 const daySelect = (val) => {
-  clickDay.value = val
+  if (val) {
-  if (isFullScreen.value) {
+    clickDay.value = val
-    getWindInfo(windSortId.value, 'day', val)
+    if (isFullScreen.value) {
-  } else {
+      getWindInfo(windSortId.value, 'day', '','', val[0], val[1])
-    getWindInfo(windSortId.value, 'day', val, true)
+    } else {
+      getWindInfo(windSortId.value, 'day', '', true, val[0], val[1])
+    }
+  }else {
+    if (isFullScreen.value) {
+      getWindInfo(windSortId.value, 'day', '')
+    } else {
+      getWindInfo(windSortId.value, 'day', '', true)
+    }
   }
 }
 const monthSelect = (val) => {
@@ -176,7 +188,7 @@ const monthSelect = (val) => {
     getWindInfo(windSortId.value, 'month', val, true)
   }
 }
-const getWindInfo = (equipmentId, type = 'day', time = '', flag) => {
+const getWindInfo = (equipmentId, type = 'day', time = '', flag, startTime, endTime) => {
   isVisited.value = true
   showLoading.value = true
   nextTick(() => {
@@ -189,7 +201,7 @@ const getWindInfo = (equipmentId, type = 'day', time = '', flag) => {
       }
     }
   })
-  getEchartsInfo(equipmentId, time, type).then(res => {
+  getEchartsInfo(equipmentId, time, type, startTime, endTime).then(res => {
     if (res?.code === 1000) {
       showLoading.value = false
       chartData = res.data

src/views/site/index.vue

@@ -167,7 +167,7 @@ const info = ref({
 })
 const title = ref('新增站点')
 const isVisited = ref(false);
-const isUploadVisited = ref(false);
+let isUploadVisited = ref(false);
 const showFirst = ref(true)
 const total = ref(10);
 const showAddIcon = ref(true)
@@ -206,7 +206,7 @@ const getList = () => {
     lock: true,
     text: '正在加载系统资源...',
     background: 'rgba(0, 0, 0, 0.7)',
-    customClass:'allLoading'
+    customClass: 'allLoading'
   })
   getSiteList({
     userId: userId,
@@ -272,7 +272,7 @@ const handleEdit = (item) => {
     lock: true,
     text: '正在加载系统资源...',
     background: 'rgba(0, 0, 0, 0.7)',
-    customClass:'allLoading'
+    customClass: 'allLoading'
   })
   getSiteDetail(item.siteId).then((res) => {
     form.value = res.data;
@@ -667,7 +667,7 @@ const handleCurrentChange = (val) => {
 
         .left-img {
           margin-top: 50px;
-          margin-right: 60px;
+          margin-right: 36px;
           width: 500px;
           height: 370px;
           background-image: url('@/assets/images/site/zdgl_zd.png');
@@ -690,7 +690,7 @@ const handleCurrentChange = (val) => {
             .tunnel {
               cursor: pointer;
               margin-right: 20px;
-              width: 280px;
+              width: 320px;
               height: 350px;
               background: #3FBED1;
               border-radius: 16px;
@@ -698,15 +698,24 @@ const handleCurrentChange = (val) => {
               flex-direction: column;
               align-items: center;
               color: #FFFFFF;
+              text-align: center;
 
               > div:first-child {
-                height: 37px;
+                width: 240px;
+                //height: 37px;
                 font-size: 32px;
                 margin-top: 20px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
               }
 
               > div:nth-child(3) {
+                width: 310px;
                 margin-bottom: 18px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
               }
 
               > div:nth-child(3), > div:nth-child(4) {

src/views/tunnel-manage/index.vue

@@ -327,7 +327,7 @@ const getList = () => {
     lock: true,
     text: '正在加载系统资源...',
     background: 'rgba(0, 0, 0, 0.7)',
-    customClass:'allLoading'
+    customClass: 'allLoading'
   })
   getTunnelList({
     siteId: siteId,
@@ -634,6 +634,7 @@ const handleMoreDelete = () => {
       color: #fff;
       font-size: 38px;
     }
+
     .el-input__suffix-inner {
       font-size: 30px;
       color: #08B7B8;
@@ -770,7 +771,13 @@ const handleMoreDelete = () => {
         font-size: 45px;
         font-weight: bold;
         color: #FFFFFF;
-        line-height: 42px;
+        line-height: 50px;
+
+        > span {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
 
         > span:nth-child(2) {
           font-size: 38px;
@@ -779,6 +786,8 @@ const handleMoreDelete = () => {
 
 
         > span:last-child {
+          margin-left: 5px;
+          width: 95px;
           padding: 1px 8px;
           font-size: 32px;
           border: 2px solid #05FEFF;
@@ -896,8 +905,9 @@ const handleMoreDelete = () => {
     color: #60DDDE;
     font-size: 38px;
     font-weight: bold;
+
     :deep(.el-pagination.is-background ) {
-      .btn-next,.btn-prev {
+      .btn-next, .btn-prev {
         background-color: transparent;
       }