修改 时间组件

src/components/form/datePicker/index.vue

@@ -1,19 +1,41 @@
 <template>
+    <el-select v-model="interval" style="width: 90px; margin-right: 10px" @change="timeChange">
+        <el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
+    </el-select>
     <el-date-picker
-        v-bind='$attrs'
+        v-model="timeValue"
-        type='daterange'
+        type="daterange"
+        :disabled="disabledPicker"
+        style="width: 230px; margin-right: 10px"
         unlink-panels
-        range-separator='至'
+        :clearable="false"
-        start-placeholder='开始日期'
+        range-separator="至"
-        end-placeholder='结束日期'
+        start-placeholder="开始日期"
-        value-format='YYYY-MM-DD'
+        end-placeholder="结束日期"
-        :shortcuts='shortcuts'
+        value-format="YYYY-MM-DD"
+        :shortcuts="shortcuts"
     />
+    <el-button :disabled="backDisabled" type="primary" :icon="DArrowLeft" @click="preClick"></el-button>
+    <el-button type="primary" :icon="VideoPause" @click="nowTime">当前</el-button>
+    <el-button :disabled="preDisabled" type="primary" :icon="DArrowRight" @click="next"></el-button>
 </template>
 
-<script lang='ts' setup>
+<script lang="ts" setup>
-import { ref } from 'vue'
+import { DArrowLeft, VideoPause, DArrowRight } from '@element-plus/icons-vue'
+import { ref, onMounted } from 'vue'
 
+const interval = ref(3)
+const disabledPicker = ref(true)
+const timeValue = ref()
+const backDisabled = ref(false)
+const preDisabled = ref(false)
+const timeOptions = [
+    { label: '年份', value: 1 },
+    { label: '季度', value: 2 },
+    { label: '月份', value: 3 },
+    { label: '周', value: 4 },
+    { label: '自定义', value: 5 }
+]
 const shortcuts = [
     {
         text: '最近一周',
@@ -43,6 +65,66 @@ const shortcuts = [
         }
     }
 ]
+onMounted(() => {
+    timeChange(3)
+})
+// 选择时间范围
+const timeChange = (e: number) => {
+    if (e == 1) {
+        disabledPicker.value = true
+        timeValue.value = [setTime(1), setTime()]
+    } else if (e == 2) {
+        disabledPicker.value = true
+        timeValue.value = [setTime(2), setTime()]
+    } else if (e == 3) {
+        disabledPicker.value = true
+        timeValue.value = [setTime(3), setTime()]
+    } else if (e == 4) {
+        disabledPicker.value = true
+        timeValue.value = [setTime(0, 7), setTime()]
+    } else if (e == 5) {
+        disabledPicker.value = false
+    }
+}
+// 上一个
+const preClick = () => {}
+// 当前
+const nowTime = () => {}
+//下一个
+const next = () => {}
+
+const setTime = (flag = 0, e = 0) => {
+    let dd = window.XEUtils.toDateString(new Date().getTime() - e * 3600 * 1000 * 24, 'dd')
+    let data = ''
+    if (dd < 4) {
+        data = window.XEUtils.toDateString(new Date().getTime() - (e + dd) * 3600 * 1000 * 24, 'yyyy-MM-dd')
+    } else {
+        data = window.XEUtils.toDateString(new Date().getTime() - e * 3600 * 1000 * 24, 'yyyy-MM-dd')
+    }
+    console.log('🚀 ~ file: index.vue:98 ~ setTime ~ data:', dd < 4, data)
+
+    if (flag == 1) {
+        data = data.slice(0, 5) + '01-01'
+    } else if (flag == 2) {
+        let quarter = data.slice(5, 7) - 0
+        if (0 < quarter && quarter <= 3) {
+            data = data.slice(0, 5) + '01-01'
+        } else if (3 < quarter && quarter <= 6) {
+            data = data.slice(0, 5) + '04-01'
+        } else if (6 < quarter && quarter <= 9) {
+            data = data.slice(0, 5) + '07-01'
+        } else {
+            data = data.slice(0, 5) + '10-01'
+        }
+    }
+    if (flag == 3) {
+        data = data.slice(0, 8) + '01'
+    }
+
+    return data
+}
+
+defineExpose({ timeValue })
 </script>
 
 <style scoped>

src/styles/index.scss

@@ -1,3 +1,4 @@
 @use '@/styles/app';
+@use '@/styles/vxeTable';
 @use '@/styles/element';
 @use '@/styles/var';

src/styles/vxeTable.scss

