8***@qq.com
8***@qq.com
  • 发布:2023-08-08 11:02
  • 更新:2023-08-08 15:34
  • 阅读:325

这里的uni-datetime-picker 和 picker 在内置浏览器运行可以正常运行,为什么在真机上,时间段显示undefined,弹不出时间组件

分类:uni-app
<template>  
    <view>  
        <view class="input-group" style="background-color: #fff;">  
            <!-- 时间段 -->  
            <view style="margin-left: 15px;height: 60px;border-bottom: 1px solid #fafafa;">  
                <view style="float: left;color: #333333;font-weight: 400;line-height: 60px;font-size: 14px;">时间段  
                </view>  
                <view id="times" style="float: right;height:60px;margin-right: 15px; width: 60%;display: flex;align-items: center;">  
                    <view class="aaaa" style="height: 25px;width: 25px;position: absolute;background: #fff;z-index: 1;">  

                    </view>  
                    <uni-datetime-picker :clear-icon="false" :border="false" type="daterange" v-model="dateRange" @change="change"></uni-datetime-picker>  
                </view>  
            </view>  
            <!-- 所属项目 -->  
            <view style="margin-left: 15px;height: 60px;border-bottom: 1px solid #fafafa;">  
                <view style="float: left;color: #333333;font-weight: 400;line-height: 60px;font-size: 14px;">所属项目  
                </view>  
                <view style="float: right;height:60px;margin-right: 15px; width: 60%;display: flex;align-items: center;">  
                    <view class="uni-list-cell-db" style="text-align: right;font-size: 14px; width: 74vw;display: flex;align-items: center;justify-content: flex-end;">  
                        <picker @change="bindPickerChangeSsxm" :value="indexSsxm" :range="SsxmArray" range-key="name">  
                            <view class="uni-input">{{SsxmArray[indexSsxm].name}}</view>  
                        </picker>  
                        <image style="width: 12px;height: 12px;margin-left: 0;" src="../../static/imgs/yjt.png"></image>  
                    </view>  
                </view>   

            </view>  
            <!--  -->  
            <view style="margin-left: 15px;height: 60px;border-bottom: 1px solid #fafafa;">  
                <view style="float: left;color: #333333;font-weight: 400;line-height: 60px;font-size: 14px;">机器  
                </view>  
                <view style="float: right;height:60px;margin-right: 15px; width: 60%;display: flex;align-items: center;"  
                    @click="showJiqi()">  
                    <input id="azfs" type="text" style="height: 60px;width: 100%;font-size: 14px;border: 0px;text-align:right;text-overflow: ellipsis"  
                        placeholder="请选择" v-model="checkjq" />  
                    <image style="width: 12px;height: 12px;margin-left: 0;" src="../../static/imgs/yjt.png"></image>  
                </view>  

            </view>  
            <!--  -->  
            <view style="margin-left: 15px;height: 60px;border-bottom: 1px solid #fafafa;">  
                <view style="float: left;color: #333333;font-weight: 400;line-height: 60px;font-size: 14px;">附录参数  
                </view>  
                <view style="float: right;height:60px;margin-right: 15px; width: 60%;display: flex;align-items: center;"  
                    @click="showCanshu()"><input id="azfs" type="text"  
                        style="height: 60px;width: 100%;font-size: 14px;border: 0px;text-align:right;text-overflow: ellipsis"  
                        placeholder="请选择" v-model="checkcanshus" />  
                    <image style="width: 12px;height: 12px;" src="../../static/imgs/yjt.png"></image>  
                </view>  

            </view>  
        </view>  
        <!-- 下标 -->  
        <view class="font"><text>注:选择的参数将会在报告中生成附录详细数据</text></view>  
        <view class="footer" style="max-width: 640px;">  
            <button class="genReport" @click="genReport()">生成报告</button>  
        </view>  

        <!-- 参数 -->  
        <view id="bg" v-show="showBg">  
            <view class="fulucanshu" style="height: 42px; bottom: 264px; border-radius: 8px 8px 0 0;">  
                <view class="title" style="height: 40px; display: flex;justify-content: space-between;">  
                    <p style="line-height: 40px;" @click="cancelCanshu()">取消</p>  
                    <p style="line-height: 40px;" @click="confirmCanshu()">确定</p>  
                </view>  
            </view>  
            <view class="fulucanshu" style="height: 264px;">  
                <view class="li" @click="checkAll()" style="display: flex;    justify-content: space-between;">  
                    <text>全选</text>  
                    <checkbox style="transform:scale(0.7)" :checked="isCheckAll" />  
                </view>  
                <view style="width: 100%;display: flex;flex-wrap: wrap; flex-direction: column; align-content: space-between;"  
                    v-for="(item,index) in canshuList" :key="item.value" @click="checkCanshu(index)">  
                    <view class="li">  
                        <text>{{item.name}}</text>  
                        <checkbox style="transform:scale(0.7)" :checked="item.isChecked" />  
                    </view>  
                </view>  
            </view>  
        </view>  
        <!-- 机器 -->  
        <view id="jq" v-show="showJq">  
            <view class="fulucanshu" style="height: 42px; bottom: 264px; border-radius: 8px 8px 0 0;">  
                <view class="title" style="height: 40px; display: flex;justify-content: space-between;">  
                    <p style="line-height: 40px;" @click="cancelJiqi()">取消1</p>  
                    <p style="line-height: 40px;" @click="confirmJiqi()">确定1</p>  
                </view>  
            </view>  
            <view class="fulucanshu" style="height: 264px;">  
                <view class="li" @click="checkAllJq()" style="display: flex;    justify-content: space-between;">  
                    <text>全选</text>  
                    <checkbox style="transform:scale(0.7)" :checked="isCheckAllJq" />  
                </view>  
                <view style="width: 100%;display: flex;flex-wrap: wrap; flex-direction: column; align-content: space-between;"  
                    v-for="(item,index) in jqList" :key="item.id" @click="checkJiqi(index)">  
                    <view class="li">  
                        <text>{{item.text}}</text>  
                        <checkbox style="transform:scale(0.7)" :checked="item.isCheckedJq" />  
                    </view>  
                </view>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
    var beforeDate //开始时间  
    var newDate //结束时间  
    // 格式化时间(原来的)  
    Date.prototype.Format = function(fmt) { //author: meizz  
        var o = {  
            "M+": this.getMonth() + 1, //月份   
            "d+": this.getDate(), //日   
            "h+": this.getHours(), //小时   
            "m+": this.getMinutes(), //分   
            "s+": this.getSeconds(), //秒   
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度   
            "S": this.getMilliseconds() //毫秒   
        };  
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));  
        for (var k in o)  
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) :  
                (("00" + o[k]).substr(("" + o[k]).length)));  
        return fmt;  
    }  
    beforeDate = new Date(new Date().setTime(new Date().getTime() - 24 * 60 * 60 * 1000)).Format(  
        "yyyy-MM-dd");  
    newDate = new Date().Format("yyyy-MM-dd");  
    var type  
    var canshus=new Array()  
    export default {  
        data() {  
            return {  
                showBg: false,  
                isCheckAll: false,  
                showJq: false,  
                isCheckAllJq: true,  
                dateRange:[beforeDate,newDate],  
                canshuList: [{  
                        name: '加速度有效值',  
                        value: 'ARMS',  
                        isChecked: false  
                    },  
                    {  
                        name: '加速度峰值',  
                        value: 'AVP',  
                        isChecked: false  
                    },  
                    {  
                        name: '加速度峭度',  
                        value: 'JSD_QD',  
                        isChecked: false  
                    },  
                    {  
                        name: '速度有效值',  
                        value: 'VRMS',  
                        isChecked: false  
                    },  
                    {  
                        name: '速度峰值',  
                        value: 'VVP',  
                        isChecked: false  
                    },  
                    {  
                        name: '位移有效值',  
                        value: 'SRMS',  
                        isChecked: false  
                    },  
                    {  
                        name: '位移峰峰值',  
                        value: 'SVPP',  
                        isChecked: false  
                    },  
                    {  
                        name: '温度',  
                        value: 'Temp',  
                        isChecked: false  
                    }  
                ],  
                checkcanshus: '无',  
                checkjq: '全选',  
                SsxmArray: [],  
                jqList: [],  
                indexSsxm: 0,  
                majorId: ''  
            }  
        },  
        watch: {  
            datetimeString() {  
                console.log('日期时间单选:', this.datetimeString);  
            },  
            dateRange() {  
                console.log('日期范围选:', this.dateRange);  
            },  
            datetimeRange() {  
                console.log('日期时间范围选:', this.datetimeRange);  
            }  
        },  
        onLoad() {  
            this.alarms = []  
            this.jiqis = []  
            if (this.isCheckAll) {  
                this.canshuList.forEach(item => {  
                    item.isChecked = true  
                    this.alarms.push(item.value);  
                });  
            }  

            this.getProjectList()  

        },  
        methods: {  
            // 获取项目列表  
            getProjectList() {  
                uni.request({  
                    url:  'http://36.133.58.122:8081/a/dac/tTagCfgTpl/Android/getMajorIndex',  
                    data: {},  
                }).then(res => {  
                    console.log(res.data);  
                    this.SsxmArray = res.data  
                    this.majorId = res.data[0].id  
                    this.getJqList(this.majorId)  
                })  
            },  
            // 获取机器列表  
            getJqList(majorId) {  
                uni.request({  
                    url:  'http://36.133.58.122:8081/a/dac/tTagCfgTpl/Android/getJz',  
                    data: {  
                        marjorId: majorId  
                    },  
                }).then(res => {  
                    console.log(res.data);  
                    res.data.forEach((item, index) => {  
                        let checked = {  
                            isCheckedJq: false  
                        }  
                        Object.assign(item, checked)  
                        console.log(item);  
                    })  
                    this.jqList = res.data;  
                    if (this.isCheckAllJq) {  
                        this.jqList.forEach(item => {  
                            item.isCheckedJq = true  
                            this.jiqis.push(item.id);  
                        });  
                    }  
                })  

            },  
            bindPickerChangeSsxm: function(e) {  
                console.log(e);  
                console.log('picker发送选择改变,携带值为:' + e.detail.value)  
                this.indexSsxm = e.detail.value  
                this.majorId=this.SsxmArray[this.indexSsxm].id  
                this.getJqList(this.majorId)  
            },  
            change(e) {  
                console.log('----change事件:', e);  
            },  
            showCanshu() {  
                this.showBg = true  
            },  
            cancelCanshu() {  
                this.showBg = false  
            },  
            showJiqi() {  
                this.showJq = true  
            },  
            cancelJiqi() {  
                this.showJq = false  
            },  
            checkCanshu(index) {  
                console.log('alarm', index)  
                console.log(this.canshuList[index]);  
                var invoice = this.canshuList[index]; //变量 invoice == 数组每一项索引  
                if (invoice) {  
                    invoice.isChecked = !invoice.isChecked //取反  
                }  
                this.calcCount('canshu');  
            },  
            checkJiqi(index) {  
                console.log('alarm', index)  
                console.log(this.jqList[index]);  
                var invoice = this.jqList[index]; //变量 invoice == 数组每一项索引  
                if (invoice) {  
                    invoice.isCheckedJq = !invoice.isCheckedJq //取反  
                }  
                this.calcCount('jiqi');  
            },  
            calcCount(type) {  
                var that = this;  
                // this.alarms = []  
                if(type=='canshu'){  
                    that.alarms = []  
                    that.canshuList.forEach(item => {  
                        if (item.isChecked == true) {  
                            that.alarms.push(item.value);  
                        }  
                    });  
                    if (that.alarms.length == that.canshuList.length) {  
                        that.isCheckAll = true  
                    } else {  
                        that.isCheckAll = false  
                    }  
                }else if(type=='jiqi'){  
                    that.jiqis = []  
                    that.jqList.forEach(item => {  
                        if (item.isCheckedJq == true) {  
                            that.jiqis.push(item.value);  
                        }  
                    });  
                    if (that.jiqis.length == that.jqList.length) {  
                        that.isCheckAllJq = true  
                    } else {  
                        that.isCheckAllJq = false  
                    }  
                }  
            },  
            confirmCanshu() {  
                var that = this;  
                this.checkcanshus = ''  
                for (var i = 0; i < that.canshuList.length; i++) {  
                    if (that.canshuList[i].isChecked == false) {} else {  
                        this.checkcanshus = this.checkcanshus + that.canshuList[i].name + ','  
                        this.checkcanshus = this.checkcanshus.substring(0, this.checkcanshus.length - 1)  
                    }  
                }  
                console.log("最终选项");  
                console.log(this.alarms);  
                console.log("------------");  
                console.log(this.isCheckAll);  
                if (this.isCheckAll) {  
                    this.checkcanshus = '全部'  
                } else if (this.alarms.length == 0 || this.alarms == null) {  
                    this.checkcanshus = '无'  
                }  
                console.log(this.checkcanshus);  
                this.showBg = false  
            },  
            confirmJiqi() {  
                var that = this;  
                this.checkjq = ''  
                for (var i = 0; i < that.jqList.length; i++) {  
                    if (that.jqList[i].isCheckedJq == false) {} else {  
                        this.checkjq = this.checkjq + that.jqList[i].text + ','  
                        console.log(this.checkjq);  
                    }  
                }  
                this.checkjq = this.checkjq.substring(0, this.checkjq.length - 1)  
                console.log("最终选项");  
                console.log(this.jiqis);  
                console.log("------------");  
                console.log(this.isCheckAllJq);  
                if (this.isCheckAllJq) {  
                    this.checkjq = '全部'  
                } else if (this.jiqis.length == 0 || this.jiqis == null) {  
                    this.checkjq = '无'  
                }  
                console.log(this.checkjq);  
                this.showJq = false  
            },  
            checkAll() { //控制全选  
                this.isCheckAll = !this.isCheckAll  
                this.alarms = []  
                if (this.isCheckAll) {  
                    this.canshuList.forEach(item => {  
                        item.isChecked = true  
                        this.alarms.push(item.value);  
                    });  
                } else {  
                    this.canshuList.forEach(item => {  
                        item.isChecked = false  
                        this.alarms = []  
                    });  
                }  
            },  
            checkAllJq() { //控制全选  
                this.isCheckAllJq = !this.isCheckAllJq  
                this.jiqis = []  
                if (this.isCheckAllJq) {  
                    this.jqList.forEach(item => {  
                        item.isCheckedJq = true  
                        this.jiqis.push(item.id);  
                    });  
                } else {  
                    this.jqList.forEach(item => {  
                        item.isCheckedJq = false  
                        this.jiqis = []  
                    });  
                }  
            },  
            genReport() {  
                console.log(this.alarms);  
                // console.log(this.alarms==null);  
            }  
        }  
    }  
