增加设备保养
This commit is contained in:
@ -8,9 +8,10 @@
|
||||
<view class="center-cut-menu">
|
||||
<scroll-view scroll-x="true" show-scrollbar="false" scroll-with-animation="true" :scroll-left="scrollLeft" class="scroll-view horizontalScrollView" :class="{'monthScroll':params.date!=='day'}" >
|
||||
<view class="scroll-item" :style="'width:'+itemWidth+'px'" v-for="(item, index) in titleList" :key="index" @click="changeMenu(index)">
|
||||
<view class="viewItem" :class="{'active':curIndex == index,'monthViewItem':params.date !=='day'}">
|
||||
<view class="viewItem" :class="{'active':curIndex == index,'monthViewItem':params.date !=='day','todoayView':item.todoay}">
|
||||
<text class="item-text">{{item.name}}</text>
|
||||
<text class="item-date" v-if="params.date == 'day'">{{item.text}}</text>
|
||||
<text class="todoay" v-if="item.todoay">今</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@ -25,8 +26,11 @@
|
||||
<view :style="'height:'+swiperHeight+'px'" v-if="curIndex == index">
|
||||
<view class="swiper-item padd_top12 font14">
|
||||
<view class="device_row" v-for="(em,inde) in item.data" :key="inde">
|
||||
<text class="name font_bold">{{em.text}}</text>
|
||||
<text class="text">{{em.name}}</text>
|
||||
<view class="rowView" :class="{'active':inde==0,'todoayView':em.todoay}">
|
||||
<text class="name font_bold">{{em.text}}</text>
|
||||
<text class="text">{{em.name}}</text>
|
||||
<text v-if="em.todoay" class="todoay">今</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -113,9 +117,16 @@
|
||||
setTitle(){
|
||||
if(this.params.date == 'day'){
|
||||
let list = this.$wf.getDatesOfWeek();
|
||||
let todoay = this.$wf.getToday();
|
||||
list.forEach(item=>{
|
||||
if(item.date == todoay){
|
||||
item.todoay = true;
|
||||
}
|
||||
item.text = item.date.split('-')[2];
|
||||
})
|
||||
if(this.curIndex >= list.length){
|
||||
this.curIndex = list.length - 1;
|
||||
}
|
||||
this.titleList = list;
|
||||
}
|
||||
if(this.params.date == 'week'){
|
||||
@ -124,8 +135,12 @@
|
||||
|
||||
arr.forEach((item,index)=>{
|
||||
let date = item.find(em=> em!==null && em!==undefined);
|
||||
let todoay = this.$wf.getToday();
|
||||
item.forEach(em=>{
|
||||
if(em){
|
||||
if(em.date == todoay){
|
||||
em.todoay = true;
|
||||
}
|
||||
em.text = em.date.split('-')[2];
|
||||
em.name = '星期'+em.name;
|
||||
}
|
||||
@ -136,11 +151,32 @@
|
||||
data:item.filter(em=> em!==null),
|
||||
})
|
||||
})
|
||||
console.log(list,233)
|
||||
if(this.curIndex >= list.length){
|
||||
this.curIndex = list.length - 1;
|
||||
}
|
||||
this.titleList = list;
|
||||
}
|
||||
if(this.params.date == 'month'){
|
||||
|
||||
let list = [];
|
||||
let arr = this.$wf.getCurrentYearData();
|
||||
arr.forEach((item,index)=>{
|
||||
let weeks = [];
|
||||
item.weeks.forEach((em,ind)=>{
|
||||
let dateList = em.filter(em=> em!==null);
|
||||
weeks.push({
|
||||
data:dateList,
|
||||
text:dateList[0].date.split('-')[2],
|
||||
name:'第'+Number(ind+1)+'周',
|
||||
date:dateList[0].date,
|
||||
})
|
||||
})
|
||||
list.push({
|
||||
name:this.$wf.numberToChineseLower(Number(item.month))+'月',
|
||||
date:weeks[0].date,
|
||||
data:weeks,
|
||||
})
|
||||
})
|
||||
this.titleList = list;
|
||||
}
|
||||
|
||||
this.getScrollW();
|
||||
@ -198,6 +234,30 @@
|
||||
})
|
||||
this.titleList = list;
|
||||
}
|
||||
if(this.params.date == 'month'){
|
||||
// 获取本年的选中周日期
|
||||
let date = this.titleList[this.curIndex];
|
||||
let list = [];
|
||||
let arr = this.$wf.getPreviousYearData(String(date.date));
|
||||
arr.forEach((item,index)=>{
|
||||
let weeks = [];
|
||||
item.weeks.forEach((em,ind)=>{
|
||||
let dateList = em.filter(em=> em!==null);
|
||||
weeks.push({
|
||||
data:dateList,
|
||||
text:dateList[0].date.split('-')[2],
|
||||
name:'第'+Number(ind+1)+'周',
|
||||
date:dateList[0].date,
|
||||
})
|
||||
})
|
||||
list.push({
|
||||
name:this.$wf.numberToChineseLower(Number(item.month))+'月',
|
||||
date:weeks[0].date,
|
||||
data:weeks,
|
||||
})
|
||||
})
|
||||
this.titleList = list;
|
||||
}
|
||||
|
||||
this.getScrollW();
|
||||
this.changeDate();
|
||||
@ -241,6 +301,30 @@
|
||||
})
|
||||
this.titleList = list;
|
||||
}
|
||||
// 获取下一年的日期
|
||||
if(this.params.date == 'month'){
|
||||
let date = this.titleList[this.curIndex];
|
||||
let list = [];
|
||||
let arr = this.$wf.getNextYearData(String(date.date));
|
||||
arr.forEach((item,index)=>{
|
||||
let weeks = [];
|
||||
item.weeks.forEach((em,ind)=>{
|
||||
let dateList = em.filter(em=> em!==null);
|
||||
weeks.push({
|
||||
data:dateList,
|
||||
text:dateList[0].date.split('-')[2],
|
||||
name:'第'+Number(ind+1)+'周',
|
||||
date:dateList[0].date,
|
||||
})
|
||||
})
|
||||
list.push({
|
||||
name:this.$wf.numberToChineseLower(Number(item.month))+'月',
|
||||
date:weeks[0].date,
|
||||
data:weeks,
|
||||
})
|
||||
})
|
||||
this.titleList = list;
|
||||
}
|
||||
|
||||
this.getScrollW();
|
||||
this.changeDate();
|
||||
@ -281,6 +365,7 @@
|
||||
.scroll-view {height: 50px;white-space: nowrap;
|
||||
.scroll-item {height: 100%;padding: 0 5px;display: inline-block;text-align: center;box-sizing: border-box;
|
||||
.viewItem{
|
||||
position: relative;
|
||||
font-size: 14px;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;
|
||||
border: 1px solid $uni-color-primary;box-sizing: border-box;border-radius: 8px;
|
||||
}
|
||||
@ -291,16 +376,25 @@
|
||||
.active {
|
||||
background: $uni-color-primary;
|
||||
}
|
||||
.todoay{
|
||||
display: flex;align-items: center;justify-content: center;background: $uni-bg-color-success;
|
||||
position: absolute;top: 2px;right: 2px;z-index: 20;
|
||||
border-radius: 2px;width: 12px;height: 12px;font-size: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.monthScroll{height: 28px;}
|
||||
.monthScroll{height: 27px;}
|
||||
}
|
||||
.content-right{flex-basis: 30px;text-align: center;}
|
||||
}
|
||||
.swiper-box-list{height: 240px;padding:0 12px;
|
||||
.swiper-item{display: flex;flex-direction: row;flex-wrap: wrap;}
|
||||
.device_row{display: flex;flex-direction: column;width: 33%;justify-content: center;align-items: center;margin-bottom: 12px;padding: 12px 0;height: 70px;box-sizing: border-box;
|
||||
.device_row{display: flex;flex-direction: column;width: 33%;justify-content: center;align-items: center;margin-bottom: 12px;height: 70px;box-sizing: border-box;padding: 0 8px;position: relative;
|
||||
.name{margin-bottom: 6px;}
|
||||
.rowView{display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100%;width: 100%;padding: 12px 0;box-sizing: border-box;position: relative;}
|
||||
.todoayView{padding: 0 8px; background: $uni-bg-color-default-dark; box-sizing: border-box;border-radius: 8px;}
|
||||
.active{background: $uni-bg-color-info;border-radius: 8px;}
|
||||
.todoay{position: absolute;top: -5px;right: -5px;z-index: 20;display: flex;align-items: center;justify-content: center;background: $uni-bg-color-success;width: 16px;height: 16px;border-radius: 3px;font-size: 10px;}
|
||||
}
|
||||
}
|
||||
</style>
|
@ -2,7 +2,7 @@
|
||||
<view class="selectView">
|
||||
<picker mode="selector" @change="bindPickerChange" @cancel="pickerHide" :value="value" range-key="name" :range="list" >
|
||||
<view class="pickerBom" @click="pickerClick">
|
||||
<input type="text" :value="text" :placeholder="placeholder" disabled />
|
||||
<input class="input" type="text" :value="text" :placeholder="placeholder" disabled />
|
||||
<text class="iconfont icon-gengduo" :class="selectShow?'selectOpen':'selectHide'"></text>
|
||||
</view>
|
||||
</picker>
|
||||
@ -37,13 +37,19 @@
|
||||
watch:{
|
||||
id:{
|
||||
handler(val){
|
||||
this.array.forEach((item,index)=>{
|
||||
if(item.value == val){
|
||||
this.value = index;
|
||||
this.text = item.name;
|
||||
this.id = val;
|
||||
}
|
||||
})
|
||||
if(val){
|
||||
this.array.forEach((item,index)=>{
|
||||
if(item.value == val){
|
||||
this.value = index;
|
||||
this.text = item.name;
|
||||
this.id = val;
|
||||
}
|
||||
})
|
||||
}else{
|
||||
this.value = '';
|
||||
this.text = '';
|
||||
this.id = '';
|
||||
}
|
||||
},
|
||||
immediate:true,
|
||||
deep:true
|
||||
@ -91,6 +97,9 @@
|
||||
}
|
||||
.pickerBom{
|
||||
width: 100%;
|
||||
.input{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.selectOpen{
|
||||
animation: rotate 0.6s;
|
||||
|
245
components/upload/uploadImg.vue
Normal file
245
components/upload/uploadImg.vue
Normal file
@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<view class="uploadImgView">
|
||||
<view class="uploadTitle" v-if="name && name!=''">
|
||||
<view class="name font_bold">{{name}}</view>
|
||||
<view class="limit">{{newList.length}}/{{limit}}</view>
|
||||
</view>
|
||||
<view class="imgList">
|
||||
<view class="uploadFlex itemBox" v-for="(item,index) in newList" :key="index">
|
||||
<view class="imgItem">
|
||||
<view class="itemImg">
|
||||
<image class="img" :src="item" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="deleteBox" @click="deleteImg(index)">
|
||||
<text class="icon iconfont icon-a-shanchu21"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uploadFlex itemBox" v-for="(item,index) in uploadList" :key="index">
|
||||
<view class="imgItem">
|
||||
<view class="itemImg">
|
||||
<image class="img" :src="item.path" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view class="progressView">
|
||||
<view class="progressWidth" :style="'width:'+item.progress+'%'"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uploadBut itemBox" @click="upload()" v-if="newList.length<limit">
|
||||
<view class="img_but">
|
||||
<view class="icon iconfont icon-a-shangchuanzhaopian2 font35"></view>
|
||||
<view class="text font12">
|
||||
上传图片
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
newList:this.list,
|
||||
uploadList:[],
|
||||
|
||||
oss:{},
|
||||
}
|
||||
},
|
||||
props:{
|
||||
name:{
|
||||
type:[String],
|
||||
default:''
|
||||
},
|
||||
limit:{
|
||||
type:[Number,String],
|
||||
default:1
|
||||
},
|
||||
list:{
|
||||
type:[Array,Object],
|
||||
default: () => []
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
list:{
|
||||
handler(val){
|
||||
this.newList = val;
|
||||
},
|
||||
immediate:true,
|
||||
deep:true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getOss();
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
// 获取图片oss 服务地址
|
||||
getOss(){
|
||||
this.$api.getOss('/oss.sign',{dir:'mes'}).then(res=>{
|
||||
this.oss = res.data;
|
||||
}).catch(err=>{})
|
||||
},
|
||||
deleteImg(num){
|
||||
this.newList.forEach((item,index)=>{
|
||||
if(num == index){
|
||||
this.newList.splice(index,1);
|
||||
}
|
||||
})
|
||||
this.$emit('input',this.newList);
|
||||
},
|
||||
upload(){
|
||||
uni.chooseImage({
|
||||
count:9,
|
||||
success: (chooseImageRes) => {
|
||||
const tempFilePaths = chooseImageRes.tempFilePaths;
|
||||
tempFilePaths.forEach((item,index)=>{
|
||||
let num = item.length;
|
||||
let nameStr = item.toString();
|
||||
let name = Date.parse(new Date())+'/'+nameStr.substring(nameStr-8);
|
||||
let fileName = this.oss.dir+'/'+ name;
|
||||
let text = Date.parse(new Date())+'_'+index;
|
||||
|
||||
let obj = {
|
||||
path:nameStr,
|
||||
text:text,
|
||||
progress:0,
|
||||
}
|
||||
this.uploadList.push(obj)
|
||||
|
||||
this.uploadOss(item,name,fileName,text);
|
||||
})
|
||||
},
|
||||
fail:(errUpload)=> {
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
uploadOss(url,name,fileName,text){
|
||||
const uploadTask = uni.uploadFile({
|
||||
url:this.oss.host,
|
||||
header:{
|
||||
'Content-Type':'application/x-www-form-urlencoded',
|
||||
},
|
||||
filePath: url,
|
||||
name: 'file',
|
||||
formData: {
|
||||
'name':name,
|
||||
'key': fileName,
|
||||
'policy': this.oss.policy,
|
||||
'OSSAccessKeyId': this.oss.accessid,
|
||||
'success_action_status':200,
|
||||
'Signature': this.oss.signature,
|
||||
},
|
||||
success: (uploadFileRes)=>{
|
||||
this.newList.push(this.oss.host+fileName);
|
||||
this.uploadList = [];
|
||||
this.$emit('input',this.newList);
|
||||
},
|
||||
fail:(err)=>{
|
||||
uni.showModal({
|
||||
content: err.errMsg,
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
});
|
||||
uploadTask.onProgressUpdate((res) => {
|
||||
this.uploadList.forEach((item,index)=>{
|
||||
if(item.text == text){
|
||||
item.progress = res.progress;
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.uploadTitle{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6px;
|
||||
.limit{
|
||||
color: $uni-text-color-info;
|
||||
}
|
||||
}
|
||||
.imgList{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.uploadFlex{
|
||||
display: flex;
|
||||
}
|
||||
.itemBox{
|
||||
width: 32%;
|
||||
height: 100px;
|
||||
margin-right: 2%;
|
||||
padding: 7px 0 0 0;
|
||||
box-sizing: border-box;
|
||||
.imgItem{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.itemImg{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.deleteBox{
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
z-index: 20;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: $uni-bg-color-delete;
|
||||
.icon{font-size: 14px;}
|
||||
}
|
||||
}
|
||||
}
|
||||
.itemBox:nth-child(3n){
|
||||
margin-right: 0;
|
||||
}
|
||||
.uploadBut{
|
||||
height: 93px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: $uni-bg-color-placeholder;
|
||||
border-radius: 4px;
|
||||
margin: 7px 0 0 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.img_but{
|
||||
display: flex;flex-direction: column;align-items: center;
|
||||
.icon{color: $uni-text-color-inverse;}
|
||||
.text{margin-top: 5px;}
|
||||
}
|
||||
|
||||
.progressView{
|
||||
position: absolute;bottom: 0;left: 0;z-index: 2;
|
||||
width: 100%;height: 6px;background: $uni-bg-color-placeholder;border-radius: 8px;
|
||||
.progressWidth{
|
||||
height: 6px;background: $uni-color-primary;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
Reference in New Issue
Block a user