@@ -0,0 +1,16 @@
+.vxe-table--body-wrapper::-webkit-scrollbar {
+    width:10px;
+}
+
+.vxe-table--body-wrapper::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    height: 3px;
+    background-color: #059f95 !important;
+    border-radius: 30px !important;
+}
+
+.vxe-table--body-wrapper::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 5px rgb(174, 173, 173);
+    border-radius: 2px;
+    background: rgb(235, 233, 233);
+}

src/views/Event-boot/Region/distribution.vue

@@ -21,7 +21,7 @@
             </el-form-item>
         </el-form>
         <div v-loading="loading">
-            <el-row :gutter="20">
+            <el-row :gutter="10">
                 <el-col :span="12">
                     <MyEchartMap
                         ref="EchartMap"
@@ -69,7 +69,7 @@ import { defaultAttribute } from '@/components/table/defaultAttribute'
 import MyEchartMap from '@/components/echarts/MyEchartMap.vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import { ref, reactive, onMounted, provide } from 'vue'
-
+import { mainHeight } from '@/utils/layout'
 defineOptions({
     name: 'Region/distribution'
 })
@@ -117,6 +117,7 @@ const eliminate = (name: string) => {
     echartMapList.value.options.series = []
     EchartMap.value.GetEchar(name)
 }
+
 // 地图数处理
 const map = (res: any) => {
     echartMapList.value = {
@@ -307,12 +308,13 @@ const histogram = (res: any) => {
 onMounted(() => {
     onSubmit()
 })
+const layout = mainHeight(73) as any
 </script>
 <style lang="scss" scoped>
 .map {
-    height: calc(100vh - 120px);
+    height: v-bind('layout.height');
 }
 .tall {
-    height: calc((100vh - 120px) / 2);
+    height: calc(v-bind('layout.height') / 2);
 }
 </style>

src/views/dashboard/components/Tableabove.vue

@@ -45,10 +45,11 @@
 <script setup lang="ts">
 import { ref, reactive, defineExpose, computed } from 'vue'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { mainHeight } from '@/utils/layout'
 
-const areaData = ref<any[]>([])
+const areaData = ref([])
-const levelData = ref<any[]>([])
+const levelData = ref([])
-const shareData = ref<any[]>([])
+const shareData = ref([])
 
 const tableHeaderAera = ref<any[]>([
     { prop: 'areaName', label: '区域名称', width: '120px' },
@@ -104,12 +105,14 @@ const formatter = (row: any) => {
     }
 }
 defineExpose({ info })
+const layout = mainHeight(175) as any
+const defaultMain = mainHeight(185) as any
 </script>
 <style lang="scss" scoped>
-::v-deep(.el-tabs--left) {
+::v-deep(.el-tabs--left, ) {
-    height: calc(100vh - 220px);
+    height: v-bind('layout.height');
 }
 .default-main {
-    height: calc(100vh - 220px);
+    height: v-bind('defaultMain.height');
 }
 </style>

src/views/dashboard/components/echart.vue

@@ -11,7 +11,7 @@
 <script setup lang="ts">
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import { reactive, ref, defineExpose } from 'vue'
-
+import { mainHeight } from '@/utils/layout'
 let areaStatistics = ref({})
 let voltageStatistics = ref({})
 let monthlyStatistics = ref({})
@@ -283,12 +283,13 @@ const Relation = (list: any) => {
 }
 // Processing()
 defineExpose({ Processing, Grade, Relation })
+const layout = mainHeight(140) as any
 </script>
 
 <style lang="scss" scoped>
 .bars_w {
     width: 100%;
-    height: calc((100vh - 195px) / 2);
+    height: calc(v-bind('layout.height') / 2);
 }
 .separate {
     display: flex;

src/views/dashboard/index.vue

@@ -26,7 +26,7 @@ import { useDictData } from '@/stores/dictData'
 import Echart from '@/views/dashboard/components/echart.vue'
 import Tableabove from '@/views/dashboard/components/Tableabove.vue'
 import { onMounted, reactive, ref, onBeforeMount } from 'vue'
-
+import { mainHeight } from '@/utils/layout'
 defineOptions({
     name: 'Region/overview'
 })
@@ -72,6 +72,7 @@ const onSubmit = async () => {
 onMounted(() => {
     onSubmit()
 })
+const layout = mainHeight(113) as any
 </script>
 
 <style lang="scss" scoped>
@@ -80,7 +81,7 @@ onMounted(() => {
     height: 500px;
 }
 ::v-deep(.el-tabs__content) {
-    height: calc(100vh - 161px);
+    height: v-bind('layout.height');
     overflow-y: auto;
 }
 </style>