From 793391c23ba45b3dab55657ecd2448d87e17f854 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 16 九月 2025 13:49:53 +0800
Subject: [PATCH] 设备巡检、智能派单
---
src/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue | 562 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 562 insertions(+), 0 deletions(-)
diff --git a/src/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue b/src/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue
new file mode 100644
index 0000000..9cd0e69
--- /dev/null
+++ b/src/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue
@@ -0,0 +1,562 @@
+<template>
+ <view class="uni-calendar">
+ <view v-if="!insert&&show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}" @click="clean"></view>
+ <view v-if="insert || show" class="uni-calendar__content" :class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow}">
+ <view v-if="!insert" class="uni-calendar__header uni-calendar--fixed-top">
+ <view class="uni-calendar__header-btn-box" @click="close">
+ <text class="uni-calendar__header-text uni-calendar--fixed-width">{{cancelText}}</text>
+ </view>
+ <view class="uni-calendar__header-btn-box" @click="confirm">
+ <text class="uni-calendar__header-text uni-calendar--fixed-width">{{okText}}</text>
+ </view>
+ </view>
+ <view class="uni-calendar__header">
+ <view class="uni-calendar__header-btn-box" @click.stop="pre">
+ <view class="uni-calendar__header-btn uni-calendar--left"></view>
+ </view>
+ <picker mode="date" :value="date" fields="month" @change="bindDateChange">
+ <text class="uni-calendar__header-text">{{ (nowDate.year||'') +' / '+( nowDate.month||'')}}</text>
+ </picker>
+ <view class="uni-calendar__header-btn-box" @click.stop="next">
+ <view class="uni-calendar__header-btn uni-calendar--right"></view>
+ </view>
+ <text class="uni-calendar__backtoday" @click="backtoday">{{todayText}}</text>
+
+ </view>
+ <view class="uni-calendar__box">
+ <view v-if="showMonth" class="uni-calendar__box-bg">
+ <text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
+ </view>
+ <view class="uni-calendar__weeks">
+ <view class="uni-calendar__weeks-day">
+ <text class="uni-calendar__weeks-day-text">{{SUNText}}</text>
+ </view>
+ <view class="uni-calendar__weeks-day">
+ <text class="uni-calendar__weeks-day-text">{{monText}}</text>
+ </view>
+ <view class="uni-calendar__weeks-day">
+ <text class="uni-calendar__weeks-day-text">{{TUEText}}</text>
+ </view>
+ <view class="uni-calendar__weeks-day">
+ <text class="uni-calendar__weeks-day-text">{{WEDText}}</text>
+ </view>
+ <view class="uni-calendar__weeks-day">
+ <text class="uni-calendar__weeks-day-text">{{THUText}}</text>
+ </view>
+ <view class="uni-calendar__weeks-day">
+ <text class="uni-calendar__weeks-day-text">{{FRIText}}</text>
+ </view>
+ <view class="uni-calendar__weeks-day">
+ <text class="uni-calendar__weeks-day-text">{{SATText}}</text>
+ </view>
+ </view>
+ <view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
+ <view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
+ <calendar-item class="uni-calendar-item--hook" :weeks="weeks" :calendar="calendar" :selected="selected" :lunar="lunar" @change="choiceDate"></calendar-item>
+ </view>
+ </view>
+ </view>
+ </view>
+ </view>
+</template>
+
+<script>
+ import Calendar from './util.js';
+ import calendarItem from './uni-calendar-item.vue'
+ import {
+ initVueI18n
+ } from '@dcloudio/uni-i18n'
+ import messages from './i18n/index.js'
+ const { t } = initVueI18n(messages)
+ /**
+ * Calendar 鏃ュ巻
+ * @description 鏃ュ巻缁勪欢鍙互鏌ョ湅鏃ユ湡锛岄�夋嫨浠绘剰鑼冨洿鍐呯殑鏃ユ湡锛屾墦鐐规搷浣溿�傚父鐢ㄥ満鏅锛氶厭搴楁棩鏈熼璁€�佺伀杞︽満绁ㄩ�夋嫨璐拱鏃ユ湡銆佷笂涓嬬彮鎵撳崱绛�
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=56
+ * @property {String} date 鑷畾涔夊綋鍓嶆椂闂达紝榛樿涓轰粖澶�
+ * @property {Boolean} lunar 鏄剧ず鍐滃巻
+ * @property {String} startDate 鏃ユ湡閫夋嫨鑼冨洿-寮�濮嬫棩鏈�
+ * @property {String} endDate 鏃ユ湡閫夋嫨鑼冨洿-缁撴潫鏃ユ湡
+ * @property {Boolean} range 鑼冨洿閫夋嫨
+ * @property {Boolean} insert = [true|false] 鎻掑叆妯″紡,榛樿涓篺alse
+ * @value true 寮圭獥妯″紡
+ * @value false 鎻掑叆妯″紡
+ * @property {Boolean} clearDate = [true|false] 寮圭獥妯″紡鏄惁娓呯┖涓婃閫夋嫨鍐呭
+ * @property {Array} selected 鎵撶偣锛屾湡寰呮牸寮廩{date: '2019-06-27', info: '绛惧埌', data: { custom: '鑷畾涔変俊鎭�', name: '鑷畾涔夋秷鎭ご',xxx:xxx... }}]
+ * @property {Boolean} showMonth 鏄惁閫夋嫨鏈堜唤涓鸿儗鏅�
+ * @event {Function} change 鏃ユ湡鏀瑰彉锛宍insert :ture` 鏃剁敓鏁�
+ * @event {Function} confirm 纭閫夋嫨`insert :false` 鏃剁敓鏁�
+ * @event {Function} monthSwitch 鍒囨崲鏈堜唤鏃惰Е鍙�
+ * @example <uni-calendar :insert="true":lunar="true" :start-date="'2019-3-2'":end-date="'2019-5-20'"@change="change" />
+ */
+ export default {
+ components: {
+ calendarItem
+ },
+ emits:['close','confirm','change','monthSwitch'],
+ props: {
+ date: {
+ type: String,
+ default: ''
+ },
+ selected: {
+ type: Array,
+ default () {
+ return []
+ }
+ },
+ lunar: {
+ type: Boolean,
+ default: false
+ },
+ startDate: {
+ type: String,
+ default: ''
+ },
+ endDate: {
+ type: String,
+ default: ''
+ },
+ range: {
+ type: Boolean,
+ default: false
+ },
+ insert: {
+ type: Boolean,
+ default: true
+ },
+ showMonth: {
+ type: Boolean,
+ default: true
+ },
+ clearDate: {
+ type: Boolean,
+ default: true
+ }
+ },
+ data() {
+ return {
+ show: false,
+ weeks: [],
+ calendar: {},
+ nowDate: '',
+ aniMaskShow: false
+ }
+ },
+ computed:{
+ /**
+ * for i18n
+ */
+
+ okText() {
+ return t("uni-calender.ok")
+ },
+ cancelText() {
+ return t("uni-calender.cancel")
+ },
+ todayText() {
+ return t("uni-calender.today")
+ },
+ monText() {
+ return t("uni-calender.MON")
+ },
+ TUEText() {
+ return t("uni-calender.TUE")
+ },
+ WEDText() {
+ return t("uni-calender.WED")
+ },
+ THUText() {
+ return t("uni-calender.THU")
+ },
+ FRIText() {
+ return t("uni-calender.FRI")
+ },
+ SATText() {
+ return t("uni-calender.SAT")
+ },
+ SUNText() {
+ return t("uni-calender.SUN")
+ },
+ },
+ watch: {
+ date(newVal) {
+ // this.cale.setDate(newVal)
+ this.init(newVal)
+ },
+ startDate(val){
+ this.cale.resetSatrtDate(val)
+ this.cale.setDate(this.nowDate.fullDate)
+ this.weeks = this.cale.weeks
+ },
+ endDate(val){
+ this.cale.resetEndDate(val)
+ this.cale.setDate(this.nowDate.fullDate)
+ this.weeks = this.cale.weeks
+ },
+ selected(newVal) {
+ this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
+ this.weeks = this.cale.weeks
+ }
+ },
+ created() {
+ // 鑾峰彇鏃ュ巻鏂规硶瀹炰緥
+ this.cale = new Calendar({
+ // date: new Date(),
+ selected: this.selected,
+ startDate: this.startDate,
+ endDate: this.endDate,
+ range: this.range,
+ })
+ // 閫変腑鏌愪竴澶�
+ // this.cale.setDate(this.date)
+ this.init(this.date)
+ // this.setDay
+ },
+ methods: {
+ // 鍙栨秷绌块��
+ clean() {},
+ bindDateChange(e) {
+ const value = e.detail.value + '-1'
+ console.log(this.cale.getDate(value));
+ this.setDate(value)
+ },
+ /**
+ * 鍒濆鍖栨棩鏈熸樉绀�
+ * @param {Object} date
+ */
+ init(date) {
+ this.cale.setDate(date)
+ this.weeks = this.cale.weeks
+ this.nowDate = this.calendar = this.cale.getInfo(date)
+ },
+ /**
+ * 鎵撳紑鏃ュ巻寮圭獥
+ */
+ open() {
+ // 寮圭獥妯″紡骞朵笖娓呯悊鏁版嵁
+ if (this.clearDate && !this.insert) {
+ this.cale.cleanMultipleStatus()
+ // this.cale.setDate(this.date)
+ this.init(this.date)
+ }
+ this.show = true
+ this.$nextTick(() => {
+ setTimeout(() => {
+ this.aniMaskShow = true
+ }, 50)
+ })
+ },
+ /**
+ * 鍏抽棴鏃ュ巻寮圭獥
+ */
+ close() {
+ this.aniMaskShow = false
+ this.$nextTick(() => {
+ setTimeout(() => {
+ this.show = false
+ this.$emit('close')
+ }, 300)
+ })
+ },
+ /**
+ * 纭鎸夐挳
+ */
+ confirm() {
+ this.setEmit('confirm')
+ this.close()
+ },
+ /**
+ * 鍙樺寲瑙﹀彂
+ */
+ change() {
+ if (!this.insert) return
+ this.setEmit('change')
+ },
+ /**
+ * 閫夋嫨鏈堜唤瑙﹀彂
+ */
+ monthSwitch() {
+ let {
+ year,
+ month
+ } = this.nowDate
+ this.$emit('monthSwitch', {
+ year,
+ month: Number(month)
+ })
+ },
+ /**
+ * 娲惧彂浜嬩欢
+ * @param {Object} name
+ */
+ setEmit(name) {
+ let {
+ year,
+ month,
+ date,
+ fullDate,
+ lunar,
+ extraInfo
+ } = this.calendar
+ this.$emit(name, {
+ range: this.cale.multipleStatus,
+ year,
+ month,
+ date,
+ fulldate: fullDate,
+ lunar,
+ extraInfo: extraInfo || {}
+ })
+ },
+ /**
+ * 閫夋嫨澶╄Е鍙�
+ * @param {Object} weeks
+ */
+ choiceDate(weeks) {
+ if (weeks.disable) return
+ this.calendar = weeks
+ // 璁剧疆澶氶��
+ this.cale.setMultiple(this.calendar.fullDate)
+ this.weeks = this.cale.weeks
+ this.change()
+ },
+ /**
+ * 鍥炲埌浠婂ぉ
+ */
+ backtoday() {
+ console.log(this.cale.getDate(new Date()).fullDate);
+ let date = this.cale.getDate(new Date()).fullDate
+ // this.cale.setDate(date)
+ this.init(date)
+ this.change()
+ },
+ /**
+ * 涓婁釜鏈�
+ */
+ pre() {
+ const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
+ this.setDate(preDate)
+ this.monthSwitch()
+
+ },
+ /**
+ * 涓嬩釜鏈�
+ */
+ next() {
+ const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
+ this.setDate(nextDate)
+ this.monthSwitch()
+ },
+ /**
+ * 璁剧疆鏃ユ湡
+ * @param {Object} date
+ */
+ setDate(date) {
+ this.cale.setDate(date)
+ this.weeks = this.cale.weeks
+ this.nowDate = this.cale.getInfo(date)
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ $uni-bg-color-mask: rgba($color: #000000, $alpha: 0.4);
+ $uni-border-color: #EDEDED;
+ $uni-text-color: #333;
+ $uni-bg-color-hover:#f1f1f1;
+ $uni-font-size-base:14px;
+ $uni-text-color-placeholder: #808080;
+ $uni-color-subtitle: #555555;
+ $uni-text-color-grey:#999;
+ .uni-calendar {
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ flex-direction: column;
+ }
+
+ .uni-calendar__mask {
+ position: fixed;
+ bottom: 0;
+ top: 0;
+ left: 0;
+ right: 0;
+ background-color: $uni-bg-color-mask;
+ transition-property: opacity;
+ transition-duration: 0.3s;
+ opacity: 0;
+ /* #ifndef APP-NVUE */
+ z-index: 99;
+ /* #endif */
+ }
+
+ .uni-calendar--mask-show {
+ opacity: 1
+ }
+
+ .uni-calendar--fixed {
+ position: fixed;
+ /* #ifdef APP-NVUE */
+ bottom: 0;
+ /* #endif */
+ left: 0;
+ right: 0;
+ transition-property: transform;
+ transition-duration: 0.3s;
+ transform: translateY(460px);
+ /* #ifndef APP-NVUE */
+ bottom: calc(var(--window-bottom));
+ z-index: 99;
+ /* #endif */
+ }
+
+ .uni-calendar--ani-show {
+ transform: translateY(0);
+ }
+
+ .uni-calendar__content {
+ background-color: #fff;
+ }
+
+ .uni-calendar__header {
+ position: relative;
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ height: 50px;
+ border-bottom-color: $uni-border-color;
+ border-bottom-style: solid;
+ border-bottom-width: 1px;
+ }
+
+ .uni-calendar--fixed-top {
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ flex-direction: row;
+ justify-content: space-between;
+ border-top-color: $uni-border-color;
+ border-top-style: solid;
+ border-top-width: 1px;
+ }
+
+ .uni-calendar--fixed-width {
+ width: 50px;
+ // padding: 0 15px;
+ }
+
+ .uni-calendar__backtoday {
+ position: absolute;
+ right: 0;
+ top: 25rpx;
+ padding: 0 5px;
+ padding-left: 10px;
+ height: 25px;
+ line-height: 25px;
+ font-size: 12px;
+ border-top-left-radius: 25px;
+ border-bottom-left-radius: 25px;
+ color: $uni-text-color;
+ background-color: $uni-bg-color-hover;
+ }
+
+ .uni-calendar__header-text {
+ text-align: center;
+ width: 100px;
+ font-size: $uni-font-size-base;
+ color: $uni-text-color;
+ }
+
+ .uni-calendar__header-btn-box {
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ width: 50px;
+ height: 50px;
+ }
+
+ .uni-calendar__header-btn {
+ width: 10px;
+ height: 10px;
+ border-left-color: $uni-text-color-placeholder;
+ border-left-style: solid;
+ border-left-width: 2px;
+ border-top-color: $uni-color-subtitle;
+ border-top-style: solid;
+ border-top-width: 2px;
+ }
+
+ .uni-calendar--left {
+ transform: rotate(-45deg);
+ }
+
+ .uni-calendar--right {
+ transform: rotate(135deg);
+ }
+
+
+ .uni-calendar__weeks {
+ position: relative;
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ flex-direction: row;
+ }
+
+ .uni-calendar__weeks-item {
+ flex: 1;
+ }
+
+ .uni-calendar__weeks-day {
+ flex: 1;
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ height: 45px;
+ border-bottom-color: #F5F5F5;
+ border-bottom-style: solid;
+ border-bottom-width: 1px;
+ }
+
+ .uni-calendar__weeks-day-text {
+ font-size: 14px;
+ }
+
+ .uni-calendar__box {
+ position: relative;
+ }
+
+ .uni-calendar__box-bg {
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ }
+
+ .uni-calendar__box-bg-text {
+ font-size: 200px;
+ font-weight: bold;
+ color: $uni-text-color-grey;
+ opacity: 0.1;
+ text-align: center;
+ /* #ifndef APP-NVUE */
+ line-height: 1;
+ /* #endif */
+ }
+</style>
--
Gitblit v1.9.3