</script>  

<style>  
    page {  
        font-size: 14px;  
    }  

    .font text {  
        font-size: 12px;  
        transform: scale(0.83333);  
        transform-origin: 0 0;  
        display: inline-block;  
        margin: 10px 15px;  
    }  

    .genReport {  
        position: absolute;  
        left: 0;  
        top: 0;  
        right: 0;  
        bottom: 0;  
        margin: auto;  
        display: block;  
        width: 84%;  
        height: 44px;  
        border-radius: 22px;  
        background-color: #5D8DF3;  
        border: none;  
        color: #fff;  
        font-size: 16px  
    }  

    .footer {  
        height: 84px;  
        background-color: #fff;  
        position: fixed;  
        bottom: 0;  
        width: 100%;  
    }  
    #times .icon-calendar{  
        display: none !important;  
    }  
    #bg,#jq{  
        position: fixed;  
        width: 100%;  
        height: 100vh;  
        top: 0;  
        left: 0;  
        background: rgba(0, 0, 0, .5);  
        z-index: 101;  
    }  

    .fulucanshu,  
    .jizu {  
        position: fixed;  
        bottom: 0;  
        background-color: #fff;  
        padding: 0 15px;  
        width: calc(100% - 30px);  
        /* background: rgba(0,0,0,.5); */  
        /* border-radius: 8px 8px 0 0; */  
        height: 306px;  
        overflow: auto;  
    }  
    .li {  
        height: 44px;  
        line-height: 44px;  
        width: 100%;  
        display: flex;  
        align-items: center;  
        justify-content: space-between;  
        align-content: center;  
    }  
</style>
2023-08-08 11:02 负责人:无 分享
已邀请:
喜欢技术的前端

喜欢技术的前端 - QQ---445849201

是 data函数中 dateRange:[beforeDate,newDate], 这个变量的beforeDate,newDate 是undefined吗?我这边跑是好的,你看下控制台有没有报错

8***@qq.com

8***@qq.com (作者) - 一个转行IT的机械喵。。。

可是我在内置浏览器显示正常,你说的beforeDate、newDate都不是undefined,但是在真机就不行

要回复问题请先登录注册