Skip to content

Y
yanshouyi-Minipro
Commit ee270356 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

蓝牙公公处理 页面单独调用write处理

parent df7a059a
Hide whitespace changes
Inline Side-by-side
Showing with 180 additions and 1315 deletions
api/operatorLog.js 0 → 100644
View file @ ee270356
import request from '@/common/request.js'
export function getDataList(data) { // 获取下拉列表数据
return request({
url: '/operation/getList',
method: 'get',
data
})
}
export function getselectList4productName(data) { // 获取下拉列表数据
return request({
url: '/product/getList',
method: 'get',
data
})
}
export function getselectList4tester(data) { // 获取下拉列表数据
return request({
url: '/product/getList',
method: 'post',
data
})
}
export function getDict(data) { // 获取下拉列表数据
return request({
url: '/system/dict/data/type/'+data.type,
method: 'get',
})
}
common/mixin.js
View file @ ee270356
...@@ -33,9 +33,9 @@ const blueToothMixin = { ...@@ -33,9 +33,9 @@ const blueToothMixin = {
onUnload: function() { onUnload: function() {
// if (this.connected) { // if (this.connected) {
this.leavePageFlag = true this.leavePageFlag = true
this.stopLink({ // this.stopLink({
showTip: false // showTip: false
}) // })
commonStateCodeDeal(2, 'onUnload=>离开页面') commonStateCodeDeal(2, 'onUnload=>离开页面')
// } // }
}, },
...@@ -298,9 +298,28 @@ const blueToothMixin = { ...@@ -298,9 +298,28 @@ const blueToothMixin = {
const res = await blueToother.notifyBLECharacteristicValueChange(deviceId, serviceId, const res = await blueToother.notifyBLECharacteristicValueChange(deviceId, serviceId,
characteristicId, state) characteristicId, state)
this.connected = true this.connected = true
uni.setStorageSync('connected', true)
this.setNavBarTitle('【Notify】开启成功') this.setNavBarTitle('【Notify】开启成功')
this.readyRec = true; this.readyRec = true;
uni.hideLoading() uni.hideLoading()
this.gosend('POWER')
/**
* 024-12-27新增逻辑：
* 1、蓝牙连接成功后弹窗，点击确认调转页面
* 2、发送指令，获取小球id与电量
*/
showCustomModal({
content: '蓝牙已连接，是否跳转首页',
showCancel: true,
success: ()=> {
uni.reLaunch({
url: '/pages/home/home',
});
},
})
} catch (res) { } catch (res) {
this.setConnectState(false) this.setConnectState(false)
commonStateCodeDeal(res.errCode || res, commonStateCodeDeal(res.errCode || res,
...@@ -385,6 +404,9 @@ const blueToothMixin = { ...@@ -385,6 +404,9 @@ const blueToothMixin = {
// 设置测试值： // 设置测试值：
const recBlueResData = JSON.parse(recStr) const recBlueResData = JSON.parse(recStr)
console.log('设备检测值', recBlueResData)
console.info('获取小球id和电量', recBlueResData)
// console.log('设备检测值：', recBlueResData.angle) // console.log('设备检测值：', recBlueResData.angle)
this.form.realTestInclination = recBlueResData.angle this.form.realTestInclination = recBlueResData.angle
this.form.realTestHoleDepth = recBlueResData.lenth this.form.realTestHoleDepth = recBlueResData.lenth
...@@ -447,7 +469,6 @@ const blueToothMixin = { ...@@ -447,7 +469,6 @@ const blueToothMixin = {
// title: '已停止测量', // title: '已停止测量',
// }) // })
this.btnLoading = false this.btnLoading = false
this.saveFormData2Local && this.saveFormData2Local()
} }
}, },
fail: (res) => { fail: (res) => {
......
common/util.js
View file @ ee270356
...@@ -248,7 +248,6 @@ function getCurrentTime() { ...@@ -248,7 +248,6 @@ function getCurrentTime() {
// 拼接年月日时分格式的字符串 // 拼接年月日时分格式的字符串
let formattedTime = `${year}-${month}-${date} ${hours}:${minutes}`; let formattedTime = `${year}-${month}-${date} ${hours}:${minutes}`;
return formattedTime
} }
function ab2Str(arrayBuffer) { function ab2Str(arrayBuffer) {
......
components/miku-calendar/mikuCalendar.vue deleted 100644 → 0
View file @ df7a059a
<template>
<view class="calendar-area" :style="{background:calendarBg,borderRadius:calendarBorderRadius}">
<!-- 自定义日历头部 -->
<view class="calendar-head flex space-between align-items">
<!-- 跳转上月的箭头 -->
<view v-if="showArrow === true"
class="flex align-items calendar-arrow"
:style="{height: arrowHeight + 'px'}"
@click="jumpToLastMonth">
<view :style="{width: arrowSize +'px',height: arrowSize +'px',borderWidth: '1px 1px 0 0',borderColor:arrowColor}" :class="'arrow-style arrow-left-transform'"></view>
</view>
<!-- 跳转上月的文字 -->
<view v-else @click="jumpToLastMonth" class="pre-month" :style="{color: themeColor}">上月</view>
<!-- 日历头部显示当前展示月份 -->
<view :style="{color: themeColor}">{{new Date(benchmark).getFullYear()}}年{{ new Date(benchmark).getMonth() + 1}}月</view>
<!-- 跳转下月的箭头 -->
<view v-if="showArrow === true"
class="flex align-items calendar-arrow"
:style="{height: arrowHeight + 'px'}"
@click="jumpToNextMonth">
<view :style="{width: arrowSize +'px',height: arrowSize +'px',borderWidth: '1px 1px 0 0',borderColor:arrowColor}" :class="'arrow-style arrow-right-transform'"></view>
</view>
<!-- 跳转下月的文字 -->
<view v-else @click="jumpToNextMonth" class="next-month" :style="{color: themeColor}">下月</view>
</view>
<!-- 自定义日历 周一...周日 抬头 -->
<view class="flex flex-wrap">
<view v-for="(i,index) in weekText" :key="index" class="flex-class" :style="{width: 100/7 +'%',height:gridHeight+'px'}">
<view :style="{color: themeColor}">{{ i }}</view>
</view>
</view>
<!-- 自定义日历日期格子 模式单选 -->
<view class="flex flex-wrap" v-if="mode === 'date'" style="padding-bottom: 10px">
<swiper :current="swiperCurrent" @change="swiperChange" class="swiper" :style="{width:'100%',height: gridHeight*6+'px'}" :circular="true" :indicator-dots="false" :autoplay="false" :duration="500">
<swiper-item style="width: 100%">
<view style="width: 100%" class="flex flex-wrap">
<view v-for="(item,index) in month0" :key="index" :style="{ width: 100/7 +'%', height:gridHeight +'px' }" class="flex-class1">
<!-- 日期格子 模式单选 符合当月的格子 -->
<view v-if="judgeShowType(0,item.date)" class="flex-class1 flex-wrap" style="width: 100%">
<!-- judge(day) === true 选中单个日期 -->
<view class="flex-class1 flex-wrap relative"
:style="{ width:'100%', height:gridHeight+'px' }"
v-if="judge(item.date)"
@click="clickDay(item.date)"
>
<view class="flex-class">
<view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', borderRadius:dayWidth/2 +'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}">{{ new Date(item.date).getDate()}}</view>
</view>
<view class="bottom-dots absolute" v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 2px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color}"></view>
</view>
</view>
<view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: item.color}">{{ item.info }}</view>
</view>
<!-- judge(day) === false 没选中的日期 -->
<view :style="{ width:'100%',height:gridHeight + 'px'}"
class="flex-class1 flex-wrap day-normal-dark relative"
v-else
@click="clickDay(item.date)"
>
<view class="flex-class">
<view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', borderRadius:dayWidth/2 +'px', fontSize: fontSize +'px'}">{{ new Date(item.date).getDate()}}</view>
</view>
<view class="bottom-dots absolute" v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 2px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color}"></view>
</view>
</view>
<view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: item.color}">{{ item.info }}</view>
</view>
<!-- -->
</view>
<!-- 日期格子 模式单选 不符合当月的格子 -->
<view v-else :style="{fontSize: fontSize +'px'}" class="flex-class" style="width: 100%">
<view :style="{width:'100%',height:gridHeight+'px'}"
class="flex-class1 day-normal fontColor-normal relative"
@click="clickDayNotThisMonth(item.date)"
>
<view class="flex-class">
<view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', fontSize: fontSize +'px'}">{{ new Date(item.date).getDate()}}</view>
</view>
<view class="bottom-dots absolute" v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 2px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: '#bbb'}"></view>
</view>
</view>
<view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: '#bbb'}">{{ item.info }}</view>
</view>
</view>
</view>
</view>
</swiper-item>
<swiper-item>
<view style="width: 100%" class="flex flex-wrap">
<view v-for="(item,index) in month1" :key="index" :style="{ width: 100/7 +'%', height:gridHeight +'px' }" class="flex-class1">
<!-- 日期格子 模式单选 符合当月的格子 -->
<view v-if="judgeShowType(1,item.date)" class="flex-class1 flex-wrap" style="width: 100%">
<!-- judge(day) === true 选中单个日期 -->
<view class="flex-class1 flex-wrap relative"
:style="{ width:'100%', height:gridHeight+'px' }"
v-if="judge(item.date)"
@click="clickDay(item.date)"
>
<view class="flex-class">
<view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', borderRadius:dayWidth/2 +'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}">
{{ new Date(item.date).getDate()}}
</view>
</view>
<view class="bottom-dots absolute" v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 2px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color}"></view>
</view>
</view>
<view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: item.color}">{{ item.info }}</view>
</view>
<!-- judge(day) === false 没选中的日期 -->
<view :style="{ width:'100%',height:gridHeight + 'px'}"
class="flex-class1 flex-wrap day-normal-dark relative"
v-else
@click="clickDay(item.date)"
>
<view class="flex-class">
<view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', borderRadius:dayWidth/2 +'px', fontSize: fontSize +'px'}">
{{ new Date(item.date).getDate()}}
</view>
</view>
<view class="bottom-dots absolute" v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 2px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color}"></view>
</view>
</view>
<view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: item.color}">{{ item.info }}</view>
</view>
<!-- -->
</view>
<!-- 日期格子 模式单选 不符合当月的格子 -->
<view v-else :style="{fontSize: fontSize +'px'}" class="flex-class" style="width: 100%">
<view :style="{width:'100%',height:gridHeight+'px'}"
class="flex-class1 day-normal fontColor-normal relative"
@click="clickDayNotThisMonth(item.date)"
>
<view class="flex-class">
<view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', fontSize: fontSize +'px'}">
{{ new Date(item.date).getDate()}}
</view>
</view>
<view class="bottom-dots absolute" v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 2px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: '#bbb'}"></view>
</view>
</view>
<view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: '#bbb'}">{{ item.info }}</view>
</view>
</view>
</view>
</view>
</swiper-item>
<swiper-item>
<view style="width: 100%" class="flex flex-wrap">
<view v-for="(item,index) in month2" :key="index" :style="{ width: 100/7 +'%', height:gridHeight +'px' }" class="flex-class1">
<!-- 日期格子 模式单选 符合当月的格子 -->
<view v-if="judgeShowType(2,item.date)" class="flex-class1 flex-wrap" style="width: 100%">
<!-- judge(day) === true 选中单个日期 -->
<view class="flex-class1 flex-wrap relative"
:style="{ width:'100%', height:gridHeight+'px' }"
v-if="judge(item.date)"
@click="clickDay(item.date)"
>
<view class="flex-class">
<view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', borderRadius:dayWidth/2 +'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}">
{{ new Date(item.date).getDate()}}
</view>
</view>
<view class="bottom-dots absolute" v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 2px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color}"></view>
</view>
</view>
<view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: item.color}">{{ item.info }}</view>
</view>
<!-- judge(day) === false 没选中的日期 -->
<view :style="{ width:'100%',height:gridHeight + 'px'}"
class="flex-class1 flex-wrap day-normal-dark relative"
v-else
@click="clickDay(item.date)"
>
<view class="flex-class">
<view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', borderRadius:dayWidth/2 +'px', fontSize: fontSize +'px'}">
{{ new Date(item.date).getDate()}}
</view>
</view>
<view class="bottom-dots absolute" v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 2px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color}"></view>
</view>
</view>
<view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: item.color}">{{ item.info }}</view>
</view>
<!-- -->
</view>
<!-- 日期格子 模式单选 不符合当月的格子 -->
<view v-else :style="{fontSize: fontSize +'px'}" class="flex-class" style="width: 100%">
<view :style="{width:'100%',height:gridHeight+'px'}"
class="flex-class1 day-normal fontColor-normal relative"
@click="clickDayNotThisMonth(item.date)"
>
<view class="flex-class">
<view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', fontSize: fontSize +'px'}">{{ new Date(item.date).getDate()}}</view>
</view>
<view class="bottom-dots absolute" v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 2px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: '#bbb'}"></view>
</view>
</view>
<view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: '#bbb'}">{{ item.info }}</view>
</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
</view>
<!-- 自定义日历日期格子 模式时间范围 -->
<view class="flex flex-wrap" v-if="mode === 'dateRange'" style="padding-bottom: 10px">
<swiper :current="swiperCurrent" @change="swiperChange" class="swiper" :style="{width:'100%',height: gridHeight*6+'px'}" :circular="true" :indicator-dots="false" :autoplay="false" :duration="500">
<swiper-item style="width: 100%">
<view style="width: 100%" class="flex flex-wrap">
<view v-for="(item,index) in month0" :key="index" :style="{width: 100/7 +'%',height:gridHeight +'px'}" class="flex-class1">
<!-- 本月的展示日期 -->
<view :class="'flex-class1 flex-wrap '" v-if="judgeShowType(0,item.date) " style="width: 100%">
<!-- judge(day) === 1 选中日期范围开头 已选结尾-->
<view class="flex-class flex-wrap relative"
:style="{width: '100%',height: gridHeight+'px',
background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
v-if="judge(item.date) === 1"
@click="clickDay(item.date)"
>
<view class="grid-text">{{ new Date(item.date).getDate()}}</view>
<view class="start-text absolute">
<view class="bottom-dots-else" v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 2px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
</view>
</view>
<view class="bottom-dots-else" v-if="item.type==='text'" :style="{color: item.color,marginRight:'10rpx'}">{{ item.info }}</view>
开始
</view>
</view>
<!-- judge(day) === 3 选中日期范围中间区域-->
<view class="flex-class"
:style="{width: '100%',height: gridHeight+'px',borderRadius:'0 0 0 0',
background:'#6161f921', color:dayBg,fontSize: fontSize +'px',position:'relative'}"
v-else-if="judge(item.date) === 3"
@click="clickDay(item.date)">
<view class="grid-text">{{ new Date(item.date).getDate()}}</view>
<view class="bottom-dots absolute" v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 0px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginTop:'-10rpx'}"></view>
</view>
</view>
<view class="bottom-dots absolute" v-if="item.type==='text'" :style="{color: item.color,bottom:'0!important'}">{{ item.info }}</view>
</view>
<!-- judge(day) === 2 选中日期范围结尾-->
<view class="flex-class flex-wrap relative"
:style="{width: '100%',height: gridHeight+'px',
background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
v-else-if="judge(item.date) === 2"
@click="clickDay(item.date)">
<view class="grid-text">{{ new Date(item.date).getDate()}}</view>
<view class="start-text absolute">
<view class="bottom-dots-else" v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 2px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
</view>
</view>
<view class="bottom-dots-else" v-if="item.type==='text'" :style="{color: item.color,marginRight:'10rpx'}">{{ item.info }}</view>
结束
</view>
</view>
<!-- judge(day) === 5 选中日期范围开头 未选结尾-->
<view class="flex-class flex-wrap relative"
:style="{width: '100%',height:gridHeight+'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
v-else-if="judge(item.date) === 5"
@click="clickDay(item.date)">
<view class="grid-text">{{ new Date(item.date).getDate()}}</view>
<view class="start-text absolute">
<view class="bottom-dots-else" v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 2px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
</view>
</view>
<view class="bottom-dots-else" v-if="item.type==='text'" :style="{color: item.color,marginRight:'10rpx'}">{{ item.info }}</view>
开始
</view>
</view>
<view class="flex-class flex-wrap relative"
:style="{width: '100%',height:gridHeight+'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
v-else-if="judge(item.date) === 6"
@click="clickDay(item.date)">
<view class="grid-text" style="display: flex;align-items: center;justify-content: center">
{{ new Date(item.date).getDate()}}
<view class="bottom-dots-else" v-if="item.type==='text'" :style="{color: item.color,marginLeft:'10rpx'}">{{ item.info }}</view>
</view>
<view class="start-text absolute">
<view class="bottom-dots-else" v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 2px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
</view>
</view>
开始/结束
</view>
</view>
<view :style="{ width:'100%',height:gridHeight+'px',fontSize: fontSize +'px',position: 'relative' }"
class="flex-class day-normal-dark"
v-else
@click="clickDay(item.date)"
>
<view class="flex-class">
<view class="flex-class" :style="{width:dayWidth + 'px',height:dayWidth + 'px', borderRadius:dayWidth/2 +'px', fontSize: fontSize +'px'}">
{{ new Date(item.date).getDate()}}
</view>
</view>
<view class="bottom-dots absolute" v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 0px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginTop: '-10rpx'}"></view>
</view>
</view>
<view class="bottom-texts absolute" v-if="item.type==='text'" :style="{color: item.color}">{{ item.info }}</view>
</view>
</view>
<!-- 它月的展示日期 -->
<view v-else :style="{fontSize: fontSize +'px',position:'relative'}" :class="judge(item.date) === 3?'flex-class':'flex-class '" style="width: 100%">
<view :style="{width:'100%',height:gridHeight+'px',borderRadius:dayWidth/2 +'px',fontSize: fontSize +'px'}"
:class="judge(item.date) === 3? 'flex-class day-normal fontColor-normal':'flex-class day-normal fontColor-normal'"
@click="clickDayNotThisMonth(item.date)"
>
{{ new Date(item.date).getDate()}}
</view>
<view class="bottom-dots absolute " v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 0px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: 'rgb(187,187,187)',marginTop: '-10rpx'}"></view>
</view>
</view>
<view class="bottom-dots absolute" v-if="item.type==='text'" :style="{color: 'rgb(187,187,187)',bottom:'0!important'}">{{ item.info }}</view>
</view>
</view>
</view>
</swiper-item>
<swiper-item style="width: 100%">
<view style="width: 100%" class="flex flex-wrap">
<view v-for="(item,index) in month1" :key="index" :style="{width: 100/7 +'%',height:gridHeight +'px'}" class="flex-class1">
<!-- 本月的展示日期 -->
<view :class="'flex-class1 flex-wrap '" v-if="judgeShowType(1,item.date)" style="width: 100%">
<!-- judge(day) === 1 选中日期范围开头 已选结尾-->
<view class="flex-class flex-wrap relative"
:style="{width: '100%',height: gridHeight+'px',
background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
v-if="judge(item.date) === 1"
@click="clickDay(item.date)"
>
<view class="grid-text">{{ new Date(item.date).getDate()}}</view>
<view class="start-text absolute">
<view class="bottom-dots-else" v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 2px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
</view>
</view>
<view class="bottom-dots-else" v-if="item.type==='text'" :style="{color: item.color,marginRight:'10rpx'}">{{ item.info }}</view>
开始
</view>
</view>
<!-- judge(day) === 3 选中日期范围中间区域-->
<view class="flex-class"
:style="{width: '100%',height: gridHeight+'px',borderRadius:'0 0 0 0',
background:'#6161f921', color:dayBg,fontSize: fontSize +'px',position:'relative'}"
v-else-if="judge(item.date) === 3"
@click="clickDay(item.date)">
<view class="grid-text">{{ new Date(item.date).getDate()}}</view>
<view class="bottom-dots absolute" v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 0px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginTop:'-10rpx'}"></view>
</view>
</view>
<view class="bottom-dots absolute" v-if="item.type==='text'" :style="{color: item.color,bottom:'0!important'}">{{ item.info }}</view>
</view>
<!-- judge(day) === 2 选中日期范围结尾-->
<view class="flex-class flex-wrap relative"
:style="{width: '100%',height: gridHeight+'px',
background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
v-else-if="judge(item.date) === 2"
@click="clickDay(item.date)">
<view class="grid-text">{{ new Date(item.date).getDate()}}</view>
<view class="start-text absolute">
<view class="bottom-dots-else" v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 2px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
</view>
</view>
<view class="bottom-dots-else" v-if="item.type==='text'" :style="{color: item.color,marginRight:'10rpx'}">{{ item.info }}</view>
结束
</view>
</view>
<!-- judge(day) === 5 选中日期范围开头 未选结尾-->
<view class="flex-class flex-wrap relative"
:style="{width: '100%',height:gridHeight+'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
v-else-if="judge(item.date) === 5"
@click="clickDay(item.date)">
<view class="grid-text">{{ new Date(item.date).getDate()}}</view>
<view class="start-text absolute">
<view class="bottom-dots-else" v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 2px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
</view>
</view>
<view class="bottom-dots-else" v-if="item.type==='text'" :style="{color: item.color,marginRight:'10rpx'}">{{ item.info }}</view>
开始
</view>
</view>
<view class="flex-class flex-wrap relative"
:style="{width: '100%',height:gridHeight+'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
v-else-if="judge(item.date) === 6"
@click="clickDay(item.date)">
<view class="grid-text" style="display: flex;align-items: center;justify-content: center">{{ new Date(item.date).getDate()}}
<view class="bottom-dots-else" v-if="item.type==='text'" :style="{color: item.color,marginLeft:'10rpx'}">{{ item.info }}</view>
</view>
<view class="start-text absolute">
<view class="bottom-dots-else" v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 2px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
</view>
</view>
开始/结束
</view>
</view>
<view :style="{ width:'100%',height:gridHeight+'px',fontSize: fontSize +'px',position:'relative' }"
class="flex-class day-normal-dark"
v-else
@click="clickDay(item.date)"
>
<view class="grid-text">{{ new Date(item.date).getDate()}}</view>
<view class="bottom-dots absolute" v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 0px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginTop:'-10rpx'}"></view>
</view>
</view>
<view class="bottom-dots absolute" v-if="item.type==='text'" :style="{color: item.color,bottom:'0!important'}">{{ item.info }}</view>
</view>
</view>
<!-- 它月的展示日期 -->
<view v-else :style="{fontSize: fontSize +'px',position:'relative'}" :class="judge(item.date) === 3?'flex-class':'flex-class '" style="width: 100%">
<view :style="{width:'100%',height:gridHeight+'px',borderRadius:dayWidth/2 +'px',fontSize: fontSize +'px'}"
:class="judge(item.date) === 3? 'flex-class day-normal fontColor-normal':'flex-class day-normal fontColor-normal'"
@click="clickDayNotThisMonth(item.date)"
>
{{ new Date(item.date).getDate()}}
</view>
<view class="bottom-dots absolute" v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 0px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: 'rgb(187,187,187)',marginTop:'-10rpx'}"></view>
</view>
</view>
<view class="bottom-dots absolute" v-if="item.type==='text'" :style="{color: 'rgb(187,187,187)',bottom:'0!important'}">{{ item.info }}</view>
</view>
<!-- <view v-else :style="{fontSize: fontSize +'px'}" :class="'flex-class '" style="width: 100%">
<view :style="{width:'100%',height:gridHeight+'px',borderRadius:dayWidth/2 +'px',fontSize: fontSize +'px'}"
:class="judge(item.date) === 3? 'flex-class day-normal fontColor bg':'flex-class day-normal fontColor-normal'"
@click="clickDayNotThisMonth(item.date)"
>
{{ new Date(day).getDate()}}
</view>
</view>-->
</view>
</view>
</swiper-item>
<swiper-item style="width: 100%">
<view style="width: 100%" class="flex flex-wrap">
<view v-for="(item,index) in month2" :key="index" :style="{width: 100/7 +'%',height:gridHeight +'px'}" class="flex-class1">
<!-- 本月的展示日期 -->
<view :class="'flex-class1 flex-wrap '" v-if="judgeShowType(2,item.date)" style="width: 100%">
<!-- judge(day) === 1 选中日期范围开头 已选结尾-->
<view class="flex-class flex-wrap relative"
:style="{width: '100%',height: gridHeight+'px',
background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
v-if="judge(item.date) === 1"
@click="clickDay(item.date)"
>
<view class="grid-text">{{ new Date(item.date).getDate()}}</view>
<view class="start-text absolute">
<view class="bottom-dots-else" v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 2px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
</view>
</view>
<view class="bottom-dots-else" v-if="item.type==='text'" :style="{color: item.color,marginRight:'10rpx'}">{{ item.info }}</view>
开始
</view>
</view>
<!-- judge(day) === 3 选中日期范围中间区域-->
<view class="flex-class"
:style="{width: '100%',height: gridHeight+'px',borderRadius:'0 0 0 0',
background:'#6161f921', color:dayBg,fontSize: fontSize +'px',position:'relative'}"
v-else-if="judge(item.date) === 3"
@click="clickDay(item.date)">
<view class="grid-text">{{ new Date(item.date).getDate()}}</view>
<view class="bottom-dots absolute" v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 0px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginTop:'-10rpx'}"></view>
</view>
</view>
<view class="bottom-dots absolute" v-if="item.type==='text'" :style="{color: item.color,bottom:'0!important'}">{{ item.info }}</view>
</view>
<!-- judge(day) === 2 选中日期范围结尾-->
<view class="flex-class flex-wrap relative"
:style="{width: '100%',height: gridHeight+'px',
background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
v-else-if="judge(item.date) === 2"
@click="clickDay(item.date)">
<view class="grid-text">{{ new Date(item.date).getDate()}}</view>
<view class="start-text absolute">
<view class="bottom-dots-else" v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 2px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
</view>
</view>
<view class="bottom-dots-else" v-if="item.type==='text'" :style="{color: item.color,marginRight:'10rpx'}">{{ item.info }}</view>
结束
</view>
</view>
<!-- judge(day) === 5 选中日期范围开头 未选结尾-->
<view class="flex-class flex-wrap relative"
:style="{width: '100%',height:gridHeight+'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
v-else-if="judge(item.date) === 5"
@click="clickDay(item.date)">
<view class="grid-text">{{ new Date(item.date).getDate()}}</view>
<view class="start-text absolute">
<view class="bottom-dots-else" v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 2px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
</view>
</view>
<view class="bottom-dots-else" v-if="item.type==='text'" :style="{color: item.color,marginRight:'10rpx'}">{{ item.info }}</view>
开始
</view>
</view>
<view class="flex-class flex-wrap relative"
:style="{width: '100%',height:gridHeight+'px',background:dayBg, color:dayColor,fontSize: fontSize +'px'}"
v-else-if="judge(item.date) === 6"
@click="clickDay(item.date)">
<view class="grid-text" style="display: flex;align-items: center;justify-content: center">
{{ new Date(item.date).getDate()}}
<view class="bottom-dots-else" v-if="item.type==='text'" :style="{color: item.color,marginLeft:'10rpx'}">{{ item.info }}</view></view>
<view class="start-text absolute">
<view class="bottom-dots-else" v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 2px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginRight:'10rpx'}"></view>
</view>
</view>
开始/结束
</view>
</view>
<view :style="{ width:'100%',height:gridHeight+'px',fontSize: fontSize +'px',position:'relative' }"
class="flex-class day-normal-dark"
v-else
@click="clickDay(item.date)"
>
<view class="grid-text">{{ new Date(item.date).getDate()}}</view>
<view class="bottom-dots absolute" v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 0px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: item.color,marginTop:'-10rpx'}"></view>
</view>
</view>
<view class="bottom-dots absolute" v-if="item.type==='text'" :style="{color: item.color,bottom:'0!important'}">{{ item.info }}</view>
</view>
</view>
<!-- 它月的展示日期 -->
<view v-else :style="{fontSize: fontSize +'px',position:'relative'}" :class="judge(item.date) === 3?'flex-class':'flex-class '" style="width: 100%">
<view :style="{width:'100%',height:gridHeight+'px',borderRadius:dayWidth/2 +'px',fontSize: fontSize +'px'}"
:class="judge(item.date) === 3? 'flex-class day-normal fontColor-normal':'flex-class day-normal fontColor-normal'"
@click="clickDayNotThisMonth(item.date)"
>
{{ new Date(item.date).getDate()}}
</view>
<view class="bottom-dots absolute" v-if="item.type==='dot'">
<view style="width: 100%;padding-top: 0px" class="flex-class1">
<view :style="{width: '4px',height: '4px',borderRadius: '2px',background: 'rgb(187,187,187)',marginTop:'-10rpx'}"></view>
</view>
</view>
<view class="bottom-dots absolute" v-if="item.type==='text'" :style="{color: 'rgb(187,187,187)',bottom:'0!important'}">{{ item.info }}</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
export default {
name: "customCalendar",
props:{
date:{ // 父组件传值 选中的单个日期
type: Number,
default: null
},
dateRange:{ // 父组件传值 选中的日期范围数组
type:Array,
default: function () {
return [];
}
},
dateRangeMax:{ // 连选天数最大值
type: Number,
default: null
},
calendarBg:{ // 日历组件整体背景色，默认白色
type:String,
default:'#fff'
},
calendarBorderRadius:{
type:String,
default:'20rpx'
},
showArrow:{ // 是否展示上下月的跳转箭头,false时展示文字
type:Boolean,
default:true
},
arrowSize:{ // 上下月跳转箭头的尺寸大小
type: Number,
default: 8
},
arrowColor:{ // 上下月跳转箭头的颜色
type:String,
default:'#3a3a3a'
},
arrowHeight:{
type: Number,
default: 25
},
gridHeight:{ // 日期格子高度
type: Number,
default: 42
},
themeColor:{
type: String,
default:'rgb(100,124,203)'
},
dayWidth:{ // 选中日期的圆圈宽高
type: Number,
default: 30
},
dayBg:{ // 选中日期的圆背景色
type: String,
default: '#6161F9'
},
dayColor:{ // 选中日期的圆文字颜色
type: String,
default: '#fff'
},
fontSize:{ // 日期格子文字的大小
type: Number,
default: 13.5
},
mode:{
type:String,
default:'date'
},
selected:{
type:Array,
default: function () {
return [];
}
}
},
data(){
return{
benchmark: new Date().getTime(), // 基准点 时间戳
sonDate: new Date().getTime(), // 选中单个日期
sonDateRange:[], // 选中日期范围
dotsList:[], // 打点数组
month: [], // 以基准点调整的月份日历展示数组（增加打点）
month0: [], // 以基准点调整的月份日历展示数组（增加打点）
month1: [], // 以基准点调整的月份日历展示数组（增加打点）
month2: [], // 以基准点调整的月份日历展示数组（增加打点）
// weekText: ['一','二','三','四','五','六','日'], // 周抬头
weekText: ['一','二','三','四','五','六','日'], // 周抬头
swiperCurrent:1,
}
},
watch:{
date:{ // 父组件绑定的单个日历值传给sonDate
handler(val){
// console.log('父组件绑定的单个日历值传给sonDate',val)
if(this.mode === 'date'){
if(val !== 0 && val !== ''){
this.sonDate = new Date(val).getTime()
this.benchmark = new Date(val).getTime() // 校准基准点
// console.log('选中日期与显示保持一致：',this.formatDateTime(this.sonDate,2))
}else{
this.sonDate = new Date().getTime()
this.benchmark = new Date().getTime() // 校准基准点
// console.log('选中日期初始化：',this.formatDateTime(this.sonDate,2))
}
this.dotsList = this.selected
this.adjustCalendarDate() // 根据该日期计算当月
}
},
deep:true,
immediate: true
},
dateRange:{
handler(val) {
if(this.mode === 'dateRange'){
// console.log('父组件绑定的日期数值传给sonDateRange',this.dateRange)
if(val !== undefined){
this.sonDateRange = val
this.benchmark = val[0] // 校准基准点
}
this.dotsList = this.selected
this.adjustCalendarDate() // 根据该日期计算当月
}
},
deep:true,
immediate: true
}
},
methods:{
judgeShowType(current,date){
// getMonth 0-11
if(parseInt(current) === parseInt(this.swiperCurrent)){
return new Date(this.benchmark).getMonth() === new Date(date).getMonth()
}
if(parseInt(this.swiperCurrent) - parseInt(current) === 1 || parseInt(this.swiperCurrent) - parseInt(current) === -2){
if(new Date(this.benchmark).getMonth() === 0){
return new Date(date).getMonth() === 11
}else{
return new Date(this.benchmark).getMonth() - 1 === new Date(date).getMonth()
}
}
if(parseInt(current) - parseInt(this.swiperCurrent) === 1 || parseInt(this.swiperCurrent) - parseInt(current) === 2){
if(new Date(this.benchmark).getMonth() === 11){
return new Date(date).getMonth() === 0
}else{
return new Date(this.benchmark).getMonth() + 1 === new Date(date).getMonth()
}
}
},
/**
* swiper 改变时会触发
*/
swiperChange(e){
if(parseInt(this.swiperCurrent) - parseInt(e.detail.current) === 1 || parseInt(this.swiperCurrent) - parseInt(e.detail.current) === -2 ){
this.benchmark = new Date(this.getPreMonthBeginAndEnd(this.formatDateTime(this.benchmark,2),1)).getTime()
}
if(parseInt(e.detail.current) - parseInt(this.swiperCurrent) === 1 || parseInt(this.swiperCurrent) - parseInt(e.detail.current) === 2 ){
this.benchmark = new Date(this.getMonthBeginAndEnd(this.benchmark,3)).getTime()
}
this.swiperCurrent = e.detail.current
this.adjustCalendarDate()
},
/**
* 获取0点 23:59:59时间戳
*/
getDayZero(timeStamp,type){
let temp = parseInt(timeStamp)
let day = new Date(new Date(temp).toLocaleDateString()).getTime()
if(type === 1){
return this.formatDateTime(day,1)
}
if(type === 2){
return this.formatDateTime(day + 86400000 - 1,1)
}
/*if(type == 1){
console.log(this.formatDateTime(new Date(new Date(day).setHours(0, 0, 0, 0)).getTime(),2) )
return this.formatDateTime(new Date(new Date(day).setHours(0, 0, 0, 0)).getTime(),2) // 设置指定时间的时分秒字段
}
if(type == 2){
return this.formatDateTime(new Date(new Date(day).setHours(23, 59, 59, 59)).getTime(),2) // 设置指定时间的时分秒字段
}*/
},
/**
* 判断日期是否为选中的日期
*/
judge(day){
if(this.mode === 'date'){ // 模式为单选日期
if(new Date(this.getDayZero(new Date(this.formatDateTime(this.sonDate,2)).getTime(),1)).getTime() === new Date(this.getDayZero(new Date(day).getTime(),1)).getTime()){
return true
}else {
return false
}
}
if(this.mode === 'dateRange'){ // 模式为单选日期
if(JSON.stringify(this.sonDateRange) !== '{}' ){
if(this.sonDateRange.length === 1){
if( new Date(day).getTime() === this.sonDateRange[0] ){
return 5
}
}
if(this.sonDateRange.length === 2){
if(new Date(day).getTime() === this.sonDateRange[0] && this.sonDateRange[0] === this.sonDateRange[1]){
return 6
}else{
if( new Date(day).getTime() === this.sonDateRange[0] ){
return 1
}else if( new Date(day).getTime() === this.sonDateRange[1] ){
return 2
}else if( new Date(day).getTime() > this.sonDateRange[0] && new Date(day).getTime() < this.sonDateRange[1] ){
return 3
} else {
return 4
}
}
}
} else {
return 4
}
}
},
dateRangeMaxDeal(){
// console.log('超过连选天数',this.dateRangeMax)
let t1 = this.getDayZero(this.sonDateRange[0],1)
let t2 = this.getDayZero(this.sonDateRange[1],2)
this.$emit('dateRangeMaxDeal',[t1,t2])
},
/**
* 点击了单个日期
*/
clickDay(day){
// console.log('触发点击')
if(this.mode === 'date'){
this.sonDate = new Date(day).getTime()
this.$emit("dateChange",this.sonDate)
this.adjustCalendarDate()
}
if(this.mode === 'dateRange'){
if(JSON.stringify(this.sonDateRange) === '{}'){
this.sonDateRange = [new Date(day).getTime()]
}else{
if(this.sonDateRange.length === 1){
let t = this.sonDateRange[0]
// console.log(this.sonDateRange[0],new Date(day).getTime(),this.dateRangeMax,'最多连选')
if(this.sonDateRange[0] > new Date(day).getTime()){ // 判断日期选择顺序
if(!isNaN(parseInt(this.dateRangeMax))){
if(parseInt(this.sonDateRange[0]) - parseInt(new Date(day).getTime()) > this.dateRangeMax * 24*60*60*1000){
this.sonDateRange[0] = t - (this.dateRangeMax - 1) * 24*60*60*1000
this.sonDateRange.push(t)
this.dateRangeMaxDeal()
return
}
}
this.sonDateRange[0] = new Date(day).getTime()
this.sonDateRange.push(t)
} else {
if(!isNaN(parseInt(this.dateRangeMax))){
if(parseInt(new Date(day).getTime()) -parseInt(this.sonDateRange[0]) > this.dateRangeMax * 24*60*60*1000){
this.sonDateRange.push(t + (this.dateRangeMax - 1) * 24*60*60*1000)
this.dateRangeMaxDeal()
return
}
}
this.sonDateRange.push(new Date(day).getTime())
}
let t1 = this.getDayZero(this.sonDateRange[0],1)
let t2 = this.getDayZero(this.sonDateRange[1],2)
this.$emit('confirm',[t1,t2])
}else if(this.sonDateRange.length === 2){
this.sonDateRange = [new Date(day).getTime()]
}
}
}
},
/**
* 点击了非本月的单个日期
*/
clickDayNotThisMonth(day){
if(this.mode === 'date'){ // 模式为单选日期
this.sonDate = new Date(day).getTime()
let m = new Date(day).getMonth() //点击日期的月份和基准月做对比，看是它的上月还是下月
let mark = new Date(this.benchmark).getMonth()
let next = true // 默认点了下月
if(mark > 0 && mark < 11){
if(m === mark + 1){next = true}
if(m === mark - 1){next = false}
}else{
if(mark === 0){
if(m === 11){next = false}
if(m === 1){next = true}
}
if(mark === 11){
if(m === 10){next = false}
if(m === 0){next = true}
}
}
if(next === true){
this.jumpToNextMonth()
}else{
this.jumpToLastMonth()
}
this.$emit("dateChange",this.sonDate)
}
if(this.mode === 'dateRange'){
}
},
/**
* 校准日历
*/
adjustCalendar(){
// console.log('以this.benchmark为中心点 校准展示月份')
let monthStart = this.getMonthBeginAndEnd(this.formatDateTime(this.benchmark,2) ,1)
let monthEnd = this.getMonthBeginAndEnd(this.formatDateTime(this.benchmark,2) ,2)
let lastMonday = monthStart
let nextSunday = monthEnd
if(new Date(monthStart).getDay() !== 1){ // 如果月初不是周一，补全
lastMonday = this.getOneDay(new Date(monthStart).getTime(),1) //补全周一
}
if(new Date(monthEnd).getDay() !== 0){ // 如果月底不是周日，补全
nextSunday = this.getOneDay(new Date(monthEnd).getTime(),7) // 补全周日
}
let month = this.getRangeOfDates(lastMonday, nextSunday)
// console.log(monthStart,'monthStart',monthEnd,'monthEnd')
// console.log(lastMonday,'lastMonday',nextSunday,'nextSunday')
// console.log(month,'month')
let list = []
for(let i in month){ // 增加打点信息
let obj = { date: month[i] }
for(let j in this.dotsList){
// console.log(this.getDayZero(new Date(this.dotsList[j].date.replaceAll('-','/')).getTime(),1))
// console.log(this.getDayZero(new Date(month[i]).getTime(),1))
if(this.getDayZero(new Date(this.dotsList[j].date.replaceAll('-','/')).getTime(),1) === this.getDayZero(new Date(month[i]).getTime(),1)){
obj = Object.assign({}, obj, this.dotsList[j])
}
}
list.push(obj)
}
this.month = list
// console.log(this.month)
},
/**
* mode='date' 校准展示日历
*/
adjustCalendarDate(){
// console.log('以this.benchmark为中心点 校准展示月份')
let monthStart = this.getMonthBeginAndEnd(this.formatDateTime(this.benchmark,2) ,1)
let monthEnd = this.getMonthBeginAndEnd(this.formatDateTime(this.benchmark,2) ,2)
let lastMonday = monthStart
let nextSunday = monthEnd
if(new Date(monthStart).getDay() !== 1){ // 如果月初不是周一，补全
lastMonday = this.getOneDay(new Date(monthStart).getTime(),1) //补全周一
}
if(new Date(monthEnd).getDay() !== 0){ // 如果月底不是周日，补全
nextSunday = this.getOneDay(new Date(monthEnd).getTime(),7) // 补全周日
}
let monthStart1= this.getPreMonthBeginAndEnd(monthStart,1)
let monthEnd1= this.getPreMonthBeginAndEnd(monthStart,2)
let lastMonday1 = monthStart1
let nextSunday1 = monthEnd1
if(new Date(monthStart1).getDay() !== 1){ // 如果月初不是周一，补全
lastMonday1 = this.getOneDay(new Date(monthStart1).getTime(),1) //补全周一
}
if(new Date(monthEnd1).getDay() !== 0){ // 如果月底不是周日，补全
nextSunday1 = this.getOneDay(new Date(monthEnd1).getTime(),7) // 补全周日
}
let y = new Date(monthStart).getFullYear()
let m1 = new Date(monthStart).getMonth() + 1 // 来月
let two = new Date(y, m1, 1).getTime()
let monthStart2= this.getMonthBeginAndEnd(two,1)
let monthEnd2= this.getMonthBeginAndEnd(two,2)
let lastMonday2 = monthStart2
let nextSunday2 = monthEnd2
if(new Date(monthStart2).getDay() !== 1){ // 如果月初不是周一，补全
lastMonday2 = this.getOneDay(new Date(monthStart2).getTime(),1) //补全周一
}
if(new Date(monthEnd2).getDay() !== 0){ // 如果月底不是周日，补全
nextSunday2 = this.getOneDay(new Date(monthEnd2).getTime(),7) // 补全周日
}
let month = this.getRangeOfDates(lastMonday, nextSunday)
let month1 = this.getRangeOfDates(lastMonday1, nextSunday1)
let month2 = this.getRangeOfDates(lastMonday2, nextSunday2)
let list = [] // 当月
let list1 = [] // 上月
let list2 = [] // 下月
for(let i in month){ // 增加打点信息
let obj = { date: month[i] }
for(let j in this.dotsList){
if(this.getDayZero(new Date(this.dotsList[j].date.replaceAll('-','/')).getTime(),1) === this.getDayZero(new Date(month[i]).getTime(),1)){
obj = Object.assign({}, obj, this.dotsList[j])
}
}
list.push(obj)
}
for(let i in month1){ // 增加打点信息
let obj = { date: month1[i] }
for(let j in this.dotsList){
if(this.getDayZero(new Date(this.dotsList[j].date.replaceAll('-','/')).getTime(),1) === this.getDayZero(new Date(month1[i]).getTime(),1)){
obj = Object.assign({}, obj, this.dotsList[j])
}
}
list1.push(obj)
}
for(let i in month2){ // 增加打点信息
let obj = { date: month2[i] }
for(let j in this.dotsList){
if(this.getDayZero(new Date(this.dotsList[j].date.replaceAll('-','/')).getTime(),1) === this.getDayZero(new Date(month2[i]).getTime(),1)){
obj = Object.assign({}, obj, this.dotsList[j])
}
}
list2.push(obj)
}
if(this.swiperCurrent === 0){
this.month1 = list2
this.month2 = list1
this.month0 = list
}else if(this.swiperCurrent === 1){
this.month1 = list
this.month0 = list1
this.month2 = list2
}else{
this.month2 = list
this.month0 = list2
this.month1 = list1
}
// console.log(this.month1)
},
/**
* 当月的月初与月底
*/
getMonthBeginAndEnd(d,type){
let y = new Date(d).getFullYear()
let m = new Date(d).getMonth()
let m1 = new Date(d).getMonth() + 1 // 来月
let one = new Date(y, m, 1).getTime()
let two = new Date(y, m1, 1).getTime()
if(type === 1){
return this.formatDateTime(new Date(one).getTime(),1)
}
if(type === 2){
return this.formatDateTime(new Date(two).getTime() - 1,1)
}
if(type === 3){
return this.formatDateTime(new Date(two).getTime(),1)
}
},
/**
* 指定某日的上月月初和月底
*/
getPreMonthBeginAndEnd(d,type){
let y = new Date(d).getFullYear()
let m = new Date(d).getMonth()
let m1 = new Date(d).getMonth() - 1
let one = new Date(y, m1, 1).getTime()
let two = new Date(y, m, 1).getTime()
if(type === 1){
return this.formatDateTime(new Date(one).getTime(),1)
}
if(type === 2){
return this.formatDateTime(new Date(two).getTime() - 1,1)
}
},
/**
* 时间戳格式化
*/
formatDateTime (timeStamp,type) {
timeStamp = parseInt(timeStamp)
if (timeStamp == null) {
return ''
} else {
const date = new Date(timeStamp)
const y = date.getFullYear() // 年
let MM = date.getMonth() + 1 // 月
MM = MM < 10 ? ('0' + MM) : MM
let d = date.getDate() // 日
d = d < 10 ? ('0' + d) : d
let h = date.getHours() // 时
h = h < 10 ? ('0' + h) : h
let m = date.getMinutes()// 分
m = m < 10 ? ('0' + m) : m
let s = date.getSeconds()// 秒
s = s < 10 ? ('0' + s) : s
if(type === 1){
return y + '/' + MM + '/' + d + ' ' + h + ':' + m + ':' + s
} else if (type === 2){
return y + '/' + MM + '/' + d
} else if (type === 3){
return y + '/' + MM + '/' + d + ' ' + h + ':' + m + ':' + s
} else if (type === 4){
return y + '/' + MM + '/' + d
} else {
return h + ':' + m + ':' + s
}
}
},
/**
* 获取时间段内的所有日期/指定星期几的日期 (不传 week 就是所有日期)
* tupe:1 计算两个日期相差的天数
*/
getRangeOfDates(startTime, endTime, week,type) {
// 获取时间段内的所有日期/指定星期几的日期
week = week == 7 ? 0 : week;
let dateList = [];
startTime = new Date(startTime);
endTime = new Date(endTime);
while ((endTime.getTime() - startTime.getTime()) >= 0) {
let year = startTime.getFullYear();
let month = startTime.getMonth() + 1 < 10 ? '0' + (startTime.getMonth() + 1) : startTime.getMonth() + 1;
let day = startTime.getDate().toString().length == 1 ? '0' + startTime.getDate() : startTime.getDate();
if(isNaN(week) || startTime.getDay() == week) {
dateList.push(`${year}/${month}/${day}`);
}
startTime.setDate(startTime.getDate() + 1);
}
if(type === 1){
return dateList.length;
}else{
return dateList
}
},
/**
* 获取指定日期所在周的周几 周n
*/
getOneDay(timeStamp,n){
let now = new Date(timeStamp);
let nowTime = now.getTime();
let day = now.getDay();
if(now.getDay() === 0){
day = 7;
}
let oneDayTime = 24 * 60 * 60 * 1000;
let dayTime = nowTime
if(n < day){
dayTime = nowTime - (day-n) * oneDayTime
}
if(n > day){
dayTime = nowTime + (n-day) * oneDayTime
}
return this.formatDateTime(new Date(dayTime).getTime(),1)
},
/**
* 跳转上月
*/
jumpToLastMonth(){
this.benchmark = new Date(this.getPreMonthBeginAndEnd(this.formatDateTime(this.benchmark,2),1)).getTime() // 基准点改为 上个月的月初 时间戳
if(this.swiperCurrent !== 0){
this.swiperCurrent -= 1
}else{
this.swiperCurrent = 2
}
this.adjustCalendarDate()
},
/**
* 跳转下月
*/
jumpToNextMonth(){
this.benchmark = new Date(this.getMonthBeginAndEnd(this.benchmark,3)).getTime()// 基准点改为 下个月的月初 时间戳
if(this.swiperCurrent !== 2){
this.swiperCurrent += 1
}else{
this.swiperCurrent = 0
}
this.adjustCalendarDate()
}
}
}
</script>
<style scoped lang="stylus">
.calendar-area
width: 100%;
max-width 500px
.calendar-head // 日历头部
padding-top 20rpx
.calendar-arrow
padding 0 40rpx
.pre-month // 上月跳转文字
margin-left: 5px
padding: 0 10px
.next-month // 下月跳转文字
margin-right: 5px
padding: 0 10px
.day-normal-dark
background: transparent;
color: rgb(12,12,12);
.day-normal
background: transparent;
.start-text
width: 100%;
font-size: 9px;
text-align: center;
bottom: 0;
display flex
align-items center
justify-content center
overflow hidden
.bottom-dots
width: 100%;
font-size: 9px;
text-align: center;
bottom: 4rpx
.bottom-dots-else
font-size: 9px;
text-align: center;
bottom: 4rpx
.bottom-texts
width: 100%;
font-size: 9px;
text-align: center;
//bottom: -4.5px
bottom: 0px
.grid-text
width: 100%;
text-align: center
.arrow-style
background-color: transparent; /* 模块背景为透明 */
border-style: solid;
.arrow-left-transform
transform rotate(225deg)/*箭头方向可以自由切换角度*/
.arrow-right-transform
transform rotate(45deg)/*箭头方向可以自由切换角度*/
.flex-class
display flex
align-items center
justify-content center
.flex-class1
display flex
align-items flex-start
justify-content center
.flex
display flex
.justify-content1
justify-content center
.space-between
justify-content space-between
.align-items
align-items center
.flex-wrap
flex-wrap wrap
.flex-no-wrap
flex-wrap nowrap
.relative
position relative
.absolute
position absolute
.bg
background #6161f921
.fontColor-normal
color: rgb(187,187,187);
.fontColor
color #6161f9
</style>
manifest.json
View file @ ee270356
{ {
"name" : "中深孔验收仪", "name" : "露天炮孔验收仪",
"appid" : "__UNI__672B793", "appid" : "__UNI__672B793",
"description" : "中深孔验收仪", "description" : "露天炮孔验收仪",
"versionName" : "1.0.0", "versionName" : "1.0.0",
"versionCode" : "100", "versionCode" : "100",
"transformPx" : false, "transformPx" : false,
......
pages.json
View file @ ee270356
...@@ -55,6 +55,14 @@ ...@@ -55,6 +55,14 @@
"navigationBarTitleText" : "孔测量" "navigationBarTitleText" : "孔测量"
} }
}, },
{
"path" : "pages/home/operateLog",
"style" :
{
"navigationBarTitleText" : "操作日志"
}
},
// { // {
// "path": "pages/tabBar/component/comm", // "path": "pages/tabBar/component/comm",
// "style": { // "style": {
...@@ -82,7 +90,7 @@ ...@@ -82,7 +90,7 @@
"path" : "pages/user/login", "path" : "pages/user/login",
"style" : "style" :
{ {
"navigationBarTitleText" : "" "navigationBarTitleText" : "微信授权登录"
} }
}, },
{ {
......
pages/home/blueMeasure.vue
View file @ ee270356
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
</CustomNavbar> </CustomNavbar>
<view class="body-wrapper"> <view class="body-wrapper">
<button @click="gosend">获取电量</button>
<view class="demo-uni-row"> <view class="demo-uni-row">
<uni-row> <uni-row>
<uni-col :span="7" class="_title"> <uni-col :span="7" class="_title">
...@@ -141,10 +142,11 @@ ...@@ -141,10 +142,11 @@
<script> <script>
import CustomNavbar from '@/pages/component/CustomNavbar.vue'; import CustomNavbar from '@/pages/component/CustomNavbar.vue';
// import {
// blueToothMixin
// } from '../../common/mixin.js'
import { import {
blueToothMixin stringToBytes,
} from '../../common/mixin.js'
import {
getCurrentTime, getCurrentTime,
showCustomToast, showCustomToast,
showCustomModal showCustomModal
...@@ -156,7 +158,7 @@ ...@@ -156,7 +158,7 @@
getDict getDict
} from '../../api/blueToothMeasure.js' } from '../../api/blueToothMeasure.js'
export default { export default {
mixins: [blueToothMixin], // mixins: [blueToothMixin],
components: { components: {
CustomNavbar, CustomNavbar,
}, },
...@@ -198,6 +200,26 @@ ...@@ -198,6 +200,26 @@
// this.initLink() // this.initLink()
}, },
methods: { methods: {
gosend(){
var strbuf = new Uint8Array(stringToBytes('POWER'));
var buffer1 = strbuf.buffer;
setTimeout(()=>{
uni.writeBLECharacteristicValue({
deviceId: 'C8:47:80:52:93:A2',
serviceId: '0000FFE0-0000-1000-8000-00805F9B34FB',
characteristicId:'0000FFE1-0000-1000-8000-00805F9B34FB',
value: buffer1,
success: (res) => {
console.log('writeBLECharacteristicValue-success:res=>', res)
},
fail: (res) => {
console.log('writeBLECharacteristicValue-fail:res=>', res)
// commonStateCodeDeal(res.errCode || res, 'gosend -> writeBLECharacteristicValue',
// this)
},
});
}, 1000)
},
async getDictInfo() { async getDictInfo() {
let res = await getDict({ let res = await getDict({
type: 'zhuangyao_type' type: 'zhuangyao_type'
......
pages/home/blueSearch.vue
View file @ ee270356
...@@ -2,6 +2,9 @@ ...@@ -2,6 +2,9 @@
<view class="wrapper"> <view class="wrapper">
<CustomNavbar title="蓝牙扫描" @gobackDeal="gobackDeal('blueSearch')"> <CustomNavbar title="蓝牙扫描" @gobackDeal="gobackDeal('blueSearch')">
</CustomNavbar> </CustomNavbar>
<view class="" style="text-align: center; color: #000; font-size: 32rpx; margin-top:20rpx;">
{{ pageLoadText }}
</view>
<view class="body-wrapper"> <view class="body-wrapper">
<!-- 横向均分 --> <!-- 横向均分 -->
...@@ -27,7 +30,9 @@ ...@@ -27,7 +30,9 @@
<script> <script>
import CustomNavbar from '@/pages/component/CustomNavbar.vue'; import CustomNavbar from '@/pages/component/CustomNavbar.vue';
const app = getApp(); import {
blueToothMixin
} from '../../common/mixin.js'
function inArray(arr, key, val) { function inArray(arr, key, val) {
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
...@@ -46,13 +51,13 @@ ...@@ -46,13 +51,13 @@
return hexArr.join(''); return hexArr.join('');
} }
export default { export default {
mixins: [blueToothMixin],
components: { components: {
CustomNavbar, CustomNavbar,
}, },
onBackPress(options) { onBackPress(options) {
this.gobackDeal() this.gobackDeal()
return true return true
}, },
data() { data() {
return { return {
...@@ -71,11 +76,7 @@ ...@@ -71,11 +76,7 @@
uni.hideLoading() uni.hideLoading()
}, },
onLoad(options) { onLoad(options) {
if (options.refer === 'blueTest') {
this.redirectUrl = '/pages/home/blueTest'
}else if(options.refer === 'blueMeasure'){
this.redirectUrl = '/pages/home/blueMeasure'
}
}, },
methods: { methods: {
gobackDeal(){ gobackDeal(){
...@@ -172,18 +173,17 @@ ...@@ -172,18 +173,17 @@
}, },
goto_Comm(e) { goto_Comm(e) {
console.log('*****跳转首页');
// this.$globalData.ble_device = e.currentTarget.dataset; // this.$globalData.ble_device = e.currentTarget.dataset;
const deviceInfo = e.currentTarget.dataset const deviceInfo = e.currentTarget.dataset
this.deviceId = deviceInfo.deviceId
this.stopBluetoothDevicesDiscovery(); this.stopBluetoothDevicesDiscovery();
uni.setStorageSync('deviceInfo', deviceInfo) uni.setStorageSync('deviceInfo', deviceInfo)
uni.reLaunch({ console.log('*****开始连接蓝牙');
// url: this.redirectUrl, this.startLink()
url: '/pages/home/home' // uni.reLaunch({
// complete:function(e){ // url: '/pages/home/home'
// console.log('e', JSON.stringify(e)) // });
// }
});
}, },
closeBluetoothAdapter() { closeBluetoothAdapter() {
uni.closeBluetoothAdapter(); uni.closeBluetoothAdapter();
......
pages/home/home.vue
View file @ ee270356
...@@ -4,13 +4,13 @@ ...@@ -4,13 +4,13 @@
<view class="logo-wrapper"> <view class="logo-wrapper">
<image class="logoImg" src="/static/image/home/logo.png" alt="" /> <image class="logoImg" src="/static/image/home/logo.png" alt="" />
<h3>露天炮孔验收仪</h3> <h3>露天炮孔验收仪</h3>
<button @click="gosend">获取电量</button>
</view> </view>
<view class="link-info-wrapper" @click="gosend('POWER')">
<view class="link-info-wrapper" @click="navTo('login')">
<div class="left"> <div class="left">
<image src="/static/image/paokong/linkY.png" mode=""></image> <image :src="`/static/image/paokong/${connected?'linkY':'linkN'}.png`" mode=""></image>
<view class="link-status"> <view class="link-status">
蓝牙已连接 蓝牙{{ connected? '已连接': '未连接' }}
</view> </view>
</div> </div>
<div class="right"> <div class="right">
...@@ -72,8 +72,12 @@ ...@@ -72,8 +72,12 @@
<script> <script>
import CustomNavbar from '@/pages/component/CustomNavbar.vue'; import CustomNavbar from '@/pages/component/CustomNavbar.vue';
import {formatNumber,formatDateThis,getUnixTime} from "../../common/dateUtil.js" import {formatNumber,formatDateThis,getUnixTime} from "../../common/dateUtil.js"
import {showCustomModal, showCustomToast} from "../../common/util.js" import {stringToBytes, showCustomModal, showCustomToast, commonStateCodeDeal} from "../../common/util.js"
// import {
// blueToothMixin
// } from '../../common/mixin.js'
export default { export default {
// mixins: [blueToothMixin],
onBackPress(options) { onBackPress(options) {
// showCustomToast({ // showCustomToast({
// title: '当前页为最后一页，不能继续返回了' // title: '当前页为最后一页，不能继续返回了'
...@@ -85,16 +89,59 @@ ...@@ -85,16 +89,59 @@
}, },
data() { data() {
return { return {
deviceInfo: {}
} }
}, },
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
uni.hideLoading()
// if(uni.getStorageSync('connected')){
// this.gosend('POWER')
// }else{
// this.initLink()
// }'
},
onShow() { onShow() {
uni.hideLoading() uni.hideLoading()
}, },
// watch:{
// connected(newVal){
// if(newVal){ // 已连接
// this.gosend('POWER')
// }
// }
// },
mounted() { mounted() {
const deviceInfo = uni.getStorageSync('deviceInfo')
if(deviceInfo){ // 获取蓝牙设备型号id
this.deviceInfo = deviceInfo
}
uni.hideTabBar() uni.hideTabBar()
}, },
methods: { methods: {
gosend(){
var strbuf = new Uint8Array(stringToBytes('POWER'));
var buffer1 = strbuf.buffer;
setTimeout(()=>{
uni.writeBLECharacteristicValue({
deviceId: 'C8:47:80:52:93:A2',
serviceId: '0000FFE0-0000-1000-8000-00805F9B34FB',
characteristicId:'0000FFE1-0000-1000-8000-00805F9B34FB',
value: buffer1,
success: (res) => {
console.log('writeBLECharacteristicValue-success:res=>', res)
},
fail: (res) => {
console.log('writeBLECharacteristicValue-fail:res=>', res)
// commonStateCodeDeal(res.errCode || res, 'gosend -> writeBLECharacteristicValue',
// this)
},
});
}, 1000)
},
navTo(flag){ navTo(flag){
if(flag === 'export'){ if(flag === 'export'){
this.exportData2Excel() this.exportData2Excel()
......
pages/home/importFile.vue
View file @ ee270356
...@@ -6,10 +6,10 @@ ...@@ -6,10 +6,10 @@
<view class="jisuanqi" @click="exportExcel" style="margin-top:100rpx;"> <view class="jisuanqi" @click="exportExcel" style="margin-top:100rpx;">
导出 导出
</view> </view>
<view class="jisuanqi" @click="showCalendar=true" style="margin-top:100rpx;"> <!-- <view class="jisuanqi" @click="showCalendar=true" style="margin-top:100rpx;">
选择日期 选择日期
</view> </view>
-->
<view class="content-confirm" style="margin-top:100rpx;"> <view class="content-confirm" style="margin-top:100rpx;">
日期选择{{searchDate}} 日期选择{{searchDate}}
<!-- <calendar-select v-model="showCalendar" <!-- <calendar-select v-model="showCalendar"
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
@change="changeDate"></calendar-select> @change="changeDate"></calendar-select>
--> -->
<!--
<button @click="open">打开弹窗</button> <button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0"> <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
<miku-calendar <miku-calendar
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
></miku-calendar> ></miku-calendar>
</uni-popup> </uni-popup> -->
</view> </view>
...@@ -46,13 +46,13 @@ ...@@ -46,13 +46,13 @@
</template> </template>
<script> <script>
import * as XLSX from '@/common/excel.js' import * as XLSX from '@/common/excel.js'
import CalendarSelect from '@/components/calendar-select/calendar-select.vue' // import CalendarSelect from '@/components/calendar-select/calendar-select.vue'
import mikuCalendar from "@/components/miku-calendar/mikuCalendar.vue" // import mikuCalendar from "@/components/miku-calendar/mikuCalendar.vue"
var that; var that;
export default { export default {
components: { components: {
CalendarSelect, // CalendarSelect,
mikuCalendar // mikuCalendar
}, },
data() { data() {
return { return {
......
pages/home/operateLog.vue
View file @ ee270356
<template> <template>
<view class="pageWrapper"> <view class="pageWrapper">
<CustomNavbar :title="navBarTitle" goBackUrl="/pages/home/home" @gobackDeal="gobackDeal"> <CustomNavbar :title="navBarTitle" @gobackDeal="gobackDeal">
</CustomNavbar> </CustomNavbar>
<view class="body-wrapper"> <view class="body-wrapper">
...@@ -68,25 +68,11 @@ ...@@ -68,25 +68,11 @@
</uni-tr> </uni-tr>
</uni-table> </uni-table>
</view> </view>
<view class="" v-show="!connected" style="text-align: center; color: darkgray; margin-top:20rpx;">
{{ pageLoadText }}
</view>
<!-- <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
<miku-calendar :calendarBg="'#fff'"
:dateRange="[new Date('2024/02/01').getTime(),new Date('2024/02/27').getTime()]" :dateRangeMax="365"
@dateRangeMaxDeal="dateRangeMaxDeal" mode='dateRange' :showArrow="true" themeColor="rgb(100,124,203)"
arrowColor="rgb(100,124,203)" @confirm="calendarConfirm"></miku-calendar>
</uni-popup> -->
</view> </view>
</template> </template>
<script> <script>
import CustomNavbar from '@/pages/component/CustomNavbar.vue'; import CustomNavbar from '@/pages/component/CustomNavbar.vue';
import mikuCalendar from "@/components/miku-calendar/mikuCalendar.vue";
import { import {
getCurrentTime, getCurrentTime,
showCustomToast, showCustomToast,
...@@ -100,7 +86,6 @@ ...@@ -100,7 +86,6 @@
export default { export default {
components: { components: {
CustomNavbar, CustomNavbar,
mikuCalendar
}, },
data() { data() {
const currentDate = this.getDate({ const currentDate = this.getDate({
...@@ -151,6 +136,11 @@ ...@@ -151,6 +136,11 @@
} }
}, },
methods: { methods: {
gobackDeal(){ // 返回上一页的处理逻辑
uni.reLaunch({
url: '/pages/home/home',
});
},
// 搜索 // 搜索
search() { search() {
this.getData(1, this.searchVal) this.getData(1, this.searchVal)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment