首页时间选择器样式修改

guanqb

2023-02-01 c2f6fe984d6c619712107d84757248b4e723f122

首页时间选择器样式修改

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

@@ -288,7 +288,7 @@
}
.el-picker-panel__content{
    margin: 0;
    width: 100%;
    width: 100%!important;
}

/* 时间筛选 */

 src/styles/media/index.scss

@@ -2647,14 +2647,14 @@
            max-height: countSizeVh(200);
        }

        .el-picker-panel {
        .date-day-style.el-picker-panel {
            width: countSizeVw(536, 1920) !important;
        }

        .el-date-range-picker__header div {
            font-size: countSizeVh(16);
            height: countSizeVh(36);
            line-height: countSizeVh(36);
            line-height: counztSizeVh(36);
        }

        .el-date-range-picker.has-sidebar {

 src/views/home/components/bottomContainer.vue

@@ -14,35 +14,81 @@
            <div class="header">
                <div class="bottom-title">警情动态</div>
                <div class="timeTab" v-show="historytype">
                    <span class="beforetime" :class="{ choosed: timetype == 0 }" @click="timeTabClick(0)">周</span>
                    <span class="beforetime" :class="{ choosed: timetype == 1 }" @click="timeTabClick(1)">月</span>
                    <span class="beforetime" :class="{ choosed: timetype == 2 }" @click="timeTabClick(2)">自定义</span>
                    <span
                        class="beforetime"
                        :class="{ choosed: timetype == 0 }"
                        @click="timeTabClick(0)"
                    >周</span>
                    <span
                        class="beforetime"
                        :class="{ choosed: timetype == 1 }"
                        @click="timeTabClick(1)"
                    >月</span>
                    <span
                        class="beforetime"
                        :class="{ choosed: timetype == 2 }"
                        @click="timeTabClick(2)"
                    >自定义</span>
                </div>

                <div class="timeSeclect" v-show="historytype">
                    <el-date-picker v-show="timetype == 0" v-model="currentWeekTime" @change="datePickerChange"
                        type="week" align="center" format="yyyy 第 WW 周" placeholder="选择周">
                    </el-date-picker>
                    <el-date-picker
                        v-show="timetype == 0"
                        v-model="currentWeekTime"
                        @change="datePickerChange"
                        type="week"
                        align="center"
                        format="yyyy 第 WW 周"
                        placeholder="选择周"
                        popper-class="date-week-style"
                    ></el-date-picker>

                    <el-date-picker v-show="timetype == 1" v-model="currentMonthTime" @change="datePickerChange"
                        type="month" align="center" placeholder="选择月">
                    </el-date-picker>
                    <el-date-picker
                        v-show="timetype == 1"
                        v-model="currentMonthTime"
                        @change="datePickerChange"
                        type="month"
                        align="center"
                        placeholder="选择月"
                        popper-class="date-mouth-style"
                    ></el-date-picker>

                    <el-date-picker v-show="timetype == 2" :clearable="false" v-model="currentTime" type="daterange"
                        align="center" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                        @change="datePickerChange" :picker-options="pickerOptions"></el-date-picker>
                    <el-date-picker
                        v-show="timetype == 2"
                        :clearable="false"
                        v-model="currentTime"
                        type="daterange"
                        align="center"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="datePickerChange"
                        :picker-options="pickerOptions"
                        popper-class="date-day-style"
                    ></el-date-picker>
                </div>

                <div class="history-tab">
                    <span class="beforetime" :class="{ choosed: historytype == 0 }"
                        @click="historyTabClick(0)">实时</span>
                    <span class="beforetime" :class="{ choosed: historytype == 1 }"
                        @click="historyTabClick(1)">历史</span>
                    <span
                        class="beforetime"
                        :class="{ choosed: historytype == 0 }"
                        @click="historyTabClick(0)"
                    >实时</span>
                    <span
                        class="beforetime"
                        :class="{ choosed: historytype == 1 }"
                        @click="historyTabClick(1)"
                    >历史</span>
                </div>
            </div>


            <div class="body" v-if="historytype == 0" ref="tableBox" @click="handleSelectClick($event)">
            <div
                class="body"
                v-if="historytype == 0"
                ref="tableBox"
                @click="handleSelectClick($event)"
            >
                <ul class="title-header">
                    <li>
                        <span class="num">序号</span>
@@ -58,16 +104,27 @@
                    </li>
                </ul>

                <vue-seamless-scroll v-if="policeSituationRealtimeArr.length > 0" :data="policeSituationRealtimeArr"
                    class="warp" :class-option="classOption">
                <vue-seamless-scroll
                    v-if="policeSituationRealtimeArr.length > 0"
                    :data="policeSituationRealtimeArr"
                    class="warp"
                    :class-option="classOption"
                >
                    <ul class="item">
                        <li v-for="(item, index) in policeSituationRealtimeArr" :key="index"
                            :data-obj="JSON.stringify(item)" class="row">
                        <li
                            v-for="(item, index) in policeSituationRealtimeArr"
                            :key="index"
                            :data-obj="JSON.stringify(item)"
                            class="row"
                        >
                            <span class="num" v-text="item.index"></span>
                            <span class="receiving-alarm-unit" v-text="item.JJDWMC"></span>
                            <span class="receiving-alarm-people" v-text="item.JJYXM"></span>
                            <span class="receiving-alarm-time" :title="item.BJSJ"
                                v-text="item.BJSJ.substring(0, 10)"></span>
                            <span
                                class="receiving-alarm-time"
                                :title="item.BJSJ"
                                v-text="item.BJSJ.substring(0, 10)"
                            ></span>
                            <span class="call-people" v-text="item.BJRXM"></span>
                            <span class="call-phone" v-text="item.LXDH"></span>
                            <span class="call-police-content" :title="item.BJNR" v-text="item.BJNR"></span>
@@ -78,74 +135,137 @@
                    </ul>
                </vue-seamless-scroll>

                <div class="warp no-data" v-else>
                    暂无数据
                </div>
                <div class="warp no-data" v-else>暂无数据</div>
            </div>

            <div class="current-table-body" ref="ElTableBox" v-if="historytype == 1">
                <el-table :data="policeSituationHistoryArr" :key="currentPage" style="width: 100%"
                <el-table
                    :data="policeSituationHistoryArr"
                    :key="currentPage"
                    style="width: 100%"
                    :height="currentTableHeight"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': 'rgba(9, 40, 199, 0.5)', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="rowClick">
                    <el-table-column :show-overflow-tooltip="true" prop="index" label="序号"
                        min-width="6%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="JJDWMC" label="接警单位"
                        min-width="12.6%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="JJYXM" label="接警员"
                        min-width="7.6%"></el-table-column>
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                    @cell-click="rowClick"
                >
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="index"
                        label="序号"
                        min-width="6%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="JJDWMC"
                        label="接警单位"
                        min-width="12.6%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="JJYXM"
                        label="接警员"
                        min-width="7.6%"
                    ></el-table-column>
                    <el-table-column label="报警时间" min-width="9.6%">
                        <template slot-scope="scope">
                            <span>{{ scope.row.BJSJ.substring(0, 10) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="BJRXM" label="报警人"
                        min-width="7.6%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="LXDH" label="联系电话"
                        min-width="10%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="BJNR" label="报警内容" min-width="12%">
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="SFDZ" label="事发地址" min-width="12%">
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="BJLX" label="报警类型"
                        min-width="8%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="MEMO" label="备注"
                        min-width="12%"></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="BJRXM"
                        label="报警人"
                        min-width="7.6%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="LXDH"
                        label="联系电话"
                        min-width="10%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="BJNR"
                        label="报警内容"
                        min-width="12%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="SFDZ"
                        label="事发地址"
                        min-width="12%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="BJLX"
                        label="报警类型"
                        min-width="8%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="MEMO"
                        label="备注"
                        min-width="12%"
                    ></el-table-column>
                </el-table>

                <div class="pages" ref="ElPagination" v-if="policeSituationHistoryArr.length > 0">
                    <el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="pagesCount"
                        :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination>
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :page-size="pagesize"
                        :page-count="pagesCount"
                        :current-page="currentPage"
                        @current-change="handleCurrentChange"
                    ></el-pagination>
                </div>
            </div>
        </div>

        <svg class="border-svg">
            <defs>
                <path id="bottom-box-path" d="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0
                <path
                    id="bottom-box-path"
                    d="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0
    c55.99,0,112.01,0,168,0c238.64,0,477.36,0,716,0c1.01,1.73,4.64,4.26,5,5c0,20,0,40,0,60c0,49,0,98,0,147c-0.89,1.52,0,19.4,0,25
    c0,22.33,0,44.67,0,67c-1.43,0.78-4.01,2.77-5,4c-13,0-26,0-39,0c-3-3.33-6-6.67-9-10c-22,0-44,0-66,0c-2.26,3.84-6.72,5.26-8,10
    c-241.98,0-484.02,0-726,0c-64.33,0-128.67,0-193,0c-17,0-34,0-51,0c-5.68,0-16.19,1.49-20-1c-4.4-2.88-3-12.84-3-20
    c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z" fill="transparent">
                </path>
    c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z"
                    fill="transparent"
                />
                <radialGradient id="border-box-gradient" cx="50%" cy="50%" r="50%">
                    <stop offset="0%" stop-color="#fff" stop-opacity="1"></stop>
                    <stop offset="100%" stop-color="#fff" stop-opacity="0"></stop>
                    <stop offset="0%" stop-color="#fff" stop-opacity="1" />
                    <stop offset="100%" stop-color="#fff" stop-opacity="0" />
                </radialGradient>
                <mask id="border-box-mask">
                    <circle cx="0" cy="0" r="150" fill="url(#border-box-gradient)">
                        <animateMotion dur="8s" path="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0
                        <animateMotion
                            dur="8s"
                            path="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0
    c55.99,0,112.01,0,168,0c238.64,0,477.36,0,716,0c1.01,1.73,4.64,4.26,5,5c0,20,0,40,0,60c0,49,0,98,0,147c-0.89,1.52,0,19.4,0,25
    c0,22.33,0,44.67,0,67c-1.43,0.78-4.01,2.77-5,4c-13,0-26,0-39,0c-3-3.33-6-6.67-9-10c-22,0-44,0-66,0c-2.26,3.84-6.72,5.26-8,10
    c-241.98,0-484.02,0-726,0c-64.33,0-128.67,0-193,0c-17,0-34,0-51,0c-5.68,0-16.19,1.49-20-1c-4.4-2.88-3-12.84-3-20
    c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z" rotate="auto" repeatCount="indefinite"></animateMotion>
    c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z"
                            rotate="auto"
                            repeatCount="indefinite"
                        />
                    </circle>
                </mask>
            </defs>

            <use stroke-width="2" xlink:href="#bottom-box-path" mask="url(#border-box-mask)" stroke="#4fd2dd">
                <animate attributeName="stroke-dasharray" from="0, 3220" to="3220, 0" dur="8s" repeatCount="indefinite">
                </animate>
            <use
                stroke-width="2"
                xlink:href="#bottom-box-path"
                mask="url(#border-box-mask)"
                stroke="#4fd2dd"
            >
                <animate
                    attributeName="stroke-dasharray"
                    from="0, 3220"
                    to="3220, 0"
                    dur="8s"
                    repeatCount="indefinite"
                />
            </use>
        </svg>
    </div>
@@ -838,7 +958,6 @@
            justify-content: center;
        }
    }


    .border-svg {
        position: absolute;

 src/views/home/components/leftContainer.vue

@@ -619,7 +619,6 @@
                this.isAllPoliceStation = true
                landMyChart.setOption(this.initLandOptions(this.villageOptionData[0], this.villageOptionData[1]))
            }

        },

        initLandOptions (xDate, yDate) {