修改设备工单
This commit is contained in:
parent
2b8797a1ac
commit
162ef0ef26
26
App.vue
26
App.vue
|
|
@ -50,6 +50,7 @@
|
|||
.font13{font-size: 13px;}
|
||||
.font14{font-size: 14px;}
|
||||
.font15{font-size: 15px;}
|
||||
.font18{font-size: 18px;}
|
||||
.font20{font-size: 20px;}
|
||||
.font22{font-size: 22px;}
|
||||
.font24{font-size: 24px;}
|
||||
|
|
@ -64,16 +65,19 @@
|
|||
|
||||
//布局
|
||||
.flex_layout{display: flex;}
|
||||
.flex1{flex: 1;}
|
||||
.flex1{flex: 1;}
|
||||
.comView{flex: 1;overflow: hidden;}
|
||||
//paddind
|
||||
.padd_rigth5{padding-right: 5px;}
|
||||
.padd_bot6{padding-bottom: 6px;}
|
||||
.padd_top12{padding-top:12px;}
|
||||
.padd_rigth12{padding-right: 12px;}
|
||||
.padd_bot12{padding-bottom: 12px;}
|
||||
.padd_left12{padding-left:12px;}
|
||||
.padd_left12{padding-left:12px;}
|
||||
.padd12{padding: 12px;}
|
||||
//margin
|
||||
.mar_top12{margin-top: 12px;}
|
||||
.mar_top12{margin-top: 12px;}
|
||||
.mar_bot12{margin-bottom: 12px;}
|
||||
.page_list{margin-bottom: 12px;padding:0 12px;}
|
||||
|
||||
//有详情的列表
|
||||
|
|
@ -96,23 +100,32 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
.status{
|
||||
padding: 3px 10px;
|
||||
background: $uni-bg-color-success-dark;
|
||||
color: $uni-text-color-success;
|
||||
padding: 3px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.success{
|
||||
background: $uni-bg-color-success-dark;
|
||||
color: $uni-text-color-success;
|
||||
padding: 3px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.warning{
|
||||
background: $uni-bg-color-warning-dark;
|
||||
color: $uni-text-color-warning;
|
||||
padding: 3px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.error{
|
||||
background: $uni-bg-color-error-dark;
|
||||
color: $uni-text-color-danger;
|
||||
padding: 3px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -131,13 +144,13 @@
|
|||
background-color: #060B26;
|
||||
border-top: 1px solid #2E3249;
|
||||
height: 80px;
|
||||
// bottom: 40px;bottom: 40px;position: fixed;width: calc(100% - 28px);
|
||||
view{width: 50%;text-align: center;margin: 0 20px;border-radius: 19px;background: #DDD;line-height: 38px;height: 38px;margin-top: 6px;}
|
||||
}
|
||||
//底部固定添加按钮
|
||||
.page_bottom_button{
|
||||
width: 100%;position: fixed;bottom: 0px;background-color: #060B26;border-top: 1px solid #2E3249;height: 80px;
|
||||
.page_add{display: flex;justify-content: center;margin: 7px 20px;border-radius: 17.5px;background: #1C2755;line-height: 35px;}
|
||||
.page_add{display:flex;justify-content:center;align-items: center;margin: 7px 20px;border-radius: 17.5px;background: #1C2755;height: 38px;}
|
||||
.page_add .icon{margin-right: 4px;}
|
||||
}
|
||||
.bot_padding{padding-bottom: 100px;}
|
||||
|
||||
|
|
@ -177,6 +190,7 @@
|
|||
height: 102px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
background: $uni-bg-color-primary;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,306 @@
|
|||
<template>
|
||||
<view class="calendarBox">
|
||||
<view class="content-top">
|
||||
<view class="content-left" @click="prveClick">
|
||||
<text class="iconfont icon-gengduo more_icon"></text>
|
||||
</view>
|
||||
<view class="content-scroll">
|
||||
<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'}">
|
||||
<text class="item-text">{{item.name}}</text>
|
||||
<text class="item-date" v-if="params.date == 'day'">{{item.text}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content-right" @click="nextClick">
|
||||
<text class="iconfont icon-gengduo"></text>
|
||||
</view>
|
||||
</view>
|
||||
<swiper v-if="params.date!='day'" class="swiper-box-list" circular="true" easing-function="linear" :current="curIndex" @change="swiperChange" :style="'height:'+swiperHeight+'px'">
|
||||
<swiper-item class="swiper-topic-list" v-for="(item,index) in titleList" :key="index">
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return{
|
||||
params:this.params,
|
||||
|
||||
curIndex:0,
|
||||
scrollLeft:0,
|
||||
swiperHeight:0,
|
||||
itemWidth:53,
|
||||
itemColumn:5,
|
||||
|
||||
titleList:[
|
||||
{name:'日',date:11,text:''},
|
||||
{name:'一',date:12,text:''},
|
||||
{name:'二',date:13,text:''},
|
||||
{name:'三',date:14,text:''},
|
||||
{name:'四',date:15,text:''},
|
||||
{name:'五',date:16,text:''},
|
||||
{name:'六',date:17,text:''},
|
||||
],
|
||||
}
|
||||
},
|
||||
inject:['params','changeDateText'],
|
||||
watch:{
|
||||
'params.date':{
|
||||
handler(val){
|
||||
this.params.date = val;
|
||||
this.itemColumn = val=='day'?5:4
|
||||
this.setTitle();
|
||||
this.getScrollW();
|
||||
this.getSwiperH();
|
||||
},
|
||||
immediate:false,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setTitle();
|
||||
},
|
||||
methods:{
|
||||
getScrollW() {
|
||||
let itemWidth = 0;
|
||||
let query = uni.createSelectorQuery().in(this);
|
||||
query.select('.scroll-view').boundingClientRect(data => {
|
||||
this.itemWidth = (data.width/this.itemColumn).toFixed(0);
|
||||
itemWidth = (data.width/this.itemColumn).toFixed(0);
|
||||
this.getItemWidth(itemWidth);
|
||||
}).exec();
|
||||
},
|
||||
getSwiperH(){
|
||||
if(this.params.date!='day'){
|
||||
setTimeout(()=>{
|
||||
let query = uni.createSelectorQuery().in(this);
|
||||
query.select('.swiper-item').boundingClientRect(data => {
|
||||
if(data){
|
||||
this.swiperHeight = data.height;
|
||||
}else{
|
||||
this.getSwiperH();
|
||||
}
|
||||
}).exec();
|
||||
},100)
|
||||
}
|
||||
},
|
||||
getItemWidth(num){
|
||||
let query = uni.createSelectorQuery().in(this);
|
||||
query.selectAll('.scroll-item').boundingClientRect(data => {
|
||||
let dataLen = data.length;
|
||||
for (let i = 0; i < dataLen; i++) {
|
||||
this.titleList[i].width = Number(num);
|
||||
this.titleList[i].left = Number(num) + Number(data[i].left);
|
||||
}
|
||||
}).exec();
|
||||
},
|
||||
|
||||
// 获取数据
|
||||
setTitle(){
|
||||
if(this.params.date == 'day'){
|
||||
let list = this.$wf.getDatesOfWeek();
|
||||
list.forEach(item=>{
|
||||
item.text = item.date.split('-')[2];
|
||||
})
|
||||
this.titleList = list;
|
||||
}
|
||||
if(this.params.date == 'week'){
|
||||
let list = [];
|
||||
let arr = this.$wf.getWeeksOfMonth();
|
||||
|
||||
arr.forEach((item,index)=>{
|
||||
let date = item.find(em=> em!==null && em!==undefined);
|
||||
item.forEach(em=>{
|
||||
if(em){
|
||||
em.text = em.date.split('-')[2];
|
||||
em.name = '星期'+em.name;
|
||||
}
|
||||
})
|
||||
list.push({
|
||||
name:'第'+this.$wf.numberToChineseLower(Number(index+1))+'周',
|
||||
date:date.date,
|
||||
data:item.filter(em=> em!==null),
|
||||
})
|
||||
})
|
||||
console.log(list,233)
|
||||
this.titleList = list;
|
||||
}
|
||||
if(this.params.date == 'month'){
|
||||
|
||||
}
|
||||
|
||||
this.getScrollW();
|
||||
this.changeDate();
|
||||
},
|
||||
|
||||
// 选择标题
|
||||
changeMenu(index) {
|
||||
this.curIndex = index;
|
||||
this.scrollLeft = 0;
|
||||
for (let i = 0; i < index - 1; i++) {
|
||||
this.scrollLeft += this.titleList[i].width;
|
||||
};
|
||||
this.changeDate(this.titleList[index].date);
|
||||
|
||||
if(this.params.date!='day'){
|
||||
this.getSwiperH();
|
||||
}
|
||||
},
|
||||
swiperChange(e) {
|
||||
let index = e.detail.current;
|
||||
this.changeMenu(index);
|
||||
},
|
||||
prveClick(){
|
||||
if(this.params.date == 'day'){
|
||||
let date = String(this.titleList[0].date);
|
||||
let list = this.$wf.getPreviousWeekDatesWithDays(date);
|
||||
list.forEach(item=>{
|
||||
item.text = item.date.split('-')[2];
|
||||
})
|
||||
this.titleList = list;
|
||||
}
|
||||
if(this.params.date == 'week'){
|
||||
// 获取本月的选中周日期
|
||||
let date = this.titleList[this.curIndex];
|
||||
let countNum = this.$wf.getPreviousMonthWeekCount(String(date.date));
|
||||
if(this.curIndex >= countNum){
|
||||
this.curIndex = countNum-1;
|
||||
}
|
||||
let list = [];
|
||||
let arr = this.$wf.getPreviousMonthGroupedByWeek(String(date.date));
|
||||
arr.forEach((item,index)=>{
|
||||
let date = item.find(em=> em!==null && em!==undefined);
|
||||
item.forEach(em=>{
|
||||
if(em){
|
||||
em.text = em.date.split('-')[2];
|
||||
em.name = '星期'+em.name;
|
||||
}
|
||||
})
|
||||
list.push({
|
||||
name:'第'+this.$wf.numberToChineseLower(Number(index+1))+'周',
|
||||
date:date.date,
|
||||
data:item.filter(em=> em!==null),
|
||||
})
|
||||
})
|
||||
this.titleList = list;
|
||||
}
|
||||
|
||||
this.getScrollW();
|
||||
this.changeDate();
|
||||
|
||||
if(this.params.date!='day'){
|
||||
this.getSwiperH();
|
||||
}
|
||||
},
|
||||
nextClick(){
|
||||
if(this.params.date == 'day'){
|
||||
let date = String(this.titleList[this.titleList.length -1].date);
|
||||
let list = this.$wf.getNextWeekDatesWithDays(date);
|
||||
list.forEach(item=>{
|
||||
item.text = item.date.split('-')[2];
|
||||
})
|
||||
this.titleList = list;
|
||||
}
|
||||
// 获取下一个月所有周
|
||||
if(this.params.date == 'week'){
|
||||
// 获取本月的选中周日期
|
||||
let date = this.titleList[this.curIndex];
|
||||
let countNum = this.$wf.getNextMonthWeekCount(String(date.date));
|
||||
if(this.curIndex >= countNum){
|
||||
this.curIndex = countNum-1;
|
||||
}
|
||||
let list = [];
|
||||
let arr = this.$wf.getNextMonthGroupedByWeek(String(date.date));
|
||||
arr.forEach((item,index)=>{
|
||||
let date = item.find(em=> em!==null && em!==undefined);
|
||||
item.forEach(em=>{
|
||||
if(em){
|
||||
em.text = em.date.split('-')[2];
|
||||
em.name = '星期'+em.name;
|
||||
}
|
||||
})
|
||||
list.push({
|
||||
name:'第'+this.$wf.numberToChineseLower(Number(index+1))+'周',
|
||||
date:date.date,
|
||||
data:item.filter(em=> em!==null),
|
||||
})
|
||||
})
|
||||
this.titleList = list;
|
||||
}
|
||||
|
||||
this.getScrollW();
|
||||
this.changeDate();
|
||||
|
||||
if(this.params.date!='day'){
|
||||
this.getSwiperH();
|
||||
}
|
||||
},
|
||||
|
||||
// 修改时间的阶段
|
||||
changeDate(item){
|
||||
let text = null;
|
||||
if(this.titleList[this.curIndex] == undefined){
|
||||
text = this.titleList[this.titleList.length -1].date;
|
||||
this.current = this.titleList.length -1;
|
||||
}else{
|
||||
text = this.titleList[this.curIndex].date;
|
||||
}
|
||||
if(item){
|
||||
text = item
|
||||
}
|
||||
let month = text.split('-')[0] + '-' + text.split('-')[1]
|
||||
this.changeDateText(month);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.content-top{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.content-left{flex-basis: 30px;text-align: center;
|
||||
.more_icon{display: inline-block;transform: scaleX(-1);}
|
||||
}
|
||||
.content-scroll{flex: 1;overflow: hidden;}
|
||||
.center-cut-menu {width: 100%;height: 50px;display: flex;align-items: center;
|
||||
.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{
|
||||
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;
|
||||
}
|
||||
.monthViewItem{
|
||||
border: none;
|
||||
border-radius: 40px;
|
||||
}
|
||||
.active {
|
||||
background: $uni-color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.monthScroll{height: 28px;}
|
||||
}
|
||||
.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;
|
||||
.name{margin-bottom: 6px;}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -65,6 +65,6 @@
|
|||
}
|
||||
}
|
||||
.loadBox{
|
||||
color: $uni-color-primary;
|
||||
color: $uni-text-color-loading;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
<template>
|
||||
<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 />
|
||||
<text class="iconfont icon-gengduo" :class="selectShow?'selectOpen':'selectHide'"></text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selectShow:false,
|
||||
value:'',
|
||||
text:'',
|
||||
id:this.id,
|
||||
array:this.list,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
placeholder:{
|
||||
type:[String],
|
||||
default:'请选择'
|
||||
},
|
||||
list:{
|
||||
type:[Array],
|
||||
default:[]
|
||||
},
|
||||
id:{
|
||||
type:[String,Number],
|
||||
default:''
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
id:{
|
||||
handler(val){
|
||||
this.array.forEach((item,index)=>{
|
||||
if(item.value == val){
|
||||
this.value = index;
|
||||
this.text = item.name;
|
||||
this.id = val;
|
||||
}
|
||||
})
|
||||
},
|
||||
immediate:true,
|
||||
deep:true
|
||||
},
|
||||
list:{
|
||||
handler(val){
|
||||
this.array = val;
|
||||
this.array.forEach((item,index)=>{
|
||||
if(item.value == this.id){
|
||||
this.value = index;
|
||||
this.text = item.name;
|
||||
this.id = item.value;
|
||||
}
|
||||
})
|
||||
},
|
||||
immediate:true,
|
||||
deep:true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
pickerClick(){
|
||||
this.selectShow = true;
|
||||
},
|
||||
bindPickerChange(e){
|
||||
this.value = e.detail.value;
|
||||
this.text = this.array[e.detail.value].name;
|
||||
this.id = this.array[e.detail.value].value;
|
||||
this.selectShow = false;
|
||||
|
||||
this.$emit('change',{name:this.array[e.detail.value].name,value:this.array[e.detail.value].value,item:this.array[e.detail.value]});
|
||||
},
|
||||
pickerHide(){
|
||||
this.selectShow = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.selectView{
|
||||
width: 100%;
|
||||
}
|
||||
.pickerBom{
|
||||
width: 100%;
|
||||
}
|
||||
.selectOpen{
|
||||
animation: rotate 0.6s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
.selectHide{
|
||||
animation: rotate180 0.6s ;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
@keyframes rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotate180 {
|
||||
from {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
6
main.js
6
main.js
|
|
@ -7,6 +7,8 @@ import "./static/iconfont/iconfont-weapp/iconfont-weapp-icon.css"
|
|||
import searchView from './components/searchView/index'
|
||||
import loadMore from './components/loadMore/index'
|
||||
import progressBar from './components/progressBar'
|
||||
import pickerSelect from './components/pickerSelect/index'
|
||||
import calendar from './components/calendar/index'
|
||||
|
||||
// #ifndef VUE3
|
||||
import Vue from 'vue'
|
||||
|
|
@ -16,6 +18,8 @@ import svg from './static/iconfont/svg.js'
|
|||
Vue.component('search-view',searchView);
|
||||
Vue.component('load-more',loadMore);
|
||||
Vue.component('progress-bar',progressBar);
|
||||
Vue.component('picker-select',pickerSelect);
|
||||
Vue.component('calendar',calendar);
|
||||
|
||||
|
||||
Vue.use(svg);
|
||||
|
|
@ -42,6 +46,8 @@ export function createApp() {
|
|||
app.component('searchView', searchView);
|
||||
app.component('loadMore', loadMore);
|
||||
app.component('progressBar', progressBar);
|
||||
app.component('pickerSelect', pickerSelect);
|
||||
app.component('calendar',calendar);
|
||||
|
||||
app.config.globalProperties.$api = request;
|
||||
app.config.globalProperties.$wf = publicMethods;
|
||||
|
|
|
|||
14
pages.json
14
pages.json
|
|
@ -46,9 +46,17 @@
|
|||
"navigationBarTitleText" : "生产工单管理",
|
||||
"enablePullDownRefresh" : true,
|
||||
"pullToRefresh":{
|
||||
"color":"red"
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/schedul/list",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "工单排程",
|
||||
"enablePullDownRefresh" : false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/index/schedule",
|
||||
|
|
@ -71,14 +79,14 @@
|
|||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "设备管理",
|
||||
"enablePullDownRefresh" : false
|
||||
"enablePullDownRefresh" : true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/equipmentManage/editDevice",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "",
|
||||
"navigationBarTitleText" : "添加设备",
|
||||
"enablePullDownRefresh" : false
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
<template>
|
||||
<view class="page_padding font14">
|
||||
<view class="padd_bot12">
|
||||
<text>硬件设备状态</text>
|
||||
<view class="padd_bot12 font14 flex_layout">
|
||||
<text>硬件设备状态</text>
|
||||
<view class="status font12"><text class="drop"></text>在线</view>
|
||||
</view>
|
||||
<view class="body-view contentboxsty">
|
||||
<view class="content-top flex_layout padd_bot12">
|
||||
<view class="flex1 theme_color">
|
||||
相机工作中
|
||||
<text class="drop"></text>相机工作中
|
||||
</view>
|
||||
<view class="top_right" @click="toList()">
|
||||
更多安全事件
|
||||
|
|
@ -19,19 +20,19 @@
|
|||
<view class="content_data">
|
||||
<view class="device_row">
|
||||
<text class="name font_bold">设备名称</text>
|
||||
<text>安全监控相机</text>
|
||||
<text class="text">安全监控相机</text>
|
||||
</view>
|
||||
<view class="device_row">
|
||||
<text class="name font_bold">开机时间</text>
|
||||
<text>2024-02-11 08:00:45</text>
|
||||
<text class="text">2024-02-11 08:00:45</text>
|
||||
</view>
|
||||
<view class="device_row">
|
||||
<text class="name font_bold">安全事件</text>
|
||||
<text>检测到指定区域内有目标越过警戒线</text>
|
||||
<text class="text">检测到指定区域内有目标越过警戒线</text>
|
||||
</view>
|
||||
<view class="device_row">
|
||||
<text class="name font_bold">检测时间</text>
|
||||
<text>2024-01-11 19:09:56</text>
|
||||
<text class="text">2024-01-11 19:09:56</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -55,11 +56,34 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.body-view{padding: 12px 13px;}
|
||||
.top_right{color: #E6A23C;}
|
||||
.device_row{padding: 6px 0;
|
||||
.name {padding-right: 12px;}
|
||||
}
|
||||
<style scoped lang="scss">
|
||||
.body-view{padding: 12px 13px;}
|
||||
.theme_color{
|
||||
display: flex;align-items: center;
|
||||
.drop{width: 4px;height: 4px;background: $uni-text-color-primary;display: inline-block;margin-right: 6px;border-radius: 50%;}
|
||||
.top_right{color: $uni-text-color-primary;}
|
||||
}
|
||||
.device_row{padding: 6px 0;display: flex;align-items: center;
|
||||
.name {flex-basis: 70px;}
|
||||
}
|
||||
.flex_layout{
|
||||
align-items: center;
|
||||
}
|
||||
.status{
|
||||
background: $uni-bg-color-success;
|
||||
margin-left: 8px;
|
||||
border-radius: 20px;
|
||||
padding: 3px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.drop{
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: $uni-bg-color-whith;
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,54 +1,54 @@
|
|||
<template>
|
||||
<view class="page_padding">
|
||||
<view class=".padd_bot12">
|
||||
<text>硬件设备状态</text>
|
||||
<view class="padd_bot12 font14 flex_layout">
|
||||
<text>硬件设备状态</text>
|
||||
<view class="status font12"><text class="drop"></text>在线</view>
|
||||
</view>
|
||||
<view class="body-view contentboxsty">
|
||||
<view class="content-top">
|
||||
<view class="content-left">
|
||||
<view class="content-left" @click="prveClick">
|
||||
<text class="iconfont icon-gengduo more_icon"></text>
|
||||
</view>
|
||||
<view class="content-scroll">
|
||||
<view class="center-cut-menu">
|
||||
<scroll-view scroll-x="true" scroll-with-animation="true" class="scroll-view" :scroll-left="scrollLeft">
|
||||
<view class="scroll-item" v-for="(item, index) in list" :key="index" @click="changeMenu(index)">
|
||||
<scroll-view scroll-x="true" show-scrollbar="false" scroll-with-animation="true" :scroll-left="scrollLeft" class="scroll-view horizontalScrollView" >
|
||||
<view class="scroll-item" :style="'width:'+itemWidth+'px'" v-for="(item, index) in list" :key="index" @click="changeMenu(index)">
|
||||
<text class="item-text" :class="curIndex == index? 'active' : ''">{{item.name}}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content-right">
|
||||
<view class="content-right" @click="nextClick">
|
||||
<text class="iconfont icon-gengduo"></text>
|
||||
</view>
|
||||
</view>
|
||||
<swiper class="swiper-box-list" circular="true" :current="curIndex" @change="swiperChange">
|
||||
<swiper class="swiper-box-list" circular="true" easing-function="linear" :current="curIndex" @change="swiperChange">
|
||||
<swiper-item class="swiper-topic-list" v-for="item in swiperDateList" :key="item.id">
|
||||
<view class="swiper-item" v-if="item.id==1">
|
||||
<view class="" style="width: 100%;">
|
||||
<image style="width: 100%;" src="http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/background.png" mode=""></image>
|
||||
<view class="swiper-item">
|
||||
<view class="img">
|
||||
<image style="width: 100%;height: 100%;" :src="item.img"></image>
|
||||
</view>
|
||||
<view class="font14">
|
||||
<view class="device_row">
|
||||
<view class="device_row">
|
||||
<text class="name font_bold">设备名称</text>
|
||||
<text>双头立锯</text>
|
||||
<view @click="toCamera()" class="" style="position: absolute;right: 0;">
|
||||
相机
|
||||
<text class="text">双头立锯</text>
|
||||
<view @click="toCamera()" class="videoIcon text" style="position: absolute;right: 0;">
|
||||
<text class="iconfont icon-a-shexiangtou_shiti1"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="device_row">
|
||||
<text class="name font_bold">开机时间</text>
|
||||
<text>2024-02-11 08:00:45</text>
|
||||
<text class="text">2024-02-11 08:00:45</text>
|
||||
</view>
|
||||
<view class="device_row">
|
||||
<text class="name font_bold">保养到期日</text>
|
||||
<text>2024-02-11 08:00:45</text>
|
||||
<text class="text">2024-02-11 08:00:45</text>
|
||||
</view>
|
||||
<view class="device_row">
|
||||
<text class="name font_bold">今日停机</text>
|
||||
<text>5次</text>
|
||||
<text class="text">5次</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
|
@ -62,169 +62,114 @@
|
|||
return {
|
||||
list: [{
|
||||
id: 1,
|
||||
name: '多片锯'
|
||||
name: '多片锯',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '立式带锯'
|
||||
name: '双头带锯',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '视觉'
|
||||
name: '视觉分析',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '卧锯'
|
||||
name: '卧锯带锯',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '多片锯'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: '卧锯测试A'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: '卧锯B'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: '卧锯测试3'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: '卧锯4'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: '卧锯5'
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: '卧锯6'
|
||||
name: '上料机架',
|
||||
},
|
||||
],
|
||||
// Tab切换内容
|
||||
swiperDateList: [
|
||||
{
|
||||
id: 1,
|
||||
content: '1'
|
||||
content: '1',
|
||||
img:'http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/duopian.png'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
content: '2'
|
||||
content: '2',
|
||||
img:'http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/liju.png'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
content: '3'
|
||||
content: '3',
|
||||
img:'http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/shijue.png'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
content: '4'
|
||||
content: '4',
|
||||
img:'http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/woshi.png'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
content: '5'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
content: '6'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
content: '7'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
content: '8'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
content: '9'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
content: '10'
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
content: '11'
|
||||
content: '5',
|
||||
img:'http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/shang.png'
|
||||
},
|
||||
],
|
||||
contentScrollW: 0, // 导航区宽度
|
||||
curIndex: 0, // 当前选中
|
||||
scrollLeft: 0, // 横向滚动条位置
|
||||
itemWidth: 90,
|
||||
curIndex: 0,
|
||||
scrollLeft: 0,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 获取标题区域宽度，和每个子元素节点的宽度
|
||||
this.getScrollW()
|
||||
|
||||
},
|
||||
onReady() {
|
||||
this.getScrollW();
|
||||
},
|
||||
methods: {
|
||||
toCamera(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/deviceStatus/deviceCamera'
|
||||
})
|
||||
},
|
||||
// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
|
||||
getScrollW() {
|
||||
let query = uni.createSelectorQuery().in(this);
|
||||
query.select('.scroll-view').boundingClientRect(data => {
|
||||
// 拿到 scroll-view 组件宽度
|
||||
this.contentScrollW = data.width
|
||||
}).exec();
|
||||
|
||||
query.selectAll('.scroll-item').boundingClientRect(data => {
|
||||
let dataLen = data.length;
|
||||
for (let i = 0; i < dataLen; i++) {
|
||||
// scroll-view 子元素组件距离左边栏的距离
|
||||
this.list[i].left = data[i].left;
|
||||
// scroll-view 子元素组件宽度
|
||||
this.list[i].width = data[i].width
|
||||
}
|
||||
}).exec()
|
||||
},
|
||||
|
||||
// 选择标题
|
||||
changeMenu(index) {
|
||||
this.curIndex = index;
|
||||
// console.log(index,111)
|
||||
// 效果一(当前点击子元素靠左展示) 局限性：子元素宽度相同
|
||||
// this.scrollLeft = index * this.list[index].width
|
||||
|
||||
// 效果一(当前点击子元素靠左展示) 子元素宽度不相同也可实现
|
||||
// this.scrollLeft = 0;
|
||||
// for (let i = 0; i < index; i++) {
|
||||
// this.scrollLeft += this.list[i].width
|
||||
// };
|
||||
|
||||
|
||||
// 效果二(当前点击子元素靠左留一展示) 局限性：子元素宽度相同
|
||||
// this.scrollLeft = (index - 1) * this.list[index].width
|
||||
|
||||
// 效果二(当前点击子元素靠左留一展示) 子元素宽度不相同也可实现
|
||||
this.scrollLeft = 0;
|
||||
for (let i = 0; i < index - 1; i++) {
|
||||
this.scrollLeft += this.list[i].width
|
||||
};
|
||||
|
||||
|
||||
// 效果三(当前点击子元素居中展示) 不受子元素宽度影响
|
||||
// this.scrollLeft = this.list[index].left - this.contentScrollW / 2 + this.list[index].width / 2;
|
||||
},
|
||||
//
|
||||
swiperChange(e) {
|
||||
// console.log(22,e)
|
||||
let index = e.detail.current
|
||||
this.changeMenu(index)
|
||||
}
|
||||
// 区域宽度，子元素的宽度以及距离左边栏的距离
|
||||
getScrollW() {
|
||||
let itemWidth = 0;
|
||||
let query = uni.createSelectorQuery().in(this);
|
||||
query.select('.scroll-view').boundingClientRect(data => {
|
||||
this.itemWidth = (data.width/3).toFixed(0);
|
||||
itemWidth = (data.width/3).toFixed(0);
|
||||
this.getItemWidth(itemWidth);
|
||||
}).exec();
|
||||
},
|
||||
getItemWidth(num){
|
||||
let query = uni.createSelectorQuery().in(this);
|
||||
query.selectAll('.scroll-item').boundingClientRect(data => {
|
||||
let dataLen = data.length;
|
||||
for (let i = 0; i < dataLen; i++) {
|
||||
this.list[i].width = Number(num);
|
||||
this.list[i].left = Number(num) + Number(data[i].left);
|
||||
}
|
||||
}).exec()
|
||||
},
|
||||
|
||||
// 选择标题
|
||||
changeMenu(index) {
|
||||
this.curIndex = index;
|
||||
this.scrollLeft = 0;
|
||||
for (let i = 0; i < index - 1; i++) {
|
||||
this.scrollLeft += this.list[i].width;
|
||||
};
|
||||
},
|
||||
swiperChange(e) {
|
||||
let index = e.detail.current;
|
||||
this.changeMenu(index);
|
||||
},
|
||||
prveClick(){
|
||||
this.curIndex = this.curIndex==0? 0 : this.curIndex-1;
|
||||
},
|
||||
nextClick(){
|
||||
this.curIndex = this.curIndex < this.list.length-1? this.curIndex+1 : this.curIndex;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
<style scoped lang="scss">
|
||||
.body-view{
|
||||
height: 450px;
|
||||
.content-top{
|
||||
|
|
@ -233,14 +178,13 @@
|
|||
.content-left{flex-basis: 30px;text-align: center;
|
||||
.more_icon{display: inline-block;transform: scaleX(-1);}
|
||||
}
|
||||
.content-scroll{flex: 1;overflow: auto;}
|
||||
.center-cut-menu {width: 100%;height: 100rpx;box-sizing: border-box;
|
||||
.content-scroll{flex: 1;overflow: hidden;}
|
||||
.center-cut-menu {width: 100%;height: 100rpx;
|
||||
.scroll-view {height: 100rpx;white-space: nowrap;
|
||||
.scroll-item {height: 100rpx;padding: 0 20rpx;display: inline-block;text-align: center;
|
||||
.scroll-item {height: 100rpx;padding: 0 20rpx;display: inline-block;text-align: center;box-sizing: border-box;
|
||||
.item-text {font-size: 14px;line-height: 100rpx;
|
||||
&.active {
|
||||
// color: #1468FF;
|
||||
font-size: 18px;
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -248,10 +192,39 @@
|
|||
}
|
||||
.content-right{flex-basis: 30px;text-align: center;}
|
||||
}
|
||||
.swiper-box-list{height: 400px;padding:0 12px;
|
||||
.swiper-box-list{height: 400px;padding:0 12px;
|
||||
.device_row:first-child{margin-top: 6px;}
|
||||
.device_row{padding: 6px 0;display: flex;
|
||||
.name{width: 82px;}
|
||||
.name{flex-basis: 82px;}
|
||||
}
|
||||
}
|
||||
}
|
||||
.flex_layout{
|
||||
align-items: center;
|
||||
}
|
||||
.swiper-item{
|
||||
.img{
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
}
|
||||
.videoIcon{
|
||||
color: $uni-color-primary;
|
||||
}
|
||||
}
|
||||
.status{
|
||||
background: $uni-bg-color-success;
|
||||
margin-left: 8px;
|
||||
border-radius: 20px;
|
||||
padding: 3px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.drop{
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: $uni-bg-color-whith;
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,18 +2,17 @@
|
|||
<!-- 绑定安全生产监控相机 -->
|
||||
<view>
|
||||
<view class="page_padding">
|
||||
<view class="page_name font14">绑定安全生产监控相机</view>
|
||||
<view class="page_content contentboxsty font13">
|
||||
<view class="content_row">
|
||||
<view class="name">串流推流Url</view>
|
||||
<view class="">
|
||||
<input placeholder="请输入串流推流Url"/>
|
||||
<view class="name font_bold">串流推流Url</view>
|
||||
<view class="text">
|
||||
<input v-model="form.stream_url" placeholder="请输入串流推流Url" disabled/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">AppName</view>
|
||||
<view class="">
|
||||
<input placeholder="请输入APP名称"/>
|
||||
<view class="name font_bold">AppName</view>
|
||||
<view class="text">
|
||||
<input v-model="form.app_name" placeholder="请输入APP名称"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row noborbot">
|
||||
|
|
@ -23,9 +22,9 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">StreamName</view>
|
||||
<view class="">
|
||||
<input placeholder="请输入StreamName"/>
|
||||
<view class="name font_bold">StreamName</view>
|
||||
<view class="text">
|
||||
<input v-model="form.stream_name" placeholder="请输入StreamName"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row noborbot">
|
||||
|
|
@ -35,43 +34,49 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">设备IP</view>
|
||||
<view class="">
|
||||
<input placeholder="请输入设备IP"/>
|
||||
<view class="name font_bold">设备IP</view>
|
||||
<view class="text">
|
||||
<input v-model="form.monitor_ip" placeholder="请输入设备IP"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">端口</view>
|
||||
<view class="">
|
||||
<input placeholder="请输入设备端口"/>
|
||||
<view class="name font_bold">端口</view>
|
||||
<view class="text">
|
||||
<input v-model="form.monitor_port" placeholder="请输入设备端口"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">用户名</view>
|
||||
<view class="">
|
||||
<input placeholder="请输入您的用户名"/>
|
||||
<view class="name font_bold">用户名</view>
|
||||
<view class="text">
|
||||
<input v-model="form.monitor_account" placeholder="请输入您的用户名"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">密码</view>
|
||||
<view class="">
|
||||
<input placeholder="请输入密码"/>
|
||||
<view class="name font_bold">密码</view>
|
||||
<view class="text">
|
||||
<input password type="safe-password" v-model="form.monitor_password" placeholder="请输入密码"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">监控推流权限</view>
|
||||
<view class="flex_layout">
|
||||
<view class="t-icon t-icon-qiyong1 contenticon"></view><text class="text">Token验证</text>
|
||||
<view class="t-icon t-icon-jinyong2 contenticon"></view><text class="text">禁用</text>
|
||||
<!-- <label class="radio"><radio value="r1" checked="true" />Token验证</label>
|
||||
<label class="radio"><radio value="r2" />禁用</label> -->
|
||||
<view class="name font_bold">监控推流权限</view>
|
||||
<view class="text flex_layout">
|
||||
<view class="switch" @click="form.stream_type=1">
|
||||
<view v-if="form.stream_type ==1" class="t-icon t-icon-qiyong1 contenticon"></view>
|
||||
<view v-else class="t-icon t-icon-jinyong1 contenticon"></view>
|
||||
<text class="text">Token验证</text>
|
||||
</view>
|
||||
<view class="switch" @click="form.stream_type=2">
|
||||
<view v-if="form.stream_type ==2" class="t-icon t-icon-qiyong1 contenticon"></view>
|
||||
<view v-else class="t-icon t-icon-jinyong1 contenticon"></view>
|
||||
<text class="text">禁用</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom_but flex_layout">
|
||||
<view class="font13">保存</view>
|
||||
<view class="font13">取消</view>
|
||||
<view class="but_color font13" @click="save">保存</view>
|
||||
<view class="font13" @click="cancel">取消</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -80,24 +85,85 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
form:{
|
||||
id:'',
|
||||
stream_url:'',
|
||||
app_name:'',
|
||||
stream_name:'',
|
||||
stream_type:1,
|
||||
monitor_ip:'',
|
||||
monitor_port:'',
|
||||
monitor_account:'',
|
||||
monitor_password:''
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.form.id = option.id;
|
||||
this.getVideo(option.id);
|
||||
},
|
||||
onReady() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
getVideo(id){
|
||||
this.$api.request('/get.video.config',{id:id}).then(res=>{
|
||||
this.form.stream_url = res.data.stream_url;
|
||||
if(res.data.app_name && res.data.eq_name){
|
||||
this.form.app_name = res.data.app_name;
|
||||
this.form.stream_name = res.data.stream_name;
|
||||
this.form.stream_type = res.data.stream_type;
|
||||
this.form.monitor_ip = res.data.monitor_ip;
|
||||
this.form.monitor_port = res.data.monitor_port;
|
||||
this.form.monitor_account = res.data.monitor_account;
|
||||
this.form.monitor_password = res.data.monitor_password;
|
||||
}
|
||||
}).catch(err=>{
|
||||
|
||||
})
|
||||
},
|
||||
save(){
|
||||
this.$api.postFuncLoading('/bind.video.config',this.form).then(res=>{
|
||||
this.parentClick();
|
||||
this.reset();
|
||||
this.$wf.toast({type:'success',text:'保存成功'});
|
||||
}).catch(err=>{
|
||||
|
||||
})
|
||||
},
|
||||
cancel(){
|
||||
this.reset();
|
||||
},
|
||||
reset(){
|
||||
this.form.app_name = '';
|
||||
this.form.stream_name = '';
|
||||
this.form.stream_type = 1;
|
||||
this.form.monitor_ip = '';
|
||||
this.form.monitor_port = '';
|
||||
this.form.monitor_account = '';
|
||||
this.form.monitor_password = '';
|
||||
},
|
||||
parentClick(){
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length >= 2) {
|
||||
const prevPage = pages[pages.length - 2];
|
||||
prevPage.$vm.getList();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page_name{margin-bottom: 10px;}
|
||||
<style scoped lang="scss">
|
||||
.page_content{padding: 0 12px;}
|
||||
.content_row{display: flex;border-bottom: 1px solid #2D3A6F;height: 44px;align-items: center;
|
||||
.name{width: 30%;}
|
||||
.name{flex-basis: 96px;}
|
||||
.text{flex: 1;}
|
||||
.tip{width: 70%;font-size: 10px;color: #666;}
|
||||
.flex_layout{
|
||||
.contenticon{width: 20px;height: 20px;}
|
||||
.contenticon{width: 16px;height: 16px;}
|
||||
.text{padding: 0 20px 0 5px;}
|
||||
}
|
||||
}
|
||||
}
|
||||
.switch{display: flex;align-items: center;}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,33 @@
|
|||
<template>
|
||||
<view class="page_padding">
|
||||
<view class="contentboxsty page_content ">
|
||||
|
||||
<view class="detail_list contentboxsty page_content font13">
|
||||
<view class="content_row">
|
||||
<view class="name">设备</view>
|
||||
<view class="data">{{form.name}}</view>
|
||||
<view class="name font_bold">设备</view>
|
||||
<view class="text">{{form.eq_name}}</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">设备名称</view>
|
||||
<view class="data">双头立锯</view>
|
||||
<view class="name font_bold">设备名称</view>
|
||||
<view class="text">{{form.name}}</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">设备功率</view>
|
||||
<view class="data">双头立锯</view>
|
||||
<view class="name font_bold">设备功率</view>
|
||||
<view class="text">{{form.power}}</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">设备IP</view>
|
||||
<view class="data">双头立锯</view>
|
||||
<view class="name font_bold">设备IP</view>
|
||||
<view class="text">{{form.equipment_configs.length>0? form.equipment_configs[0].ip:''}}</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">端口</view>
|
||||
<view class="data">双头立锯</view>
|
||||
<view class="name font_bold">端口</view>
|
||||
<view class="text">{{form.equipment_configs.length>0? form.equipment_configs[0].port:''}}</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">状态</view>
|
||||
<view class="data">{{form.active_status==true?'启用':'禁用'}}</view>
|
||||
<view class="name font_bold">状态</view>
|
||||
<view class="text">{{form.active_status==true?'启用':'禁用'}}</view>
|
||||
</view>
|
||||
<view class="textarea_row">
|
||||
<view class="name font13">设置备注</view>
|
||||
<view class="">
|
||||
<view class="name font_bold font13">备注</view>
|
||||
<view class="text textareaText">
|
||||
{{form.remark}}
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -40,7 +39,11 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
form:{}
|
||||
form:{
|
||||
equipment_configs:[
|
||||
{ip:'',port:''}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad(options){
|
||||
|
|
@ -49,7 +52,6 @@
|
|||
methods: {
|
||||
getDetail(id){
|
||||
this.$api.postFuncLoading('/device.info',{id:id}).then(res=>{
|
||||
console.log(res)
|
||||
this.form = res.data
|
||||
})
|
||||
},
|
||||
|
|
@ -57,13 +59,13 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content_row{display: flex;height: 44px;align-items: center;
|
||||
.name{width: 30%;font-size: 13px;}
|
||||
.data{font-size: 14px;}
|
||||
<style scoped lang="scss">
|
||||
.content_row{display: flex;align-items: center;padding-top: 17px;
|
||||
.name{flex-basis: 80px;}
|
||||
.text{flex: 1;}
|
||||
}
|
||||
.textarea_row{
|
||||
.name{padding: 12px 0;}
|
||||
// textarea{border-radius: 4px;background: rgba(255, 255, 255, 0.50);width: 100%;}
|
||||
.name{padding: 17px 0;}
|
||||
.textareaText{min-height: 80px;}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,111 +1,229 @@
|
|||
<template>
|
||||
<page-meta>
|
||||
<navigation-bar title="添加设备" color="white"></navigation-bar>
|
||||
<template>
|
||||
<page-meta>
|
||||
<navigation-bar :title="this.form.id && this.form.id > 0?'编辑设备':'添加设备'"></navigation-bar>
|
||||
</page-meta>
|
||||
<view class="page_padding">
|
||||
<!-- <view class="page_name font14">
|
||||
添加/编辑设备
|
||||
</view> -->
|
||||
<view class="page_padding bot_padding">
|
||||
<view class="page_content contentboxsty font13">
|
||||
<view class="content_row">
|
||||
<view class="name">选择设备</view>
|
||||
<picker placeholder="请选择设备" @change="bindPickerChange" :value="index" :range="array" >
|
||||
<input type="text" :value="array[index]" placeholder="请选择设备" disabled />
|
||||
</picker>
|
||||
|
||||
<!-- <view class="">
|
||||
<picker @change="bindPickerChange" placeholder="请选择设备" :value="index" :range="array">
|
||||
<view class="uni-input" style="width: 70%;">{{array[index]}}</view>
|
||||
</picker>
|
||||
</view -->
|
||||
<view class="name font_bold">选择设备</view>
|
||||
<pickerSelect class="comView" @change="equipmentChange" :list="setMap.equipment" :id="form.eq_no" placeholder="请选择设备" />
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">设备自定义名称</view>
|
||||
<view class="">
|
||||
<input placeholder="请输入设备名称"/>
|
||||
|
||||
<view class="name font_bold">设备自定义名称</view>
|
||||
<view class="comView">
|
||||
<input v-model="form.name" placeholder="请输入设备名称"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name font_bold">设备编号</view>
|
||||
<view class="comView">
|
||||
<input v-model="form.code" placeholder="请输入设备编号"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name font_bold">设备功率</view>
|
||||
<view class="comView">
|
||||
<input v-model="form.power" placeholder="请输入设备功率"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">设备功率</view>
|
||||
<view class="">
|
||||
<input placeholder="请输入设备功率"/>
|
||||
<view class="name font_bold">设备IP</view>
|
||||
<view class="comView">
|
||||
<input v-model="form.config[0].ip" placeholder="请输入设备IP"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">设备IP</view>
|
||||
<view class="">
|
||||
<input placeholder="请输入设备IP"/>
|
||||
<view class="name font_bold">端口</view>
|
||||
<view class="comView">
|
||||
<input v-model="form.config[0].port" placeholder="请输入设备端口"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">端口</view>
|
||||
<view class="">
|
||||
<input placeholder="请输入设备端口"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name">状态</view>
|
||||
<view class="flex_layout">
|
||||
<view class="switch" @click="switchSta(1)">
|
||||
<view v-if="selectSta==1" class="t-icon t-icon-qiyong1 contenticon"></view>
|
||||
<view v-else class="t-icon t-icon-jinyong2 contenticon"></view>
|
||||
<text class="text">启用</text>
|
||||
<view class="name font_bold">型号</view>
|
||||
<view class="flex_layout comView">
|
||||
<view class="switch" @click="form.config[0].plc_model = 'H3U'">
|
||||
<view v-if="form.config[0].plc_model=='H3U'" class="t-icon t-icon-qiyong1 contenticon"></view>
|
||||
<view v-else class="t-icon t-icon-jinyong1 contenticon"></view>
|
||||
<text class="text">H3U</text>
|
||||
</view>
|
||||
<view class="switch" @click="switchSta(2)">
|
||||
<view v-if="selectSta==2" class="t-icon t-icon-qiyong1 contenticon"></view>
|
||||
<view v-else class="t-icon t-icon-jinyong2 contenticon"></view>
|
||||
<text class="text">禁用</text>
|
||||
<view class="switch" @click="form.config[0].plc_model = 'H5U'">
|
||||
<view v-if="form.config[0].plc_model=='H5U'" class="t-icon t-icon-qiyong1 contenticon"></view>
|
||||
<view v-else class="t-icon t-icon-jinyong1 contenticon"></view>
|
||||
<text class="text">H5U</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name font_bold">逻辑控制器(PLC)</view>
|
||||
<pickerSelect class="comView" :list="setMap.plc" :id="form.plc_lj" placeholder="请选择设备" />
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<view class="name font_bold">状态</view>
|
||||
<view class="flex_layout comView">
|
||||
<view class="switch" @click="form.active_status=true">
|
||||
<view v-if="form.active_status" class="t-icon t-icon-qiyong1 contenticon"></view>
|
||||
<view v-else class="t-icon t-icon-jinyong1 contenticon"></view>
|
||||
<text class="text">启用</text>
|
||||
</view>
|
||||
<view class="switch" @click="form.active_status=false">
|
||||
<view v-if="!form.active_status" class="t-icon t-icon-qiyong1 contenticon"></view>
|
||||
<view v-else class="t-icon t-icon-jinyong1 contenticon"></view>
|
||||
<text class="text">禁用</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="textarea_row">
|
||||
<view class="name">设置备注</view>
|
||||
<view class="name font_bold">设置备注</view>
|
||||
<view class="textarea">
|
||||
|
||||
<textarea />
|
||||
<textarea placeholder="请输入备注..." v-model="form.remark" cursor-spacing="180px" :auto-blur="true" placeholder-class="placeholderStyle" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom_but flex_layout">
|
||||
<view class="font13 but_color">保存</view>
|
||||
<view class="font13">取消</view>
|
||||
<view class="font13 but_color" @click="save">保存</view>
|
||||
<view class="font13" @click="cancel">取消</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
array: ['中国', '美国', '巴西', '日本'],
|
||||
selectSta:1,
|
||||
return {
|
||||
setMap:{
|
||||
equipment:[],
|
||||
plc:[
|
||||
{name:'汇川',value:1}
|
||||
]
|
||||
},
|
||||
|
||||
form:{
|
||||
id:'',
|
||||
eq_no:'',
|
||||
name:'',
|
||||
code:'',
|
||||
power:'',
|
||||
remark:'',
|
||||
active_status:true,
|
||||
plc_lj:1,
|
||||
config:[
|
||||
{
|
||||
eq_type:'',
|
||||
ip:'',
|
||||
port:'',
|
||||
plc_model:'H3U'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
onLoad(option) {
|
||||
this.form.id = option.id;
|
||||
if(option.id!='undefined'){
|
||||
this.getOrderInfo(option.id);
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.getEquipment();
|
||||
},
|
||||
methods: {
|
||||
switchSta(type){
|
||||
console.log(type)
|
||||
this.selectSta = type;
|
||||
},
|
||||
methods: {
|
||||
getOrderInfo(id){
|
||||
this.$api.postFuncLoading('/device.info',{id:id}).then(res=>{
|
||||
this.form = {
|
||||
id:res.data.id,
|
||||
eq_no:res.data.eq_no,
|
||||
name:res.data.name,
|
||||
code:res.data.code,
|
||||
power:res.data.power,
|
||||
remark:res.data.remark,
|
||||
active_status:res.data.active_status,
|
||||
plc_lj:1,
|
||||
config:[
|
||||
{
|
||||
eq_type:res.data.equipment_configs[0].eq_type,
|
||||
ip:res.data.equipment_configs[0].ip,
|
||||
port:res.data.equipment_configs[0].port,
|
||||
plc_model:res.data.equipment_configs[0].plc_model
|
||||
}
|
||||
]
|
||||
}
|
||||
}).catch(err=>{
|
||||
|
||||
})
|
||||
},
|
||||
getEquipment(){
|
||||
this.$api.request('/equipment.select',{}).then(res=>{
|
||||
res.data.forEach(item=>{
|
||||
item.name = item.eq_name;
|
||||
item.value = item.eq_no;
|
||||
})
|
||||
this.setMap['equipment'] = res.data;
|
||||
})
|
||||
},
|
||||
equipmentChange(e){
|
||||
this.form.eq_no = e.value;
|
||||
this.form.name = e.name;
|
||||
},
|
||||
save(){
|
||||
if(!(this.form.id && this.form.id>0)){
|
||||
delete this.form.id
|
||||
}
|
||||
this.$api.postFuncLoading('/equipment.add',this.form).then(res=>{
|
||||
this.parentClick();
|
||||
this.reset();
|
||||
this.$wf.toast({type:'success',text:'保存成功'});
|
||||
})
|
||||
},
|
||||
cancel(){
|
||||
this.reset();
|
||||
},
|
||||
reset(){
|
||||
this.form = {
|
||||
id:'',
|
||||
eq_no:'',
|
||||
name:'',
|
||||
code:'',
|
||||
power:'',
|
||||
remark:'',
|
||||
active_status:true,
|
||||
plc_lj:1,
|
||||
config:[
|
||||
{
|
||||
eq_type:'',
|
||||
ip:'',
|
||||
port:'',
|
||||
plc_model:'H3U'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
parentClick(){
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length >= 2) {
|
||||
const prevPage = pages[pages.length - 2];
|
||||
prevPage.$vm.getList();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style scoped lang="scss">
|
||||
.page_name{margin-bottom: 10px;}
|
||||
.page_content{padding: 0 12px 10px;}
|
||||
.page_content{padding: 0 12px 13px;}
|
||||
.content_row{display: flex;border-bottom: 1px solid #2D3A6F;height: 44px;align-items: center;
|
||||
.name{width: 30%;}
|
||||
.name{flex-basis: 110px;}
|
||||
.switch{display: flex;align-items: center;
|
||||
.contenticon{width: 20px;height: 20px;}
|
||||
.contenticon{font-size: 15px;}
|
||||
.text{padding: 0 20px 0 5px;}
|
||||
}
|
||||
}
|
||||
.textarea_row{
|
||||
.textarea_row{
|
||||
.name{padding: 12px 0;}
|
||||
.textarea{border-radius: 4px;background: rgba(255, 255, 255, 0.50);padding:5px 10px;
|
||||
textarea{width: 100%;}
|
||||
}
|
||||
.textarea{border-radius: 4px;background: $uni-bg-color-placeholder;padding:10px 12px;}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,39 +1,36 @@
|
|||
<template>
|
||||
<!-- 设备管理 -->
|
||||
<view class="page_padding bot_padding">
|
||||
<view class="" v-for="(item,index) in list" :key="index" >
|
||||
<view class="page_list contentboxsty font13" @click="toDeviceDetail(item.id)">
|
||||
<view class="list_row">
|
||||
<view class="row_name">
|
||||
设备名称
|
||||
<view class="page_padding bot_padding columnFlex">
|
||||
<view class="flexBox">
|
||||
<view v-for="(item,index) in list" :key="index" >
|
||||
<view class="page_list contentboxsty font13" @click="toDeviceDetail(item.id)">
|
||||
<view class="list_row">
|
||||
<view class="name font_bold">设备名称</view>
|
||||
<view class="text">
|
||||
{{item.name}}
|
||||
<view class="iconfont icon-bianji font20" @click.stop="toAddDevice(item.id)"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list_row padd_top12">
|
||||
<view class="name font_bold">设备IP/端口</view>
|
||||
<view class="text">{{item.equipment_monitor_config?item.equipment_monitor_config.monitor_ip+'/'+item.equipment_monitor_config.monitor_port:'-'}}</view>
|
||||
</view>
|
||||
<view class="row_data">
|
||||
{{item.name}}
|
||||
<view class="list_row padd_top12">
|
||||
<view class="name font_bold">已绑定设备</view>
|
||||
<view class="text">
|
||||
{{item.equipment_monitor_config && item.equipment_monitor_config.eq_name?item.equipment_monitor_config.eq_name:'-'}}
|
||||
<view class="iconfont icon-bangding font20" @click="toBindingDevice(item.id)"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="iconfont icon-bianji font20" @click="toAddDevice()"></view>
|
||||
</view>
|
||||
<view class="list_row">
|
||||
设备IP/端口
|
||||
</view>
|
||||
<view class="list_row">
|
||||
<view class="row_name">
|
||||
已绑定设备
|
||||
</view>
|
||||
<view class="row_data">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="iconfont icon-bangding font20" @click="toBindingDevice()"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<loadMore :noData="loadParams.noData" :loading="loadParams.loading" :loadEnd="loadParams.loadEnd" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="page_bottom_button">
|
||||
<view class="page_add" @click="toAddDevice()">
|
||||
<!-- <view class="name_left font14">
|
||||
系统设备管理
|
||||
</view> -->
|
||||
<view class="iconfont icon-tianjia font24"></view>
|
||||
<text>添加</text>
|
||||
<view class="page_add" @click="toAddDevice()">
|
||||
<view class="icon iconfont icon-tianjia font20"></view>
|
||||
<text class="font14">添加</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
|
@ -42,46 +39,97 @@
|
|||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list:[]
|
||||
return {
|
||||
params:{
|
||||
page:1,
|
||||
pageSize:10,
|
||||
},
|
||||
loadParams:{
|
||||
noData:false,
|
||||
loading:false,
|
||||
loadEnd:false
|
||||
},
|
||||
list:[],
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
onReady() {
|
||||
this.getList();
|
||||
},
|
||||
// 上拉刷新
|
||||
onPullDownRefresh(){
|
||||
this.params.page = 1;
|
||||
this.loadParams = {
|
||||
noData:false,
|
||||
loading:false,
|
||||
loadEnd:false
|
||||
};
|
||||
this.getList(2);
|
||||
},
|
||||
// 加载下一页
|
||||
onReachBottom(){
|
||||
if(!(this.loadParams.loadEnd || this.loadParams.noData)){
|
||||
this.loadParams.loading = true;
|
||||
this.params.page ++;
|
||||
this.getList();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList(){
|
||||
// this.$api.postFuncLoading('/equipment.mag',{}).then(res=>{
|
||||
// console.log(res)
|
||||
// this.list = res.data.rows;
|
||||
// })
|
||||
getList(type=1){
|
||||
if(this.params.page == 1){
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
})
|
||||
}
|
||||
this.$api.request('/equipment.mag',this.params).then(res=>{
|
||||
if(type ==2){
|
||||
uni.stopPullDownRefresh();
|
||||
}
|
||||
setTimeout( ()=> {
|
||||
uni.hideLoading();
|
||||
}, 200);
|
||||
|
||||
this.loadParams.loading = false;
|
||||
if(res.data.rows.length ==0 && this.params.page == 1){
|
||||
this.loadParams.noData = true;
|
||||
}
|
||||
if(res.data.rows.length>0 && res.data.rows.length < this.params.pageSize){
|
||||
this.loadParams.loadEnd = true;
|
||||
}
|
||||
if(this.params.page == 1){
|
||||
this.list = res.data.rows;
|
||||
}else{
|
||||
this.list = this.list.concat(res.data.rows);
|
||||
}
|
||||
}).catch(err=>{
|
||||
setTimeout(()=> {
|
||||
uni.hideLoading();
|
||||
}, 200);
|
||||
})
|
||||
},
|
||||
//详情
|
||||
toDeviceDetail(id){
|
||||
console.log(id)
|
||||
uni.navigateTo({
|
||||
url:'/pages/equipmentManage/deviceDetail?id='+id
|
||||
})
|
||||
},
|
||||
toAddDevice(){
|
||||
toAddDevice(params){
|
||||
uni.navigateTo({
|
||||
url:'/pages/equipmentManage/editDevice'
|
||||
url:'/pages/equipmentManage/editDevice?id='+params
|
||||
})
|
||||
},
|
||||
toBindingDevice(){
|
||||
toBindingDevice(id){
|
||||
uni.navigateTo({
|
||||
url:'/pages/equipmentManage/bindingDevice'
|
||||
url:'/pages/equipmentManage/bindingDevice?id='+id
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* .page_name{display: flex;margin-bottom: 10px;align-items: center;} */
|
||||
/* .name_left{flex: 1;} */
|
||||
.page_list{padding: 6px 12px;}
|
||||
.list_row{display: flex;padding: 6px 0;align-items: center;}
|
||||
.row_name{width:30%;}
|
||||
.row_data{width: 65%;}
|
||||
<style scoped lang="scss">
|
||||
.page_list{padding: 12px;}
|
||||
.list_row{display: flex;align-items: center;}
|
||||
.list_row .name{flex-basis: 84px;text-align: right;padding-right: 12px;box-sizing: border-box;}
|
||||
.list_row .text{flex: 1;display: flex;justify-content: space-between;align-items: center;}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -176,7 +176,7 @@
|
|||
<view class="content_box">
|
||||
<view class="content_title">生产排程</view>
|
||||
<view class="content_data">
|
||||
<view class="content_module">
|
||||
<view class="content_module" @click="toSchedul()">
|
||||
<view class="t-icon t-icon-paichengguanli contenticon"></view>
|
||||
<view class="contentname">排程管理</view>
|
||||
</view>
|
||||
|
|
@ -258,6 +258,12 @@
|
|||
uni.navigateTo({
|
||||
url:'/pages/production/productionOrder'
|
||||
})
|
||||
},
|
||||
// 工单排程
|
||||
toSchedul(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/schedul/list'
|
||||
})
|
||||
},
|
||||
//跳转工单进度页
|
||||
toSchedule(){
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.list_below{display: flex;text-align: center;padding: 20px 0;
|
||||
.list_below{display: flex;text-align: center;padding: 10px 0;
|
||||
.below_left{flex: 1;display: flex;align-items: center;justify-content: center;}
|
||||
.percentage{color: $uni-text-color-inverse;}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<view class="person_name">
|
||||
<view class="name">
|
||||
<text class="font15">肖银奎</text>
|
||||
<image src="http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/chaojihuiyuan.png" mode=""></image>
|
||||
<image src="http://dm-auto.oss-cn-shanghai.aliyuncs.com/mes_wechat/chaojihuiyuan.png" mode=""></image>
|
||||
</view>
|
||||
<view class="account font12">
|
||||
登录账号：ykxiao
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<view class="page_padding">
|
||||
<view class="detail_list contentboxsty ">
|
||||
<view class="detail_list contentboxsty">
|
||||
<view class="list_top">
|
||||
<view class="top_left">
|
||||
工单号 <text class="padd_left12">{{form.order_sn}}</text>
|
||||
|
|
@ -13,11 +13,11 @@
|
|||
<view class="content_left font13">
|
||||
<view class="content_row">
|
||||
<text class="name">生产开始时间</text>
|
||||
<text class="data">{{form.created_at}}</text>
|
||||
<text class="data">{{form.time_start==''?'-':form.time_start}}</text>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<text class="name">生产结束时间</text>
|
||||
<text class="data">{{form.updated_at}}</text>
|
||||
<text class="data">{{form.time_end==''?'-':form.time_end}}</text>
|
||||
</view>
|
||||
<view class="content_row">
|
||||
<text class="name">工单耗时</text>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<searchView placeholder=" 搜索工单" />
|
||||
</view>
|
||||
<view class="flexBox">
|
||||
<!-- <scroll-view scroll-y="true" class="scrollView"> -->
|
||||
<view v-for="(item,index) in list" :key="index" class="detail_list contentboxsty font13">
|
||||
<view @click="toDetail(item.id)">
|
||||
<view class="list_top">
|
||||
|
|
@ -67,7 +66,6 @@
|
|||
</view>
|
||||
</view>
|
||||
<loadMore :noData="loadParams.noData" :loading="loadParams.loading" :loadEnd="loadParams.loadEnd" />
|
||||
<!-- </scroll-view> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -108,6 +106,11 @@
|
|||
// 上拉刷新
|
||||
onPullDownRefresh(){
|
||||
this.params.page = 1;
|
||||
this.loadParams = {
|
||||
noData:false,
|
||||
loading:false,
|
||||
loadEnd:false
|
||||
};
|
||||
this.listData(2);
|
||||
},
|
||||
// 加载下一页
|
||||
|
|
@ -127,11 +130,10 @@
|
|||
})
|
||||
}
|
||||
this.$api.request('/order.list',this.params).then(res=>{
|
||||
console.log(res,566)
|
||||
if(type ==2){
|
||||
uni.stopPullDownRefresh();
|
||||
}
|
||||
setTimeout(function () {
|
||||
setTimeout( ()=> {
|
||||
uni.hideLoading();
|
||||
}, 200);
|
||||
|
||||
|
|
@ -147,10 +149,8 @@
|
|||
}else{
|
||||
this.list = this.list.concat(res.data.rows);
|
||||
}
|
||||
|
||||
}).catch(err=>{
|
||||
console.log('err',err)
|
||||
setTimeout(function () {
|
||||
setTimeout( ()=> {
|
||||
uni.hideLoading();
|
||||
}, 200);
|
||||
})
|
||||
|
|
@ -175,7 +175,7 @@
|
|||
.percentage{color: $uni-text-color-primary;margin: 10px 0 0 0;}
|
||||
}
|
||||
.list_below{padding-bottom: 12px;
|
||||
.row{display: flex;padding-top: 10px;
|
||||
.row{display: flex;padding-top: 12px;
|
||||
.row_left{
|
||||
white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
|
||||
padding-right: 4px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,270 @@
|
|||
<template>
|
||||
<view class="page_padding columnFlex">
|
||||
<view class="statistics" v-if="form.date == 'day'">
|
||||
<view class="title font14">排程日统计</view>
|
||||
<view class="boxView contentboxsty">
|
||||
<view class="item">
|
||||
<view class="name font13">待生产</view>
|
||||
<view class="font_bold">32</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="name font13">生产中</view>
|
||||
<view class="font_bold">12</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="name font13">生产完成</view>
|
||||
<view class="font_bold">102</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="comView font13" :class="form.date == 'day'?'padd12 contentboxsty':''">
|
||||
<view class="dateView">
|
||||
<view class="dateTitle">
|
||||
<view class="title font14">排程视图 <text class="month">{{dateText}}</text></view>
|
||||
<view class="dateSwitch">
|
||||
<div class="item" :class="form.date == item.value?'dateActive':''" @click="form.date = item.value" v-for="(item,index) in dateList" :key="index">{{item.name}}</div>
|
||||
</view>
|
||||
</view>
|
||||
<view :class="form.date !='day'?'contentboxsty mar_top12 mar_bot12 padd12':'calendarView'">
|
||||
<calendar></calendar>
|
||||
</view>
|
||||
</view>
|
||||
<view class="speedView contentboxsty" :class="form.date!='day'?'padd12':''">
|
||||
<view class="left">
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
<view class="right detail_list">
|
||||
<view class="boxItem padd12" v-for="(item,index) in list" :key="index">
|
||||
<view class="time">{{item.time}}</view>
|
||||
<view class="boxView card_right" :class="item.type==1?'success':item.type==2?'warning':item.type==3?'status':item.type==4?'error':''">
|
||||
<view class="cardStatus" :class="item.type==1?'success':item.type==2?'warning':item.type==3?'status':item.type==4?'error':''">{{item.status}}</view>
|
||||
<view class="row font_bold">
|
||||
<view class="name">工单号：</view>
|
||||
<view class="text">{{item.sn}}</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="name">规格：</view>
|
||||
<view class="text">4*9*63</view>
|
||||
</view>
|
||||
<view class="row rowDate">
|
||||
<view class="date">
|
||||
<text class="name">开始时间：</text>
|
||||
<text class="text color">00:00</text>
|
||||
</view>
|
||||
<view class="date">
|
||||
<text class="name">剩余时间：</text>
|
||||
<text class="text">00:30</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="yieldView">
|
||||
<view class="box">
|
||||
<view class="num font18 font_bold">74.3<text class="symbol font12">%</text></view>
|
||||
<view class="name">出材率</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list:[
|
||||
{name:'',sn:"SO20240426000001",num:20,status:'待生产',type:1,time:'00:00'},
|
||||
{name:'',sn:"SO20240426000001",num:70,status:'生产中',type:2,time:'00:30'},
|
||||
{name:'',sn:"SO20240426000001",num:90,status:'生产完成',type:3},
|
||||
{name:'',sn:"SO20240422000002",num:20,status:'生产暂停',type:4,time:'01:00'},
|
||||
{name:'',sn:"SO20240426000001",num:70,status:'待生产',type:1},
|
||||
{name:'',sn:"SO20240426000001",num:90,status:'待生产',type:1,time:'03:00'},
|
||||
{name:'',sn:"SO20240426000001",num:90,status:'待生产',type:1},
|
||||
],
|
||||
dateList:[
|
||||
{time:'00:00'},{time:'00:30'},{time:'01:00'},{time:'03:30'},{time:'04:00'},{time:'05:30'}
|
||||
],
|
||||
dateList:[
|
||||
{name:'日',id:'',value:'day'},
|
||||
{name:'周',id:'',value:'week'},
|
||||
{name:'月',id:'',value:'month'},
|
||||
],
|
||||
dateText:'',
|
||||
form:{
|
||||
date:'day'
|
||||
}
|
||||
}
|
||||
},
|
||||
provide(){
|
||||
return{
|
||||
params:this.form,
|
||||
changeDateText:this.changeDate
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeDate(val){
|
||||
this.dateText = val;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.statistics{
|
||||
.boxView{
|
||||
display: flex;flex-direction: row;align-items: center;margin-top: 12px;
|
||||
.item{
|
||||
flex: 1;display: flex;align-items: center;justify-content:center;flex-direction: column;padding: 12px 0;
|
||||
.name{padding-bottom: 10px;}
|
||||
}
|
||||
}
|
||||
}
|
||||
.comView{margin-top: 12px;}
|
||||
.dateView{width: 100%;}
|
||||
.dateTitle{
|
||||
width: 100%;display: flex;align-items: center;justify-content: space-between;
|
||||
.dateSwitch{
|
||||
display: flex;align-items: center;background: $uni-bg-color-whith;border-radius: 20px;padding: 2px 3px;
|
||||
.item{
|
||||
padding: 5px 18px;
|
||||
color: $uni-text-color-default;
|
||||
}
|
||||
.dateActive{
|
||||
border-radius: 20px;
|
||||
background: $uni-color-primary;
|
||||
color: $uni-text-color-inverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
.calendarView{
|
||||
margin: 20px 0;
|
||||
}
|
||||
.speedView{
|
||||
width: 100%;display: flex;box-sizing: border-box;
|
||||
.left{
|
||||
flex-basis: 45px;
|
||||
display: flex;align-items: flex-start;flex-direction: column;padding: 12px 0 12px 18px;box-sizing: border-box;
|
||||
.line{
|
||||
position: relative;width: 1px;height: 100%;background: $uni-text-color-info;
|
||||
}
|
||||
.line::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
bottom: 0;
|
||||
left: -4px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: $uni-text-color-info;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
flex: 1;margin: 0;
|
||||
.boxItem:first-child{
|
||||
margin-top: 6px;
|
||||
}
|
||||
.boxItem:last-child{
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.boxItem{
|
||||
background: $uni-bg-color-schedule;
|
||||
margin: 12px 0;
|
||||
padding-left: 20px;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
.boxView{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.time{
|
||||
position: absolute;
|
||||
left: -45px;
|
||||
top: 0;
|
||||
background: $uni-bg-color-primary;
|
||||
padding: 4px 2px;
|
||||
}
|
||||
.yieldView{
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 12px;
|
||||
z-index: 20;
|
||||
height: calc(100% - 30px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.box{
|
||||
display: flex;flex-direction: column;align-items: center;
|
||||
.num{color: $uni-text-color-warning;}
|
||||
.name{color: $uni-text-color-warning;}
|
||||
}
|
||||
}
|
||||
.cardStatus{
|
||||
display: inline-block;
|
||||
}
|
||||
.row{
|
||||
display: flex;align-items: center;
|
||||
margin-top: 12px;
|
||||
.date{
|
||||
display: flex;align-items: center;
|
||||
}
|
||||
}
|
||||
.rowDate{
|
||||
justify-content: space-between;
|
||||
.color{
|
||||
color: $uni-text-color-primary;
|
||||
}
|
||||
}
|
||||
.status::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 12px;
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
background: $uni-bg-color-success;
|
||||
}
|
||||
.success::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 12px;
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
background: $uni-bg-color-success;
|
||||
}
|
||||
.warning::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 12px;
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
background: $uni-bg-color-warning;
|
||||
}
|
||||
.error::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 12px;
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
background: $uni-bg-color-error;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,3 +1,10 @@
|
|||
/* 横向滚动条 */
|
||||
.horizontalScrollView ::-webkit-scrollbar{
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* 检索部分 */
|
||||
.columnFlex{
|
||||
width: 100%;
|
||||
|
|
@ -76,3 +83,11 @@
|
|||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* picker 下啦选择 */
|
||||
.pickerBom{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 4403683 */
|
||||
src: url('//at.alicdn.com/t/c/font_4403683_4mp9v07pqat.woff2?t=1713756401049') format('woff2'),
|
||||
url('//at.alicdn.com/t/c/font_4403683_4mp9v07pqat.woff?t=1713756401049') format('woff'),
|
||||
url('//at.alicdn.com/t/c/font_4403683_4mp9v07pqat.ttf?t=1713756401049') format('truetype');
|
||||
src: url('//at.alicdn.com/t/c/font_4403683_noneyo0uteq.woff2?t=1714293192496') format('woff2'),
|
||||
url('//at.alicdn.com/t/c/font_4403683_noneyo0uteq.woff?t=1714293192496') format('woff'),
|
||||
url('//at.alicdn.com/t/c/font_4403683_noneyo0uteq.ttf?t=1714293192496') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
|
|
@ -13,6 +13,10 @@
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-a-shexiangtou_shiti1:before {
|
||||
content: "\e639";
|
||||
}
|
||||
|
||||
.icon-meiyougengduo:before {
|
||||
content: "\e638";
|
||||
}
|
||||
|
|
|
|||
4
uni.scss
4
uni.scss
|
|
@ -19,6 +19,8 @@ $uni-text-color-inverse: #fff;
|
|||
$uni-text-color-grey: #999999;
|
||||
$uni-text-color-placeholder: rgba(255,255,255,0.7);
|
||||
$uni-text-color-default: #000000;
|
||||
$uni-text-color-loading: #5D71A3;
|
||||
|
||||
|
||||
/* 文字尺寸 */
|
||||
$uni-font-size-sm:24rpx;
|
||||
|
|
@ -34,10 +36,12 @@ $uni-bg-color-error:#F84545;
|
|||
$uni-bg-color-info:#6576B7;
|
||||
$uni-bg-color-grey:#CCCCCC;
|
||||
$uni-bg-color-whith:#FFFFFF;
|
||||
$uni-bg-color-schedule:#45538C;
|
||||
$uni-bg-color-default-dark:rgba(0, 150, 136, 0.5);
|
||||
$uni-bg-color-success-dark:rgba(103, 194, 58, 0.25);
|
||||
$uni-bg-color-warning-dark:rgba(230, 162, 60, 0.25);
|
||||
$uni-bg-color-error-dark:rgba(248, 69, 69, 0.25);
|
||||
$uni-bg-color-placeholder:rgba(255, 255, 255, 0.5);
|
||||
|
||||
|
||||
/* 边框的颜色 */
|
||||
|
|
|
|||
20
utils/api.js
20
utils/api.js
|
|
@ -16,8 +16,6 @@ const request = (url = '', data = {}, header = {
|
|||
setTimeout( ()=> {
|
||||
uni.hideLoading();
|
||||
}, 200);
|
||||
|
||||
console.log(res.data.code,455)
|
||||
uni.showModal({
|
||||
showCancel: false,
|
||||
title: '温馨提示',
|
||||
|
|
@ -32,8 +30,7 @@ const request = (url = '', data = {}, header = {
|
|||
}
|
||||
}
|
||||
});
|
||||
console.log(res.data.code,888)
|
||||
|
||||
return
|
||||
}
|
||||
if(res.header.Authorization){
|
||||
uni.removeStorageSync('mes_token');
|
||||
|
|
@ -46,7 +43,12 @@ const request = (url = '', data = {}, header = {
|
|||
|
||||
// 成功的回调
|
||||
if(res.data.code == 200){
|
||||
resolve(res.data)
|
||||
resolve(res.data);
|
||||
}else{
|
||||
uni.showToast({
|
||||
icon:'none',
|
||||
title:res.data.message
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
|
|
@ -91,7 +93,8 @@ const request = (url = '', data = {}, header = {
|
|||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
return
|
||||
}
|
||||
if(res.header.Authorization){
|
||||
uni.removeStorageSync('mes_token');
|
||||
|
|
@ -104,6 +107,11 @@ const request = (url = '', data = {}, header = {
|
|||
// 成功的回调
|
||||
if(res.data.code == 200){
|
||||
resolve(res.data)
|
||||
}else{
|
||||
uni.showToast({
|
||||
icon:'none',
|
||||
title:res.data.message
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
|
|
|
|||
279
utils/public.js
279
utils/public.js
|
|
@ -7,9 +7,284 @@ const setLoginData=function(obj){
|
|||
const removeLoginData=function(){
|
||||
uni.removeStorageSync("demu_mes_user_name");
|
||||
uni.removeStorageSync("mes_token");
|
||||
}
|
||||
}
|
||||
// 重定义 弹窗
|
||||
const toast = function(params){
|
||||
uni.showToast({
|
||||
title:params.text,
|
||||
icon:params.type,
|
||||
duration:1000
|
||||
})
|
||||
}
|
||||
|
||||
// 0~9 对应小数转换
|
||||
const numberToChineseLower = function(num) {
|
||||
var chineseNums = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
|
||||
return num.toString().split('').map(function(digit) {
|
||||
return chineseNums[parseInt(digit)];
|
||||
}).join('');
|
||||
}
|
||||
|
||||
const getDatesOfWeek = function() {
|
||||
var now = new Date();
|
||||
// 获取当前日期是周几，0表示周日，1表示周一，以此类推
|
||||
var dayOfWeek = now.getDay();
|
||||
var monday = new Date(now.setDate(now.getDate() - dayOfWeek + (dayOfWeek === 0 ? 0 : 1)));
|
||||
var datesOfWeek = [];
|
||||
for (var i = 0; i < 7; i++) {
|
||||
var currentDate = new Date(monday.getTime() + i * 24 * 60 * 60 * 1000);
|
||||
var weekdays = ['日', '一', '二', '三', '四', '五', '六'];
|
||||
var weekday = weekdays[currentDate.getDay()];
|
||||
|
||||
var dateInfo = {
|
||||
date: currentDate.toISOString().split('T')[0],
|
||||
name: weekday
|
||||
};
|
||||
datesOfWeek.push(dateInfo);
|
||||
}
|
||||
return datesOfWeek;
|
||||
}
|
||||
|
||||
// 往前一周
|
||||
const getPreviousWeekDatesWithDays = function(date=null) {
|
||||
var now = new Date(date);
|
||||
var lastMonday = new Date(now);
|
||||
lastMonday.setDate(lastMonday.getDate() - 7);
|
||||
var datesAndDays = [];
|
||||
|
||||
for (var i = 0; i < 7; i++) {
|
||||
var currentDate = new Date(lastMonday.getTime() + i * 24 * 60 * 60 * 1000);
|
||||
var weekdays = ['日', '一', '二', '三', '四', '五', '六'];
|
||||
datesAndDays.push({
|
||||
date: currentDate.toISOString().split('T')[0],
|
||||
name: weekdays[currentDate.getDay()]
|
||||
});
|
||||
}
|
||||
|
||||
return datesAndDays;
|
||||
}
|
||||
|
||||
// 往后一周
|
||||
const getNextWeekDatesWithDays = function(date = null) {
|
||||
var now = new Date(date);
|
||||
var nextMonday = new Date(now);
|
||||
nextMonday.setDate(nextMonday.getDate() + (8 - now.getDay()) % 7);
|
||||
var datesAndDays = [];
|
||||
|
||||
for (var i = 0; i < 7; i++) {
|
||||
var currentDate = new Date(nextMonday.getTime() + i * 24 * 60 * 60 * 1000);
|
||||
var weekdays = ['日', '一', '二', '三', '四', '五', '六'];
|
||||
datesAndDays.push({
|
||||
date: currentDate.toISOString().split('T')[0],
|
||||
name: weekdays[currentDate.getDay()]
|
||||
});
|
||||
}
|
||||
|
||||
return datesAndDays;
|
||||
}
|
||||
|
||||
// 获取本月日期
|
||||
// year, month
|
||||
const getWeeksOfMonth = function() {
|
||||
var now = new Date();
|
||||
var year = now.getFullYear();
|
||||
var month = now.getMonth() + 1;
|
||||
const startDate = new Date(year, month - 1, 1);
|
||||
const endDate = new Date(year, month, 0);
|
||||
const startDateDayOfWeek = startDate.getDay(); // 获取本月第一天是周几
|
||||
const totalDays = endDate.getDate(); // 获取本月总天数
|
||||
|
||||
let weeks = [];
|
||||
let currentWeek = [];
|
||||
let currentDate = new Date(startDate);
|
||||
|
||||
// 填充到本周开始
|
||||
for (let i = 0; i < startDateDayOfWeek; i++) {
|
||||
currentWeek.push(null);
|
||||
}
|
||||
|
||||
while (currentDate <= endDate) {
|
||||
let textMonth = month<10?'0'+month:month;
|
||||
let textDate = currentDate.getDate()<10?'0'+currentDate.getDate():currentDate.getDate();
|
||||
currentWeek.push({
|
||||
date: year +'-'+ textMonth +'-'+ textDate,
|
||||
name: ['一', '二', '三', '四', '五', '六','日'][currentDate.getDay()]
|
||||
});
|
||||
currentDate.setDate(currentDate.getDate() + 1);
|
||||
|
||||
// 当前周已满，开始新周
|
||||
if (currentWeek.length === 7) {
|
||||
weeks.push(currentWeek);
|
||||
currentWeek = [];
|
||||
}
|
||||
}
|
||||
|
||||
// 处理最后不满一周的情况
|
||||
if (currentWeek.length > 0) {
|
||||
while (currentWeek.length < 7) {
|
||||
currentWeek.push(null);
|
||||
}
|
||||
weeks.push(currentWeek);
|
||||
}
|
||||
|
||||
return weeks;
|
||||
}
|
||||
|
||||
// 往前推一个月
|
||||
const getPreviousMonthGroupedByWeek = function(date = null) {
|
||||
let now = new Date(date);
|
||||
var year = now.getFullYear();
|
||||
var month = now.getMonth();
|
||||
// 如果当前月份是1月，则年份减1，月份变成12月
|
||||
if (month === 0) {
|
||||
year--;
|
||||
month = 11;
|
||||
} else {
|
||||
month--;
|
||||
}
|
||||
let prevMonthFirstDay = new Date(year, month, 1); // 获取上一个月的第一天
|
||||
let prevMonthLastDay = new Date(year, month + 1, 0); // 获取上一个月的最后一天
|
||||
let currentDate = new Date(prevMonthFirstDay); // 从上一个月的第一天开始
|
||||
let weeksData = [];
|
||||
let currentWeek = [];
|
||||
|
||||
const weekdays = ['一', '二', '三', '四', '五', '六', '日'];
|
||||
|
||||
while (currentDate <= prevMonthLastDay) {
|
||||
// 获取当前日期和星期几
|
||||
let date = currentDate.getDate();
|
||||
let weekdayIndex = currentDate.getDay();
|
||||
|
||||
let textMonth = month<9?'0'+(month+1):(month+1);
|
||||
let textDate = date<10?'0'+date:date;
|
||||
currentWeek.push({
|
||||
date: year + '-' + textMonth + '-' + textDate,
|
||||
name: weekdays[weekdayIndex]
|
||||
});
|
||||
|
||||
// 如果到达了周日或者已经是最后一日，将当前周添加到weeksData，并重置currentWeek
|
||||
if (weekdayIndex === 6 || currentDate.getTime() === prevMonthLastDay.getTime()) {
|
||||
weeksData.push(currentWeek);
|
||||
currentWeek = [];
|
||||
}
|
||||
|
||||
// 前往下一天
|
||||
currentDate.setDate(currentDate.getDate() + 1);
|
||||
}
|
||||
|
||||
return weeksData;
|
||||
}
|
||||
|
||||
const getNextMonthGroupedByWeek = function(date = null) {
|
||||
let now = new Date(date);
|
||||
var year = now.getFullYear();
|
||||
var month = now.getMonth();
|
||||
if (month === 11) {
|
||||
year++;
|
||||
month = 0;
|
||||
} else {
|
||||
month++;
|
||||
}
|
||||
let nextMonthFirstDay = new Date(year, month, 1); // 获取下一个月的第一天
|
||||
let nextMonthLastDay = new Date(year, month + 1, 0); // 获取下一个月的最后一天
|
||||
let currentDate = new Date(nextMonthFirstDay); // 从下一个月的第一天开始
|
||||
let weeksData = [];
|
||||
let currentWeek = [];
|
||||
|
||||
const weekdays = ['一', '二', '三', '四', '五', '六', '日'];
|
||||
|
||||
while (currentDate <= nextMonthLastDay) {
|
||||
let date = currentDate.getDate();
|
||||
let weekdayIndex = currentDate.getDay();
|
||||
|
||||
let textMonth = month<9?'0'+(month+1):(month+1);
|
||||
let textDate = date<10?'0'+date:date;
|
||||
currentWeek.push({
|
||||
date: year + '-' + textMonth + '-' + textDate,
|
||||
name: weekdays[weekdayIndex]
|
||||
});
|
||||
|
||||
if (weekdayIndex === 6 || currentDate.getTime() === nextMonthLastDay.getTime()) {
|
||||
weeksData.push(currentWeek);
|
||||
currentWeek = [];
|
||||
}
|
||||
|
||||
// 前往下一天
|
||||
currentDate.setDate(currentDate.getDate() + 1);
|
||||
}
|
||||
|
||||
return weeksData;
|
||||
}
|
||||
|
||||
// 上一个月有几周
|
||||
const getPreviousMonthWeekCount = function(date = null) {
|
||||
let now = new Date(date);
|
||||
var year = now.getFullYear();
|
||||
var month = now.getMonth();
|
||||
if (month === 0) {
|
||||
year--;
|
||||
month = 11;
|
||||
} else {
|
||||
month--;
|
||||
}
|
||||
let prevMonthFirstDay = new Date(year, month, 1); // 获取上一个月的第一天
|
||||
let prevMonthLastDay = new Date(year, month + 1, 0); // 获取上一个月的最后一天
|
||||
let totalWeeks = 0;
|
||||
|
||||
// 计算上一个月有几周
|
||||
let currentDate = new Date(prevMonthFirstDay);
|
||||
while (currentDate <= prevMonthLastDay) {
|
||||
let weekdayIndex = currentDate.getDay();
|
||||
if (weekdayIndex === 6 || currentDate.getTime() === prevMonthLastDay.getTime()) {
|
||||
totalWeeks++;
|
||||
}
|
||||
currentDate.setDate(currentDate.getDate() + 1);
|
||||
}
|
||||
|
||||
return totalWeeks;
|
||||
}
|
||||
|
||||
|
||||
// 下个月有几周
|
||||
const getNextMonthWeekCount = function(date = null) {
|
||||
let now = new Date(date);
|
||||
var year = now.getFullYear();
|
||||
var month = now.getMonth();
|
||||
if (month === 11) {
|
||||
year++;
|
||||
month = 0;
|
||||
} else {
|
||||
month++;
|
||||
}
|
||||
let nextMonthFirstDay = new Date(year, month, 1); // 获取下一个月的第一天
|
||||
let nextMonthLastDay = new Date(year, month + 1, 0); // 获取下一个月的最后一天
|
||||
let totalWeeks = 0;
|
||||
|
||||
let currentDate = new Date(nextMonthFirstDay);
|
||||
while (currentDate <= nextMonthLastDay) {
|
||||
let weekdayIndex = currentDate.getDay();
|
||||
if (weekdayIndex === 6 || currentDate.getTime() === nextMonthLastDay.getTime()) {
|
||||
totalWeeks++;
|
||||
}
|
||||
// 前往下一天
|
||||
currentDate.setDate(currentDate.getDate() + 1);
|
||||
}
|
||||
|
||||
return totalWeeks;
|
||||
}
|
||||
|
||||
|
||||
export default {
|
||||
setLoginData,
|
||||
removeLoginData
|
||||
removeLoginData,
|
||||
toast,
|
||||
numberToChineseLower,
|
||||
getDatesOfWeek,
|
||||
getPreviousWeekDatesWithDays,
|
||||
getNextWeekDatesWithDays,
|
||||
getWeeksOfMonth,
|
||||
getPreviousMonthGroupedByWeek,
|
||||
getNextMonthGroupedByWeek,
|
||||
getPreviousMonthWeekCount,
|
||||
getNextMonthWeekCount,
|
||||
};
|
||||
Loading…
Reference in New Issue