案件统计模块时间选择器

guanqb

2022-10-24 3ffd00d7ed6a2f37254350e913b37e404359a521

案件统计模块时间选择器

 src/styles/element-ui/element-ui.scss

@@ -188,6 +188,35 @@
    border-bottom: 1px solid #293f6f !important;
}

.el-date-editor .el-range-input {
    background-color: #1b3e6f ;
    color: #fff;
    height: 32px;
}

.el-date-editor .el-range-separator {
    color: #fff;
    margin-right: 10px;
    line-height: 27px;
}

.el-range-editor.el-input__inner {
    width: 100%;
    height: 34px;
}

.el-date-editor .el-range__icon  {
    line-height: 27px;
}

.el-picker-panel [slot=sidebar], .el-picker-panel__sidebar {
    background-color: #1b3e6f;
}

.el-picker-panel__shortcut {
    color: #adcfff;
}

/* 时间筛选 */
.el-time-panel__content::after,
.el-time-panel__content::before {

 src/views/home/index.vue

@@ -104,7 +104,19 @@
        <div class="right-container">
            <div class="case-box">
                <div class="title">
                    <i></i> 案件统计 开始时间-结束时间
                    <i></i> 案件统计
                    <div class="timer">
                        <el-date-picker
                            v-model="value2"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions"
                        ></el-date-picker>
                    </div>
                </div>

                <div id="EventChangeEcharts" class="echarts-box"></div>
@@ -471,6 +483,35 @@
            acttype: 0,
            timetype: 0,
            peopletype: 0,
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近一个月',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近三个月',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                        picker.$emit('pick', [start, end])
                    }
                }]
            },
            value1: '',
            value2: ''
        }
    },

@@ -1552,6 +1593,11 @@
                    background: #43bafe;
                    box-shadow: 0px 0px 8px 2px #43bafe;
                }
                .timer {
                    width: 250px;
                    height: 30px;
                    float: right;
                }
                .regionTotal {
                    color: #fff;
                    font-size: 22px;