<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>
8***@qq.com
- 发布:2023-08-08 11:02
- 更新:2023-08-08 15:34
- 阅读:325
2 个回复
喜欢技术的前端 - QQ---445849201
是 data函数中 dateRange:[beforeDate,newDate], 这个变量的beforeDate,newDate 是undefined吗?我这边跑是好的,你看下控制台有没有报错
8***@qq.com (作者) - 一个转行IT的机械喵。。。
可是我在内置浏览器显示正常,你说的beforeDate、newDate都不是undefined,但是在真机就不行