12.22
Panzihang
parent
c9bf3d10b4
commit
604bef43e9
|
|
@ -1,143 +0,0 @@
|
||||||
<template>
|
|
||||||
<view>
|
|
||||||
<view
|
|
||||||
id="_drag_button"
|
|
||||||
class="drag"
|
|
||||||
:style="'left: ' + left + 'px; top:' + top + 'px;'"
|
|
||||||
@touchstart="touchstart"
|
|
||||||
@touchmove.stop.prevent="touchmove"
|
|
||||||
@touchend.stop="touchend"
|
|
||||||
@click.stop.prevent="click"
|
|
||||||
:class="{ transition: isDock && !isMove }"
|
|
||||||
>
|
|
||||||
<text>{{ text }}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'drag-button',
|
|
||||||
props: {
|
|
||||||
isDock: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
existTabBar: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
width: 0,
|
|
||||||
height: 0,
|
|
||||||
offsetWidth: 0,
|
|
||||||
offsetHeight: 0,
|
|
||||||
windowWidth: 0,
|
|
||||||
windowHeight: 0,
|
|
||||||
isMove: true,
|
|
||||||
edge: 10,
|
|
||||||
text: '预约' //此处自定义按钮文字(1-3个汉字)
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
const sys = uni.getSystemInfoSync();
|
|
||||||
|
|
||||||
this.windowWidth = sys.windowWidth;
|
|
||||||
this.windowHeight = sys.windowHeight;
|
|
||||||
|
|
||||||
// #ifdef APP-PLUS
|
|
||||||
this.existTabBar && (this.windowHeight -= 50);
|
|
||||||
// #endif
|
|
||||||
if (sys.windowTop) {
|
|
||||||
this.windowHeight += sys.windowTop;
|
|
||||||
}
|
|
||||||
// console.log(sys);
|
|
||||||
const query = uni.createSelectorQuery().in(this);
|
|
||||||
query
|
|
||||||
.select('#_drag_button')
|
|
||||||
.boundingClientRect(data => {
|
|
||||||
this.width = data.width;
|
|
||||||
this.height = data.height;
|
|
||||||
this.offsetWidth = data.width / 2;
|
|
||||||
this.offsetHeight = data.height / 2;
|
|
||||||
this.left = this.windowWidth - this.width - this.edge;
|
|
||||||
this.top = ((this.windowHeight - this.height - this.edge) * 3) / 4;
|
|
||||||
})
|
|
||||||
.exec();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
click() {
|
|
||||||
console.log(1);
|
|
||||||
this.$emit('btnClick');
|
|
||||||
},
|
|
||||||
touchstart(e) {
|
|
||||||
this.$emit('btnTouchstart');
|
|
||||||
},
|
|
||||||
touchmove(e) {
|
|
||||||
// 单指触摸
|
|
||||||
if (e.touches.length !== 1) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.isMove = true;
|
|
||||||
|
|
||||||
this.left = e.touches[0].clientX - this.offsetWidth;
|
|
||||||
|
|
||||||
let clientY = e.touches[0].clientY - this.offsetHeight;
|
|
||||||
// #ifdef H5
|
|
||||||
clientY += this.height;
|
|
||||||
// #endif
|
|
||||||
let edgeBottom = this.windowHeight - this.height - this.edge;
|
|
||||||
|
|
||||||
// 上下触及边界
|
|
||||||
if (clientY < this.edge) {
|
|
||||||
this.top = this.edge;
|
|
||||||
} else if (clientY > edgeBottom) {
|
|
||||||
this.top = edgeBottom;
|
|
||||||
} else {
|
|
||||||
this.top = clientY;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
touchend(e) {
|
|
||||||
if (this.isDock) {
|
|
||||||
let edgeRigth = this.windowWidth - this.width - this.edge;
|
|
||||||
|
|
||||||
if (this.left < this.windowWidth / 2 - this.offsetWidth) {
|
|
||||||
this.left = this.edge;
|
|
||||||
} else {
|
|
||||||
this.left = edgeRigth;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.isMove = false;
|
|
||||||
|
|
||||||
this.$emit('btnTouchend');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.drag {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
box-shadow: 0 0 6upx rgba(0, 0, 0, 0.4);
|
|
||||||
color: $uni-text-color-inverse;
|
|
||||||
width: 80upx;
|
|
||||||
height: 80upx;
|
|
||||||
border-radius: 50%;
|
|
||||||
font-size: $uni-font-size-sm;
|
|
||||||
position: fixed;
|
|
||||||
z-index: 99;
|
|
||||||
|
|
||||||
&.transition {
|
|
||||||
transition: left 0.3s ease, top 0.3s ease;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,78 +0,0 @@
|
||||||
<template>
|
|
||||||
<view>
|
|
||||||
<scroll-view style="height: 800rpx;" scroll-y="true" class="padding-top-sm">
|
|
||||||
<template v-if="!informData.length">
|
|
||||||
<u-empty text="当前暂无公告信息" mode="news"></u-empty>
|
|
||||||
</template>
|
|
||||||
<view v-if="!noticeInfo">
|
|
||||||
<block v-for="(item, index) in informData" :key="index">
|
|
||||||
<view class="cu-bar padding solid" @click="clickInfo(item)">
|
|
||||||
<view class="margin-left-sm" style="width: 440rpx;">
|
|
||||||
<view class="text-df text-cut">{{ item.title }}</view>
|
|
||||||
<view class="text-gray text-sm">
|
|
||||||
<view class="text-cut">{{ item.content }}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<text class="action"><text class="text-blue text-xs">查看</text></text>
|
|
||||||
</view>
|
|
||||||
</block>
|
|
||||||
</view>
|
|
||||||
<view class="padding-sm" v-if="noticeInfo">
|
|
||||||
<view class="text-left margin-xs text-bold">{{ informInfo.title }}</view>
|
|
||||||
<view class="text-content info">{{ informInfo.content }}</view>
|
|
||||||
<view class="text-right text-df margin-top">发布时间：{{ informInfo.date || '暂无' }}</view>
|
|
||||||
<view class="text-center margin-sm" @click="noticeInfo = false"><text class="cu-btn bg-green sm radius">返回</text></view>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
var _this;
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
noticeShow: false
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
noticeInfo: false,
|
|
||||||
informData: [
|
|
||||||
{
|
|
||||||
title: '郑州暴雨后人间百态',
|
|
||||||
content:
|
|
||||||
'7月20日，河南省多地遭遇极端强降雨，持续强降雨造成道路、地铁等公共设施被淹，人员被困。有人被困商场，市民组成“人墙”喊口号合力救援；有人被困洪水抱树求救，社区工作人员扔条幅救援；行人不慎被水冲走，市民湍急水流中将人救下……众人在暴雨中积极自救和互助，每一个画面都让人动容。',
|
|
||||||
date: '今天08:50 '
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '郑州暴雨期间酒店竟涨价10倍至2、3千元！希岸酒店道歉称系加盟店所为',
|
|
||||||
content:
|
|
||||||
'7月22日，希岸酒店总部就郑州高铁站涨价10倍一事发布致歉声明称，此次事件是该加盟店不遵守总部规定所致，酒店将积极配合相关部门监督检查，向该客人表示歉意。',
|
|
||||||
date: ''
|
|
||||||
}
|
|
||||||
],
|
|
||||||
informInfo: {}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
onLoad() {
|
|
||||||
/* this.xx = uni.getStorageSync("xx"); */
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
_this = this;
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
clickInfo(item) {
|
|
||||||
this.noticeInfo = true;
|
|
||||||
this.informInfo = item;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.info {
|
|
||||||
text-indent: 2em;
|
|
||||||
font-size: 28upx;
|
|
||||||
text-align: justify;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
<template>
|
|
||||||
<view>
|
|
||||||
<view>
|
|
||||||
<drag-button :isDock="true" :existTabBar="true" @btnClick="btnClick" />
|
|
||||||
<u-modal v-model="noticeShow" title="公告" confirm-text="我已阅读" width="80%"><inform-com></inform-com></u-modal>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// import dragButton from '@/components/drag-button';
|
|
||||||
import dragButton from './components/drag-button';
|
|
||||||
import informCom from './inform';
|
|
||||||
var _this;
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
dragButton,
|
|
||||||
informCom
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
noticeShow: false //公告显示
|
|
||||||
};
|
|
||||||
},
|
|
||||||
onLoad() {
|
|
||||||
console.log(this.$u.config.v);
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
_this = this;
|
|
||||||
},
|
|
||||||
onPullDownRefresh() {},
|
|
||||||
methods: {
|
|
||||||
btnClick() {
|
|
||||||
this.noticeShow = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,605 +0,0 @@
|
||||||
<template>
|
|
||||||
<view>
|
|
||||||
<uni-drawer :visible="visibleDrawer" :hideNoAnimate="showBackButton" mode="right" @close="closeDrawer()">
|
|
||||||
<!-- #ifdef APP-PLUS -->
|
|
||||||
<view class="iconfont icon-guanbi" v-if="showBackButton" @tap="closeDrawer()"></view>
|
|
||||||
<!-- #endif -->
|
|
||||||
<scroll-view class="drawer-list" scroll-y :style="{'height': drawerHeight, 'padding-top': fixTop}">
|
|
||||||
<block v-for="(item, index) in menuList" :key="index">
|
|
||||||
<!-- 单选、多选 isMutiple是否支持多选-->
|
|
||||||
<view v-if="item.type === 'custom' && item.detailList.length">
|
|
||||||
<view class="drawer-list-title flex justify-between">
|
|
||||||
<view>
|
|
||||||
{{item.title}}
|
|
||||||
</view>
|
|
||||||
<text v-if="item.detailList.length>showLenght"
|
|
||||||
@tap="showMore(index)">{{item.showMoreList ? '收起' : '更多'}}</text>
|
|
||||||
</view>
|
|
||||||
<view class="draer-list-con">
|
|
||||||
<template v-if="!item.showMoreList">
|
|
||||||
<text
|
|
||||||
:style="{background: textItem.isSelected ? color : '', color: textItem.isSelected ? '#ffffff' : ''}"
|
|
||||||
v-if="idx<showLenght" v-for="(textItem, idx) in item.detailList" :key="idx"
|
|
||||||
:class="textItem.isSelected ? 'on' : ''"
|
|
||||||
@tap="itemTap(idx,item.detailList,item.key, item.isMutiple)">
|
|
||||||
{{textItem.title}}
|
|
||||||
</text>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<text
|
|
||||||
:style="{background: textItem.isSelected ? color : '', color: textItem.isSelected ? '#ffffff' : ''}"
|
|
||||||
v-for="(textItem, idx) in item.detailList" :key="idx"
|
|
||||||
:class="textItem.isSelected ? 'on' : ''"
|
|
||||||
@tap="itemTap(idx,item.detailList,item.key, item.isMutiple)">
|
|
||||||
{{textItem.title}}
|
|
||||||
</text>
|
|
||||||
</template>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 时间带时分秒范围选择 -->
|
|
||||||
<view v-if="item.type === 'rangetime'">
|
|
||||||
<view class="drawer-list-title flex justify-between">
|
|
||||||
<view>
|
|
||||||
{{item.title}}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="dateContent" @click="onShowDatePicker('rangetime', item.key, item)">
|
|
||||||
<view>
|
|
||||||
<template v-if="result[item.key] && result[item.key].length > 0">
|
|
||||||
{{result[item.key][0]}}
|
|
||||||
</template>
|
|
||||||
</view>
|
|
||||||
<view>
|
|
||||||
<template v-if="result[item.key] && result[item.key].length > 0">
|
|
||||||
{{result[item.key][1]}}
|
|
||||||
</template>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 时间不带时分秒范围选择 -->
|
|
||||||
<view v-if="item.type === 'range'">
|
|
||||||
<view class="drawer-list-title flex justify-between">
|
|
||||||
<view>
|
|
||||||
{{item.title}}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="dateContent" @click="onShowDatePicker('range', item.key, item)">
|
|
||||||
<view>
|
|
||||||
<template v-if="result[item.key] && result[item.key].length > 0">
|
|
||||||
{{result[item.key][0]}}-{{result[item.key][1]}}
|
|
||||||
</template>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 时间选择 -->
|
|
||||||
<view v-if="item.type === 'date'">
|
|
||||||
<view class="drawer-list-title flex justify-between">
|
|
||||||
<view>
|
|
||||||
{{item.title}}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="dateContent" @click="onShowDatePicker('date', item.key, item)">
|
|
||||||
<view>
|
|
||||||
<template v-if="result[item.key]">
|
|
||||||
{{result[item.key]}}
|
|
||||||
</template>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 数值范围选择 -->
|
|
||||||
<view v-if="item.type === 'rangenumber'">
|
|
||||||
<view class="drawer-list-title flex justify-between">
|
|
||||||
<view>
|
|
||||||
{{item.title}}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="dateContent rangenumber-content flex">
|
|
||||||
<view class="rangenumber-input">
|
|
||||||
<input class="m-input" type="number" clearable v-model="result[item.minName || (item.key + 'Min')]"
|
|
||||||
:placeholder="item.minPlaceholder || '最小值'"
|
|
||||||
@blur="numberInputBlur(item)"></input>
|
|
||||||
</view>
|
|
||||||
<text>-</text>
|
|
||||||
<view class="rangenumber-input">
|
|
||||||
<input class="m-input" type="number" clearable v-model="result[item.maxName || (item.key + 'Max')]"
|
|
||||||
:placeholder="item.maxPlaceholder || '最大值'"
|
|
||||||
@blur="numberInputBlur(item)"></input>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 单输入框 -->
|
|
||||||
<view v-if="item.type === 'singleinput'">
|
|
||||||
<view class="drawer-list-title flex justify-between">
|
|
||||||
<view>
|
|
||||||
{{item.title}}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="dateContent">
|
|
||||||
<view>
|
|
||||||
<input class="m-input" clearable v-model="result[item.key]"
|
|
||||||
:placeholder="item.placeholder || '请输入关键字'" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</block>
|
|
||||||
</scroll-view>
|
|
||||||
<view class="filter-content-footer flex justify-center">
|
|
||||||
<!-- #ifdef APP-PLUS-->
|
|
||||||
<view v-if="showBackButton" class="filter-content-footer-item" :style="{color: '#ccc', 'border': '1rpx solid #ccc'}"
|
|
||||||
@tap="closeDrawer()">
|
|
||||||
<text>返回</text>
|
|
||||||
</view>
|
|
||||||
<!-- #endif -->
|
|
||||||
<view class="filter-content-footer-item" :style="{color, 'border': `1rpx solid ${color}`}"
|
|
||||||
@tap="resetClick">
|
|
||||||
<text>重置</text>
|
|
||||||
</view>
|
|
||||||
<view class="filter-content-footer-item" :style="{'background': color}" @tap="sureClick">
|
|
||||||
<text>确认</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</uni-drawer>
|
|
||||||
<mx-date-picker :show="showPicker" :color="color" :type="dateType" :value="dateValue" :show-tips="true"
|
|
||||||
:show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
/***
|
|
||||||
* 筛选组件，当前支持多选、单选
|
|
||||||
* item.type (custom 单选、多选、rangetime 时间范围带时分秒、range 时间范围不带时分秒、rangenumber 数字范围)
|
|
||||||
* item.isMutiple 是否支持多选
|
|
||||||
* 筛选后返回格式{"listName1":[value,value](多选),"listName2":"value"（单选）,...}
|
|
||||||
* rangenumber形式-可能为["",1]或[1,""]表示只有一个最大值或最小值
|
|
||||||
***/
|
|
||||||
import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
|
|
||||||
import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
list: {
|
|
||||||
required: true,
|
|
||||||
type: Array,
|
|
||||||
default () {
|
|
||||||
return [];
|
|
||||||
},
|
|
||||||
},
|
|
||||||
color: {
|
|
||||||
type: String,
|
|
||||||
default: '#4D7BFE',
|
|
||||||
},
|
|
||||||
defaultValue: { //若有默认值则触发sureClick
|
|
||||||
type: Object,
|
|
||||||
default () {
|
|
||||||
return {}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
showBackButton: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
list: {
|
|
||||||
handler(val) {
|
|
||||||
this.menuList = JSON.parse(JSON.stringify(val));
|
|
||||||
this.resetResult();
|
|
||||||
this.defaultValueFun();
|
|
||||||
},
|
|
||||||
deep: true // 可以深度检测到 obj 对象的属性值的变化
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
uniDrawer,
|
|
||||||
MxDatePicker
|
|
||||||
},
|
|
||||||
beforeCreate() {
|
|
||||||
Object.isEmpty = (object, except = []) => {
|
|
||||||
if (!object) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
for (let key in object) {
|
|
||||||
if (except && except.includes(key)) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
if (object.hasOwnProperty(key)) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
};
|
|
||||||
Date.prototype.Format = function(fmt) { //author: meizz
|
|
||||||
var o = {
|
|
||||||
"M+": this.getMonth() + 1, //月份
|
|
||||||
"d+": this.getDate(), //日
|
|
||||||
"h+": this.getHours(), //小时
|
|
||||||
"m+": this.getMinutes(), //分
|
|
||||||
"s+": this.getSeconds(), //秒
|
|
||||||
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
|
|
||||||
"S": this.getMilliseconds() //毫秒
|
|
||||||
};
|
|
||||||
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1
|
|
||||||
.length));
|
|
||||||
for (var k in o)
|
|
||||||
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[
|
|
||||||
k]) : (("00" + o[
|
|
||||||
k]).substr(("" + o[k]).length)));
|
|
||||||
return fmt;
|
|
||||||
};
|
|
||||||
String.prototype.replaceAll = function(oldValue, newValue) { return this.toString().replace(new RegExp(oldValue, 'gm'), newValue); }
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.menuList = JSON.parse(JSON.stringify(this.list));
|
|
||||||
this.resetResult();
|
|
||||||
uni.getSystemInfo({
|
|
||||||
success: (res) => {
|
|
||||||
let windowHeight = res.windowHeight;
|
|
||||||
// #ifdef H5
|
|
||||||
if (!(this.$IsWeixin || this.$IsAlipay || this.$IsCloudPay)) {
|
|
||||||
let thirdApp = getApp().globalData.options?.thirdApp;
|
|
||||||
if (thirdApp && thirdApp.hideNavBar) {
|
|
||||||
// 第三方App使用App原生导航栏
|
|
||||||
} else {
|
|
||||||
this.fixTop = (res.statusBarHeight || 0) + 'px';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body
|
|
||||||
.clientHeight || res.windowHeight;
|
|
||||||
// #endif
|
|
||||||
this.drawerHeight = (windowHeight - uni.upx2px(120)) + 'px';
|
|
||||||
// uni.showModal({
|
|
||||||
// content: `model: ${res.model}`,
|
|
||||||
// })
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.defaultValueFun();
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
menuList: [],
|
|
||||||
visibleDrawer: false,
|
|
||||||
menuKey: 1,
|
|
||||||
showLenght: 6,
|
|
||||||
drawerHeight: '500px',
|
|
||||||
selectDetailList: [],
|
|
||||||
result: {},
|
|
||||||
showPicker: false,
|
|
||||||
dateType: 'rangetime',
|
|
||||||
dateValue: '',
|
|
||||||
fixTop: '0px'
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
defaultValueFun() {
|
|
||||||
//如果有默认值，则赋值后调用sureClick通知父组件更新
|
|
||||||
if (!Object.isEmpty(this.defaultValue)) {
|
|
||||||
const value = this.defaultValue;
|
|
||||||
const list = JSON.parse(JSON.stringify(this.menuList));
|
|
||||||
for (let key in value) {
|
|
||||||
for (let i = 0; i < list.length; i++) {
|
|
||||||
if (list[i].key === key) {
|
|
||||||
if (list[i].type === 'custom') {
|
|
||||||
list[i].detailList.map((item, index) => {
|
|
||||||
if (Array.isArray(value[key]) && value[key].indexOf(item.value) > -1) {
|
|
||||||
item.isSelected = true;
|
|
||||||
} else if (value[key] == item.value) {
|
|
||||||
item.isSelected = true;
|
|
||||||
}
|
|
||||||
return item;
|
|
||||||
})
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
if (list[i].type === 'range' || list[i].type === 'rangetime' || list[i].type === 'rangenumber' && Array.isArray(value[key]) && value[key].length === 2) {
|
|
||||||
this.result[key] = value[key];
|
|
||||||
this.result[list[i].minName || (list[i].key + 'Min')] = value[key][0];
|
|
||||||
this.result[list[i].maxName || (list[i].key + 'Max')] = value[key][1];
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
if (list[i].type === 'date' || list[i].type === 'singleinput' && value[key]) {
|
|
||||||
this.result[key] = value[key];
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (this.defaultRefeshTimer) {
|
|
||||||
clearTimeout(this.defaultRefesh·Timer);
|
|
||||||
}
|
|
||||||
this.defaultRefeshTimer = setTimeout(() => {
|
|
||||||
console.log('筛选默认值触发')
|
|
||||||
this.menuList = list;
|
|
||||||
this.sureClick();
|
|
||||||
}, 200);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
resetResult() {
|
|
||||||
this.result = this.commonResultObj();
|
|
||||||
},
|
|
||||||
commonResultObj() {
|
|
||||||
let obj = {};
|
|
||||||
this.menuList.map((item) => {
|
|
||||||
switch(item.type) {
|
|
||||||
case "custom":
|
|
||||||
item.isMutiple ? obj[item.key] = [] : obj[item.key] = '';
|
|
||||||
item.detailList.forEach(dListItem => {
|
|
||||||
dListItem.isSelected = dListItem.isSelected || false;
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case 'range':
|
|
||||||
case 'rangetime':
|
|
||||||
case 'rangenumber':
|
|
||||||
this.result[item.key] = [];
|
|
||||||
this.result[item.minName || (item.key + 'Min')] = '';
|
|
||||||
this.result[item.maxName || (item.key + 'Max')] = '';
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
obj[item.key] = '';
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return obj;
|
|
||||||
},
|
|
||||||
//筛选项选中或取消
|
|
||||||
itemTap(index, list, key, isMutiple) {
|
|
||||||
if (isMutiple == true) {
|
|
||||||
list[index].isSelected = !list[index].isSelected;
|
|
||||||
if (list[index].isSelected) {
|
|
||||||
this.result[key].push(list[index].value);
|
|
||||||
} else {
|
|
||||||
list[index].isSelected = false;
|
|
||||||
var idx = this.result[key].indexOf(list[index].value);
|
|
||||||
this.result[key].splice(idx, 1);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.result[key] = list[index].isSelected ? '' : list[index].value;
|
|
||||||
for (let i = 0; i < list.length; i++) {
|
|
||||||
if (index == i && !list[i].isSelected) {
|
|
||||||
list[i].isSelected = true
|
|
||||||
} else {
|
|
||||||
list[i].isSelected = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// #ifdef H5 || APP-PLUS
|
|
||||||
this.$forceUpdate();
|
|
||||||
// #endif
|
|
||||||
},
|
|
||||||
|
|
||||||
sureClick() {
|
|
||||||
this.menuList.forEach(menu => {
|
|
||||||
let list = menu.detailList || [];
|
|
||||||
if (menu.type == 'custom' && list.length > 0) {
|
|
||||||
let selectedValueList = [];
|
|
||||||
list.forEach(item => {
|
|
||||||
if (item.isSelected) {
|
|
||||||
selectedValueList.push(item.value);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (menu.isMutiple == true) {
|
|
||||||
this.result[menu.key] = selectedValueList;
|
|
||||||
} else {
|
|
||||||
this.result[menu.key] = selectedValueList[0] || '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
let str_result = {};
|
|
||||||
let hasChoose = false;
|
|
||||||
for (let key in this.result) {
|
|
||||||
if (typeof this.result[key] == 'object') {
|
|
||||||
str_result[key] = this.result[key].join(',');
|
|
||||||
if (!hasChoose) {
|
|
||||||
hasChoose = this.result[key].join(',') !== '' ? true : false;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
str_result[key] = this.result[key];
|
|
||||||
if (!hasChoose) {
|
|
||||||
hasChoose = this.result[key] !== '' ? true : false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.$emit("result", {
|
|
||||||
'str_result': str_result,
|
|
||||||
'result': this.result,
|
|
||||||
'hasChoose': hasChoose,
|
|
||||||
'visibleDrawer': false
|
|
||||||
});
|
|
||||||
},
|
|
||||||
resetClick() {
|
|
||||||
this.minNumber = '';
|
|
||||||
this.maxNumber = '';
|
|
||||||
for (let key in this.result) {
|
|
||||||
if (typeof this.result[key] === 'object') {
|
|
||||||
this.result[key] = [];
|
|
||||||
} else {
|
|
||||||
this.result[key] = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
for (let i = 0; i < this.menuList.length; i++) {
|
|
||||||
if (this.menuList[i].type === 'custom') {
|
|
||||||
for (let j = 0; j < this.menuList[i].detailList.length; j++) {
|
|
||||||
this.menuList[i].detailList[j].isSelected = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// #ifdef H5 || APP-PLUS
|
|
||||||
this.$forceUpdate();
|
|
||||||
// #endif
|
|
||||||
},
|
|
||||||
closeDrawer() {
|
|
||||||
this.visibleDrawer = false;
|
|
||||||
// #ifdef APP-PLUS
|
|
||||||
this.$emit("result", {
|
|
||||||
type: 1,
|
|
||||||
});
|
|
||||||
// #endif
|
|
||||||
},
|
|
||||||
|
|
||||||
showMore(index) {
|
|
||||||
this.menuList[index].showMoreList = !this.menuList[index].showMoreList;
|
|
||||||
++this.menuKey;
|
|
||||||
// #ifdef H5 || APP-NVUE
|
|
||||||
this.$forceUpdate();
|
|
||||||
// #endif
|
|
||||||
},
|
|
||||||
|
|
||||||
onShowDatePicker(type, key, item) { //显示
|
|
||||||
this.dateType = type;
|
|
||||||
this.dateValue = this.result[key] || '';
|
|
||||||
this.showPicker = true;
|
|
||||||
this.tempKey = key;
|
|
||||||
this.item = item;
|
|
||||||
},
|
|
||||||
|
|
||||||
onSelected(e, key) { //选择
|
|
||||||
this.showPicker = false;
|
|
||||||
if (e) {
|
|
||||||
this.result[this.tempKey] = e.value;
|
|
||||||
if (e.value && e.value.length && this.item && this.item.type !== 'date') {
|
|
||||||
let item = this.item;
|
|
||||||
this.result[item.minName || (item.key + 'Min')] = e.value[0].replaceAll('/', '-');
|
|
||||||
this.result[item.maxName || (item.key + 'Max')] = e.value[1].replaceAll('/', '-');
|
|
||||||
}
|
|
||||||
//选择的值
|
|
||||||
console.log('value => ' + e.value);
|
|
||||||
//原始的Date对象
|
|
||||||
console.log('date => ' + e.date);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
numberInputBlur(item) {
|
|
||||||
let minNumber = this.result[item.minName || (item.key + 'Min')];
|
|
||||||
let maxNumber = this.result[item.maxName || (item.key + 'Max')];
|
|
||||||
if (minNumber != '' && maxNumber != '' && parseFloat(minNumber) > parseFloat(maxNumber)) {
|
|
||||||
let temp = minNumber;
|
|
||||||
this.result[item.minName || (item.key + 'Min')] = maxNumber;
|
|
||||||
this.result[item.maxName || (item.key + 'Max')] = temp;
|
|
||||||
}
|
|
||||||
this.result[item.key] = [];
|
|
||||||
this.result[item.key].push(minNumber && parseFloat(minNumber));
|
|
||||||
this.result[item.key].push(maxNumber && parseFloat(maxNumber));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.flex {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.justify-between {
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
view,
|
|
||||||
scroll-view,
|
|
||||||
swiper,
|
|
||||||
button,
|
|
||||||
input,
|
|
||||||
textarea,
|
|
||||||
label,
|
|
||||||
navigator,
|
|
||||||
image {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 筛选样式 */
|
|
||||||
.drawer-list {
|
|
||||||
padding: 0 20rpx;
|
|
||||||
font-size: 26rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
font-size: 26rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drawer-list .drawer-list-title {
|
|
||||||
font-size: 34rpx;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 48rpx;
|
|
||||||
margin: 38rpx 0 18rpx;
|
|
||||||
color: rgba(34, 34, 34, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.drawer-list .drawer-list-title>text {
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #666666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drawer-list .draer-list-con>text {
|
|
||||||
background: rgba(93, 92, 254, 0.1);
|
|
||||||
border-radius: 28px;
|
|
||||||
color: #666666;
|
|
||||||
font-size: 28rpx;
|
|
||||||
padding: 10rpx 28rpx;
|
|
||||||
margin: 10rpx 10rpx 10rpx 0;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-content-footer-item {
|
|
||||||
flex: 1;
|
|
||||||
height: 72rpx;
|
|
||||||
line-height: 72rpx;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 8rpx;
|
|
||||||
margin: 14rpx;
|
|
||||||
color: #FFFFFF;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.picker {
|
|
||||||
z-index: 99999 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dateContent {
|
|
||||||
&>view {
|
|
||||||
background: rgba(244, 244, 244, 1);
|
|
||||||
border-radius: 8rpx;
|
|
||||||
width: 100%;
|
|
||||||
height: 64rpx;
|
|
||||||
line-height: 64rpx;
|
|
||||||
margin-bottom: 12rpx;
|
|
||||||
padding: 0 12rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.rangenumber-content {
|
|
||||||
&>text {
|
|
||||||
display: inline-block;
|
|
||||||
width: 10%;
|
|
||||||
text-align: center;
|
|
||||||
height: 64rpx;
|
|
||||||
line-height: 64rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rangenumber-input {
|
|
||||||
width: 45%;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0 12rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.m-input {
|
|
||||||
height: 64rpx;
|
|
||||||
line-height: 64rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .picker {
|
|
||||||
z-index: 999;
|
|
||||||
}
|
|
||||||
.icon-guanbi {
|
|
||||||
position: fixed;
|
|
||||||
top: 40rpx;
|
|
||||||
right: 40rpx;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -30,7 +30,7 @@
|
||||||
</view>
|
</view>
|
||||||
<view class="borTop">
|
<view class="borTop">
|
||||||
<view class="borHead">
|
<view class="borHead">
|
||||||
<image src="../../static/images/gqIcon.png" mode=""></image>
|
<image src="../../static/images/gqIcon.png" mode="" style="margin-top: 5px;"></image>
|
||||||
<p>请选择港区</p>
|
<p>请选择港区</p>
|
||||||
</view>
|
</view>
|
||||||
<view class="borContent">
|
<view class="borContent">
|
||||||
|
|
@ -48,22 +48,6 @@
|
||||||
<text>数据库管理</text>
|
<text>数据库管理</text>
|
||||||
</view> -->
|
</view> -->
|
||||||
</view>
|
</view>
|
||||||
<uni-popup ref="popup" background-color="#fff" @maskClick="close">
|
|
||||||
<view class="popupBox">
|
|
||||||
<view class="popupTitle">
|
|
||||||
请选择港区
|
|
||||||
</view>
|
|
||||||
<view class="ul">
|
|
||||||
<view class="li" v-for="(item,index) in portList" :key="index"
|
|
||||||
:class="{active:activeIndex == index}" @click="selectPort(item,index)">
|
|
||||||
<text>{{item.pamName}}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="btnBox">
|
|
||||||
<button class="btn" type="primary" @click="toGo">确 定</button>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</uni-popup>
|
|
||||||
<uni-popup ref="popup2" type="dialog">
|
<uni-popup ref="popup2" type="dialog">
|
||||||
<uni-popup-dialog confirmText="确定" content="是否退出登录？" @close="close2"
|
<uni-popup-dialog confirmText="确定" content="是否退出登录？" @close="close2"
|
||||||
@confirm="outConfirm"></uni-popup-dialog>
|
@confirm="outConfirm"></uni-popup-dialog>
|
||||||
|
|
@ -226,11 +210,6 @@
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// if (this.portList.length > 0) {
|
|
||||||
// this.$refs.popup.open(this.type)
|
|
||||||
// this.portId = this.portList[this.activeIndex].pamId
|
|
||||||
// this.portName = this.portList[this.activeIndex].pamName
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
@ -352,7 +331,6 @@
|
||||||
// 点击切换港区
|
// 点击切换港区
|
||||||
tabsPort(type) {
|
tabsPort(type) {
|
||||||
this.type = type
|
this.type = type
|
||||||
this.$refs.popup.open(type)
|
|
||||||
this.lotusLoadingData.isShow = true
|
this.lotusLoadingData.isShow = true
|
||||||
this.initData()
|
this.initData()
|
||||||
},
|
},
|
||||||
|
|
@ -380,24 +358,18 @@
|
||||||
}
|
}
|
||||||
uni.setStorageSync('portObj', portObj);
|
uni.setStorageSync('portObj', portObj);
|
||||||
uni.setStorageSync('selectPortIndex', this.activeIndex)
|
uni.setStorageSync('selectPortIndex', this.activeIndex)
|
||||||
this.$refs.popup.close()
|
|
||||||
this.infoType = false
|
this.infoType = false
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
icon: 'success',
|
icon: 'success',
|
||||||
title: `切换到${this.portName}`
|
title: `切换到${this.portName}`
|
||||||
});
|
});
|
||||||
uni.navigateTo({
|
uni.reLaunch({
|
||||||
url: '/pages/index/index'
|
url: '/pages/index/index'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 关闭弹框
|
|
||||||
close() {
|
|
||||||
this.$refs.popup.close()
|
|
||||||
this.portList = []
|
|
||||||
},
|
|
||||||
// 点击退出登录
|
// 点击退出登录
|
||||||
outLogin() {
|
outLogin() {
|
||||||
this.$refs.popup2.open()
|
this.$refs.popup2.open()
|
||||||
|
|
@ -600,66 +572,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.popupBox {
|
|
||||||
width: 280px;
|
|
||||||
height: 320px;
|
|
||||||
|
|
||||||
.popupTitle {
|
|
||||||
width: 100%;
|
|
||||||
height: 48px;
|
|
||||||
line-height: 48px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 16px;
|
|
||||||
color: #23262E;
|
|
||||||
font-weight: bold;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ul {
|
|
||||||
padding: 30px;
|
|
||||||
height: 213px;
|
|
||||||
overflow: scroll;
|
|
||||||
|
|
||||||
.li {
|
|
||||||
height: 40px;
|
|
||||||
line-height: 40px;
|
|
||||||
text-align: center;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
color: #0079fe;
|
|
||||||
border-color: #0079fe;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btnBox {
|
|
||||||
height: 60px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
|
|
||||||
border-radius: 0 0 16px 16px;
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
width: 170px;
|
|
||||||
font-size: 16px;
|
|
||||||
padding: 10px;
|
|
||||||
margin: 10px;
|
|
||||||
height: 36px;
|
|
||||||
line-height: 18px;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 1px solid rgba(0, 0, 0, .1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn:last-child {
|
|
||||||
color: #fff;
|
|
||||||
background-color: #0067CF;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.message {
|
.message {
|
||||||
width: 400px;
|
width: 400px;
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="headInfo">
|
<view class="headInfo">
|
||||||
<view>
|
<view>
|
||||||
<uni-icons class="icon" type="back" size="24" @click="toBack" />
|
<uni-icons class="icon" type="back" size="16" @click="toBack" />
|
||||||
<text @click="tabsPort('center')">{{title}}</text>
|
<text @click="tabsPort('center')">{{title}}</text>
|
||||||
<uni-icons class="bottom" type="bottom" size="18" v-if="type" />
|
<uni-icons class="bottom" type="bottom" size="18" v-if="type" />
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -160,7 +160,7 @@
|
||||||
},
|
},
|
||||||
toBack() {
|
toBack() {
|
||||||
if (this.url != "") {
|
if (this.url != "") {
|
||||||
uni.navigateTo({
|
uni.redirectTo({
|
||||||
url: `${this.url}`
|
url: `${this.url}`
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -199,9 +199,12 @@
|
||||||
margin-left: 6px;
|
margin-left: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/deep/.uni-popup .uni-popup__wrapper {
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
.popupBox {
|
.popupBox {
|
||||||
min-width: 500px;
|
min-width: 500px;
|
||||||
height: 300px;
|
|
||||||
|
|
||||||
.popupTitle {
|
.popupTitle {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -210,22 +213,22 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #23262E;
|
color: #23262E;
|
||||||
font-weight: bold;
|
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ul {
|
.ul {
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
height: 192px;
|
max-height: 310px;
|
||||||
overflow: scroll;
|
overflow: scroll;
|
||||||
|
|
||||||
.li {
|
.li {
|
||||||
height: 40px;
|
height: 46px;
|
||||||
line-height: 40px;
|
line-height: 46px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #e7e7e7;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
|
|
@ -235,7 +238,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.btnBox {
|
.btnBox {
|
||||||
height: 40px;
|
height: 46px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
|
box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
|
||||||
|
|
@ -245,7 +248,7 @@
|
||||||
width: 170px;
|
width: 170px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin: 10px;
|
margin: 5px;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 159 KiB |
|
|
@ -1,241 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="uni-combox">
|
|
||||||
<view v-if="label" class="uni-combox__label" :style="labelStyle">
|
|
||||||
<text>{{label}}</text>
|
|
||||||
</view>
|
|
||||||
<view class="uni-combox__input-box">
|
|
||||||
<input class="uni-combox__input" type="text" :placeholder="placeholder" v-model="inputVal" @input="onInput" @focus="onFocus" @blur="onBlur" />
|
|
||||||
<!-- <uni-icons class="uni-combox__input-arrow" type="arrowdown" size="14" @click="toggleSelector"></uni-icons> 源代码注释掉上下距离太高不好看,去掉源码中class-->
|
|
||||||
<uni-icons type="arrowdown" size="18" v-if="inputVal===''" color="#999999" @click="toggleSelector"></uni-icons> <!-- 下箭头颜色#999999 -->
|
|
||||||
<uni-icons type="clear" size="18" v-else color="#999999" @click="clearInputVal"></uni-icons> <!-- add by limeng 追加的代码片段用叉号图标快速清空输入框 -->
|
|
||||||
<view class="uni-combox__selector" v-if="showSelector">
|
|
||||||
<scroll-view scroll-y="true" class="uni-combox__selector-scroll">
|
|
||||||
<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
|
|
||||||
<text>{{emptyTips}}</text>
|
|
||||||
</view>
|
|
||||||
<view class="uni-combox__selector-item" v-for="(item,index) in filterCandidates" :key="index" @click="onSelectorClick(index)">
|
|
||||||
<text>{{item}}</text>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
|
|
||||||
export default {
|
|
||||||
name: 'uniCombox',
|
|
||||||
components: {
|
|
||||||
uniIcons
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
label: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
labelWidth: {
|
|
||||||
type: String,
|
|
||||||
default: 'auto'
|
|
||||||
},
|
|
||||||
placeholder: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
/** 不再需要这个属性
|
|
||||||
candidates: {
|
|
||||||
type: Array,
|
|
||||||
default () {
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
},*/
|
|
||||||
//add by limeng 20210702 增加 map 类型的属性
|
|
||||||
candidatesMap: {
|
|
||||||
type: Map,//这个类型会被警告但是不影响使用
|
|
||||||
default () {
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
emptyTips: {
|
|
||||||
type: String,
|
|
||||||
default: '无匹配项'
|
|
||||||
},
|
|
||||||
value: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
showSelector: false,
|
|
||||||
inputVal: '', //输入框中输入的字符
|
|
||||||
inputValId: '',//add by limeng 真实往后台传递的下拉id标识(比如项目id)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
labelStyle() {
|
|
||||||
if (this.labelWidth === 'auto') {
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
width: this.labelWidth
|
|
||||||
}
|
|
||||||
},
|
|
||||||
filterCandidates() {
|
|
||||||
//从candidatesMap 取值遍历所有key并赋值给内部变量candidates这个数组
|
|
||||||
var candidates = [];//数组清空
|
|
||||||
this.candidatesMap.forEach(function(value, key){
|
|
||||||
var key = key;
|
|
||||||
candidates.push(key);//获取的值给内部变量赋值
|
|
||||||
})
|
|
||||||
|
|
||||||
return candidates.filter((item) => {
|
|
||||||
return item.indexOf(this.inputVal) > -1
|
|
||||||
})
|
|
||||||
},
|
|
||||||
filterCandidatesLength() {
|
|
||||||
return this.filterCandidates.length
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
value: {
|
|
||||||
handler(newVal) {
|
|
||||||
this.inputVal = newVal
|
|
||||||
},
|
|
||||||
immediate: true
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
toggleSelector() {
|
|
||||||
this.showSelector = !this.showSelector
|
|
||||||
},
|
|
||||||
onFocus() {
|
|
||||||
this.showSelector = true
|
|
||||||
},
|
|
||||||
onBlur() {
|
|
||||||
/**update by limeng 20210710 上午周六
|
|
||||||
离开输入框焦点的时候输入框里的内容必须包含在下拉框列表中，
|
|
||||||
否则输入框内容是用户瞎写的没有意义，后台也无法识别
|
|
||||||
因此,强制用户必须以选中的为准
|
|
||||||
备注：提供输入功能仅仅是为了匹配合适的下拉选项，但不能以输入的值为准,必须以选中的为准
|
|
||||||
*/
|
|
||||||
//if(this.candidates.indexOf(this.inputVal) > -1){ //则包含该元素
|
|
||||||
if(this.filterCandidates.indexOf(this.inputVal) > -1){ //则包含该元素
|
|
||||||
//alert("你输值在列表中");
|
|
||||||
//关闭下拉(原代码保留)
|
|
||||||
setTimeout(() => {
|
|
||||||
this.showSelector = false
|
|
||||||
}, 50)
|
|
||||||
}else {
|
|
||||||
//alert("你输的值不在列表中，此时下拉列表不能关闭，直到用户选中才能关闭下拉");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onSelectorClick(index) {//index 只是这个数组中顺序的索引值比如 1,2,3...,和map中的key value没有关系
|
|
||||||
this.inputVal = this.filterCandidates[index]//选中后给控件的输入框赋值
|
|
||||||
this.inputValId = this.candidatesMap.get(this.inputVal);//根据输入框内容反查出对应的id或者code(以便提交到后台)
|
|
||||||
this.showSelector = false;//选中后关闭下拉列表
|
|
||||||
this.$emit('input', this.inputVal);//拿到子组件的值(name)赋值给父组件的input事件,即父组件的v-model绑定的属性
|
|
||||||
this.$emit("setId",this.inputValId);//将name对应的id或者code返回给父组件,通过调用父组件的setId方法传值给父组件data中声明的变量
|
|
||||||
},
|
|
||||||
onInput() {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.$emit('input', this.inputVal)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
clearInputVal(){
|
|
||||||
this.inputVal='';
|
|
||||||
this.inputValId = '';//同时清空输入框id
|
|
||||||
this.$emit("setId",'');//将父组件的值也置为空
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.uni-combox {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
height: 40px;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
/* border-bottom: solid 1px #DDDDDD;
|
|
||||||
*/
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-combox__label {
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 22px;
|
|
||||||
padding-right: 10px;
|
|
||||||
color: #999999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-combox__input-box {
|
|
||||||
position: relative;
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
flex: 1;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-combox__input {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 33upx;/*16px*/
|
|
||||||
height: 25px;
|
|
||||||
line-height: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-combox__input-arrow {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-combox__selector {
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: absolute;
|
|
||||||
top: 42px;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
background-color: #FFFFFF;
|
|
||||||
border-radius: 0px;
|
|
||||||
box-shadow: #DDDDDD 4px 4px 8px, #DDDDDD -4px -4px 8px;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-combox__selector-scroll {
|
|
||||||
max-height: 500px;/*200px*/
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-combox__selector::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-bottom: solid 6px #FFFFFF;
|
|
||||||
border-right: solid 6px transparent;
|
|
||||||
border-left: solid 6px transparent;
|
|
||||||
left: 50%;
|
|
||||||
top: -6px;
|
|
||||||
margin-left: -6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-combox__selector-empty,
|
|
||||||
.uni-combox__selector-item {
|
|
||||||
/* #ifdef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
/* #endif */
|
|
||||||
line-height: 50px;/*36px*/
|
|
||||||
font-size: 33upx;/* 14px*/
|
|
||||||
text-align: center;
|
|
||||||
border-bottom: solid 1px #DDDDDD;
|
|
||||||
margin: 0px 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-combox__selector-empty:last-child,
|
|
||||||
.uni-combox__selector-item:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,819 +0,0 @@
|
||||||
<template>
|
|
||||||
<view v-if="isShow" class="picker" @tap="onConfirm">
|
|
||||||
<!-- 日期选择器 -->
|
|
||||||
<view v-if="type!='time'" class="picker-modal">
|
|
||||||
<view class="picker-modal-header">
|
|
||||||
<view class="picker-icon picker-icon-zuozuo" :hover-stay-time="100" hover-class="picker-icon-active" @click.stop="onSetYear('-1')"></view>
|
|
||||||
<view class="picker-icon picker-icon-zuo" :hover-stay-time="100" hover-class="picker-icon-active" @click.stop="onSetMonth('-1')"></view>
|
|
||||||
<text class="picker-modal-header-title">{{title}}</text>
|
|
||||||
<view class="picker-icon picker-icon-you" :hover-stay-time="100" hover-class="picker-icon-active" @click.stop="onSetMonth('+1')"></view>
|
|
||||||
<view class="picker-icon picker-icon-youyou" :hover-stay-time="100" hover-class="picker-icon-active" @click.stop="onSetYear('+1')"></view>
|
|
||||||
</view>
|
|
||||||
<swiper class="picker-modal-body" :circular="true" :duration="200" :skip-hidden-item-layout="true" :current="calendarIndex" @change="onSwiperChange">
|
|
||||||
<swiper-item class="picker-calendar" v-for="(calendar,calendarIndex2) in calendars" :key="calendarIndex2">
|
|
||||||
<view class="picker-calendar-view" v-for="(week,index) in weeks" :key="index - 7">
|
|
||||||
<view class="picker-calendar-view-item">{{week}}</view>
|
|
||||||
</view>
|
|
||||||
<view class="picker-calendar-view" v-for="(date,dateIndex) in calendar" :key="dateIndex" @click.stop="onSelectDate(date)">
|
|
||||||
<!-- 背景样式 -->
|
|
||||||
<view v-show="date.bgStyle.type" :class="'picker-calendar-view-'+date.bgStyle.type" :style="{background: date.bgStyle.background}"></view>
|
|
||||||
<!-- 正常和选中样式 -->
|
|
||||||
<view class="picker-calendar-view-item" :style="{opacity: date.statusStyle.opacity, color: date.statusStyle.color, background: date.statusStyle.background}">
|
|
||||||
<text>{{date.title}}</text>
|
|
||||||
</view>
|
|
||||||
<!-- 小圆点样式 -->
|
|
||||||
<view class="picker-calendar-view-dot" :style="{opacity: date.dotStyle.opacity, background: date.dotStyle.background}"></view>
|
|
||||||
<!-- 信息样式 -->
|
|
||||||
<view v-show="date.tips" class="picker-calendar-view-tips">{{date.tips}}</view>
|
|
||||||
</view>
|
|
||||||
</swiper-item>
|
|
||||||
</swiper>
|
|
||||||
<view class="picker-modal-footer">
|
|
||||||
<view class="picker-modal-footer-info">
|
|
||||||
<block v-if="isMultiSelect">
|
|
||||||
<view class="picker-display">
|
|
||||||
<text>{{beginText}}日期</text>
|
|
||||||
<text class="picker-display-text">{{BeginTitle}}</text>
|
|
||||||
<view v-if="isContainTime" class="picker-display-link" :hover-stay-time="100" hover-class="picker-display-link-active"
|
|
||||||
:style="{color}" @click.stop="onShowTimePicker('begin')">{{BeginTimeTitle}}</view>
|
|
||||||
</view>
|
|
||||||
<view class="picker-display">
|
|
||||||
<text>{{endText}}日期</text>
|
|
||||||
<text class="picker-display-text">{{EndTitle}}</text>
|
|
||||||
<view v-if="isContainTime" class="picker-display-link" :hover-stay-time="100" hover-class="picker-display-link-active"
|
|
||||||
:style="{color}" @click.stop="onShowTimePicker('end')">{{EndTimeTitle}}</view>
|
|
||||||
</view>
|
|
||||||
</block>
|
|
||||||
<block v-else>
|
|
||||||
<view class="picker-display">
|
|
||||||
<text>当前选择</text>
|
|
||||||
<text class="picker-display-text">{{BeginTitle}}</text>
|
|
||||||
<view v-if="isContainTime" class="picker-display-link" :hover-stay-time="100" hover-class="picker-display-link-active"
|
|
||||||
:style="{color}" @click.stop="onShowTimePicker('begin')">{{BeginTimeTitle}}</view>
|
|
||||||
</view>
|
|
||||||
</block>
|
|
||||||
</view>
|
|
||||||
<view class="picker-modal-footer-btn">
|
|
||||||
<view class="picker-btn" :hover-stay-time="100" hover-class="picker-btn-active" @click.stop="onCancel">取消</view>
|
|
||||||
<view class="picker-btn" :style="{color}" :hover-stay-time="100" hover-class="picker-btn-active" @click.stop="onConfirm">确认</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 时间选择器 -->
|
|
||||||
<view v-if="showTimePicker" class="picker">
|
|
||||||
<view class="picker-modal picker-time">
|
|
||||||
<view class="picker-modal-header">
|
|
||||||
<text class="picker-modal-header-title">选择日期</text>
|
|
||||||
</view>
|
|
||||||
<picker-view class="picker-modal-time" indicator-class="picker-modal-time-item" :value="timeValue" @change.stop="onTimeChange">
|
|
||||||
<picker-view-column>
|
|
||||||
<view v-for="(v,i) in 24" :key="i">{{i<10?'0'+i:i}}时</view>
|
|
||||||
</picker-view-column>
|
|
||||||
<picker-view-column>
|
|
||||||
<view v-for="(v,i) in 60" :key="i">{{i<10?'0'+i:i}}分</view>
|
|
||||||
</picker-view-column>
|
|
||||||
<picker-view-column v-if="showSeconds">
|
|
||||||
<view v-for="(v,i) in 60" :key="i">{{i<10?'0'+i:i}}秒</view>
|
|
||||||
</picker-view-column>
|
|
||||||
</picker-view>
|
|
||||||
<view class="picker-modal-footer">
|
|
||||||
<view class="picker-modal-footer-info">
|
|
||||||
<view class="picker-display">
|
|
||||||
<text>当前选择</text>
|
|
||||||
<text class="picker-display-text">{{PickerTimeTitle}}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="picker-modal-footer-btn">
|
|
||||||
<view class="picker-btn" :hover-stay-time="100" hover-class="picker-btn-active" @click.stop="onCancelTime">取消</view>
|
|
||||||
<view class="picker-btn" :style="{color}" :hover-stay-time="100" hover-class="picker-btn-active" @click.stop="onConfirmTime">确认</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
/**
|
|
||||||
* 工具函数库
|
|
||||||
*/
|
|
||||||
const DateTools = {
|
|
||||||
/**
|
|
||||||
* 获取公历节日
|
|
||||||
* @param date Date对象
|
|
||||||
*/
|
|
||||||
getHoliday(date) {
|
|
||||||
let holidays = {
|
|
||||||
'0101': '元旦',
|
|
||||||
'0214': '情人',
|
|
||||||
'0308': '妇女',
|
|
||||||
'0312': '植树',
|
|
||||||
'0401': '愚人',
|
|
||||||
'0501': '劳动',
|
|
||||||
'0504': '青年',
|
|
||||||
'0601': '儿童',
|
|
||||||
'0701': '建党',
|
|
||||||
'0801': '建军',
|
|
||||||
'0903': '抗日',
|
|
||||||
'0910': '教师',
|
|
||||||
'1001': '国庆',
|
|
||||||
'1031': '万圣',
|
|
||||||
'1224': '平安',
|
|
||||||
'1225': '圣诞'
|
|
||||||
};
|
|
||||||
let value = this.format(date, 'mmdd');
|
|
||||||
if (holidays[value]) return holidays[value];
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 解析标准日期格式
|
|
||||||
* @param s 日期字符串
|
|
||||||
* @return 返回Date对象
|
|
||||||
*/
|
|
||||||
parse: s => new Date(s.replace(/(年|月|-)/g, '/').replace(/(日)/g, '')),
|
|
||||||
/**
|
|
||||||
* 比较日期是否为同一天
|
|
||||||
* @param a Date对象
|
|
||||||
* @param b Date对象
|
|
||||||
* @return Boolean
|
|
||||||
*/
|
|
||||||
isSameDay: (a, b) => a.getMonth() == b.getMonth() && a.getFullYear() == b.getFullYear() && a.getDate() == b.getDate(),
|
|
||||||
/**
|
|
||||||
* 格式化Date对象
|
|
||||||
* @param d 日期对象
|
|
||||||
* @param f 格式字符串
|
|
||||||
* @return 返回格式化后的字符串
|
|
||||||
*/
|
|
||||||
format(d, f) {
|
|
||||||
var o = {
|
|
||||||
"m+": d.getMonth() + 1,
|
|
||||||
"d+": d.getDate(),
|
|
||||||
"h+": d.getHours(),
|
|
||||||
"i+": d.getMinutes(),
|
|
||||||
"s+": d.getSeconds(),
|
|
||||||
"q+": Math.floor((d.getMonth() + 3) / 3),
|
|
||||||
};
|
|
||||||
if (/(y+)/.test(f))
|
|
||||||
f = f.replace(RegExp.$1, (d.getFullYear() + "").substr(4 - RegExp.$1.length));
|
|
||||||
for (var k in o)
|
|
||||||
if (new RegExp("(" + k + ")").test(f))
|
|
||||||
f = f.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
|
||||||
return f;
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 用于format格式化后的反解析
|
|
||||||
* @param s 日期字符串
|
|
||||||
* @param f 格式字符串
|
|
||||||
* @return 返回Date对象
|
|
||||||
*/
|
|
||||||
inverse(s, f) {
|
|
||||||
var o = {
|
|
||||||
"y": '',
|
|
||||||
"m": '',
|
|
||||||
"d": '',
|
|
||||||
"h": '',
|
|
||||||
"i": '',
|
|
||||||
"s": '',
|
|
||||||
};
|
|
||||||
let d = new Date();
|
|
||||||
if (s.length != f.length) return d;
|
|
||||||
for (let i in f)
|
|
||||||
if (o[f[i]] != undefined) o[f[i]] += s[i];
|
|
||||||
if (o.y) d.setFullYear(o.y.length < 4 ? (d.getFullYear() + '').substr(0, 4 - o.y.length) + o.y : o.y);
|
|
||||||
o.m && d.setMonth(o.m - 1, 1);
|
|
||||||
o.d && d.setDate(o.d - 0);
|
|
||||||
o.h && d.setHours(o.h - 0);
|
|
||||||
o.i && d.setMinutes(o.i - 0);
|
|
||||||
o.s && d.setSeconds(o.s - 0);
|
|
||||||
return d;
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 获取日历数组（42天）
|
|
||||||
* @param date 日期对象或日期字符串
|
|
||||||
* @param proc 处理日历(和forEach类似)，传递一个数组中的item
|
|
||||||
* @return Array
|
|
||||||
*/
|
|
||||||
getCalendar(date, proc) {
|
|
||||||
let it = new Date(date),
|
|
||||||
calendars = [];
|
|
||||||
it.setDate(1);
|
|
||||||
it.setDate(it.getDate() - ((it.getDay() == 0 ? 7 : it.getDay()) - 1)); //偏移量
|
|
||||||
for (let i = 0; i < 42; i++) {
|
|
||||||
let tmp = {
|
|
||||||
dateObj: new Date(it),
|
|
||||||
title: it.getDate(),
|
|
||||||
isOtherMonth: it.getMonth() < date.getMonth() || it.getMonth() > date.getMonth()
|
|
||||||
};
|
|
||||||
calendars.push(Object.assign(tmp, proc ? proc(tmp) : {}));
|
|
||||||
it.setDate(it.getDate() + 1);
|
|
||||||
}
|
|
||||||
return calendars;
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 获取日期到指定的月份1号(不改变原来的date对象)
|
|
||||||
* @param d Date对象
|
|
||||||
* @param v 指定的月份
|
|
||||||
* @return Date对象
|
|
||||||
*/
|
|
||||||
getDateToMonth(d, v) {
|
|
||||||
let n = new Date(d);
|
|
||||||
n.setMonth(v, 1);
|
|
||||||
return n;
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 把时间数组转为时间字符串
|
|
||||||
* @param t Array[时,分,秒]
|
|
||||||
* @param showSecinds 是否显示秒
|
|
||||||
* @return 字符串 时:分[:秒]
|
|
||||||
*/
|
|
||||||
formatTimeArray(t, s) {
|
|
||||||
let r = [...t];
|
|
||||||
if (!s) r.length = 2;
|
|
||||||
r.forEach((v, k) => r[k] = ('0' + v).slice(-2));
|
|
||||||
return r.join(':');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
//颜色
|
|
||||||
color: {
|
|
||||||
type: String,
|
|
||||||
default: '#409eff'
|
|
||||||
},
|
|
||||||
//是否显示秒 针对type为datetime或time时生效
|
|
||||||
showSeconds: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
//初始的值
|
|
||||||
value: [String, Array],
|
|
||||||
//类型date time datetime range rangetime
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
default: 'range'
|
|
||||||
},
|
|
||||||
//是否显示
|
|
||||||
show: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
//初始格式
|
|
||||||
format: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
//显示公历节日
|
|
||||||
showHoliday: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
//显示提示
|
|
||||||
showTips: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
//开始文案 针对type为范围选择时生效
|
|
||||||
beginText: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
//结束文案 针对type为范围选择时生效
|
|
||||||
endText: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
isShow: false, //是否显示
|
|
||||||
isMultiSelect: false, //是否为多选
|
|
||||||
isContainTime: false, //是否包含时间
|
|
||||||
date: {}, //当前日期对象
|
|
||||||
weeks: ["一", "二", "三", "四", "五", "六", "日"],
|
|
||||||
title: '初始化', //标题
|
|
||||||
calendars: [[],[],[]], //日历数组
|
|
||||||
calendarIndex: 1, //当前日历索引
|
|
||||||
checkeds: [], //选中的日期对象集合
|
|
||||||
showTimePicker: false, //是否显示时间选择器
|
|
||||||
timeValue: [0, 0, 0], //时间选择器的值
|
|
||||||
timeType: 'begin', //当前时间选择的类型
|
|
||||||
beginTime: [0, 0, 0], //当前所选的开始时间值
|
|
||||||
endTime: [0, 0, 0], //当前所选的结束时间值
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
//设置值
|
|
||||||
setValue(value) {
|
|
||||||
this.date = new Date();
|
|
||||||
this.checkeds = [];
|
|
||||||
this.isMultiSelect = this.type.indexOf('range') >= 0;
|
|
||||||
this.isContainTime = this.type.indexOf('time') >= 0;
|
|
||||||
//将字符串解析为Date对象
|
|
||||||
let parseDateStr = (str) => (this.format ? DateTools.inverse(str, this.format) : DateTools.parse(str));
|
|
||||||
if (value) {
|
|
||||||
if (this.isMultiSelect) {
|
|
||||||
Array.isArray(value) && value.forEach((dateStr, index) => {
|
|
||||||
let date = parseDateStr(dateStr);
|
|
||||||
let time = [date.getHours(), date.getMinutes(), date.getSeconds()];
|
|
||||||
if (index == 0) this.beginTime = time;
|
|
||||||
else this.endTime = time;
|
|
||||||
this.checkeds.push(date);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
if (this.type == 'time') {
|
|
||||||
let date = parseDateStr('2019/1/1 ' + value);
|
|
||||||
this.beginTime = [date.getHours(), date.getMinutes(), date.getSeconds()];
|
|
||||||
this.onShowTimePicker('begin');
|
|
||||||
} else {
|
|
||||||
this.checkeds.push(parseDateStr(value));
|
|
||||||
if (this.isContainTime) this.beginTime = [
|
|
||||||
this.checkeds[0].getHours(),
|
|
||||||
this.checkeds[0].getMinutes(),
|
|
||||||
this.checkeds[0].getSeconds()
|
|
||||||
];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (this.checkeds.length) this.date = new Date(this.checkeds[0]);
|
|
||||||
} else {
|
|
||||||
if (this.isContainTime) {
|
|
||||||
this.beginTime = [this.date.getHours(), this.date.getMinutes(), this.date.getSeconds()];
|
|
||||||
if (this.isMultiSelect) this.endTime = [...this.beginTime];
|
|
||||||
}
|
|
||||||
this.checkeds.push(new Date(this.date));
|
|
||||||
}
|
|
||||||
if (this.type != 'time') this.refreshCalendars(true);
|
|
||||||
else this.onShowTimePicker('begin');
|
|
||||||
},
|
|
||||||
//改变年份
|
|
||||||
onSetYear(value) {
|
|
||||||
this.date.setFullYear(this.date.getFullYear() + parseInt(value));
|
|
||||||
this.refreshCalendars(true);
|
|
||||||
},
|
|
||||||
//改变月份
|
|
||||||
onSetMonth(value) {
|
|
||||||
this.date.setMonth(this.date.getMonth() + parseInt(value));
|
|
||||||
this.refreshCalendars(true);
|
|
||||||
},
|
|
||||||
//时间选择变更
|
|
||||||
onTimeChange(e) {
|
|
||||||
this.timeValue = e.detail.value;
|
|
||||||
},
|
|
||||||
//设置时间选择器的显示状态
|
|
||||||
onShowTimePicker(type) {
|
|
||||||
this.showTimePicker = true;
|
|
||||||
this.timeType = type;
|
|
||||||
this.timeValue = type == 'begin' ? [...this.beginTime] : [...this.endTime];
|
|
||||||
},
|
|
||||||
//处理日历
|
|
||||||
procCalendar(item) {
|
|
||||||
//定义初始样式
|
|
||||||
item.statusStyle = {
|
|
||||||
opacity: 1,
|
|
||||||
color: item.isOtherMonth ? '#ddd' : '#000',
|
|
||||||
background: 'transparent'
|
|
||||||
};
|
|
||||||
item.bgStyle = {
|
|
||||||
type: '',
|
|
||||||
background: 'transparent'
|
|
||||||
};
|
|
||||||
item.dotStyle = {
|
|
||||||
opacity: 1,
|
|
||||||
background: 'transparent'
|
|
||||||
};
|
|
||||||
item.tips = "";
|
|
||||||
//标记今天的日期
|
|
||||||
if (DateTools.isSameDay(new Date(), item.dateObj)) {
|
|
||||||
item.statusStyle.color = this.color;
|
|
||||||
if (item.isOtherMonth) item.statusStyle.opacity = 0.3;
|
|
||||||
}
|
|
||||||
//标记选中项
|
|
||||||
this.checkeds.forEach(date => {
|
|
||||||
if (DateTools.isSameDay(date, item.dateObj)) {
|
|
||||||
item.statusStyle.background = this.color;
|
|
||||||
item.statusStyle.color = '#fff';
|
|
||||||
item.statusStyle.opacity = 1;
|
|
||||||
if (this.isMultiSelect && this.showTips) item.tips = this.beginText;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
//节假日或今日的日期标点
|
|
||||||
if (item.statusStyle.background != this.color) {
|
|
||||||
let holiday = this.showHoliday ? DateTools.getHoliday(item.dateObj) : false;
|
|
||||||
if (holiday || DateTools.isSameDay(new Date(), item.dateObj)) {
|
|
||||||
item.title = holiday || item.title;
|
|
||||||
item.dotStyle.background = this.color;
|
|
||||||
if (item.isOtherMonth) item.dotStyle.opacity = 0.2;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
item.title = item.dateObj.getDate();
|
|
||||||
}
|
|
||||||
//有两个日期
|
|
||||||
if (this.checkeds.length == 2) {
|
|
||||||
if (DateTools.isSameDay(this.checkeds[0], item.dateObj)) { //开始日期
|
|
||||||
item.bgStyle.type = 'bgbegin';
|
|
||||||
}
|
|
||||||
if (DateTools.isSameDay(this.checkeds[1], item.dateObj)) { //结束日期
|
|
||||||
if (this.isMultiSelect && this.showTips) item.tips = item.bgStyle.type ? this.beginText + ' / ' + this.endText : this.endText;
|
|
||||||
if (!item.bgStyle.type) { //开始日期不等于结束日期
|
|
||||||
item.bgStyle.type = 'bgend';
|
|
||||||
} else {
|
|
||||||
item.bgStyle.type = '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (!item.bgStyle.type && (+item.dateObj > +this.checkeds[0] && +item.dateObj < +this.checkeds[1])) { //中间的日期
|
|
||||||
item.bgStyle.type = 'bg';
|
|
||||||
item.statusStyle.color = this.color;
|
|
||||||
}
|
|
||||||
if (item.bgStyle.type) {
|
|
||||||
item.bgStyle.background = this.color;
|
|
||||||
item.dotStyle.opacity = 1;
|
|
||||||
item.statusStyle.opacity = 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
//刷新日历
|
|
||||||
refreshCalendars(refresh = false) {
|
|
||||||
let date = new Date(this.date);
|
|
||||||
let before = DateTools.getDateToMonth(date, date.getMonth() - 1);
|
|
||||||
let after = DateTools.getDateToMonth(date, date.getMonth() + 1);
|
|
||||||
if (this.calendarIndex == 0) {
|
|
||||||
if(refresh) this.calendars.splice(0, 1, DateTools.getCalendar(date, this.procCalendar));
|
|
||||||
this.calendars.splice(1, 1, DateTools.getCalendar(after, this.procCalendar));
|
|
||||||
this.calendars.splice(2, 1, DateTools.getCalendar(before, this.procCalendar));
|
|
||||||
} else if (this.calendarIndex == 1) {
|
|
||||||
this.calendars.splice(0, 1, DateTools.getCalendar(before, this.procCalendar));
|
|
||||||
if(refresh) this.calendars.splice(1, 1, DateTools.getCalendar(date, this.procCalendar));
|
|
||||||
this.calendars.splice(2, 1, DateTools.getCalendar(after, this.procCalendar));
|
|
||||||
} else if (this.calendarIndex == 2) {
|
|
||||||
this.calendars.splice(0, 1, DateTools.getCalendar(after, this.procCalendar));
|
|
||||||
this.calendars.splice(1, 1, DateTools.getCalendar(before, this.procCalendar));
|
|
||||||
if(refresh) this.calendars.splice(2, 1, DateTools.getCalendar(date, this.procCalendar));
|
|
||||||
}
|
|
||||||
this.title = DateTools.format(this.date, 'yyyy年mm月');
|
|
||||||
},
|
|
||||||
//滑块切换
|
|
||||||
onSwiperChange(e) {
|
|
||||||
this.calendarIndex = e.detail.current;
|
|
||||||
let calendar = this.calendars[this.calendarIndex];
|
|
||||||
this.date = new Date(calendar[22].dateObj); //取中间一天，保证是当前的月份
|
|
||||||
this.refreshCalendars();
|
|
||||||
},
|
|
||||||
//选中日期
|
|
||||||
onSelectDate(date) {
|
|
||||||
if (~this.type.indexOf('range') && this.checkeds.length == 2) this.checkeds = [];
|
|
||||||
else if (!(~this.type.indexOf('range')) && this.checkeds.length) this.checkeds = [];
|
|
||||||
this.checkeds.push(new Date(date.dateObj));
|
|
||||||
this.checkeds.sort((a, b) => a - b); //从小到大排序
|
|
||||||
this.calendars.forEach(calendar => {
|
|
||||||
calendar.forEach(this.procCalendar); //重新处理
|
|
||||||
});
|
|
||||||
},
|
|
||||||
//时间选择取消
|
|
||||||
onCancelTime() {
|
|
||||||
this.showTimePicker = false;
|
|
||||||
this.type == 'time' && this.onCancel();
|
|
||||||
},
|
|
||||||
//时间选择确定
|
|
||||||
onConfirmTime() {
|
|
||||||
if (this.timeType == 'begin') this.beginTime = this.timeValue;
|
|
||||||
else this.endTime = this.timeValue;
|
|
||||||
this.showTimePicker = false;
|
|
||||||
this.type == 'time' && this.onConfirm();
|
|
||||||
},
|
|
||||||
//取消
|
|
||||||
onCancel() {
|
|
||||||
this.$emit('cancel', false);
|
|
||||||
},
|
|
||||||
//确定
|
|
||||||
onConfirm() {
|
|
||||||
let result = {
|
|
||||||
value: null,
|
|
||||||
date: null
|
|
||||||
};
|
|
||||||
//定义默认格式
|
|
||||||
let defaultFormat = {
|
|
||||||
'date': 'yyyy/mm/dd',
|
|
||||||
'time': 'hh:ii' + (this.showSeconds ? ':ss' : ''),
|
|
||||||
'datetime': ''
|
|
||||||
};
|
|
||||||
defaultFormat['datetime'] = defaultFormat.date + ' ' + defaultFormat.time;
|
|
||||||
let fillTime = (date, timeArr) => {
|
|
||||||
date.setHours(timeArr[0], timeArr[1]);
|
|
||||||
if (this.showSeconds) date.setSeconds(timeArr[2]);
|
|
||||||
};
|
|
||||||
if (this.type == 'time') {
|
|
||||||
let date = new Date();
|
|
||||||
fillTime(date, this.beginTime);
|
|
||||||
result.value = DateTools.format(date, this.format ? this.format : defaultFormat.time);
|
|
||||||
result.date = date;
|
|
||||||
} else {
|
|
||||||
if (this.isMultiSelect) {
|
|
||||||
let values = [],
|
|
||||||
dates = [];
|
|
||||||
if (this.checkeds.length < 2) return uni.showToast({
|
|
||||||
icon: 'none',
|
|
||||||
title: '请选择两个日期'
|
|
||||||
});
|
|
||||||
this.checkeds.forEach((date, index) => {
|
|
||||||
let newDate = new Date(date);
|
|
||||||
if (this.isContainTime) {
|
|
||||||
let time = [this.beginTime, this.endTime];
|
|
||||||
fillTime(newDate, time[index]);
|
|
||||||
}
|
|
||||||
values.push(DateTools.format(newDate, this.format ? this.format : defaultFormat[this.isContainTime ?
|
|
||||||
'datetime' : 'date']));
|
|
||||||
dates.push(newDate);
|
|
||||||
});
|
|
||||||
result.value = values;
|
|
||||||
result.date = dates;
|
|
||||||
} else {
|
|
||||||
let newDate = new Date(this.checkeds[0]);
|
|
||||||
if (this.isContainTime) {
|
|
||||||
newDate.setHours(this.beginTime[0], this.beginTime[1]);
|
|
||||||
if (this.showSeconds) newDate.setSeconds(this.beginTime[2]);
|
|
||||||
}
|
|
||||||
result.value = DateTools.format(newDate, this.format ? this.format : defaultFormat[this.isContainTime ?
|
|
||||||
'datetime' : 'date']);
|
|
||||||
result.date = newDate;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.$emit('confirm', result);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
BeginTitle() {
|
|
||||||
let value = '未选择';
|
|
||||||
if (this.checkeds.length) value = DateTools.format(this.checkeds[0], 'yy/mm/dd');
|
|
||||||
return value;
|
|
||||||
},
|
|
||||||
EndTitle() {
|
|
||||||
let value = '未选择';
|
|
||||||
if (this.checkeds.length == 2) value = DateTools.format(this.checkeds[1], 'yy/mm/dd');
|
|
||||||
return value;
|
|
||||||
},
|
|
||||||
PickerTimeTitle() {
|
|
||||||
return DateTools.formatTimeArray(this.timeValue, this.showSeconds);
|
|
||||||
},
|
|
||||||
BeginTimeTitle() {
|
|
||||||
return this.BeginTitle != '未选择' ? DateTools.formatTimeArray(this.beginTime, this.showSeconds) : '';
|
|
||||||
},
|
|
||||||
EndTimeTitle() {
|
|
||||||
return this.EndTitle != '未选择' ? DateTools.formatTimeArray(this.endTime, this.showSeconds) : '';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
show(newValue, oldValue) {
|
|
||||||
newValue && this.setValue(this.value);
|
|
||||||
this.isShow = newValue;
|
|
||||||
},
|
|
||||||
value(newValue, oldValue) {
|
|
||||||
setTimeout(()=>{
|
|
||||||
this.setValue(newValue);
|
|
||||||
}, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
$z-index: 999;
|
|
||||||
$cell-spacing: 20upx;
|
|
||||||
$calendar-size: 630upx;
|
|
||||||
$calendar-item-size: 90upx;
|
|
||||||
|
|
||||||
.picker {
|
|
||||||
position: fixed;
|
|
||||||
z-index: $z-index;
|
|
||||||
background: rgba(255, 255, 255, 0);
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
font-size: 28upx;
|
|
||||||
|
|
||||||
&-btn {
|
|
||||||
padding: $cell-spacing*0.5 $cell-spacing;
|
|
||||||
border-radius: 12upx;
|
|
||||||
color: #666;
|
|
||||||
|
|
||||||
&-active {
|
|
||||||
background: rgba(0, 0, 0, .1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-display {
|
|
||||||
color: #666;
|
|
||||||
|
|
||||||
&-text {
|
|
||||||
color: #000;
|
|
||||||
margin: 0 $cell-spacing*0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-link {
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
&-active {
|
|
||||||
background: rgba(0, 0, 0, .1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-time {
|
|
||||||
width: $calendar-size - 80upx !important;
|
|
||||||
left: ((750upx - $calendar-size) / 2 + 40upx) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-modal {
|
|
||||||
background: #fff;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: (750upx - $calendar-size) / 2;
|
|
||||||
width: $calendar-size;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
border-radius: 12upx;
|
|
||||||
|
|
||||||
&-header {
|
|
||||||
text-align: center;
|
|
||||||
line-height: 80upx;
|
|
||||||
font-size: 32upx;
|
|
||||||
|
|
||||||
&-title {
|
|
||||||
display: inline-block;
|
|
||||||
width: 40%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.picker-icon {
|
|
||||||
display: inline-block;
|
|
||||||
line-height: 50upx;
|
|
||||||
width: 50upx;
|
|
||||||
height: 50upx;
|
|
||||||
border-radius: 50upx;
|
|
||||||
text-align: center;
|
|
||||||
margin: 10upx;
|
|
||||||
background: #fff;
|
|
||||||
font-size: 36upx;
|
|
||||||
|
|
||||||
&-active {
|
|
||||||
background: rgba(0, 0, 0, .1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-body {
|
|
||||||
width: $calendar-size !important;
|
|
||||||
height: $calendar-size !important;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-time {
|
|
||||||
width: 100%;
|
|
||||||
height: 180upx;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 60upx;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: $cell-spacing;
|
|
||||||
|
|
||||||
&-info {
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-btn {
|
|
||||||
flex-shrink: 0;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&-calendar {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
&-view {
|
|
||||||
position: relative;
|
|
||||||
width: $calendar-item-size;
|
|
||||||
height: $calendar-item-size;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
&-bgbegin,
|
|
||||||
&-bg,
|
|
||||||
&-bgend,
|
|
||||||
&-item,
|
|
||||||
&-dot,
|
|
||||||
&-tips {
|
|
||||||
position: absolute;
|
|
||||||
transition: .2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-bgbegin,
|
|
||||||
&-bg,
|
|
||||||
&-bgend {
|
|
||||||
opacity: .15;
|
|
||||||
height: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-bg {
|
|
||||||
left: 0;
|
|
||||||
top: 10%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-bgbegin {
|
|
||||||
border-radius: $calendar-item-size 0 0 $calendar-item-size;
|
|
||||||
top: 10%;
|
|
||||||
left: 10%;
|
|
||||||
width: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-bgend {
|
|
||||||
border-radius: 0 $calendar-item-size $calendar-item-size 0;
|
|
||||||
top: 10%;
|
|
||||||
left: 0%;
|
|
||||||
width: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-item {
|
|
||||||
left: 5%;
|
|
||||||
top: 5%;
|
|
||||||
width: 90%;
|
|
||||||
height: 90%;
|
|
||||||
border-radius: $calendar-item-size;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-dot {
|
|
||||||
right: 10%;
|
|
||||||
top: 10%;
|
|
||||||
width: 12upx;
|
|
||||||
height: 12upx;
|
|
||||||
border-radius: 12upx;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-tips {
|
|
||||||
bottom: 100%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
background: #4E4B46;
|
|
||||||
color: #fff;
|
|
||||||
border-radius: 12upx;
|
|
||||||
padding: 10upx 20upx;
|
|
||||||
font-size: 24upx;
|
|
||||||
width: max-content;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
pointer-events: none;
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 100%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 5px 5px 0 5px;
|
|
||||||
border-color: #4E4B46 transparent transparent transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "mxdatepickericon";
|
|
||||||
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMYAAsAAAAACBgAAALMAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDIgqDRIJiATYCJAMUCwwABCAFhG0HSRvfBsg+QCa3noNAyAQ9w6GDvbwpNp2vloCyn8bD/x+y+/5qDhtj+T4eRVEcbsCoKMFASzCgLdDkmqYDwgxkWQ6YH5L/YnppOlLEjlnter43YRjU7M6vJ3iGADVAgJn5kqjv/wEii23T86UsAQT+04fV+o97VTMx4PPZt4DlorLXwIQiGMA5uhaVrBWqGHfQXcTEiE+PE+g2SUlxWlLVBHwUYFMgrgwSB3wstTKSGzqF1nOyiGeeOtNjV4An/vvxR58PSc3AzrMViyDvPo/7dVEUzn5GROfIWAcU4rLXfMFdhte56y4We9gGNEVIezkBOOaQXUrbTf/hJVkhGpDdCw7dSOEzByMEn3kIic98hMxnAfeFPKWCbjRcA148/HxhCEkaA94eGWFaGolsblpaWz8/Po2WVuNHh1fmBpZHIpqal9fOjizhTteY+RZ9rv02I/pq0W6QVH3pSncBz3m55r9ZIPycHfmenvxe4uyutIgfT5u4bgkDusl9gcF0rnfnz+b2NpSaQWBFeu8GIL1xQj5AH/6FAsEr/50F28e/gA9ny6KjLrxIp0TE+UucmQOl5AFNLXkzZufWamWHYEI39PEP2If97CMdm51N6DSmIekwAVmneXTBr0PVYx+aTgfQbU3p+R4jKHdRurBq0oEw6AKSfm+QDbpGF/w3VOP+oBnMHbqdx409FjP4RRHHkAj5IWgQiBUjHfMTuQ1Icpg5avI4sQVRu8EHdWptM1aKrIjuscfeL+kZwxBTYoElztOQ2UygjRIjEphaZsyWodHgvm9SC8QC/JygEA6DiCDeEMhAQFhhOpvxa/18A0TiYMahIy0L2hYIZWeYH9JR085Al4qts1re5St2/SR6DINBGEVYQCWOETHDMAHZ+pcZIQJGTV4RtMmg8UbhuWL1+VLLA2RFHYC71kiRo0SNpjwQh8pj2EFU3oTNmS1WqgIA') format('woff2');
|
|
||||||
}
|
|
||||||
|
|
||||||
.picker-icon {
|
|
||||||
font-family: "mxdatepickericon" !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.picker-icon-you:before {
|
|
||||||
content: "\e63e";
|
|
||||||
}
|
|
||||||
|
|
||||||
.picker-icon-zuo:before {
|
|
||||||
content: "\e640";
|
|
||||||
}
|
|
||||||
|
|
||||||
.picker-icon-zuozuo:before {
|
|
||||||
content: "\e641";
|
|
||||||
}
|
|
||||||
|
|
||||||
.picker-icon-youyou:before {
|
|
||||||
content: "\e642";
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,64 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="sidebar">
|
|
||||||
<navigator url="/pages/index/index" open-type="redirect">
|
|
||||||
<view class="item" :class="path==1?'active':''">
|
|
||||||
装船指令
|
|
||||||
</view>
|
|
||||||
</navigator>
|
|
||||||
<navigator url="/pages/discharge/index" open-type="redirect">
|
|
||||||
<view class="item" :class="path==2?'active':''">
|
|
||||||
卸船指令
|
|
||||||
</view>
|
|
||||||
</navigator>
|
|
||||||
<navigator url="/pages/shipWork/index" open-type="redirect">
|
|
||||||
<view class="item" :class="path==3?'active':''">
|
|
||||||
船舶作业
|
|
||||||
</view>
|
|
||||||
</navigator>
|
|
||||||
<navigator url="/pages/quality/index" open-type="redirect">
|
|
||||||
<view class="item" :class="path==4?'active':''">
|
|
||||||
货物质量
|
|
||||||
</view>
|
|
||||||
</navigator>
|
|
||||||
<navigator url="/pages/monitor/index" open-type="redirect">
|
|
||||||
<view class="item" :class="path==5?'active':''">
|
|
||||||
场位监控
|
|
||||||
</view>
|
|
||||||
</navigator>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "footTab",
|
|
||||||
props: {
|
|
||||||
path: {
|
|
||||||
type: [String || Number]
|
|
||||||
},
|
|
||||||
},
|
|
||||||
onLoad() {
|
|
||||||
|
|
||||||
},
|
|
||||||
components: {},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.sidebar {
|
|
||||||
min-width: 100px;
|
|
||||||
background-color: #f2f2f2;
|
|
||||||
|
|
||||||
.item {
|
|
||||||
height: 45px;
|
|
||||||
line-height: 45px;
|
|
||||||
text-align: center;
|
|
||||||
color: #999999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
color: #5573d7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
/**
|
|
||||||
* 递归使用call方式 this指向
|
|
||||||
*
|
|
||||||
* @param {String} componentName 需要查找的组件的名称
|
|
||||||
* @param {String} eventName 事件名称
|
|
||||||
* @param {Object} params 需要传递的参数
|
|
||||||
*/
|
|
||||||
function broadcast(componentName, eventName, params) {
|
|
||||||
// 循环子节点找到需要的节点，没有查找到就递归进行查找
|
|
||||||
this.$children.map(child => {
|
|
||||||
if (componentName === child.$options.name) {
|
|
||||||
child.$emit.apply(child, [eventName].concat(params))
|
|
||||||
} else {
|
|
||||||
broadcast.apply(child, [componentName, eventName].concat(params))
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
|
||||||
methods: {
|
|
||||||
/**
|
|
||||||
* 派发 向上查找一个
|
|
||||||
* @param {Object} componentName 需要查找的组件的名称
|
|
||||||
* @param {Object} eventName 事件名称
|
|
||||||
* @param {Object} params 需要传递的参数
|
|
||||||
*/
|
|
||||||
dispatch(componentName, eventName, params) {
|
|
||||||
// 找到最近父节点 $root 根节点
|
|
||||||
let parent = this.$parent || this.$root
|
|
||||||
// 获取当前实例的名称
|
|
||||||
let name = parent.$options.name
|
|
||||||
|
|
||||||
// 当前存在节点并且当前节点没有名称或者名称不等于我们要查找的节点名称，则继续遍历
|
|
||||||
while (parent && (!name || name !== componentName)) {
|
|
||||||
parent = parent.$parent
|
|
||||||
if (parent) {
|
|
||||||
name = parent.$options.name
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 如果有节点则表示找到
|
|
||||||
if (parent) {
|
|
||||||
parent.$emit.apply(parent, [eventName].concat(params))
|
|
||||||
}
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 广播 向下查找多个
|
|
||||||
* @param {Object} componentName 需要查找的组件的名称
|
|
||||||
* @param {Object} eventName 事件名称
|
|
||||||
* @param {Object} params 需要传递的参数
|
|
||||||
*/
|
|
||||||
broadcast(componentName, eventName, params) {
|
|
||||||
broadcast.call(this, componentName, eventName, params)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,320 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="tn-input-class tn-input" :class="{
|
|
||||||
'tn-input--border': border,
|
|
||||||
'tn-input--error': validateState
|
|
||||||
}" :style="{
|
|
||||||
padding: `0 ${border ? 20 : 0}rpx`,
|
|
||||||
borderColor: borderColor,
|
|
||||||
textAlign: inputAlign
|
|
||||||
}" @tap.stop="inputClick">
|
|
||||||
<textarea v-if="type === 'textarea'" class="tn-input__input tn-input__textarea"
|
|
||||||
style="width: 100%; height: 50px;" :value="defaultValue" :placeholder="placeholder"
|
|
||||||
:placeholderStyle="placeholderStyle" :disabled="disabled || type === 'select'" :maxlength="maxLength"
|
|
||||||
:fixed="fixed" :focus="focus" :autoHeight="autoHeight" :selectionStart="elSelectionStart"
|
|
||||||
:selectionEnd="elSelectionEnd" :cursorSpacing="cursorSpacing" :showConfirmBar="showConfirmBar"
|
|
||||||
@input="handleInput" @blur="handleBlur" @focus="onFocus" @confirm="onConfirm" />
|
|
||||||
<input v-else class="tn-input__input" :type="type === 'password' ? 'text' : type"
|
|
||||||
style="width: 100%; height: 50px;" :value="defaultValue" :password="type === 'password' && !showPassword"
|
|
||||||
:placeholder="placeholder" :placeholderStyle="placeholderStyle" :disabled="disabled || type === 'select'"
|
|
||||||
:maxlength="maxLength" :focus="focus" :confirmType="confirmType" :selectionStart="elSelectionStart"
|
|
||||||
:selectionEnd="elSelectionEnd" :cursorSpacing="cursorSpacing" :showConfirmBar="showConfirmBar"
|
|
||||||
@input="handleInput" @blur="handleBlur" @focus="onFocus" @confirm="onConfirm" />
|
|
||||||
|
|
||||||
<!-- 右边的icon -->
|
|
||||||
<view class="tn-input__right-icon tn-flex tn-flex-col-center">
|
|
||||||
<!-- 清除按钮 -->
|
|
||||||
<view v-if="clearable && value !== '' && focused"
|
|
||||||
class="tn-input__right-icon__item tn-input__right-icon__clear" @tap="onClear">
|
|
||||||
<view class="icon tn-icon-close"></view>
|
|
||||||
</view>
|
|
||||||
<view v-else-if="type === 'text' && !focused && showRightIcon && rightIcon !== ''"
|
|
||||||
class="tn-input__right-icon__item tn-input__right-icon__clear">
|
|
||||||
<view class="icon" :class="[`tn-icon-${rightIcon}`]"></view>
|
|
||||||
</view>
|
|
||||||
<!-- 显示密码按钮 -->
|
|
||||||
<view v-if="passwordIcon && type === 'password'"
|
|
||||||
class="tn-input__right-icon__item tn-input__right-icon__clear" @tap="showPassword = !showPassword">
|
|
||||||
<view v-if="!showPassword" class="tn-icon-eye-hide"></view>
|
|
||||||
<view v-else class="icon tn-icon-eye"></view>
|
|
||||||
</view>
|
|
||||||
<!-- 可选项箭头 -->
|
|
||||||
<view v-if="type === 'select'" class="tn-input__right-icon__item tn-input__right-icon__select" :class="{
|
|
||||||
'tn-input__right-icon__select--reverse': selectOpen
|
|
||||||
}">
|
|
||||||
<view class="icon tn-icon-up-triangle"></view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Emitter from '../u-input/emitter.js'
|
|
||||||
export default {
|
|
||||||
mixins: [Emitter],
|
|
||||||
name: 'tn-input',
|
|
||||||
props: {
|
|
||||||
value: {
|
|
||||||
type: [String, Number],
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
// 输入框的类型
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
default: 'text'
|
|
||||||
},
|
|
||||||
// 输入框文字对齐方式
|
|
||||||
inputAlign: {
|
|
||||||
type: String,
|
|
||||||
default: 'left'
|
|
||||||
},
|
|
||||||
// 文本框为空时显示的信息
|
|
||||||
placeholder: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
placeholderStyle: {
|
|
||||||
type: String,
|
|
||||||
default: 'color: #AAAAAA'
|
|
||||||
},
|
|
||||||
// 是否禁用输入框
|
|
||||||
disabled: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
// 可输入文字的最大长度
|
|
||||||
maxLength: {
|
|
||||||
type: Number,
|
|
||||||
default: 255
|
|
||||||
},
|
|
||||||
// 输入框高度
|
|
||||||
height: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
// 根据内容自动调整高度
|
|
||||||
autoHeight: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
// 键盘右下角显示的文字，仅在text时生效
|
|
||||||
confirmType: {
|
|
||||||
type: String,
|
|
||||||
default: 'done'
|
|
||||||
},
|
|
||||||
// 输入框自定义样式
|
|
||||||
customStyle: {
|
|
||||||
type: Object,
|
|
||||||
default () {
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 是否固定输入框
|
|
||||||
fixed: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
// 是否自动获取焦点
|
|
||||||
focus: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
// 当type为password时，是否显示右侧密码图标
|
|
||||||
passwordIcon: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
// 当type为 input或者textarea时是否显示边框
|
|
||||||
border: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
// 边框的颜色
|
|
||||||
borderColor: {
|
|
||||||
type: String,
|
|
||||||
default: '#dcdfe6'
|
|
||||||
},
|
|
||||||
// 当type为select时，旋转右侧图标，标记当时select是打开还是关闭
|
|
||||||
selectOpen: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
// 是否可清空
|
|
||||||
clearable: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
// 光标与键盘的距离
|
|
||||||
cursorSpacing: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
// selectionStart和selectionEnd需要搭配使用，自动聚焦时生效
|
|
||||||
// 光标起始位置
|
|
||||||
selectionStart: {
|
|
||||||
type: Number,
|
|
||||||
default: -1
|
|
||||||
},
|
|
||||||
// 光标结束位置
|
|
||||||
selectionEnd: {
|
|
||||||
type: Number,
|
|
||||||
default: -1
|
|
||||||
},
|
|
||||||
// 自动去除两端空格
|
|
||||||
trim: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
// 是否显示键盘上方的完成按钮
|
|
||||||
showConfirmBar: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
// 是否在输入框内最右边显示图标
|
|
||||||
showRightIcon: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
// 最右边图标的名称
|
|
||||||
rightIcon: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
// 输入框样式
|
|
||||||
inputStyle() {
|
|
||||||
let style = {}
|
|
||||||
// 如果没有设置高度，根据不同的类型设置一个默认值
|
|
||||||
style.minHeight = this.height ? this.height + 'rpx' :
|
|
||||||
this.type === 'textarea' ? this.textareaHeight + 'rpx' : this.inputHeight + 'rpx'
|
|
||||||
|
|
||||||
style = Object.assign(style, this.customStyle)
|
|
||||||
|
|
||||||
return style
|
|
||||||
},
|
|
||||||
// 光标起始位置
|
|
||||||
elSelectionStart() {
|
|
||||||
return String(this.selectionStart)
|
|
||||||
},
|
|
||||||
// 光标结束位置
|
|
||||||
elSelectionEnd() {
|
|
||||||
return String(this.selectionEnd)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
// 默认值
|
|
||||||
defaultValue: this.value,
|
|
||||||
// 输入框高度
|
|
||||||
inputHeight: 70,
|
|
||||||
// textarea的高度
|
|
||||||
textareaHeight: 100,
|
|
||||||
// 标记验证的状态
|
|
||||||
validateState: false,
|
|
||||||
// 标记是否获取到焦点
|
|
||||||
focused: false,
|
|
||||||
// 是否预览密码
|
|
||||||
showPassword: false,
|
|
||||||
// 用于头条小程序，判断@input中，前后的值是否发生了变化，因为头条中文下，按下键没有输入内容，也会触发@input事件
|
|
||||||
lastValue: '',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
value(newVal, oldVal) {
|
|
||||||
this.defaultValue = newVal
|
|
||||||
// 当值发生变化时，并且type为select时，不会触发input事件
|
|
||||||
// 模拟input事件
|
|
||||||
if (newVal !== oldVal && this.type === 'select') {
|
|
||||||
this.handleInput({
|
|
||||||
detail: {
|
|
||||||
value: newVal
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
// 监听form-item发出的错误事件，将输入框变成红色
|
|
||||||
this.$on("on-form-item-error", this.onFormItemError)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
/**
|
|
||||||
* input事件
|
|
||||||
*/
|
|
||||||
handleInput(event) {
|
|
||||||
let value = event.detail.value
|
|
||||||
// 是否需要去掉空格
|
|
||||||
if (this.trim) value = this.$tn.string.trim(value)
|
|
||||||
// 原生事件
|
|
||||||
this.$emit('input', value)
|
|
||||||
// model赋值
|
|
||||||
this.defaultValue = value
|
|
||||||
// 过一个生命周期再发送事件给tn-form-item，否则this.$emit('input')更新了父组件的值，但是微信小程序上
|
|
||||||
// 尚未更新到tn-form-item，导致获取的值为空，从而校验混论
|
|
||||||
// 这里不能延时时间太短，或者使用this.$nextTick，否则在头条上，会造成混乱
|
|
||||||
setTimeout(() => {
|
|
||||||
// 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理
|
|
||||||
// #ifdef MP-TOUTIAO
|
|
||||||
if (this.$tn.string.trim(value) === this.lastValue) return
|
|
||||||
this.lastValue = value
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
// 发送当前的值到form-item进行校验
|
|
||||||
this.dispatch('tn-form-item', 'on-form-change', value)
|
|
||||||
}, 40)
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* blur事件
|
|
||||||
*/
|
|
||||||
handleBlur(event) {
|
|
||||||
let value = event.detail.value
|
|
||||||
|
|
||||||
// 由于点击清除图标也会触发blur事件，导致图标消失从而无法点击
|
|
||||||
setTimeout(() => {
|
|
||||||
this.focused = false
|
|
||||||
}, 100)
|
|
||||||
|
|
||||||
// 原生事件
|
|
||||||
this.$emit('blur', value)
|
|
||||||
// 过一个生命周期再发送事件给tn-form-item，否则this.$emit('blur')更新了父组件的值，但是微信小程序上
|
|
||||||
// 尚未更新到tn-form-item，导致获取的值为空，从而校验混论
|
|
||||||
// 这里不能延时时间太短，或者使用this.$nextTick，否则在头条上，会造成混乱
|
|
||||||
setTimeout(() => {
|
|
||||||
// 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理
|
|
||||||
// #ifdef MP-TOUTIAO
|
|
||||||
if (this.$tn.string.trim(value) === this.lastValue) return
|
|
||||||
this.lastValue = value
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
// 发送当前的值到form-item进行校验
|
|
||||||
this.dispatch('tn-form-item', 'on-form-blur', value)
|
|
||||||
}, 40)
|
|
||||||
},
|
|
||||||
// 处理校验错误
|
|
||||||
onFormItemError(status) {
|
|
||||||
this.validateState = status
|
|
||||||
},
|
|
||||||
// 聚焦事件
|
|
||||||
onFocus(event) {
|
|
||||||
this.focused = true
|
|
||||||
this.$emit('focus')
|
|
||||||
},
|
|
||||||
// 点击确认按钮事件
|
|
||||||
onConfirm(event) {
|
|
||||||
this.$emit('confirm', event.detail.value)
|
|
||||||
},
|
|
||||||
// 清除事件
|
|
||||||
onClear(event) {
|
|
||||||
this.$emit('input', '')
|
|
||||||
},
|
|
||||||
// 点击事件
|
|
||||||
inputClick() {
|
|
||||||
this.$emit('click')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,208 +0,0 @@
|
||||||
.so-mask {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
z-index: 998
|
|
||||||
}
|
|
||||||
|
|
||||||
.so-plate {
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
left: 0;
|
|
||||||
background: #fff;
|
|
||||||
padding: 25upx 25upx 0 25upx
|
|
||||||
}
|
|
||||||
|
|
||||||
.so-plate-head {
|
|
||||||
display: -webkit-box;
|
|
||||||
display: flex;
|
|
||||||
-webkit-box-pack: justify;
|
|
||||||
justify-content: space-between;
|
|
||||||
-webkit-box-align: center;
|
|
||||||
align-items: center
|
|
||||||
}
|
|
||||||
|
|
||||||
.so-plate-type {
|
|
||||||
-webkit-box-flex: 1;
|
|
||||||
flex: 1;
|
|
||||||
display: block
|
|
||||||
}
|
|
||||||
|
|
||||||
.so-plate-type label {
|
|
||||||
display: inline-block;
|
|
||||||
min-height: 32upx;
|
|
||||||
font-size: 26upx;
|
|
||||||
margin-right: 20upx
|
|
||||||
}
|
|
||||||
|
|
||||||
.so-plate-body {
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 30upx 0;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: flex;
|
|
||||||
-webkit-box-pack: justify;
|
|
||||||
justify-content: space-between;
|
|
||||||
-webkit-box-align: center;
|
|
||||||
align-items: center
|
|
||||||
}
|
|
||||||
|
|
||||||
.so-plate-word {
|
|
||||||
border: 1upx solid #ccc;
|
|
||||||
border-radius: 10upx;
|
|
||||||
height: 0;
|
|
||||||
margin: 0 5upx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding-bottom: calc(4.28571429%);
|
|
||||||
width: calc(4.28571429%);
|
|
||||||
position: relative
|
|
||||||
}
|
|
||||||
|
|
||||||
.so-plate-word.active {
|
|
||||||
border-color: #007aff;
|
|
||||||
box-shadow: 0 0 15upx 0 #007aff
|
|
||||||
}
|
|
||||||
|
|
||||||
.so-plate-word text {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
|
||||||
transform: translateX(-50%) translateY(-50%);
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 32upx
|
|
||||||
}
|
|
||||||
|
|
||||||
.so-plate-dot {
|
|
||||||
width: 15upx;
|
|
||||||
height: 15upx;
|
|
||||||
background: #ccc;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin: 0 5upx
|
|
||||||
}
|
|
||||||
|
|
||||||
.so-plate-keyboard {
|
|
||||||
background: #eee;
|
|
||||||
margin-left: -25upx;
|
|
||||||
margin-right: -25upx;
|
|
||||||
padding: 20upx 25upx 10upx 25upx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-transition: all .3s;
|
|
||||||
transition: all .3s
|
|
||||||
}
|
|
||||||
|
|
||||||
.so-plate-keyboard>view {
|
|
||||||
display: -webkit-box;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
-webkit-box-pack: justify;
|
|
||||||
justify-content: space-between
|
|
||||||
}
|
|
||||||
|
|
||||||
.so-plate-key {
|
|
||||||
display: block;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 10upx;
|
|
||||||
box-shadow: 0 0 8upx 0 #bbb;
|
|
||||||
width: 80upx;
|
|
||||||
height: 80upx;
|
|
||||||
margin: 5upx 0;
|
|
||||||
font-size: 32upx;
|
|
||||||
text-align: center;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: flex;
|
|
||||||
-webkit-box-align: center;
|
|
||||||
align-items: center;
|
|
||||||
-webkit-box-pack: center;
|
|
||||||
justify-content: center;
|
|
||||||
position: relative
|
|
||||||
}
|
|
||||||
|
|
||||||
.so-plate-key.hover {
|
|
||||||
background: #efefef
|
|
||||||
}
|
|
||||||
|
|
||||||
.so-plate-key.fill-block {
|
|
||||||
width: 80upx;
|
|
||||||
height: 80upx;
|
|
||||||
background: none;
|
|
||||||
box-shadow: none
|
|
||||||
}
|
|
||||||
|
|
||||||
.so-plate-btn {
|
|
||||||
display: inline-block;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 10upx;
|
|
||||||
box-shadow: 0 0 10upx 0 #bbb;
|
|
||||||
font-size: 28upx;
|
|
||||||
text-align: center;
|
|
||||||
margin: 0 0 0 10upx
|
|
||||||
}
|
|
||||||
|
|
||||||
.so-plate-btn-group {
|
|
||||||
display: -webkit-box;
|
|
||||||
display: flex;
|
|
||||||
-webkit-box-pack: justify;
|
|
||||||
justify-content: space-between;
|
|
||||||
background: #eee;
|
|
||||||
margin-left: -25upx;
|
|
||||||
margin-right: -25upx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0 25upx 10upx 25upx
|
|
||||||
}
|
|
||||||
|
|
||||||
.so-plate-btn--cancel {
|
|
||||||
margin: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
.so-plate-btn--submit {
|
|
||||||
background: #5773f9;
|
|
||||||
color: #fff
|
|
||||||
}
|
|
||||||
|
|
||||||
.so-plate-btn--delete {
|
|
||||||
color: #fd6b6d
|
|
||||||
}
|
|
||||||
|
|
||||||
.animation-scale-up {
|
|
||||||
-webkit-animation-duration: .2s;
|
|
||||||
animation-duration: .2s;
|
|
||||||
-webkit-animation-timing-function: ease-out;
|
|
||||||
animation-timing-function: ease-out;
|
|
||||||
-webkit-animation-fill-mode: both;
|
|
||||||
animation-fill-mode: both;
|
|
||||||
-webkit-animation-name: scale-up;
|
|
||||||
animation-name: scale-up
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes scale-up {
|
|
||||||
0% {
|
|
||||||
opacity: .8;
|
|
||||||
-webkit-transform: scale(.8);
|
|
||||||
transform: scale(.8)
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transform: scale(1);
|
|
||||||
transform: scale(1)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes scale-up {
|
|
||||||
0% {
|
|
||||||
opacity: .8;
|
|
||||||
-webkit-transform: scale(.8);
|
|
||||||
transform: scale(.8)
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transform: scale(1);
|
|
||||||
transform: scale(1)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,154 +0,0 @@
|
||||||
.so-mask {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
z-index: 998;
|
|
||||||
}
|
|
||||||
.so-plate {
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
left: 0;
|
|
||||||
background: #fff;
|
|
||||||
padding: 25upx 25upx 0 25upx;
|
|
||||||
&-head {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
&-type {
|
|
||||||
flex:1;
|
|
||||||
display:block;
|
|
||||||
label {
|
|
||||||
display: inline-block;
|
|
||||||
min-height: 32upx;
|
|
||||||
font-size: 26upx;
|
|
||||||
margin-right: 10upx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&-body {
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 30upx 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
&-word {
|
|
||||||
border: 1upx solid #ccc;
|
|
||||||
border-radius: 10upx;
|
|
||||||
height: 0;
|
|
||||||
margin: 0 5upx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding-bottom: calc((100% - 70upx) / 7);
|
|
||||||
width: calc((100% - 70upx) / 7);
|
|
||||||
position: relative;
|
|
||||||
&.active {
|
|
||||||
border-color: #007aff;
|
|
||||||
box-shadow: 0 0 15upx 0 #007aff;
|
|
||||||
}
|
|
||||||
text {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%) translateY(-50%);
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 32upx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&-dot {
|
|
||||||
width: 15upx;
|
|
||||||
height: 15upx;
|
|
||||||
background: #ccc;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin: 0 5upx;
|
|
||||||
}
|
|
||||||
&-keyboard {
|
|
||||||
background: #eee;
|
|
||||||
margin-left: -25upx;
|
|
||||||
margin-right: -25upx;
|
|
||||||
padding: 20upx 25upx 10upx 25upx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
transition: all .3s;
|
|
||||||
&>view{
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&-key {
|
|
||||||
display: block;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 10upx;
|
|
||||||
box-shadow: 0 0 8upx 0 #bbb;
|
|
||||||
width: 80upx;
|
|
||||||
height: 80upx;
|
|
||||||
margin: 5upx 0;
|
|
||||||
font-size: 32upx;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
position: relative;
|
|
||||||
&.hover {
|
|
||||||
background: #efefef;
|
|
||||||
}
|
|
||||||
&.fill-block {
|
|
||||||
width: 80upx;
|
|
||||||
height: 80upx;
|
|
||||||
background: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&-btn {
|
|
||||||
display: inline-block;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 10upx;
|
|
||||||
box-shadow: 0 0 10upx 0 #bbb;
|
|
||||||
font-size: 28upx;
|
|
||||||
text-align: center;
|
|
||||||
margin:0 0 0 10upx;
|
|
||||||
padding:0 25upx;
|
|
||||||
&-group{
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
background: #eee;
|
|
||||||
margin-left: -25upx;
|
|
||||||
margin-right: -25upx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0 25upx 10upx 25upx;
|
|
||||||
}
|
|
||||||
&--cancel{
|
|
||||||
margin:0;
|
|
||||||
}
|
|
||||||
&--submit{
|
|
||||||
background:#5773f9;
|
|
||||||
color:#fff;
|
|
||||||
}
|
|
||||||
&--delete{
|
|
||||||
color:#fd6b6d;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.animation-scale-up {
|
|
||||||
animation-duration: .2s;
|
|
||||||
animation-timing-function: ease-out;
|
|
||||||
animation-fill-mode: both;
|
|
||||||
animation-name: scale-up
|
|
||||||
}
|
|
||||||
@keyframes scale-up {
|
|
||||||
0% {
|
|
||||||
opacity: .8;
|
|
||||||
transform: scale(.8)
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,265 +0,0 @@
|
||||||
/**
|
|
||||||
* @author minisola
|
|
||||||
* @version 20190814
|
|
||||||
*/
|
|
||||||
<template>
|
|
||||||
<view class="so-mask">
|
|
||||||
<view class="so-plate animation-scale-up">
|
|
||||||
<view class="so-plate-head">
|
|
||||||
<view class="so-plate-type">
|
|
||||||
<radio-group @change="typeChange">
|
|
||||||
<label>
|
|
||||||
<radio value="1" :checked="type===1" />
|
|
||||||
普通车牌
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<radio value="2" :checked="type===2" />
|
|
||||||
新能源车牌
|
|
||||||
</label>
|
|
||||||
</radio-group>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="so-plate-body">
|
|
||||||
<view class="so-plate-word" :class="{ active: currentInputIndex == 0 }" @tap="inputSwitch" data-index="0">
|
|
||||||
<text>{{ currentInputValue[0] }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="so-plate-word" :class="{ active: currentInputIndex == 1 }" @tap="inputSwitch" data-index="1">
|
|
||||||
<text>{{ currentInputValue[1] }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="so-plate-dot"></view>
|
|
||||||
<view class="so-plate-word" :class="{ active: currentInputIndex == 2 }" @tap="inputSwitch" data-index="2">
|
|
||||||
<text>{{ currentInputValue[2] }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="so-plate-word" :class="{ active: currentInputIndex == 3 }" @tap="inputSwitch" data-index="3">
|
|
||||||
<text>{{ currentInputValue[3] }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="so-plate-word" :class="{ active: currentInputIndex == 4 }" @tap="inputSwitch" data-index="4">
|
|
||||||
<text>{{ currentInputValue[4] }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="so-plate-word" :class="{ active: currentInputIndex == 5 }" @tap="inputSwitch" data-index="5">
|
|
||||||
<text>{{ currentInputValue[5] }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="so-plate-word" :class="{ active: currentInputIndex == 6 }" @tap="inputSwitch" data-index="6">
|
|
||||||
<text>{{ currentInputValue[6] }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="so-plate-word" :class="{ active: currentInputIndex == 7 }" @tap="inputSwitch" v-if="type == 2" data-index="7">
|
|
||||||
<text>{{ currentInputValue[7] }}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="so-plate-foot">
|
|
||||||
<view class="so-plate-keyboard" :style="{height:keyboardHeight}">
|
|
||||||
<view id="keyboard">
|
|
||||||
<block v-if="inputType == 1">
|
|
||||||
<view hover-class="hover" class="so-plate-key" v-for="el of provinceText" :key="el" :data-value="el" @tap="chooseKey">{{ el }}</view>
|
|
||||||
</block>
|
|
||||||
<block v-if="inputType == 1">
|
|
||||||
<text class="so-plate-key fill-block"></text>
|
|
||||||
</block>
|
|
||||||
<block v-if="inputType >= 3">
|
|
||||||
<view hover-class="hover" class="so-plate-key" v-for="el of numberText" :key="el" :data-value="el" @tap="chooseKey">{{ el }}</view>
|
|
||||||
</block>
|
|
||||||
<block v-if="inputType >= 2">
|
|
||||||
<view hover-class="hover" class="so-plate-key" v-for="el of wordText" :key="el" :data-value="el" @tap="chooseKey">{{ el }}</view>
|
|
||||||
</block>
|
|
||||||
<block v-if="inputType == 3">
|
|
||||||
<text v-for="el of fillBlock" :key="el.num" class="so-plate-key fill-block"></text>
|
|
||||||
</block>
|
|
||||||
<block v-if="inputType == 4">
|
|
||||||
<view hover-class="hover" class="so-plate-key" v-for="el of lastWordText" :key="el" :data-value="el" @tap="chooseKey">{{ el }}</view>
|
|
||||||
</block>
|
|
||||||
<text v-if="inputType == 4" class="so-plate-key fill-block"></text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="so-plate-btn-group">
|
|
||||||
<view>
|
|
||||||
<button class="so-plate-btn so-plate-btn--cancel" @tap="$emit('close')">取消</button>
|
|
||||||
</view>
|
|
||||||
<view>
|
|
||||||
<button class="so-plate-btn so-plate-btn--delete" @tap="deleteKey">删除</button>
|
|
||||||
<button class="so-plate-btn so-plate-btn--submit" @tap="exportPlate">完成</button>
|
|
||||||
|
|
||||||
</view>
|
|
||||||
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'uni-plate-input',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
type: 1, //车牌类型
|
|
||||||
currentInputIndex: 0, //当前编辑的输入框
|
|
||||||
currentInputValue: ['', '', '', '', '', '', ''],
|
|
||||||
fillBlock:[{num:11},{num:12},{num:13},{num:14},{num:15},{num:16}], //避免:key报错
|
|
||||||
keyboardHeightInit:false,
|
|
||||||
keyboardHeight:'auto',
|
|
||||||
provinceText: [
|
|
||||||
'粤',
|
|
||||||
'京',
|
|
||||||
'冀',
|
|
||||||
'沪',
|
|
||||||
'津',
|
|
||||||
'晋',
|
|
||||||
'蒙',
|
|
||||||
'辽',
|
|
||||||
'吉',
|
|
||||||
'黑',
|
|
||||||
'苏',
|
|
||||||
'浙',
|
|
||||||
'皖',
|
|
||||||
'闽',
|
|
||||||
'赣',
|
|
||||||
'鲁',
|
|
||||||
'豫',
|
|
||||||
'鄂',
|
|
||||||
'湘',
|
|
||||||
'桂',
|
|
||||||
'琼',
|
|
||||||
'渝',
|
|
||||||
'川',
|
|
||||||
'贵',
|
|
||||||
'云',
|
|
||||||
'藏',
|
|
||||||
'陕',
|
|
||||||
'甘',
|
|
||||||
'青',
|
|
||||||
'宁',
|
|
||||||
'新'
|
|
||||||
],
|
|
||||||
numberText: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
|
|
||||||
wordText: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
|
|
||||||
lastWordText: ['挂', '港', '学', '领', '警']
|
|
||||||
};
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
plate: {
|
|
||||||
type: String
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
//输入框类型
|
|
||||||
inputType() {
|
|
||||||
switch (this.currentInputIndex) {
|
|
||||||
case 0:
|
|
||||||
return 1;
|
|
||||||
break;
|
|
||||||
case 1:
|
|
||||||
return 2;
|
|
||||||
break;
|
|
||||||
case 2:
|
|
||||||
return 3;
|
|
||||||
break;
|
|
||||||
case 3:
|
|
||||||
return 3;
|
|
||||||
break;
|
|
||||||
case 4:
|
|
||||||
return 3;
|
|
||||||
break;
|
|
||||||
case 5:
|
|
||||||
return 3;
|
|
||||||
break;
|
|
||||||
case 6:
|
|
||||||
return this.type==2 ? 3 :4 ;
|
|
||||||
break;
|
|
||||||
case 7:
|
|
||||||
return 4;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
return 1;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch:{
|
|
||||||
currentInputIndex:function(n,o){
|
|
||||||
if(!this.keyboardHeightInit) return
|
|
||||||
this.$nextTick(()=>{
|
|
||||||
this.changeKeyboardHeight()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
//车牌类型切换
|
|
||||||
typeChange(e) {
|
|
||||||
this.$emit("typeChange",e.detail.value);
|
|
||||||
const {value} = e.detail;
|
|
||||||
this.type = parseInt(value)
|
|
||||||
this.currentInputIndex = 0
|
|
||||||
if(value==1){
|
|
||||||
this.currentInputValue = ['','','','','','','']
|
|
||||||
}else{
|
|
||||||
this.currentInputValue = ['','','','','','','','']
|
|
||||||
}
|
|
||||||
},
|
|
||||||
inputSwitch(e) {
|
|
||||||
const { index } = e.currentTarget.dataset;
|
|
||||||
this.currentInputIndex = parseInt(index);
|
|
||||||
},
|
|
||||||
chooseKey(e) {
|
|
||||||
const { value } = e.currentTarget.dataset;
|
|
||||||
this.$set(this.currentInputValue, this.currentInputIndex, value);
|
|
||||||
if(this.type==1 && this.currentInputIndex<6){
|
|
||||||
this.currentInputIndex++
|
|
||||||
}
|
|
||||||
if(this.type==2 && this.currentInputIndex<7){
|
|
||||||
this.currentInputIndex++
|
|
||||||
}
|
|
||||||
},
|
|
||||||
deleteKey(){
|
|
||||||
this.$set(this.currentInputValue,this.currentInputIndex,'')
|
|
||||||
if(this.currentInputIndex!=0) this.currentInputIndex--
|
|
||||||
},
|
|
||||||
exportPlate(){
|
|
||||||
const plate = this.currentInputValue.join('')
|
|
||||||
let err = false
|
|
||||||
if(this.type===1&&plate.length!=7){
|
|
||||||
err = true
|
|
||||||
}else if(this.type===2&&plate.length!=8){
|
|
||||||
err = true
|
|
||||||
}
|
|
||||||
if(err) return uni.showToast({
|
|
||||||
title:'请输入完整的车牌号码',
|
|
||||||
icon:'none'
|
|
||||||
})
|
|
||||||
|
|
||||||
this.$emit('export',plate)
|
|
||||||
},
|
|
||||||
changeKeyboardHeight(){
|
|
||||||
const that = this
|
|
||||||
const query = uni.createSelectorQuery().in(this);
|
|
||||||
query.select('#keyboard').boundingClientRect();
|
|
||||||
query.exec(function(res) {
|
|
||||||
if(res&&res[0]){
|
|
||||||
that.keyboardHeight = res[0].height + uni.upx2px(30) + 'px'
|
|
||||||
that.keyboardHeightInit = true
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
// console.log(this.plate);
|
|
||||||
const plateKey = this.plate.split('')
|
|
||||||
if(plateKey.length===7){
|
|
||||||
this.type=1
|
|
||||||
}else if(plateKey.length===8){
|
|
||||||
this.type=2
|
|
||||||
}
|
|
||||||
if(plateKey.length===7 || plateKey.length===8){
|
|
||||||
this.currentInputValue = plateKey
|
|
||||||
this.currentInputIndex = plateKey.length-1
|
|
||||||
}
|
|
||||||
|
|
||||||
setTimeout(() => { //在动画结束之后才开始获取
|
|
||||||
this.$nextTick(()=>{
|
|
||||||
this.changeKeyboardHeight()
|
|
||||||
})
|
|
||||||
}, 500);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style scoped lang="less">
|
|
||||||
@import './uni-plate-input';
|
|
||||||
</style>
|
|
||||||
19
pages.json
19
pages.json
|
|
@ -1,16 +1,19 @@
|
||||||
{
|
{
|
||||||
// "easycom": {
|
// "easycom": {
|
||||||
// "autoscan": true,
|
// "autoscan": true,
|
||||||
// "custom": {
|
// "custom": {
|
||||||
// "^(.*)": "@/components/$1/$1.vue"
|
// "^(.*)": "@/components/$1/$1.vue"
|
||||||
|
|
||||||
// }
|
// }
|
||||||
// },
|
// },
|
||||||
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
||||||
{
|
{
|
||||||
"path": "pages/login/index",
|
"path": "pages/login/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "登录"
|
"navigationBarTitleText": "登录",
|
||||||
|
"app-plus": {
|
||||||
|
"softinputMode": "adjustPan"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -27,9 +27,9 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="status">
|
<view class="status">
|
||||||
<text v-if="item.vvyStatus==0" class="nStarted">● {{item.vvyStatusName}}</text>
|
<p v-if="item.vvyStatus==0" class="dfs">{{item.vvyStatusName}}</p>
|
||||||
<text v-if="item.vvyStatus==1" class="green">● {{item.vvyStatusName}}</text>
|
<p v-if="item.vvyStatus==1" class="zyz">{{item.vvyStatusName}}</p>
|
||||||
<text v-if="item.vvyStatus==2" class="complete">● {{item.vvyStatusName}}</text>
|
<p v-if="item.vvyStatus==2" class="ywc">{{item.vvyStatusName}}</p>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="row">
|
<view class="row">
|
||||||
|
|
@ -50,6 +50,9 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<template v-if="isMore">
|
||||||
|
<uni-load-more iconType="circle" status="loading" style="width: 100%;" />
|
||||||
|
</template>
|
||||||
</template>
|
</template>
|
||||||
<o-empty v-else height="70vh" bg="#f5f6fa" />
|
<o-empty v-else height="70vh" bg="#f5f6fa" />
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -58,7 +61,6 @@
|
||||||
@change="changePage" />
|
@change="changePage" />
|
||||||
</view> -->
|
</view> -->
|
||||||
</view>
|
</view>
|
||||||
<LotusLoading :lotusLoadingData="lotusLoadingData"></LotusLoading>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -66,7 +68,6 @@
|
||||||
<script>
|
<script>
|
||||||
import HeadInfo from '@/components/head-info/head-info';
|
import HeadInfo from '@/components/head-info/head-info';
|
||||||
import api from "../../common/api.js"
|
import api from "../../common/api.js"
|
||||||
import LotusLoading from "../../components/Winglau14-lotusLoading/Winglau14-LotusLoading.vue";
|
|
||||||
let timers = null;
|
let timers = null;
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -100,9 +101,8 @@
|
||||||
// 港区信息
|
// 港区信息
|
||||||
portObj: {},
|
portObj: {},
|
||||||
|
|
||||||
lotusLoadingData: {
|
isMore: false,
|
||||||
isShow: false //设置显示加载中组件true显示false隐藏
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
|
|
@ -113,7 +113,7 @@
|
||||||
onReachBottom() {
|
onReachBottom() {
|
||||||
this.current++
|
this.current++
|
||||||
this.initData()
|
this.initData()
|
||||||
this.lotusLoadingData.isShow = true
|
this.isMore = true
|
||||||
},
|
},
|
||||||
onBackPress(options) {
|
onBackPress(options) {
|
||||||
// 触发返回就会调用此方法，这里实现的是禁用物理返回，顶部导航栏的自定义返回 uni.navigateBack 仍可使用
|
// 触发返回就会调用此方法，这里实现的是禁用物理返回，顶部导航栏的自定义返回 uni.navigateBack 仍可使用
|
||||||
|
|
@ -125,7 +125,6 @@
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
HeadInfo,
|
HeadInfo,
|
||||||
LotusLoading
|
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.initData()
|
this.initData()
|
||||||
|
|
@ -208,7 +207,7 @@
|
||||||
},
|
},
|
||||||
method: 'GET', //请求方式，必须为大写
|
method: 'GET', //请求方式，必须为大写
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
this.lotusLoadingData.isShow = false
|
this.isMore = false
|
||||||
this.total = res.data.data.total
|
this.total = res.data.data.total
|
||||||
this.itemList.push(...res.data.data.records)
|
this.itemList.push(...res.data.data.records)
|
||||||
}
|
}
|
||||||
|
|
@ -245,11 +244,11 @@
|
||||||
height: 50px;
|
height: 50px;
|
||||||
background: #f5f6fa;
|
background: #f5f6fa;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 66px;
|
top: 66px;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 995;
|
z-index: 995;
|
||||||
|
padding-left: 20px;
|
||||||
|
|
||||||
.end {
|
.end {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -260,8 +259,7 @@
|
||||||
height: 35px;
|
height: 35px;
|
||||||
line-height: 35px;
|
line-height: 35px;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
margin-right: 15px;
|
margin: 10px 15px 0 0;
|
||||||
margin-top: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
|
|
@ -285,6 +283,7 @@
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
|
padding-bottom: 50px;
|
||||||
|
|
||||||
/deep/.o-empty {
|
/deep/.o-empty {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -294,14 +293,14 @@
|
||||||
width: calc(33.3% - 16px);
|
width: calc(33.3% - 16px);
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 10px 20px;
|
padding: 16px;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 10px 0;
|
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
.titleft {
|
.titleft {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -324,37 +323,46 @@
|
||||||
.row {
|
.row {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
font-size: 14px;
|
|
||||||
padding: 10px 0;
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
|
||||||
.nitem {
|
.nitem {
|
||||||
// width: 49%;
|
width: 49%;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
color: #999;
|
||||||
|
|
||||||
.text {
|
text {
|
||||||
color: #929292;
|
color: #23262e;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nitem:nth-of-type(2n) {
|
|
||||||
width: 35%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitem:nth-of-type(2n - 1) {
|
|
||||||
width: 63%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.status {
|
.status {
|
||||||
margin-top: 5px;
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 23px;
|
||||||
|
|
||||||
.nStarted {
|
p {
|
||||||
color: #bbb;
|
padding: 5px;
|
||||||
|
border-radius: 13px 0 0 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.complete {
|
.dfs {
|
||||||
color: #0067CF;
|
color: #0067CF;
|
||||||
|
background: #F1F8FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zyz {
|
||||||
|
color: #04B578;
|
||||||
|
background: #E8FFF7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ywc {
|
||||||
|
color: #666666;
|
||||||
|
background: #F7F7F7;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1579,16 +1579,21 @@
|
||||||
|
|
||||||
/deep/.uni-easyinput {
|
/deep/.uni-easyinput {
|
||||||
width: 400px;
|
width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
/deep/.content-clear-icon {
|
/deep/.content-clear-icon {
|
||||||
padding-right: 16px;
|
display: none;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/.is-input-border {
|
/deep/.is-input-border {
|
||||||
border-radius: 18.5px;
|
border-radius: 18.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/deep/.uni-easyinput__placeholder-class {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
.rightInput {
|
.rightInput {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
|
|
@ -1666,6 +1671,7 @@
|
||||||
|
|
||||||
.tjList {
|
.tjList {
|
||||||
width: 240px;
|
width: 240px;
|
||||||
|
height: calc(100vh - 68px - 66px - 51px);
|
||||||
background: #EBEDF1;
|
background: #EBEDF1;
|
||||||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.10);
|
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.10);
|
||||||
float: left;
|
float: left;
|
||||||
|
|
@ -1679,6 +1685,7 @@
|
||||||
.title {
|
.title {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
line-height: 21px;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
color: #23262E;
|
color: #23262E;
|
||||||
|
|
@ -1720,12 +1727,12 @@
|
||||||
|
|
||||||
.bottomInfo {
|
.bottomInfo {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
margin-top: 9px;
|
margin-top: 9px;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #999999;
|
color: #999999;
|
||||||
margin-left: 10px;
|
|
||||||
|
|
||||||
text {
|
text {
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
|
|
@ -1750,12 +1757,12 @@
|
||||||
height: 87px;
|
height: 87px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 16px 15px;
|
padding: 16px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.imgBox {
|
.imgBox {
|
||||||
width: 20px;
|
width: 15px;
|
||||||
height: 20px;
|
height: 15px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
@ -1772,8 +1779,8 @@
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
||||||
.imgBox {
|
.imgBox {
|
||||||
width: 20px;
|
width: 15px;
|
||||||
height: 20px;
|
height: 15px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
@ -1802,7 +1809,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 12px 6px 1px;
|
padding: 16px;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
@ -2221,8 +2228,8 @@
|
||||||
|
|
||||||
.cwTop {
|
.cwTop {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 36px;
|
height: 50px;
|
||||||
line-height: 36px;
|
line-height: 50px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 0 36px;
|
padding: 0 36px;
|
||||||
|
|
@ -2234,7 +2241,7 @@
|
||||||
height: 10px;
|
height: 10px;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-top: 12px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.statusText {
|
.statusText {
|
||||||
|
|
@ -2444,14 +2451,14 @@
|
||||||
|
|
||||||
.drawerTop {
|
.drawerTop {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-top: 55px;
|
margin-top: 24px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
|
|
||||||
image {
|
image {
|
||||||
width: 14px;
|
width: 10px;
|
||||||
height: 24px;
|
height: 14px;
|
||||||
margin-right: 16px;
|
margin-right: 10px;
|
||||||
margin-top: 3px;
|
margin-top: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
text {
|
text {
|
||||||
|
|
|
||||||
|
|
@ -60,24 +60,24 @@
|
||||||
<text>货物明细</text>
|
<text>货物明细</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="formNr">
|
<view class="formNr">
|
||||||
<uni-table border stripe emptyText="暂无更多数据">
|
<uni-table stripe emptyText="暂无更多数据">
|
||||||
<!-- 表头行 -->
|
<!-- 表头行 -->
|
||||||
<uni-tr class="gray">
|
<uni-tr>
|
||||||
<uni-th align="center" width="10">序号</uni-th>
|
<uni-th width="10">序号</uni-th>
|
||||||
<uni-th align="center" width="22">车架号/条形码</uni-th>
|
<uni-th width="22">车架号/条形码</uni-th>
|
||||||
<uni-th align="center" width="15">作业状态</uni-th>
|
<uni-th width="15">作业状态</uni-th>
|
||||||
<uni-th align="center" width="40">场位</uni-th>
|
<uni-th width="40">场位</uni-th>
|
||||||
<uni-th align="center" width="15">货物性质</uni-th>
|
<uni-th width="15">货物性质</uni-th>
|
||||||
<uni-th align="center" width="10">操作</uni-th>
|
<uni-th width="10">操作</uni-th>
|
||||||
</uni-tr>
|
</uni-tr>
|
||||||
<!-- 表格数据行 -->
|
<!-- 表格数据行 -->
|
||||||
<uni-tr v-for="(item,index) in tableList" :key="index">
|
<uni-tr v-for="(item,index) in tableList" :key="index">
|
||||||
<uni-td align="center">{{index + 1}}</uni-td>
|
<uni-td>{{index + 1}}</uni-td>
|
||||||
<uni-td align="center">{{item.vinCode}}</uni-td>
|
<uni-td>{{item.vinCode}}</uni-td>
|
||||||
<uni-td align="center">{{item.workStatus}}</uni-td>
|
<uni-td>{{item.workStatus}}</uni-td>
|
||||||
<uni-td align="center">{{item.yardPos}}</uni-td>
|
<uni-td>{{item.yardPos}}</uni-td>
|
||||||
<uni-td align="center">{{item.natureFlagName}}</uni-td>
|
<uni-td>{{item.natureFlagName}}</uni-td>
|
||||||
<uni-td align="center">
|
<uni-td>
|
||||||
<text class="operate" @click="open(item)">残损</text>
|
<text class="operate" @click="open(item)">残损</text>
|
||||||
</uni-td>
|
</uni-td>
|
||||||
</uni-tr>
|
</uni-tr>
|
||||||
|
|
@ -335,14 +335,24 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.formNr {
|
.formNr {
|
||||||
.gray {
|
/deep/.uni-table-th {
|
||||||
background-color: #f9f9f9;
|
background-color: #f4f4f4;
|
||||||
|
color: #0B266A;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
.uni-table-th-content {
|
||||||
|
padding-left: 7.5px;
|
||||||
|
border-left: 1px solid #0B266A;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/.uni-table-td {
|
||||||
|
padding-left: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.operate {
|
.operate {
|
||||||
color: #2979ff;
|
color: #2979ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -27,9 +27,9 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="status">
|
<view class="status">
|
||||||
<text v-if="item.vvyStatus==0" class="nStarted">● {{item.vvyStatusName}}</text>
|
<p v-if="item.vvyStatus==0" class="dfs">{{item.vvyStatusName}}</p>
|
||||||
<text v-if="item.vvyStatus==1" class="green">● {{item.vvyStatusName}}</text>
|
<p v-if="item.vvyStatus==1" class="zyz">{{item.vvyStatusName}}</p>
|
||||||
<text v-if="item.vvyStatus==2" class="complete">● {{item.vvyStatusName}}</text>
|
<p v-if="item.vvyStatus==2" class="ywc">{{item.vvyStatusName}}</p>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="row">
|
<view class="row">
|
||||||
|
|
@ -50,6 +50,9 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<template v-if="isMore">
|
||||||
|
<uni-load-more iconType="circle" status="loading" style="width: 100%;" />
|
||||||
|
</template>
|
||||||
</template>
|
</template>
|
||||||
<o-empty v-else height="70vh" bg="#f5f6fa" />
|
<o-empty v-else height="70vh" bg="#f5f6fa" />
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -58,7 +61,6 @@
|
||||||
@change="changePage" />
|
@change="changePage" />
|
||||||
</view> -->
|
</view> -->
|
||||||
</view>
|
</view>
|
||||||
<LotusLoading :lotusLoadingData="lotusLoadingData"></LotusLoading>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -66,8 +68,6 @@
|
||||||
<script>
|
<script>
|
||||||
import HeadInfo from '@/components/head-info/head-info';
|
import HeadInfo from '@/components/head-info/head-info';
|
||||||
import api from "../../common/api.js"
|
import api from "../../common/api.js"
|
||||||
import LotusLoading from "../../components/Winglau14-lotusLoading/Winglau14-LotusLoading.vue";
|
|
||||||
let timers = null;
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -100,19 +100,16 @@
|
||||||
// 港区信息
|
// 港区信息
|
||||||
portObj: {},
|
portObj: {},
|
||||||
|
|
||||||
lotusLoadingData: {
|
isMore: false,
|
||||||
isShow: false //设置显示加载中组件true显示false隐藏
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
HeadInfo,
|
HeadInfo,
|
||||||
LotusLoading
|
|
||||||
},
|
},
|
||||||
onReachBottom() {
|
onReachBottom() {
|
||||||
this.current++
|
this.current++
|
||||||
this.initData()
|
this.initData()
|
||||||
this.lotusLoadingData.isShow = true
|
this.isMore = true
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
this.portObj = uni.getStorageSync('portObj')
|
this.portObj = uni.getStorageSync('portObj')
|
||||||
|
|
@ -211,7 +208,7 @@
|
||||||
},
|
},
|
||||||
method: 'GET', //请求方式，必须为大写
|
method: 'GET', //请求方式，必须为大写
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
this.lotusLoadingData.isShow = false
|
this.isMore = false
|
||||||
this.total = res.data.data.total
|
this.total = res.data.data.total
|
||||||
this.itemList.push(...res.data.data.records)
|
this.itemList.push(...res.data.data.records)
|
||||||
}
|
}
|
||||||
|
|
@ -253,11 +250,11 @@
|
||||||
height: 50px;
|
height: 50px;
|
||||||
background: #f5f6fa;
|
background: #f5f6fa;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 66px;
|
top: 66px;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 995;
|
z-index: 995;
|
||||||
|
padding-left: 20px;
|
||||||
|
|
||||||
.end {
|
.end {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -268,8 +265,7 @@
|
||||||
height: 35px;
|
height: 35px;
|
||||||
line-height: 35px;
|
line-height: 35px;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
margin-right: 15px;
|
margin: 10px 15px 0 0;
|
||||||
margin-top: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
|
|
@ -293,6 +289,7 @@
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
|
padding-bottom: 50px;
|
||||||
|
|
||||||
/deep/.o-empty {
|
/deep/.o-empty {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -302,15 +299,15 @@
|
||||||
width: calc(33.3% - 16px);
|
width: calc(33.3% - 16px);
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 10px 20px;
|
padding: 16px;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
margin-right: 16px;
|
margin-right: 16px;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 10px 0;
|
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
.titleft {
|
.titleft {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -333,37 +330,46 @@
|
||||||
.row {
|
.row {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
font-size: 14px;
|
|
||||||
padding: 10px 0;
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
|
||||||
.nitem {
|
.nitem {
|
||||||
// width: 49%;
|
width: 49%;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
color: #999;
|
||||||
|
|
||||||
.text {
|
text {
|
||||||
color: #929292;
|
color: #23262e;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nitem:nth-of-type(2n) {
|
|
||||||
width: 35%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nitem:nth-of-type(2n - 1) {
|
|
||||||
width: 63%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.status {
|
.status {
|
||||||
margin-top: 5px;
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 23px;
|
||||||
|
|
||||||
.nStarted {
|
p {
|
||||||
color: #bbb;
|
padding: 5px;
|
||||||
|
border-radius: 13px 0 0 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.complete {
|
.dfs {
|
||||||
color: #0067CF;
|
color: #0067CF;
|
||||||
|
background: #F1F8FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zyz {
|
||||||
|
color: #04B578;
|
||||||
|
background: #E8FFF7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ywc {
|
||||||
|
color: #666666;
|
||||||
|
background: #F7F7F7;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
<!-- <button class="button" type="default" @click="ask">装船要求</button> -->
|
<!-- <button class="button" type="default" @click="ask">装船要求</button> -->
|
||||||
<button class="button" type="default" @click="distribute('center','solo')">指令下发</button>
|
<button class="button" type="default" @click="distribute('center','solo')">指令下发</button>
|
||||||
</template>
|
</template>
|
||||||
<template v-if="tabsValue == 2">
|
<template v-if="tabsValue == 2 || tabsValue == 3 || tabsValue == 4">
|
||||||
<button class="button" type="default" @click="ask">装船要求</button>
|
<button class="button" type="default" @click="ask">装船要求</button>
|
||||||
</template>
|
</template>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -518,15 +518,9 @@
|
||||||
<view></view>
|
<view></view>
|
||||||
<view class="main main2">
|
<view class="main main2">
|
||||||
<view class="pzPot">
|
<view class="pzPot">
|
||||||
<view class="title">
|
<view class="li" v-for="(item,index) in pzPotList" :key="index">
|
||||||
PORT OF DESTINATION
|
<view class="color" :style="item.background"></view>
|
||||||
</view>
|
<view class="name">{{item.potCnname}}</view>
|
||||||
<view class="ul">
|
|
||||||
<view class="li" v-for="(item,index) in pzPotList" :key="index">
|
|
||||||
<view class="xuhao">{{index + 1}}</view>
|
|
||||||
<view class="name">{{item.potCnname}}</view>
|
|
||||||
<view class="color" :style="item.background"></view>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<template v-for="(item,index) in imgInfo.cabinInfoList">
|
<template v-for="(item,index) in imgInfo.cabinInfoList">
|
||||||
|
|
@ -574,44 +568,48 @@
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="tableHead" @click="clickShow(item)">
|
<view class="tableHead" @click="clickShow(item)">
|
||||||
<text>货物明细</text>
|
<text>{{item.shipDecks}}层明细({{goodsInfo[index].stowageList.length}})</text>
|
||||||
<uni-icons class="jt" type="bottom" size="24" v-if="item.isShow"></uni-icons>
|
<p v-if="item.isShow">折叠</p>
|
||||||
<uni-icons class="jt" type="top" size="24" v-if="!item.isShow"></uni-icons>
|
<p v-if="!item.isShow">展开</p>
|
||||||
</view>
|
</view>
|
||||||
<uni-table border stripe emptyText="暂无更多数据" v-if="item.isShow">
|
<view class="tableBox">
|
||||||
<!-- 表头行 -->
|
<uni-table stripe emptyText="暂无更多数据" v-if="item.isShow">
|
||||||
<uni-tr class="gray">
|
<!-- 表头行 -->
|
||||||
<uni-th align="center" width="20">积载编号</uni-th>
|
<uni-tr>
|
||||||
<uni-th align="center" width="20">提单号</uni-th>
|
<uni-th width="20">积载编号</uni-th>
|
||||||
<uni-th align="center" width="20">港口</uni-th>
|
<uni-th width="20">提单号</uni-th>
|
||||||
<uni-th align="center" width="20">品牌</uni-th>
|
<uni-th width="20">港口</uni-th>
|
||||||
<uni-th align="center" width="20">车型</uni-th>
|
<uni-th width="20">品牌</uni-th>
|
||||||
<uni-th align="center" width="20">型号</uni-th>
|
<uni-th width="20">车型</uni-th>
|
||||||
<uni-th align="center" width="20">车型明细</uni-th>
|
<uni-th width="20">型号</uni-th>
|
||||||
<uni-th align="center" width="20">数量</uni-th>
|
<uni-th width="20">车型明细</uni-th>
|
||||||
<uni-th align="center" width="20">长</uni-th>
|
<uni-th width="20">数量</uni-th>
|
||||||
<uni-th align="center" width="20">宽</uni-th>
|
<uni-th width="20">长</uni-th>
|
||||||
<uni-th align="center" width="20">高</uni-th>
|
<uni-th width="20">宽</uni-th>
|
||||||
<uni-th align="center" width="20">位置</uni-th>
|
<uni-th width="20">高</uni-th>
|
||||||
</uni-tr>
|
<uni-th width="20">位置</uni-th>
|
||||||
<!-- 表格数据行 -->
|
|
||||||
<template v-if="goodsInfo.length && goodsInfo.length > 0">
|
|
||||||
<uni-tr v-for="(item2,index2) in goodsInfo[index].stowageList" :key="index2">
|
|
||||||
<uni-td align="center">{{item2.stowageNo}}</uni-td>
|
|
||||||
<uni-td align="center">{{item2.mnfBl}}</uni-td>
|
|
||||||
<uni-td align="center">{{item2.potName}}</uni-td>
|
|
||||||
<uni-td align="center">{{item2.brdName}}</uni-td>
|
|
||||||
<uni-td align="center">{{item2.goodsTypeName}}</uni-td>
|
|
||||||
<uni-td align="center">{{item2.model}}</uni-td>
|
|
||||||
<uni-td align="center">{{item2.bvdName}}</uni-td>
|
|
||||||
<uni-td align="center">{{item2.amount}}</uni-td>
|
|
||||||
<uni-td align="center">{{item2.carLength}}</uni-td>
|
|
||||||
<uni-td align="center">{{item2.carWidth}}</uni-td>
|
|
||||||
<uni-td align="center">{{item2.carHeight}}</uni-td>
|
|
||||||
<uni-td align="center">{{item2.cabinNoList}}</uni-td>
|
|
||||||
</uni-tr>
|
</uni-tr>
|
||||||
</template>
|
<!-- 表格数据行 -->
|
||||||
</uni-table>
|
<template v-if="goodsInfo.length && goodsInfo.length > 0">
|
||||||
|
<uni-tr v-for="(item2,index2) in goodsInfo[index].stowageList"
|
||||||
|
:key="index2">
|
||||||
|
<uni-td>{{item2.stowageNo}}</uni-td>
|
||||||
|
<uni-td>{{item2.mnfBl}}</uni-td>
|
||||||
|
<uni-td>{{item2.potName}}</uni-td>
|
||||||
|
<uni-td>{{item2.brdName}}</uni-td>
|
||||||
|
<uni-td>{{item2.goodsTypeName}}</uni-td>
|
||||||
|
<uni-td>{{item2.model}}</uni-td>
|
||||||
|
<uni-td>{{item2.bvdName}}</uni-td>
|
||||||
|
<uni-td>{{item2.amount}}</uni-td>
|
||||||
|
<uni-td>{{item2.carLength}}</uni-td>
|
||||||
|
<uni-td>{{item2.carWidth}}</uni-td>
|
||||||
|
<uni-td>{{item2.carHeight}}</uni-td>
|
||||||
|
<uni-td>{{item2.cabinNoList}}</uni-td>
|
||||||
|
</uni-tr>
|
||||||
|
</template>
|
||||||
|
</uni-table>
|
||||||
|
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -619,7 +617,7 @@
|
||||||
<custom-tab-pane :label="cwtName" name="c1_4" v-if="cwtIsShow">
|
<custom-tab-pane :label="cwtName" name="c1_4" v-if="cwtIsShow">
|
||||||
<view class="main" v-if="isCwnum == 0">
|
<view class="main" v-if="isCwnum == 0">
|
||||||
<view></view>
|
<view></view>
|
||||||
<view class="form">
|
<view class="form form2">
|
||||||
<view class="inputBox">
|
<view class="inputBox">
|
||||||
<view class="leftInput">
|
<view class="leftInput">
|
||||||
<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="mnfBl"
|
<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="mnfBl"
|
||||||
|
|
@ -684,10 +682,12 @@
|
||||||
<zb-tooltip placement="top-start" color="white"
|
<zb-tooltip placement="top-start" color="white"
|
||||||
:visible.sync="v.isShow">
|
:visible.sync="v.isShow">
|
||||||
<view slot="content">
|
<view slot="content">
|
||||||
<view>
|
<view class="tipBox">
|
||||||
<p v-for="(item2,idx) in v.carDetailList" :key="idx">
|
<view class="li" v-for="(item2,idx) in v.carDetailList"
|
||||||
{{item2.storeLine}}道，{{item2.storeSeatAmout}}车位
|
:key="idx">
|
||||||
</p>
|
<p>{{item2.storeLine}}道</p>
|
||||||
|
<text>{{item2.storeSeatAmout}}车位</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view style="width: 100%; height: 100%;">
|
<view style="width: 100%; height: 100%;">
|
||||||
|
|
@ -712,19 +712,6 @@
|
||||||
:brdId="brdId" :bvmId="bvmId" :potId="potId" :mnfBl="mnfBl"></place>
|
:brdId="brdId" :bvmId="bvmId" :potId="potId" :mnfBl="mnfBl"></place>
|
||||||
</template>
|
</template>
|
||||||
</custom-tab-pane>
|
</custom-tab-pane>
|
||||||
<custom-tab-pane :label="zcyqName" name="c1_5" v-if="zcyqIsShow">
|
|
||||||
<view></view>
|
|
||||||
<view class="main">
|
|
||||||
<view class="askBox">
|
|
||||||
<view class="title">
|
|
||||||
装船要求信息
|
|
||||||
</view>
|
|
||||||
<view class="askContent">
|
|
||||||
{{askValue}}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</custom-tab-pane>
|
|
||||||
</custom-tabs>
|
</custom-tabs>
|
||||||
<uni-drawer ref="showRight" mode="right" :mask-click="false">
|
<uni-drawer ref="showRight" mode="right" :mask-click="false">
|
||||||
<view class="scroll-view">
|
<view class="scroll-view">
|
||||||
|
|
@ -804,7 +791,7 @@
|
||||||
<uni-easyinput type="textarea" v-model="askValue" placeholder="请输入内容..."
|
<uni-easyinput type="textarea" v-model="askValue" placeholder="请输入内容..."
|
||||||
:disabled="askDisabled"></uni-easyinput>
|
:disabled="askDisabled"></uni-easyinput>
|
||||||
<view class="popupBtn">
|
<view class="popupBtn">
|
||||||
<view class="btnList">
|
<view class="btnList" v-if="tabsValue == 0">
|
||||||
<button class="button" type="default" @click="zcCancel">取 消</button>
|
<button class="button" type="default" @click="zcCancel">取 消</button>
|
||||||
<button class="button" type="primary" @click="zcConfirm">提 交</button>
|
<button class="button" type="primary" @click="zcConfirm">提 交</button>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -927,9 +914,6 @@
|
||||||
// 场位图显示
|
// 场位图显示
|
||||||
cwtIsShow: false,
|
cwtIsShow: false,
|
||||||
cwtName: "",
|
cwtName: "",
|
||||||
// 装船要求信息
|
|
||||||
zcyqIsShow: false,
|
|
||||||
zcyqName: "",
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
@ -964,9 +948,6 @@
|
||||||
} else if (e.code == "B5") {
|
} else if (e.code == "B5") {
|
||||||
this.cwtIsShow = true
|
this.cwtIsShow = true
|
||||||
this.cwtName = e.name
|
this.cwtName = e.name
|
||||||
} else if (e.code == "B6") {
|
|
||||||
this.zcyqIsShow = true
|
|
||||||
this.zcyqName = e.name
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
@ -1010,10 +991,10 @@
|
||||||
this.activeIndex = 0
|
this.activeIndex = 0
|
||||||
if (e.value == 1 || e.value == 2) {
|
if (e.value == 1 || e.value == 2) {
|
||||||
this.loadOtherOrder()
|
this.loadOtherOrder()
|
||||||
// this.askDisabled = true
|
this.askDisabled = true
|
||||||
} else if (e.value == 0) {
|
} else if (e.value == 0) {
|
||||||
this.loadSumOrder()
|
this.loadSumOrder()
|
||||||
// this.askDisabled = false
|
this.askDisabled = false
|
||||||
} else if (e.value == 3) {
|
} else if (e.value == 3) {
|
||||||
this.getPotList()
|
this.getPotList()
|
||||||
this.getImgInfo()
|
this.getImgInfo()
|
||||||
|
|
@ -1162,7 +1143,6 @@
|
||||||
// }
|
// }
|
||||||
this.getBottomInfo(v.lwpId, index)
|
this.getBottomInfo(v.lwpId, index)
|
||||||
})
|
})
|
||||||
console.log(this.itemList)
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
@ -1856,26 +1836,8 @@
|
||||||
|
|
||||||
.main2 {
|
.main2 {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
background-color: #fff;
|
||||||
|
|
||||||
.askBox {
|
|
||||||
width: 97%;
|
|
||||||
padding: 20px;
|
|
||||||
margin: 20px;
|
|
||||||
background: #fff;
|
|
||||||
height: 300px;
|
|
||||||
overflow: scroll;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.askContent {
|
|
||||||
font-size: 16px;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pageBox {
|
.pageBox {
|
||||||
|
|
@ -1903,16 +1865,21 @@
|
||||||
|
|
||||||
/deep/.uni-easyinput {
|
/deep/.uni-easyinput {
|
||||||
width: 400px;
|
width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
/deep/.content-clear-icon {
|
/deep/.content-clear-icon {
|
||||||
padding-right: 16px;
|
display: none;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/.is-input-border {
|
/deep/.is-input-border {
|
||||||
border-radius: 18.5px;
|
border-radius: 18.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/deep/.uni-easyinput__placeholder-class {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
.rightInput {
|
.rightInput {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
|
|
@ -1931,6 +1898,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.form2 {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
.buttonlist {
|
.buttonlist {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -1990,6 +1961,7 @@
|
||||||
|
|
||||||
.tjList {
|
.tjList {
|
||||||
width: 240px;
|
width: 240px;
|
||||||
|
height: calc(100vh - 68px - 66px - 51px);
|
||||||
background: #EBEDF1;
|
background: #EBEDF1;
|
||||||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.10);
|
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.10);
|
||||||
float: left;
|
float: left;
|
||||||
|
|
@ -2003,6 +1975,7 @@
|
||||||
.title {
|
.title {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
line-height: 21px;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
color: #23262E;
|
color: #23262E;
|
||||||
|
|
@ -2044,12 +2017,12 @@
|
||||||
|
|
||||||
.bottomInfo {
|
.bottomInfo {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
margin-top: 9px;
|
margin-top: 9px;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #999999;
|
color: #999999;
|
||||||
margin-left: 10px;
|
|
||||||
|
|
||||||
text {
|
text {
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
|
|
@ -2074,12 +2047,12 @@
|
||||||
height: 87px;
|
height: 87px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 16px 15px;
|
padding: 16px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.imgBox {
|
.imgBox {
|
||||||
width: 20px;
|
width: 15px;
|
||||||
height: 20px;
|
height: 15px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
@ -2096,8 +2069,8 @@
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
||||||
.imgBox {
|
.imgBox {
|
||||||
width: 20px;
|
width: 15px;
|
||||||
height: 20px;
|
height: 15px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
@ -2126,7 +2099,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 12px 6px 1px;
|
padding: 16px;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
@ -2356,59 +2329,32 @@
|
||||||
|
|
||||||
.pzPot {
|
.pzPot {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 15px;
|
||||||
|
|
||||||
.title {
|
.li {
|
||||||
width: 100%;
|
margin-right: 9px;
|
||||||
height: 50px;
|
|
||||||
line-height: 50px;
|
|
||||||
font-size: 28px;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
border: 1px solid #000;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ul {
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
|
||||||
border: 1px solid #000;
|
|
||||||
border-top: none;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.li {
|
.name {
|
||||||
width: 25%;
|
font-size: 14px;
|
||||||
height: 30px;
|
color: rgba(0, 0, 0, 0.60);
|
||||||
line-height: 30px;
|
max-width: 126px;
|
||||||
display: flex;
|
overflow: hidden;
|
||||||
border: 1px solid #000;
|
text-overflow: ellipsis;
|
||||||
border-top: none;
|
white-space: nowrap;
|
||||||
border-left: none;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.xuhao {
|
|
||||||
width: 20px;
|
|
||||||
text-align: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.name {
|
|
||||||
flex: 1;
|
|
||||||
text-align: center;
|
|
||||||
border: 1px solid #000;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-top: none;
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color {
|
|
||||||
flex: 1;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.color {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
margin: 6px
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.imgTable {
|
.imgTable {
|
||||||
|
|
@ -2416,13 +2362,19 @@
|
||||||
padding: 0 20px 20px;
|
padding: 0 20px 20px;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 20px;
|
font-family: MicrosoftYaHei-Bold;
|
||||||
font-weight: bold;
|
font-size: 22px;
|
||||||
|
color: #999999;
|
||||||
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nr {
|
.nr {
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|
||||||
|
.text {
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.imgLi {
|
.imgLi {
|
||||||
|
|
@ -2470,7 +2422,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-left: 10px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.imgSize {
|
.imgSize {
|
||||||
|
|
@ -2514,28 +2466,35 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 0 12px;
|
padding: 0 12px;
|
||||||
font-size: 20px;
|
|
||||||
border: 1px solid #f2f2f2;
|
border: 1px solid #f2f2f2;
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #0D518B;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #1677FF;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.gray {
|
.tableBox {
|
||||||
background-color: #fff;
|
/deep/.uni-table-th {
|
||||||
}
|
background-color: #f4f4f4;
|
||||||
|
color: #0B266A;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
.uni-table-th-content {
|
||||||
|
padding-left: 7.5px;
|
||||||
|
border-left: 1px solid #C3CBD8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.title {
|
/deep/.uni-table-td {
|
||||||
line-height: 50px;
|
padding-left: 15px;
|
||||||
font-size: 21px;
|
}
|
||||||
font-weight: 900;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/deep/.table--border {
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2571,18 +2530,15 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: scroll;
|
overflow: scroll;
|
||||||
padding-left: 18px;
|
padding-left: 18px;
|
||||||
background: #F5F6FA;
|
background: #FAFAFA;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin-top: 10px;
|
padding-bottom: 16px;
|
||||||
padding: 8px 16px;
|
|
||||||
|
|
||||||
.rightBox {
|
.rightBox {
|
||||||
width: calc(33.3% - 10px);
|
width: 33.3%;
|
||||||
height: 214px;
|
height: 214px;
|
||||||
border: 1px solid #E1E5ED;
|
border: 1px solid #E1E5ED;
|
||||||
margin-right: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
|
|
||||||
/deep/.zb_tooltip_content {
|
/deep/.zb_tooltip_content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -2650,6 +2606,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
background-color: #e1e5ed !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/.progress-bar .bar-double {
|
/deep/.progress-bar .bar-double {
|
||||||
|
|
@ -2687,6 +2644,29 @@
|
||||||
color: #1677FF;
|
color: #1677FF;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tipBox {
|
||||||
|
width: 150px;
|
||||||
|
height: 50px;
|
||||||
|
overflow: scroll;
|
||||||
|
|
||||||
|
.li {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px 0;
|
||||||
|
border-bottom: 1px solid #999;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #23262E;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -2796,14 +2776,14 @@
|
||||||
|
|
||||||
.drawerTop {
|
.drawerTop {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-top: 55px;
|
margin-top: 24px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
|
|
||||||
image {
|
image {
|
||||||
width: 14px;
|
width: 10px;
|
||||||
height: 24px;
|
height: 14px;
|
||||||
margin-right: 16px;
|
margin-right: 10px;
|
||||||
margin-top: 3px;
|
margin-top: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
text {
|
text {
|
||||||
|
|
|
||||||
|
|
@ -136,25 +136,25 @@
|
||||||
<text>货物明细</text>
|
<text>货物明细</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="formNr">
|
<view class="formNr">
|
||||||
<uni-table border stripe emptyText="暂无更多数据">
|
<uni-table stripe emptyText="暂无更多数据">
|
||||||
<!-- 表头行 -->
|
<!-- 表头行 -->
|
||||||
<uni-tr class="gray">
|
<uni-tr>
|
||||||
<uni-th align="center" width="10">序号</uni-th>
|
<uni-th width="10">序号</uni-th>
|
||||||
<uni-th align="center" width="22">车架号/条形码</uni-th>
|
<uni-th width="22">车架号/条形码</uni-th>
|
||||||
<uni-th align="center" width="15">作业状态</uni-th>
|
<uni-th width="15">作业状态</uni-th>
|
||||||
<uni-th align="center" width="40">场位</uni-th>
|
<uni-th width="40">场位</uni-th>
|
||||||
<uni-th align="center" width="15">货物性质</uni-th>
|
<uni-th width="15">货物性质</uni-th>
|
||||||
<uni-th align="center" width="10">操作</uni-th>
|
<uni-th width="10">操作</uni-th>
|
||||||
</uni-tr>
|
</uni-tr>
|
||||||
<!-- 表格数据行 -->
|
<!-- 表格数据行 -->
|
||||||
<uni-tr v-for="(item,index) in tableList" :key="index">
|
<uni-tr v-for="(item,index) in tableList" :key="index">
|
||||||
<uni-td align="center">{{index + 1}}</uni-td>
|
<uni-td>{{index + 1}}</uni-td>
|
||||||
<uni-td align="center">{{item.vinCode}}</uni-td>
|
<uni-td>{{item.vinCode}}</uni-td>
|
||||||
<uni-td align="center">{{item.workStatus}}</uni-td>
|
<uni-td>{{item.workStatus}}</uni-td>
|
||||||
<uni-td align="center" v-if="objInfo.tradeName == 'W'">{{item.yardPosition}}</uni-td>
|
<uni-td v-if="objInfo.tradeName == 'W'">{{item.yardPosition}}</uni-td>
|
||||||
<uni-td align="center" v-if="objInfo.tradeName == 'N'">{{item.yardPos}}</uni-td>
|
<uni-td v-if="objInfo.tradeName == 'N'">{{item.yardPos}}</uni-td>
|
||||||
<uni-td align="center">{{item.natureFlagName}}</uni-td>
|
<uni-td>{{item.natureFlagName}}</uni-td>
|
||||||
<uni-td align="center">
|
<uni-td>
|
||||||
<text class="operate" @click="open(item)">残损</text>
|
<text class="operate" @click="open(item)">残损</text>
|
||||||
</uni-td>
|
</uni-td>
|
||||||
</uni-tr>
|
</uni-tr>
|
||||||
|
|
@ -438,14 +438,24 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.formNr {
|
.formNr {
|
||||||
.gray {
|
/deep/.uni-table-th {
|
||||||
background-color: #f9f9f9;
|
background-color: #f4f4f4;
|
||||||
|
color: #0B266A;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
.uni-table-th-content {
|
||||||
|
padding-left: 7.5px;
|
||||||
|
border-left: 1px solid #C3CBD8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/.uni-table-td {
|
||||||
|
padding-left: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.operate {
|
.operate {
|
||||||
color: #2979ff;
|
color: #2979ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -52,8 +52,7 @@
|
||||||
<text>已停放车辆：{{lineData.stopGoodsAmout}}辆</text>
|
<text>已停放车辆：{{lineData.stopGoodsAmout}}辆</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="placeContent" v-if="selectValue == 1">
|
<view class="placeContent" v-if="selectValue == 1">
|
||||||
<view class="placeList" style="border: 1px solid #E1E5ED;"
|
<view class="placeList" v-for="(item,index) in lineData.lineStatisticsList">
|
||||||
v-for="(item,index) in lineData.lineStatisticsList">
|
|
||||||
<view class="listLeft">
|
<view class="listLeft">
|
||||||
<template>
|
<template>
|
||||||
<p><template v-if="item.yalNo >= 1 && item.yalNo <= 9">0</template>{{item.yalNo}}道</p>
|
<p><template v-if="item.yalNo >= 1 && item.yalNo <= 9">0</template>{{item.yalNo}}道</p>
|
||||||
|
|
@ -250,7 +249,7 @@
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.place {
|
.place {
|
||||||
.placeTop {
|
.placeTop {
|
||||||
padding: 12px 16px;
|
padding: 8px 16px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
background-color: #F6F7F9;
|
background-color: #F6F7F9;
|
||||||
|
|
@ -318,6 +317,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/deep/.uni-select {
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
/deep/.uni-icons {
|
/deep/.uni-icons {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -351,7 +354,6 @@
|
||||||
padding: 10px 16px;
|
padding: 10px 16px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: #E6F4FF;
|
background: #E6F4FF;
|
||||||
border: 1px solid #BAE0FF;
|
|
||||||
|
|
||||||
text {
|
text {
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
|
|
@ -401,6 +403,8 @@
|
||||||
.placeList {
|
.placeList {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 70px;
|
height: 70px;
|
||||||
|
border: 1px solid #E1E5ED;
|
||||||
|
border-bottom: none;
|
||||||
|
|
||||||
.listLeft {
|
.listLeft {
|
||||||
width: 80px;
|
width: 80px;
|
||||||
|
|
@ -440,7 +444,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.wsy {
|
.wsy {
|
||||||
background: #EEEEEE;
|
background: #f7f9ff;
|
||||||
|
|
||||||
|
text {
|
||||||
|
padding: 5px 10px;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sy {
|
.sy {
|
||||||
|
|
@ -479,7 +488,6 @@
|
||||||
|
|
||||||
p {
|
p {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 4px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
p:last-child {
|
p:last-child {
|
||||||
|
|
@ -500,6 +508,13 @@
|
||||||
|
|
||||||
.kz {
|
.kz {
|
||||||
background: #F7F9FF;
|
background: #F7F9FF;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.kzText {
|
||||||
|
padding: 5px 10px;
|
||||||
|
background-color: #fff;
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
p:first-child {
|
p:first-child {
|
||||||
width: 70%;
|
width: 70%;
|
||||||
|
|
@ -532,6 +547,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.placeList:last-child {
|
||||||
|
border-bottom: 1px solid #E1E5ED;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="login">
|
<view class="login">
|
||||||
<view class="leftImg">
|
<view class="leftImg">
|
||||||
<image src="../../static/images/shipWork/loginImg.png"></image>
|
<image :style="'height:'+screenHeight+'px !important;'" src="../../static/images/shipWork/loginImg.png">
|
||||||
|
</image>
|
||||||
<view class="pBox">
|
<view class="pBox">
|
||||||
<p>海通国际码头</p>
|
<p>海通国际码头</p>
|
||||||
<p>智能管控系统</p>
|
<p>智能管控系统</p>
|
||||||
|
|
@ -11,7 +12,7 @@
|
||||||
<view class="loginTop">
|
<view class="loginTop">
|
||||||
<image src="../../static/images/theme/logo.png" mode="widthFix"></image>
|
<image src="../../static/images/theme/logo.png" mode="widthFix"></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="loginInfo">
|
<scroll-view scroll-y="true" class="loginInfo">
|
||||||
<view class="loginTitle">
|
<view class="loginTitle">
|
||||||
<p>账号密码登录</p>
|
<p>账号密码登录</p>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -25,30 +26,30 @@
|
||||||
</uni-easyinput>
|
</uni-easyinput>
|
||||||
<button class="button" @click="loginGo('center')">立即登录</button>
|
<button class="button" @click="loginGo('center')">立即登录</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</scroll-view>
|
||||||
<uni-popup ref="popup" background-color="#fff" @maskClick="close">
|
</view>
|
||||||
<view class="popupBox">
|
<uni-popup ref="popup" background-color="#fff" @maskClick="close">
|
||||||
<view class="popupTitle">
|
<view class="popupBox">
|
||||||
请选择港区
|
<view class="popupTitle">
|
||||||
</view>
|
请选择港区
|
||||||
<view class="ul">
|
</view>
|
||||||
<view class="li" v-for="(item,index) in portList" :key="index"
|
<view class="ul">
|
||||||
:class="{active:activeIndex == index}" @click="selectPort(item,index)">
|
<view class="li" v-for="(item,index) in portList" :key="index"
|
||||||
<text>{{item.pamName}}</text>
|
:class="{active:activeIndex == index}" @click="selectPort(item,index)">
|
||||||
</view>
|
<text>{{item.pamName}}</text>
|
||||||
</view>
|
|
||||||
<view class="btnBox">
|
|
||||||
<button class="btn" type="primary" @click="toGo">确 定</button>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</uni-popup>
|
<view class="btnBox">
|
||||||
<uni-popup ref="popup2" type="dialog">
|
<button class="btn" type="primary" @click="toGo">确 定</button>
|
||||||
<uni-popup-dialog type="error" title="通知" content="未开通权限，请联系管理员"></uni-popup-dialog>
|
</view>
|
||||||
</uni-popup>
|
</view>
|
||||||
<uni-popup ref="popup3" type="dialog">
|
</uni-popup>
|
||||||
<uni-popup-dialog type="error" title="通知" :content="errorTitle"></uni-popup-dialog>
|
<uni-popup ref="popup2" type="dialog">
|
||||||
</uni-popup>
|
<uni-popup-dialog type="error" title="通知" content="未开通权限，请联系管理员"></uni-popup-dialog>
|
||||||
</view>
|
</uni-popup>
|
||||||
|
<uni-popup ref="popup3" type="dialog">
|
||||||
|
<uni-popup-dialog type="error" title="通知" :content="errorTitle"></uni-popup-dialog>
|
||||||
|
</uni-popup>
|
||||||
<LotusLoading :lotusLoadingData="lotusLoadingData"></LotusLoading>
|
<LotusLoading :lotusLoadingData="lotusLoadingData"></LotusLoading>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -64,6 +65,7 @@
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
screenHeight: "",
|
||||||
// rtoswuhan1 wuhan_ceshi1
|
// rtoswuhan1 wuhan_ceshi1
|
||||||
account: '',
|
account: '',
|
||||||
// q123456
|
// q123456
|
||||||
|
|
@ -89,6 +91,9 @@
|
||||||
components: {
|
components: {
|
||||||
LotusLoading
|
LotusLoading
|
||||||
},
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.screenHeight = uni.getSystemInfoSync().windowHeight;
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 点击图标
|
// 点击图标
|
||||||
iconC() {
|
iconC() {
|
||||||
|
|
@ -257,7 +262,7 @@
|
||||||
.pBox {
|
.pBox {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 16.2%;
|
top: 117px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
|
|
@ -284,9 +289,7 @@
|
||||||
|
|
||||||
.loginInfo {
|
.loginInfo {
|
||||||
width: 350px;
|
width: 350px;
|
||||||
display: flex;
|
margin-top: 148px;
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.loginTitle {
|
.loginTitle {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
|
@ -302,69 +305,70 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/deep/.is-input-border {
|
/deep/.is-input-border {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.popupBox {
|
/deep/.uni-popup .uni-popup__wrapper {
|
||||||
width: 280px;
|
border-radius: 8px;
|
||||||
height: 320px;
|
}
|
||||||
|
|
||||||
.popupTitle {
|
.popupBox {
|
||||||
width: 100%;
|
width: 280px;
|
||||||
height: 48px;
|
|
||||||
line-height: 48px;
|
.popupTitle {
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
line-height: 48px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #23262E;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ul {
|
||||||
|
padding: 30px;
|
||||||
|
max-height: 310px;
|
||||||
|
overflow: scroll;
|
||||||
|
|
||||||
|
.li {
|
||||||
|
height: 46px;
|
||||||
|
line-height: 46px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
border: 1px solid #e7e7e7;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
color: #0079fe;
|
||||||
|
border-color: #0079fe;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnBox {
|
||||||
|
height: 60px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
|
||||||
|
border-radius: 0 0 16px 16px;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
width: 170px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #23262E;
|
padding: 10px;
|
||||||
font-weight: bold;
|
margin: 10px;
|
||||||
border-bottom: 1px solid #eee;
|
height: 36px;
|
||||||
box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
|
line-height: 18px;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid rgba(0, 0, 0, .1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ul {
|
.btn:last-child {
|
||||||
padding: 30px;
|
color: #fff;
|
||||||
height: 213px;
|
background-color: #0067CF;
|
||||||
overflow: scroll;
|
|
||||||
|
|
||||||
.li {
|
|
||||||
height: 40px;
|
|
||||||
line-height: 40px;
|
|
||||||
text-align: center;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
color: #0079fe;
|
|
||||||
border-color: #0079fe;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btnBox {
|
|
||||||
height: 60px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
|
|
||||||
border-radius: 0 0 16px 16px;
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
width: 170px;
|
|
||||||
font-size: 16px;
|
|
||||||
padding: 10px;
|
|
||||||
margin: 10px;
|
|
||||||
height: 36px;
|
|
||||||
line-height: 18px;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 1px solid rgba(0, 0, 0, .1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn:last-child {
|
|
||||||
color: #fff;
|
|
||||||
background-color: #0067CF;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -238,10 +238,12 @@
|
||||||
<zb-tooltip placement="top-start" color="white"
|
<zb-tooltip placement="top-start" color="white"
|
||||||
:visible.sync="v.isShow">
|
:visible.sync="v.isShow">
|
||||||
<view slot="content">
|
<view slot="content">
|
||||||
<view>
|
<view class="tipBox">
|
||||||
<p v-for="(item2,idx) in v.carDetailList" :key="idx">
|
<view class="li" v-for="(item2,idx) in v.carDetailList"
|
||||||
{{item2.storeLine}}道，{{item2.storeSeatAmout}}车位
|
:key="idx">
|
||||||
</p>
|
<p>{{item2.storeLine}}道</p>
|
||||||
|
<text>{{item2.storeSeatAmout}}车位</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view style="width: 100%; height: 100%;">
|
<view style="width: 100%; height: 100%;">
|
||||||
|
|
@ -1080,6 +1082,7 @@
|
||||||
.container {
|
.container {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
margin-top: 68px;
|
margin-top: 68px;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
/deep/.tab .tab-bar {
|
/deep/.tab .tab-bar {
|
||||||
height: 66px;
|
height: 66px;
|
||||||
|
|
@ -1129,16 +1132,21 @@
|
||||||
|
|
||||||
/deep/.uni-easyinput {
|
/deep/.uni-easyinput {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
/deep/.content-clear-icon {
|
/deep/.content-clear-icon {
|
||||||
padding-right: 16px;
|
display: none;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/.is-input-border {
|
/deep/.is-input-border {
|
||||||
border-radius: 18.5px;
|
border-radius: 18.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/deep/.uni-easyinput__placeholder-class {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
.rightInput {
|
.rightInput {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
|
|
@ -1163,8 +1171,8 @@
|
||||||
.dataTitle {
|
.dataTitle {
|
||||||
margin-top: 14px;
|
margin-top: 14px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 36px;
|
height: 42px;
|
||||||
line-height: 36px;
|
line-height: 42px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #1890FF;
|
color: #1890FF;
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
|
|
@ -1251,7 +1259,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100vh - 66px - 68px - 47px);
|
height: calc(100vh - 66px - 68px - 47px);
|
||||||
margin-top: 16px;
|
margin-top: 10px;
|
||||||
|
|
||||||
.cwLeft {
|
.cwLeft {
|
||||||
width: 128px;
|
width: 128px;
|
||||||
|
|
@ -1285,18 +1293,15 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: scroll;
|
overflow: scroll;
|
||||||
padding-left: 18px;
|
padding-left: 18px;
|
||||||
background: #F5F6FA;
|
background: #FAFAFA;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin-top: 10px;
|
padding-bottom: 16px;
|
||||||
padding: 8px 16px;
|
|
||||||
|
|
||||||
.rightBox {
|
.rightBox {
|
||||||
width: calc(33.3% - 10px);
|
width: 33.3%;
|
||||||
height: 214px;
|
height: 214px;
|
||||||
border: 1px solid #E1E5ED;
|
border: 1px solid #E1E5ED;
|
||||||
margin-right: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
|
|
||||||
/deep/.zb_tooltip_content {
|
/deep/.zb_tooltip_content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -1364,6 +1369,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
background-color: #e1e5ed !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/.progress-bar .bar-double {
|
/deep/.progress-bar .bar-double {
|
||||||
|
|
@ -1401,6 +1407,29 @@
|
||||||
color: #1677FF;
|
color: #1677FF;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tipBox {
|
||||||
|
width: 150px;
|
||||||
|
height: 50px;
|
||||||
|
overflow: scroll;
|
||||||
|
|
||||||
|
.li {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px 0;
|
||||||
|
border-bottom: 1px solid #999;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #23262E;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1410,6 +1439,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabs2 {
|
.tabs2 {
|
||||||
|
background-color: #f5f6fa;
|
||||||
margin-top: 66px;
|
margin-top: 66px;
|
||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
|
|
||||||
|
|
@ -1512,14 +1542,14 @@
|
||||||
|
|
||||||
.drawerTop {
|
.drawerTop {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-top: 55px;
|
margin-top: 24px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
|
|
||||||
image {
|
image {
|
||||||
width: 14px;
|
width: 10px;
|
||||||
height: 24px;
|
height: 14px;
|
||||||
margin-right: 16px;
|
margin-right: 10px;
|
||||||
margin-top: 3px;
|
margin-top: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
text {
|
text {
|
||||||
|
|
|
||||||
|
|
@ -52,8 +52,7 @@
|
||||||
<text>已停放车辆：{{lineData.stopGoodsAmout}}辆</text>
|
<text>已停放车辆：{{lineData.stopGoodsAmout}}辆</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="placeContent" v-if="selectValue == 1">
|
<view class="placeContent" v-if="selectValue == 1">
|
||||||
<view class="placeList" style="border: 1px solid #E1E5ED;"
|
<view class="placeList" v-for="(item,index) in lineData.lineStatisticsList">
|
||||||
v-for="(item,index) in lineData.lineStatisticsList">
|
|
||||||
<view class="listLeft">
|
<view class="listLeft">
|
||||||
<template>
|
<template>
|
||||||
<p><template v-if="item.yalNo >= 1 && item.yalNo <= 9">0</template>{{item.yalNo}}道</p>
|
<p><template v-if="item.yalNo >= 1 && item.yalNo <= 9">0</template>{{item.yalNo}}道</p>
|
||||||
|
|
@ -108,7 +107,7 @@
|
||||||
<image src="../../static/images/wjhIcon.png" mode="" v-if="item2.godStatus == 'N'">
|
<image src="../../static/images/wjhIcon.png" mode="" v-if="item2.godStatus == 'N'">
|
||||||
</image>
|
</image>
|
||||||
</view>
|
</view>
|
||||||
<p>空置</p>
|
<text class="kzText">空置</text>
|
||||||
<p><template v-if="item2.yacNo >= 1 && item2.yacNo <= 9">0</template>{{item2.yacNo}}</p>
|
<p><template v-if="item2.yacNo >= 1 && item2.yacNo <= 9">0</template>{{item2.yacNo}}</p>
|
||||||
</view>
|
</view>
|
||||||
<view class="seatBox sy" :class="{syGl:item2.existFlag == '1'}" :key="index2"
|
<view class="seatBox sy" :class="{syGl:item2.existFlag == '1'}" :key="index2"
|
||||||
|
|
@ -289,7 +288,7 @@
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
|
|
||||||
.kz {
|
.kz {
|
||||||
background: #EEEEEE;
|
background: #F7F9FF;
|
||||||
border: 1px solid #DCDCDC;
|
border: 1px solid #DCDCDC;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -447,7 +446,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.wsy {
|
.wsy {
|
||||||
background: #EEEEEE;
|
background: #f7f9ff;
|
||||||
|
|
||||||
|
text {
|
||||||
|
padding: 5px 10px;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sy {
|
.sy {
|
||||||
|
|
@ -486,7 +490,6 @@
|
||||||
|
|
||||||
p {
|
p {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 4px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
p:last-child {
|
p:last-child {
|
||||||
|
|
@ -507,6 +510,13 @@
|
||||||
|
|
||||||
.kz {
|
.kz {
|
||||||
background: #F7F9FF;
|
background: #F7F9FF;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.kzText {
|
||||||
|
padding: 5px 10px;
|
||||||
|
background-color: #fff;
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
p:first-child {
|
p:first-child {
|
||||||
width: 70%;
|
width: 70%;
|
||||||
|
|
@ -539,6 +549,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.placeList:last-child {
|
||||||
|
border-bottom: 1px solid #E1E5ED;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -28,7 +28,7 @@
|
||||||
<image src="../../static/images/zlIcon.png"></image>
|
<image src="../../static/images/zlIcon.png"></image>
|
||||||
<text>板车照片</text>
|
<text>板车照片</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="picture">
|
<view class="picture" :class="{picture2 : boardCarPhotos > 0}">
|
||||||
<template v-for="(item,index) in boardCarPhotos">
|
<template v-for="(item,index) in boardCarPhotos">
|
||||||
<image :key="item" :src="item" @click="clickImg(boardCarPhotos,index)"></image>
|
<image :key="item" :src="item" @click="clickImg(boardCarPhotos,index)"></image>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -39,7 +39,7 @@
|
||||||
<image src="../../static/images/cpIcon.png"></image>
|
<image src="../../static/images/cpIcon.png"></image>
|
||||||
<text>板车车牌照</text>
|
<text>板车车牌照</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="picture">
|
<view class="picture" :class="{picture2 : boardCarList > 0}">
|
||||||
<template v-for="(item,index) in boardCarList">
|
<template v-for="(item,index) in boardCarList">
|
||||||
<image :key="item" :src="item" @click="clickImg(boardCarList,index)"></image>
|
<image :key="item" :src="item" @click="clickImg(boardCarList,index)"></image>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -121,7 +121,7 @@
|
||||||
<image src="../../static/images/zsIcon.png"></image>
|
<image src="../../static/images/zsIcon.png"></image>
|
||||||
<text>质损照片</text>
|
<text>质损照片</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="picture">
|
<view class="picture" :class="{picture2 : qualityDamage > 0}">
|
||||||
<template v-for="(item,index) in qualityDamage">
|
<template v-for="(item,index) in qualityDamage">
|
||||||
<image :key="item" :src="item" @click="clickImg(qualityDamage,index)"></image>
|
<image :key="item" :src="item" @click="clickImg(qualityDamage,index)"></image>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -132,7 +132,7 @@
|
||||||
<image src="../../static/images/cjhIcon.png"></image>
|
<image src="../../static/images/cjhIcon.png"></image>
|
||||||
<text>车架号图片</text>
|
<text>车架号图片</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="picture">
|
<view class="picture" :class="{picture2 : carFrameNumber > 0}">
|
||||||
<template v-for="(item,index) in carFrameNumber">
|
<template v-for="(item,index) in carFrameNumber">
|
||||||
<image :key="item" :src="item" @click="clickImg(carFrameNumber,index)"></image>
|
<image :key="item" :src="item" @click="clickImg(carFrameNumber,index)"></image>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -273,13 +273,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemBox {
|
.itemBox {
|
||||||
padding: 24px 16px;
|
padding: 16px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.formTitle {
|
.formTitle {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
color: #666;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
|
|
@ -292,7 +293,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.picture {
|
.picture {
|
||||||
margin-top: 20px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
|
@ -303,6 +303,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.picture2 {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
.zsInfo {
|
.zsInfo {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
|
||||||
|
|
@ -25,12 +25,6 @@
|
||||||
</template>
|
</template>
|
||||||
</radio-group>
|
</radio-group>
|
||||||
<view class="radioInput">
|
<view class="radioInput">
|
||||||
<!-- <uInput v-model="feed" type="textarea" :autoHeight="true" placeholder="请输入客户反馈内容"
|
|
||||||
:maxLength="200" @click="inputFocus" @blur="inputBlur" v-if="current == '客户反馈'" />
|
|
||||||
</uInput>
|
|
||||||
<uInput v-model="remark" type="textarea" :autoHeight="true" placeholder="请输入其他内容"
|
|
||||||
:maxLength="200" @click="inputFocus" @blur="inputBlur" v-if="current == '其他'" />
|
|
||||||
</uInput> -->
|
|
||||||
<template v-if="isFeed">
|
<template v-if="isFeed">
|
||||||
<uni-easyinput type="textarea" autoHeight v-model="feed" placeholder="请输入客户反馈内容"
|
<uni-easyinput type="textarea" autoHeight v-model="feed" placeholder="请输入客户反馈内容"
|
||||||
maxlength="200" @focus="inputFocus" @blur="inputBlur"></uni-easyinput>
|
maxlength="200" @focus="inputFocus" @blur="inputBlur"></uni-easyinput>
|
||||||
|
|
@ -218,7 +212,6 @@
|
||||||
<script>
|
<script>
|
||||||
import LotusLoading from "../../components/Winglau14-lotusLoading/Winglau14-LotusLoading.vue";
|
import LotusLoading from "../../components/Winglau14-lotusLoading/Winglau14-LotusLoading.vue";
|
||||||
import signRegion from "../quality/sign.vue";
|
import signRegion from "../quality/sign.vue";
|
||||||
import uInput from "../../components/u-input/index.vue";
|
|
||||||
export default {
|
export default {
|
||||||
name: "monEdit",
|
name: "monEdit",
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -369,7 +362,6 @@
|
||||||
components: {
|
components: {
|
||||||
LotusLoading,
|
LotusLoading,
|
||||||
signRegion,
|
signRegion,
|
||||||
uInput
|
|
||||||
},
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
let signImg = uni.getStorageSync('signImg')
|
let signImg = uni.getStorageSync('signImg')
|
||||||
|
|
@ -380,6 +372,7 @@
|
||||||
this.baseImg(this.signImg, "1")
|
this.baseImg(this.signImg, "1")
|
||||||
}
|
}
|
||||||
let hzzsImg = uni.getStorageSync('hzzsImg')
|
let hzzsImg = uni.getStorageSync('hzzsImg')
|
||||||
|
console.log(hzzsImg)
|
||||||
if (hzzsImg != "") {
|
if (hzzsImg != "") {
|
||||||
this.hzzsImg = uni.getStorageSync('hzzsImg')
|
this.hzzsImg = uni.getStorageSync('hzzsImg')
|
||||||
}
|
}
|
||||||
|
|
@ -1433,7 +1426,7 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
z-index: 999;
|
z-index: 996;
|
||||||
|
|
||||||
/deep/.uni-steps {
|
/deep/.uni-steps {
|
||||||
height: 80px;
|
height: 80px;
|
||||||
|
|
@ -1446,7 +1439,7 @@
|
||||||
|
|
||||||
/deep/.uni-steps__row-title {
|
/deep/.uni-steps__row-title {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
margin-top: 16px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/.uni-icons {
|
/deep/.uni-icons {
|
||||||
|
|
@ -1456,6 +1449,12 @@
|
||||||
/deep/.uni-steps__row-container {
|
/deep/.uni-steps__row-container {
|
||||||
margin-top: 14px;
|
margin-top: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/deep/.uni-steps__row-circle {
|
||||||
|
background-color: #fff !important;
|
||||||
|
border: 3px solid #B7BDC6;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
|
|
@ -1499,13 +1498,17 @@
|
||||||
.radioList {
|
.radioList {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin-top: 20px;
|
margin-top: 24px;
|
||||||
|
|
||||||
.radioBox {
|
.radioBox {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 15%;
|
width: 15%;
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/deep/uni-radio .uni-radio-input {
|
||||||
|
border: 1px solid #dcdfe6;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.radioInput {
|
.radioInput {
|
||||||
|
|
@ -1514,13 +1517,23 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.picture {
|
.picture {
|
||||||
margin-top: 30px;
|
margin-top: 24px;
|
||||||
|
|
||||||
/deep/.file-picker__box {
|
/deep/.file-picker__box {
|
||||||
width: 120px !important;
|
width: 120px !important;
|
||||||
height: 120px !important;
|
height: 120px !important;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/deep/.is-add {
|
||||||
|
background: url(../../static/images/xjpz.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
border: 1px solid transparent !important;
|
||||||
|
|
||||||
|
.is-add {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.inputBox {
|
.inputBox {
|
||||||
|
|
@ -1538,9 +1551,13 @@
|
||||||
|
|
||||||
.sign {
|
.sign {
|
||||||
color: #2979ff;
|
color: #2979ff;
|
||||||
|
width: 160px;
|
||||||
|
height: 40px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
|
text-align: center;
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
border: 1px solid #2979ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editSign {
|
.editSign {
|
||||||
|
|
@ -1589,7 +1606,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
border-bottom: 1px solid #EEEEEE;
|
border-bottom: 1px solid #EEEEEE;
|
||||||
padding: 16px;
|
padding: 10px;
|
||||||
|
|
||||||
.liTitle {
|
.liTitle {
|
||||||
min-width: 120px;
|
min-width: 120px;
|
||||||
|
|
|
||||||
|
|
@ -9,12 +9,9 @@
|
||||||
<uni-easyinput suffixIcon="search" v-model="carValue" placeholder="请输入车架号"
|
<uni-easyinput suffixIcon="search" v-model="carValue" placeholder="请输入车架号"
|
||||||
@iconClick="iconClick">
|
@iconClick="iconClick">
|
||||||
</uni-easyinput>
|
</uni-easyinput>
|
||||||
<superwei-combox class="select" :candidates="shipList" :isJSON="true" keyName="shipVvy"
|
|
||||||
placeholder="船名/航次" v-model="shipValue" @select="shipChange"
|
|
||||||
@input="shipInput"></superwei-combox>
|
|
||||||
<button class="btn" @click="onSearch">搜索</button>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="right" @click="screen">
|
<view class="right" @click="screen">
|
||||||
|
<p>船名/航次<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
|
||||||
<p>质损环节<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
|
<p>质损环节<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
|
||||||
<p>品牌<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
|
<p>品牌<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -96,6 +93,12 @@
|
||||||
<image src="../../static/images/leftJt.png" mode=""></image>
|
<image src="../../static/images/leftJt.png" mode=""></image>
|
||||||
<text>返回</text>
|
<text>返回</text>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="drawerTitle">
|
||||||
|
船名/航次
|
||||||
|
</view>
|
||||||
|
<superwei-combox class="select" :candidates="shipList" :isJSON="true" keyName="shipVvy"
|
||||||
|
placeholder="船名/航次" v-model="shipValue" @select="shipChange"
|
||||||
|
@input="shipInput"></superwei-combox>
|
||||||
<view class="drawerTitle">
|
<view class="drawerTitle">
|
||||||
质损环节
|
质损环节
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -189,10 +192,6 @@
|
||||||
iconClick() {
|
iconClick() {
|
||||||
this.initData()
|
this.initData()
|
||||||
},
|
},
|
||||||
// 搜索按钮
|
|
||||||
onSearch() {
|
|
||||||
this.initData()
|
|
||||||
},
|
|
||||||
// 点击筛选
|
// 点击筛选
|
||||||
screen() {
|
screen() {
|
||||||
this.$refs.showRight.open();
|
this.$refs.showRight.open();
|
||||||
|
|
@ -203,6 +202,10 @@
|
||||||
},
|
},
|
||||||
// 重置
|
// 重置
|
||||||
reset() {
|
reset() {
|
||||||
|
// 船名/航次
|
||||||
|
this.shipId = ""
|
||||||
|
this.shipValue = ""
|
||||||
|
this.vvyId = ""
|
||||||
// 质损环节下拉
|
// 质损环节下拉
|
||||||
this.zshjId = ""
|
this.zshjId = ""
|
||||||
this.zshjName = ""
|
this.zshjName = ""
|
||||||
|
|
@ -261,7 +264,6 @@
|
||||||
this.shipId = e.vslCd
|
this.shipId = e.vslCd
|
||||||
this.shipValue = e.shipVvy
|
this.shipValue = e.shipVvy
|
||||||
this.vvyId = e.vvyId
|
this.vvyId = e.vvyId
|
||||||
this.current = 1
|
|
||||||
},
|
},
|
||||||
// 质损环节下拉
|
// 质损环节下拉
|
||||||
zshjChange(e) {
|
zshjChange(e) {
|
||||||
|
|
@ -405,14 +407,14 @@
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 50px;
|
right: 50px;
|
||||||
bottom: 50px;
|
bottom: 50px;
|
||||||
width: 100px;
|
width: 90px;
|
||||||
height: 100px;
|
height: 90px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: #2979ff;
|
background-color: #2979ff;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 24px;
|
font-size: 22px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 100px;
|
line-height: 90px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
}
|
}
|
||||||
|
|
@ -424,7 +426,7 @@
|
||||||
background: #FAFAFA;
|
background: #FAFAFA;
|
||||||
border-top: 1px solid #EEEEEE;
|
border-top: 1px solid #EEEEEE;
|
||||||
border-bottom: 1px solid #EEEEEE;
|
border-bottom: 1px solid #EEEEEE;
|
||||||
padding: 10px;
|
padding: 10px 16px;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 66px;
|
top: 66px;
|
||||||
z-index: 995;
|
z-index: 995;
|
||||||
|
|
@ -450,6 +452,15 @@
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/deep/.content-clear-icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/.uni-easyinput__placeholder-class {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
height: 35px;
|
height: 35px;
|
||||||
line-height: 35px;
|
line-height: 35px;
|
||||||
|
|
@ -538,6 +549,9 @@
|
||||||
|
|
||||||
.col {
|
.col {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -571,14 +585,14 @@
|
||||||
|
|
||||||
.drawerTop {
|
.drawerTop {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-top: 55px;
|
margin-top: 24px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
|
|
||||||
image {
|
image {
|
||||||
width: 14px;
|
width: 10px;
|
||||||
height: 24px;
|
height: 14px;
|
||||||
margin-right: 16px;
|
margin-right: 10px;
|
||||||
margin-top: 3px;
|
margin-top: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
text {
|
text {
|
||||||
|
|
|
||||||
|
|
@ -9,9 +9,9 @@
|
||||||
class="canvsborder"></canvas>
|
class="canvsborder"></canvas>
|
||||||
</view>
|
</view>
|
||||||
<view class="sigh-btns">
|
<view class="sigh-btns">
|
||||||
<van-button class="btn" type="default" @tap="handleCancel">取消</van-button>
|
<view class="btn qx" @click="handleCancel">取消</view>
|
||||||
<van-button class="btn" type="default" @tap="handleReset">重写</van-button>
|
<view class="btn qc" @click="handleReset">清除</view>
|
||||||
<van-button class="btn" type="default" @tap="handleConfirm">确认</van-button>
|
<view class="btn bc" @click="handleConfirm">保存</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -215,6 +215,10 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
page {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
height: calc(100vh - 68px);
|
height: calc(100vh - 68px);
|
||||||
padding-bottom: 30px;
|
padding-bottom: 30px;
|
||||||
|
|
@ -236,21 +240,43 @@
|
||||||
.sigh-btns {
|
.sigh-btns {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 80px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
margin: 10px 10px 0;
|
margin: 15.5px 17px;
|
||||||
|
width: 200px;
|
||||||
|
height: 49px;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 18px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 49px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/.van-button {
|
.qx {
|
||||||
width: 100px;
|
background-color: #eee;
|
||||||
height: 50px;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.qc {
|
||||||
|
color: #0067CF;
|
||||||
|
background-color: rgba(0, 103, 207, 0.10);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bc {
|
||||||
|
color: #fff;
|
||||||
|
background: #0067CF;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.mycanvas {
|
.mycanvas {
|
||||||
margin: auto 0rpx;
|
margin: auto 0rpx;
|
||||||
background-color: #ececec;
|
background-color: #fbfbfb;
|
||||||
|
border: 1px dashed #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
.canvsborder {
|
.canvsborder {
|
||||||
|
|
|
||||||
|
|
@ -11,9 +11,9 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="sigh-btns">
|
<view class="sigh-btns">
|
||||||
<van-button class="btn" type="default" @tap="handleCancel">取消</van-button>
|
<view class="btn qx" @click="handleCancel">取消</view>
|
||||||
<van-button class="btn" type="default" @tap="handleReset">重写</van-button>
|
<view class="btn qc" @click="handleReset">清除</view>
|
||||||
<van-button class="btn" type="default" @tap="handleConfirm">确认</van-button>
|
<view class="btn bc" @click="handleConfirm">保存</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -47,6 +47,7 @@
|
||||||
if ('params' in options) {
|
if ('params' in options) {
|
||||||
// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
|
// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
|
||||||
this.imgUrl = JSON.parse(decodeURIComponent(options.params)).imgUrl
|
this.imgUrl = JSON.parse(decodeURIComponent(options.params)).imgUrl
|
||||||
|
console.log(this.imgUrl)
|
||||||
}
|
}
|
||||||
this.loginObj = uni.getStorageSync('loginObj')
|
this.loginObj = uni.getStorageSync('loginObj')
|
||||||
if (this.imgUrl == "") {
|
if (this.imgUrl == "") {
|
||||||
|
|
@ -67,7 +68,8 @@
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
if (res.statusCode == 200) {
|
if (res.statusCode == 200) {
|
||||||
this.imgUrl = res.data
|
this.imgUrl = res.data
|
||||||
this.init(this.imgUrl)
|
console.log(this.imgUrl)
|
||||||
|
this.init()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
@ -107,7 +109,6 @@
|
||||||
//每次触摸开始，开启新的路径
|
//每次触摸开始，开启新的路径
|
||||||
this.ctx.beginPath();
|
this.ctx.beginPath();
|
||||||
},
|
},
|
||||||
|
|
||||||
//触摸移动，获取到路径点
|
//触摸移动，获取到路径点
|
||||||
touchmove: function(e) {
|
touchmove: function(e) {
|
||||||
let moveX = e.changedTouches[0].x;
|
let moveX = e.changedTouches[0].x;
|
||||||
|
|
@ -123,12 +124,10 @@
|
||||||
}
|
}
|
||||||
tempPoint.push(movePoint);
|
tempPoint.push(movePoint);
|
||||||
},
|
},
|
||||||
|
|
||||||
// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
|
// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
|
||||||
touchend: function() {
|
touchend: function() {
|
||||||
this.points = [];
|
this.points = [];
|
||||||
},
|
},
|
||||||
|
|
||||||
/* ***********************************************
|
/* ***********************************************
|
||||||
# 绘制笔迹
|
# 绘制笔迹
|
||||||
# 1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
|
# 1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
|
||||||
|
|
@ -146,16 +145,15 @@
|
||||||
this.ctx.stroke();
|
this.ctx.stroke();
|
||||||
this.ctx.draw(true);
|
this.ctx.draw(true);
|
||||||
},
|
},
|
||||||
|
|
||||||
handleCancel() {
|
handleCancel() {
|
||||||
uni.navigateBack({
|
uni.navigateBack({
|
||||||
delta: 1
|
delta: 1
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
//清空画布
|
//清空画布
|
||||||
handleReset: function() {
|
handleReset: function() {
|
||||||
var that = this
|
var that = this
|
||||||
|
that.points = []
|
||||||
uni.request({
|
uni.request({
|
||||||
url: `${that.$local}/api/miniapp/typeRef/domain/REFERENCE_DIAGRAM`,
|
url: `${that.$local}/api/miniapp/typeRef/domain/REFERENCE_DIAGRAM`,
|
||||||
header: {
|
header: {
|
||||||
|
|
@ -172,12 +170,11 @@
|
||||||
// that.ctx.clearRect(0, 0, 624, 224);
|
// that.ctx.clearRect(0, 0, 624, 224);
|
||||||
// that.ctx.draw(true);
|
// that.ctx.draw(true);
|
||||||
// tempPoint = [];
|
// tempPoint = [];
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
//将签名笔迹上传到服务器，并将返回来的地址存到本地
|
//将签名笔迹上传到服务器，并将返回来的地址存到本地
|
||||||
handleConfirm: function() {
|
handleConfirm: function() {
|
||||||
let that = this
|
let that = this
|
||||||
|
console.log(that.points)
|
||||||
uni.canvasToTempFilePath({
|
uni.canvasToTempFilePath({
|
||||||
canvasId: 'mycanvas',
|
canvasId: 'mycanvas',
|
||||||
success: function(e) {
|
success: function(e) {
|
||||||
|
|
@ -195,32 +192,18 @@
|
||||||
console.error(error)
|
console.error(error)
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
}
|
||||||
base64ToFile(base64, name) {
|
|
||||||
if (typeof base64 != 'string') {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var arr = base64.split(',')
|
|
||||||
var type = arr[0].match(/:(.*?);/)[1]
|
|
||||||
var fileExt = type.split('/')[1]
|
|
||||||
var bstr = atob(arr[1])
|
|
||||||
var n = bstr.length
|
|
||||||
var u8arr = new Uint8Array(n)
|
|
||||||
while (n--) {
|
|
||||||
u8arr[n] = bstr.charCodeAt(n)
|
|
||||||
}
|
|
||||||
return new File([u8arr], `${name}.` + fileExt, {
|
|
||||||
type: type
|
|
||||||
})
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
page {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
height: calc(100vh - 68px);
|
height: calc(100vh - 68px);
|
||||||
padding-bottom: 30px;
|
padding-bottom: 30px;
|
||||||
|
|
@ -241,26 +224,42 @@
|
||||||
.sigh-btns {
|
.sigh-btns {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 80px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
margin: 100px 10px 0;
|
margin: 15.5px 17px;
|
||||||
|
width: 200px;
|
||||||
|
height: 49px;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 18px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 49px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/.van-button {
|
.qx {
|
||||||
width: 100px;
|
background-color: #eee;
|
||||||
height: 50px;
|
}
|
||||||
background-color: #fff;
|
|
||||||
|
.qc {
|
||||||
|
color: #0067CF;
|
||||||
|
background-color: rgba(0, 103, 207, 0.10);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bc {
|
||||||
|
color: #fff;
|
||||||
|
background: #0067CF;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mycanvas {
|
.mycanvas {
|
||||||
margin: auto 0rpx;
|
margin: auto 0rpx;
|
||||||
background-color: transparent;
|
background-color: #fff;
|
||||||
margin-top: 130px;
|
border: 1px dashed #eee;
|
||||||
width: 624px;
|
|
||||||
height: 224px;
|
|
||||||
z-index: 999;
|
|
||||||
transform: scale(1.75)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.canvasBg {
|
.canvasBg {
|
||||||
|
|
|
||||||
|
|
@ -29,9 +29,9 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="status">
|
<view class="status">
|
||||||
<text v-if="item.handoverStatus==0" class="nStarted">● 未完成</text>
|
<p v-if="item.handoverStatus==0" class="dfs">未完成</p>
|
||||||
<text v-if="item.handoverStatus==1" class="green">● 进行中 </text>
|
<p v-if="item.handoverStatus==1" class="zyz">进行中</p>
|
||||||
<text v-if="item.handoverStatus==2" class="complete">● 已完成</text>
|
<p v-if="item.handoverStatus==2" class="ywc">已完成</p>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="row">
|
<view class="row">
|
||||||
|
|
@ -52,6 +52,9 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<template v-if="isMore">
|
||||||
|
<uni-load-more iconType="circle" status="loading" style="width: 100%;" />
|
||||||
|
</template>
|
||||||
</template>
|
</template>
|
||||||
<o-empty v-else height="70vh" bg="#f5f6fa" />
|
<o-empty v-else height="70vh" bg="#f5f6fa" />
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -60,13 +63,11 @@
|
||||||
@change="changePage" />
|
@change="changePage" />
|
||||||
</view> -->
|
</view> -->
|
||||||
</view>
|
</view>
|
||||||
<LotusLoading :lotusLoadingData="lotusLoadingData"></LotusLoading>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import LotusLoading from "../../components/Winglau14-lotusLoading/Winglau14-LotusLoading.vue";
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -110,9 +111,7 @@
|
||||||
pageSize: 12,
|
pageSize: 12,
|
||||||
current: 1,
|
current: 1,
|
||||||
|
|
||||||
lotusLoadingData: {
|
isMore: false,
|
||||||
isShow: false //设置显示加载中组件true显示false隐藏
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onBackPress(options) {
|
onBackPress(options) {
|
||||||
|
|
@ -126,10 +125,7 @@
|
||||||
onReachBottom() {
|
onReachBottom() {
|
||||||
this.current++
|
this.current++
|
||||||
this.initData()
|
this.initData()
|
||||||
this.lotusLoadingData.isShow = true
|
this.isMore = true
|
||||||
},
|
|
||||||
components: {
|
|
||||||
LotusLoading
|
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.loginObj = uni.getStorageSync('loginObj')
|
this.loginObj = uni.getStorageSync('loginObj')
|
||||||
|
|
@ -224,9 +220,10 @@
|
||||||
},
|
},
|
||||||
method: 'GET', //请求方式，必须为大写
|
method: 'GET', //请求方式，必须为大写
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
this.lotusLoadingData.isShow = false
|
this.isMore = false
|
||||||
this.total = res.data.data.total
|
this.total = res.data.data.total
|
||||||
this.itemList.push(...res.data.data.records)
|
this.itemList.push(...res.data.data.records)
|
||||||
|
console.log(this.itemList)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
@ -257,7 +254,6 @@
|
||||||
|
|
||||||
.form {
|
.form {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
|
||||||
|
|
||||||
.end {
|
.end {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -292,6 +288,7 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
|
padding-bottom: 50px;
|
||||||
|
|
||||||
/deep/.o-empty {
|
/deep/.o-empty {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -302,13 +299,13 @@
|
||||||
width: 32.2%;
|
width: 32.2%;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 10px 20px;
|
padding: 16px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 10px 0;
|
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
.titleft {
|
.titleft {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -331,29 +328,46 @@
|
||||||
.row {
|
.row {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
font-size: 14px;
|
|
||||||
padding: 10px 0;
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
|
||||||
.nitem {
|
.nitem {
|
||||||
width: 46%;
|
width: 49%;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
color: #999;
|
||||||
|
|
||||||
.text {
|
text {
|
||||||
color: #929292;
|
color: #23262e;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.status {
|
.status {
|
||||||
margin-top: 5px;
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 23px;
|
||||||
|
|
||||||
.nStarted {
|
p {
|
||||||
color: #bbb;
|
padding: 5px;
|
||||||
|
border-radius: 13px 0 0 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.complete {
|
.dfs {
|
||||||
color: #0067CF;
|
color: #0067CF;
|
||||||
|
background: #F1F8FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zyz {
|
||||||
|
color: #04B578;
|
||||||
|
background: #E8FFF7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ywc {
|
||||||
|
color: #666666;
|
||||||
|
background: #F7F7F7;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,9 +9,9 @@
|
||||||
class="canvsborder"></canvas>
|
class="canvsborder"></canvas>
|
||||||
</view>
|
</view>
|
||||||
<view class="sigh-btns">
|
<view class="sigh-btns">
|
||||||
<van-button class="btn" type="default" @tap="handleCancel">取消</van-button>
|
<view class="btn qx" @click="handleCancel">取消</view>
|
||||||
<van-button class="btn" type="default" @tap="handleReset">重写</van-button>
|
<view class="btn qc" @click="handleReset">清除</view>
|
||||||
<van-button class="btn" type="default" @tap="handleConfirm">确认</van-button>
|
<view class="btn bc" @click="handleConfirm">保存</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -237,6 +237,10 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
page {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
height: calc(100vh - 68px);
|
height: calc(100vh - 68px);
|
||||||
padding-bottom: 30px;
|
padding-bottom: 30px;
|
||||||
|
|
@ -258,21 +262,43 @@
|
||||||
.sigh-btns {
|
.sigh-btns {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 80px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
margin: 10px 10px 0;
|
margin: 15.5px 17px;
|
||||||
|
width: 200px;
|
||||||
|
height: 49px;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 18px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 49px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/.van-button {
|
.qx {
|
||||||
width: 100px;
|
background-color: #eee;
|
||||||
height: 50px;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.qc {
|
||||||
|
color: #0067CF;
|
||||||
|
background-color: rgba(0, 103, 207, 0.10);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bc {
|
||||||
|
color: #fff;
|
||||||
|
background: #0067CF;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.mycanvas {
|
.mycanvas {
|
||||||
margin: auto 0rpx;
|
margin: auto 0rpx;
|
||||||
background-color: #ececec;
|
background-color: #fbfbfb;
|
||||||
|
border: 1px dashed #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
.canvsborder {
|
.canvsborder {
|
||||||
|
|
|
||||||
|
|
@ -45,11 +45,10 @@
|
||||||
@confirm="delConfirm"></uni-popup-dialog>
|
@confirm="delConfirm"></uni-popup-dialog>
|
||||||
</uni-popup>
|
</uni-popup>
|
||||||
<view class="btnList">
|
<view class="btnList">
|
||||||
<van-button type="default" @click="cancel">取消</van-button>
|
<view class="btn qx" @click="cancel">取消</view>
|
||||||
<van-button type="danger" v-if="obj.state == 'look'" @click="del">删除</van-button>
|
<view class="btn sc" v-if="obj.state == 'look'" @click="del">删除</view>
|
||||||
<van-button type="info" v-if="obj.state == 'add' || obj.state == 'edit'"
|
<view class="btn bc" v-if="obj.state == 'add' || obj.state == 'edit'" @click="save">保存</view>
|
||||||
@click="save">保存</van-button>
|
<view class="btn bc" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</view>
|
||||||
<van-button type="info" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</van-button>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -348,11 +347,30 @@
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
|
||||||
|
|
||||||
/deep/ .van-button {
|
.btn {
|
||||||
margin: 15px 20px;
|
margin: 15.5px 17px;
|
||||||
width: 120px;
|
width: 200px;
|
||||||
height: 50px;
|
height: 49px;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 18px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 49px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qx {
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sc {
|
||||||
|
background-color: #E50101;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bc {
|
||||||
|
color: #fff;
|
||||||
|
background: #0067CF;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -490,14 +490,14 @@
|
||||||
|
|
||||||
.drawerTop {
|
.drawerTop {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-top: 55px;
|
margin-top: 24px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
|
|
||||||
image {
|
image {
|
||||||
width: 14px;
|
width: 10px;
|
||||||
height: 24px;
|
height: 14px;
|
||||||
margin-right: 16px;
|
margin-right: 10px;
|
||||||
margin-top: 3px;
|
margin-top: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
text {
|
text {
|
||||||
|
|
@ -542,6 +542,7 @@
|
||||||
height: 40px;
|
height: 40px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
background-color: #f7f7f7;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -82,6 +82,9 @@
|
||||||
<uni-popup-message :type="msgType" :message="popupText"
|
<uni-popup-message :type="msgType" :message="popupText"
|
||||||
:duration="2000"></uni-popup-message>
|
:duration="2000"></uni-popup-message>
|
||||||
</uni-popup>
|
</uni-popup>
|
||||||
|
<template v-if="isMore">
|
||||||
|
<uni-load-more iconType="circle" status="loading" style="width: 100%;" />
|
||||||
|
</template>
|
||||||
</template>
|
</template>
|
||||||
<o-empty v-else height="70vh" bg="#f5f6fa" />
|
<o-empty v-else height="70vh" bg="#f5f6fa" />
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -189,7 +192,7 @@
|
||||||
jcList: ["shipInfoTable", "voyageScheduleDataPadRespDTO", "voyageScheduleDataDetailRespDTOList",
|
jcList: ["shipInfoTable", "voyageScheduleDataPadRespDTO", "voyageScheduleDataDetailRespDTOList",
|
||||||
"shipmentBasicShiftList", "shipOption"
|
"shipmentBasicShiftList", "shipOption"
|
||||||
],
|
],
|
||||||
|
isMore: false,
|
||||||
lotusLoadingData: {
|
lotusLoadingData: {
|
||||||
isShow: false //设置显示加载中组件true显示false隐藏
|
isShow: false //设置显示加载中组件true显示false隐藏
|
||||||
}
|
}
|
||||||
|
|
@ -202,7 +205,7 @@
|
||||||
onReachBottom() {
|
onReachBottom() {
|
||||||
this.current++
|
this.current++
|
||||||
this.initData()
|
this.initData()
|
||||||
this.lotusLoadingData.isShow = true
|
this.isMore = true
|
||||||
},
|
},
|
||||||
onBackPress(options) {
|
onBackPress(options) {
|
||||||
// 触发返回就会调用此方法，这里实现的是禁用物理返回，顶部导航栏的自定义返回 uni.navigateBack 仍可使用
|
// 触发返回就会调用此方法，这里实现的是禁用物理返回，顶部导航栏的自定义返回 uni.navigateBack 仍可使用
|
||||||
|
|
@ -261,7 +264,7 @@
|
||||||
method: 'GET', //请求方式，必须为大写
|
method: 'GET', //请求方式，必须为大写
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
if (res.statusCode === 200) {
|
if (res.statusCode === 200) {
|
||||||
this.lotusLoadingData.isShow = false
|
this.isMore = false
|
||||||
this.total = res.data.data.total
|
this.total = res.data.data.total
|
||||||
if (flag && flag == 'new') {
|
if (flag && flag == 'new') {
|
||||||
this.pageSize = 12
|
this.pageSize = 12
|
||||||
|
|
@ -1085,7 +1088,6 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: #f5f6fa;
|
background: #f5f6fa;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 66px;
|
top: 66px;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
|
@ -1121,7 +1123,8 @@
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
margin-top: 30px;
|
margin-top: 40px;
|
||||||
|
padding-bottom: 50px;
|
||||||
|
|
||||||
/deep/.o-empty {
|
/deep/.o-empty {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -1133,13 +1136,12 @@
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 10px 5px;
|
padding: 16px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 10px 20px;
|
margin-bottom: 24px;
|
||||||
margin-bottom: 10px;
|
|
||||||
|
|
||||||
image {
|
image {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
|
|
@ -1158,25 +1160,29 @@
|
||||||
.row {
|
.row {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
font-size: 14px;
|
font-size: 16px;
|
||||||
padding: 0px 16px;
|
margin-bottom: 12px;
|
||||||
|
|
||||||
.nitem {
|
.nitem {
|
||||||
width: 46%;
|
width: 46%;
|
||||||
margin-bottom: 12px;
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
color: #999;
|
||||||
|
|
||||||
.text {
|
text {
|
||||||
color: #929292;
|
color: #23262e;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 42px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
border-top: 1px solid #EEEEEE;
|
border-top: 1px solid #EEEEEE;
|
||||||
padding-top: 10px;
|
padding-top: 14px;
|
||||||
|
|
||||||
.fitem {
|
.fitem {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -57,12 +57,12 @@
|
||||||
@confirm="delConfirm"></uni-popup-dialog>
|
@confirm="delConfirm"></uni-popup-dialog>
|
||||||
</uni-popup>
|
</uni-popup>
|
||||||
<view class="btnList">
|
<view class="btnList">
|
||||||
<van-button type="default" @click="cancel">取消</van-button>
|
<view class="btn qx" @click="cancel">取消</view>
|
||||||
<template v-if="status == 0 || status == 4 || status == 5 || status == 'null'">
|
<template v-if="status == 0 || status == 4 || status == 5 || status == 'null'">
|
||||||
<van-button type="danger" v-if="obj.state == 'look'" @click="del">删除</van-button>
|
<view class="btn sc" v-if="obj.state == 'look'" @click="del">删除</view>
|
||||||
<van-button type="info" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</van-button>
|
<view class="btn bc" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</view>
|
||||||
<van-button type="info" v-if="obj.state == 'add' || obj.state == 'edit'"
|
<view class="btn bc" v-if="obj.state == 'add' || obj.state == 'edit'" @click="save">
|
||||||
@click="save">保存</van-button>
|
保存</view>
|
||||||
</template>
|
</template>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -405,11 +405,30 @@
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
|
||||||
|
|
||||||
/deep/ .van-button {
|
.btn {
|
||||||
margin: 15px 20px;
|
margin: 15.5px 17px;
|
||||||
width: 120px;
|
width: 200px;
|
||||||
height: 50px;
|
height: 49px;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 18px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 49px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qx {
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sc {
|
||||||
|
background-color: #E50101;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bc {
|
||||||
|
color: #fff;
|
||||||
|
background: #0067CF;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -91,7 +91,6 @@
|
||||||
</view>
|
</view>
|
||||||
</custom-tab-pane>
|
</custom-tab-pane>
|
||||||
</custom-tabs>
|
</custom-tabs>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -34,11 +34,10 @@
|
||||||
@confirm="delConfirm"></uni-popup-dialog>
|
@confirm="delConfirm"></uni-popup-dialog>
|
||||||
</uni-popup>
|
</uni-popup>
|
||||||
<view class="btnList">
|
<view class="btnList">
|
||||||
<van-button type="default" @click="cancel">取消</van-button>
|
<view class="btn qx" @click="cancel">取消</view>
|
||||||
<van-button type="danger" v-if="obj.state == 'look'" @click="del">删除</van-button>
|
<view class="btn sc" v-if="obj.state == 'look'" @click="del">删除</view>
|
||||||
<van-button type="info" v-if="obj.state == 'add' || obj.state == 'edit'"
|
<view class="btn bc" v-if="obj.state == 'add' || obj.state == 'edit'" @click="save">保存</view>
|
||||||
@click="save">保存</van-button>
|
<view class="btn bc" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</view>
|
||||||
<van-button type="info" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</van-button>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -310,11 +309,30 @@
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
|
||||||
|
|
||||||
/deep/ .van-button {
|
.btn {
|
||||||
margin: 15px 20px;
|
margin: 15.5px 17px;
|
||||||
width: 120px;
|
width: 200px;
|
||||||
height: 50px;
|
height: 49px;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 18px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 49px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qx {
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sc {
|
||||||
|
background-color: #E50101;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bc {
|
||||||
|
color: #fff;
|
||||||
|
background: #0067CF;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -56,11 +56,10 @@
|
||||||
@confirm="delConfirm"></uni-popup-dialog>
|
@confirm="delConfirm"></uni-popup-dialog>
|
||||||
</uni-popup>
|
</uni-popup>
|
||||||
<view class="btnList">
|
<view class="btnList">
|
||||||
<van-button type="default" @click="cancel">取消</van-button>
|
<view class="btn qx" @click="cancel">取消</view>
|
||||||
<van-button type="danger" v-if="obj.state == 'look'" @click="del">删除</van-button>
|
<view class="btn sc" v-if="obj.state == 'look'" @click="del">删除</view>
|
||||||
<van-button type="info" v-if="obj.state == 'add' || obj.state == 'edit'"
|
<view class="btn bc" v-if="obj.state == 'add' || obj.state == 'edit'" @click="save">保存</view>
|
||||||
@click="save">保存</van-button>
|
<view class="btn bc" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</view>
|
||||||
<van-button type="info" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</van-button>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -397,11 +396,30 @@
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
|
||||||
|
|
||||||
/deep/ .van-button {
|
.btn {
|
||||||
margin: 15px 20px;
|
margin: 15.5px 17px;
|
||||||
width: 120px;
|
width: 200px;
|
||||||
height: 50px;
|
height: 49px;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 18px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 49px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qx {
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sc {
|
||||||
|
background-color: #E50101;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bc {
|
||||||
|
color: #fff;
|
||||||
|
background: #0067CF;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -53,11 +53,10 @@
|
||||||
@confirm="delConfirm"></uni-popup-dialog>
|
@confirm="delConfirm"></uni-popup-dialog>
|
||||||
</uni-popup>
|
</uni-popup>
|
||||||
<view class="btnList">
|
<view class="btnList">
|
||||||
<van-button type="default" @click="cancel">取消</van-button>
|
<view class="btn qx" @click="cancel">取消</view>
|
||||||
<van-button type="danger" v-if="obj.state == 'look'" @click="del">删除</van-button>
|
<view class="btn sc" v-if="obj.state == 'look'" @click="del">删除</view>
|
||||||
<van-button type="info" v-if="obj.state == 'add' || obj.state == 'edit'"
|
<view class="btn bc" v-if="obj.state == 'add' || obj.state == 'edit'" @click="save">保存</view>
|
||||||
@click="save">保存</van-button>
|
<view class="btn bc" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</view>
|
||||||
<van-button type="info" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</van-button>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -448,6 +447,16 @@
|
||||||
height: 120px !important;
|
height: 120px !important;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/deep/.is-add {
|
||||||
|
background: url(../../static/images/xjpz.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
border: 1px solid transparent !important;
|
||||||
|
|
||||||
|
.is-add {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pictureLook {
|
.pictureLook {
|
||||||
|
|
@ -499,13 +508,30 @@
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border: 1px solid #E1E5ED;
|
box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
|
||||||
box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.05);
|
|
||||||
|
|
||||||
/deep/ .van-button {
|
.btn {
|
||||||
margin: 15px 20px;
|
margin: 15.5px 17px;
|
||||||
width: 120px;
|
width: 200px;
|
||||||
height: 50px;
|
height: 49px;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 18px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 49px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qx {
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sc {
|
||||||
|
background-color: #E50101;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bc {
|
||||||
|
color: #fff;
|
||||||
|
background: #0067CF;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -58,12 +58,11 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="btnList">
|
<view class="btnList">
|
||||||
<van-button type="default" @click="cancel">取消</van-button>
|
<view class="btn qx" @click="cancel">取消</view>
|
||||||
<template v-if="status == 0 || status == 4 || status == 5 || status == 'null'">
|
<template v-if="status == 0 || status == 4 || status == 5 || status == 'null'">
|
||||||
<van-button type="danger" v-if="obj.state == 'look'" @click="del">删除</van-button>
|
<view class="btn sc" v-if="obj.state == 'look'" @click="del">删除</view>
|
||||||
<van-button type="info" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</van-button>
|
<view class="btn bc" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</view>
|
||||||
<van-button type="info" v-if="obj.state == 'add' || obj.state == 'edit'"
|
<view class="btn bc" v-if="obj.state == 'add' || obj.state == 'edit'" @click="save">保存</view>
|
||||||
@click="save">保存</van-button>
|
|
||||||
</template>
|
</template>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -507,11 +506,30 @@
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
|
||||||
|
|
||||||
/deep/ .van-button {
|
.btn {
|
||||||
margin: 15px 20px;
|
margin: 15.5px 17px;
|
||||||
width: 120px;
|
width: 200px;
|
||||||
height: 50px;
|
height: 49px;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 18px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 49px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qx {
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sc{
|
||||||
|
background-color: #E50101;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bc {
|
||||||
|
color: #fff;
|
||||||
|
background: #0067CF;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -240,8 +240,8 @@
|
||||||
</van-tabs>
|
</van-tabs>
|
||||||
</view>
|
</view>
|
||||||
<view class="btnList">
|
<view class="btnList">
|
||||||
<van-button type="default" @click="cancel">取消</van-button>
|
<view class="btn qx" @click="cancel">取消</view>
|
||||||
<van-button type="info" @click="save">保存</van-button>
|
<view class="btn bc" @click="save">保存</view>
|
||||||
</view>
|
</view>
|
||||||
<LotusLoading :lotusLoadingData="lotusLoadingData"></LotusLoading>
|
<LotusLoading :lotusLoadingData="lotusLoadingData"></LotusLoading>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -1710,21 +1710,33 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.btnList {
|
.btnList {
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: 20px;
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 100%;
|
left: 0;
|
||||||
|
right: 0;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
line-height: 80px;
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
|
box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
|
||||||
|
|
||||||
/deep/ .van-button {
|
.btn {
|
||||||
margin: 0px 20px;
|
margin: 15.5px 17px;
|
||||||
width: 120px;
|
width: 200px;
|
||||||
height: 50px;
|
height: 49px;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 18px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 49px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qx {
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bc {
|
||||||
|
color: #fff;
|
||||||
|
background: #0067CF;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -197,10 +197,10 @@
|
||||||
@confirm="delConfirm"></uni-popup-dialog>
|
@confirm="delConfirm"></uni-popup-dialog>
|
||||||
</uni-popup>
|
</uni-popup>
|
||||||
<view class="btnList">
|
<view class="btnList">
|
||||||
<van-button type="default" @click="cancel">取消</van-button>
|
<view class="btn qx" @click="cancel">取消</view>
|
||||||
<template v-if="status == 0 || status == 4 || status == 5 || status == 'null'">
|
<template v-if="status == 0 || status == 4 || status == 5 || status == 'null'">
|
||||||
<!-- <van-button type="danger" @click="del">删除</van-button> -->
|
<!-- <view class="btn sc" @click="del">删除</view> -->
|
||||||
<van-button type="info" @click="edit('edit')">编辑</van-button>
|
<view class="btn bc" @click="edit('edit')">编辑</view>
|
||||||
</template>
|
</template>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -486,21 +486,38 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.btnList {
|
.btnList {
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: 20px;
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 100%;
|
left: 0;
|
||||||
|
right: 0;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
line-height: 80px;
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
|
box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
|
||||||
|
|
||||||
/deep/ .van-button {
|
.btn {
|
||||||
margin: 0px 20px;
|
margin: 15.5px 17px;
|
||||||
width: 120px;
|
width: 200px;
|
||||||
height: 50px;
|
height: 49px;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 18px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 49px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qx {
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sc {
|
||||||
|
background-color: #E50101;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bc {
|
||||||
|
color: #fff;
|
||||||
|
background: #0067CF;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,22 +3,68 @@
|
||||||
<head-view :title="title" url="/pages/shipWork/documentList"></head-view>
|
<head-view :title="title" url="/pages/shipWork/documentList"></head-view>
|
||||||
<view class="container contentFixed">
|
<view class="container contentFixed">
|
||||||
<view class="ul">
|
<view class="ul">
|
||||||
<view class="li">船名：{{shipInfo.vslCnname}}</view>
|
<view class="li">
|
||||||
<view class="li">总重：{{shipInfo.vslGton}}</view>
|
<p>船名：</p><text>{{shipInfo.vslCnname}}</text>
|
||||||
<view class="li">净重：{{shipInfo.vslNetton}}</view>
|
</view>
|
||||||
<view class="li">长度：{{shipInfo.vslLoa}}</view>
|
<view class="li">
|
||||||
<view class="li">宽度：{{shipInfo.vslBreadth}}</view>
|
<p>总重：</p><text>{{shipInfo.vslGton}}</text>
|
||||||
<view class="li">空载吃水：{{shipInfo.vslDraftunload}}</view>
|
</view>
|
||||||
<view class="li">重载吃水：{{shipInfo.vslDraftload}}</view>
|
<view class="li">
|
||||||
<view class="li">舱口高度：{{shipInfo.spmCabinht}}</view>
|
<p>净重：</p>
|
||||||
<view class="li">最低作业潮水：{{shipInfo.spmMintide}}</view>
|
<text>{{shipInfo.vslNetton}}</text>
|
||||||
<view class="li">驾驶台位置：{{shipInfo.spmCab}}</view>
|
</view>
|
||||||
<view class="li">跳板中左：{{shipInfo.spmBoardCentrele}}</view>
|
<view class="li">
|
||||||
<view class="li">跳板前左：{{shipInfo.spmBoardFrontle}}</view>
|
<p>长度：</p>
|
||||||
<view class="li">跳板后左：{{shipInfo.spmBoardLaterle}}</view>
|
<text>{{shipInfo.vslLoa}}</text>
|
||||||
<view class="li">跳板中右：{{shipInfo.spmBoardCentrerg}}</view>
|
</view>
|
||||||
<view class="li">跳板后右 ：{{shipInfo.spmBoardLaterrg}}</view>
|
<view class="li">
|
||||||
<view class="li">跳板前右：{{shipInfo.spmBoardFrontrg}}</view>
|
<p>宽度：</p>
|
||||||
|
<text>{{shipInfo.vslBreadth}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p>空载吃水：</p>
|
||||||
|
<text>{{shipInfo.vslDraftunload}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p>重载吃水：</p>
|
||||||
|
<text>{{shipInfo.vslDraftload}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p>舱口高度：</p>
|
||||||
|
<text>{{shipInfo.spmCabinht}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p>最低作业潮水：</p>
|
||||||
|
<text>{{shipInfo.spmMintide}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p>驾驶台位置：</p>
|
||||||
|
<text>{{shipInfo.spmCab}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p>跳板中左：</p>
|
||||||
|
<text>{{shipInfo.spmBoardCentrele}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p>跳板前左：</p>
|
||||||
|
<text>{{shipInfo.spmBoardFrontle}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p>跳板后左：</p>
|
||||||
|
<text>{{shipInfo.spmBoardLaterle}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p>跳板中右：</p>
|
||||||
|
<text>{{shipInfo.spmBoardCentrerg}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p>跳板后右 ：</p>
|
||||||
|
<text>{{shipInfo.spmBoardLaterrg}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p>跳板前右：</p>
|
||||||
|
<text>{{shipInfo.spmBoardFrontrg}}</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -59,16 +105,30 @@
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.shipInfo {
|
.shipInfo {
|
||||||
.container {
|
.container {
|
||||||
padding: 30px 20px;
|
padding: 16px;
|
||||||
|
|
||||||
.ul {
|
.ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
padding: 0 20px;
|
padding: 24px 16px;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
.li {
|
.li {
|
||||||
min-width: 45%;
|
width: 32%;
|
||||||
margin: 10px 20px;
|
margin-bottom: 12px;
|
||||||
|
display: flex;
|
||||||
|
font-size: 14px;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #23262E;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,38 +2,127 @@
|
||||||
<view class="shipPlan">
|
<view class="shipPlan">
|
||||||
<head-view :title="title" url="/pages/shipWork/documentList"></head-view>
|
<head-view :title="title" url="/pages/shipWork/documentList"></head-view>
|
||||||
<view class="container contentFixed">
|
<view class="container contentFixed">
|
||||||
<p class="title">基本信息</p>
|
<view class="liBox">
|
||||||
<view class="ul">
|
<p class="title">基本信息</p>
|
||||||
<view class="li wLi">船名：{{shipInfo.spmName}}</view>
|
<view class="ul">
|
||||||
<view v-for="(item,index) in vvyList" :key="index">
|
<view class="li wLi">
|
||||||
<view class="li">{{item.importExportFlagName}}航次：{{item.vvyName}}</view>
|
<p>船名：</p>
|
||||||
<view class="li">贸易类型：{{item.tradeTypeName}}</view>
|
<text v-if="shipInfo.spmName != 'null'">{{shipInfo.spmName}}</text>
|
||||||
<view class="li">航线：{{item.lcoName}}</view>
|
<text v-else>-</text>
|
||||||
<view class="li">船公司：{{item.shipComName}}</view>
|
</view>
|
||||||
<view class="li wLi">船代：{{item.shipAgentName}}</view>
|
<view class="liContent" v-for="(item,index) in vvyList" :key="index">
|
||||||
|
<view class="li">
|
||||||
|
<p>{{item.importExportFlagName}}航次：</p>
|
||||||
|
<text v-if="item.vvyName != 'null'">{{item.vvyName}}</text>
|
||||||
|
<text v-else>-</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p>贸易类型：</p>
|
||||||
|
<text v-if="item.tradeTypeName != 'null'">{{item.tradeTypeName}}</text>
|
||||||
|
<text v-else>-</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p>航线：</p>
|
||||||
|
<text v-if="item.lcoName != 'null'">{{item.lcoName}}</text>
|
||||||
|
<text v-else>-</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p>船公司：</p>
|
||||||
|
<text v-if="item.shipComName != 'null'">{{item.shipComName}}</text>
|
||||||
|
<text v-else>-</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p>船代：</p>
|
||||||
|
<text v-if="item.shipAgentName != 'null'">{{item.shipAgentName}}</text>
|
||||||
|
<text v-else>-</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
<p class="title">船期信息</p>
|
<view class="liBox">
|
||||||
<view class="ul">
|
<p class="title">船期信息</p>
|
||||||
<view class="li">计划到港时间：{{shipInfo.planArrivePortTime}}</view>
|
<view class="ul">
|
||||||
<view class="li">计划离港时间：{{shipInfo.planDeparturePortTime}}</view>
|
<view class="li">
|
||||||
<view class="li">计划靠泊时间：{{shipInfo.planBerthingTime}}</view>
|
<p>计划到港时间：</p>
|
||||||
<view class="li">计划离泊时间：{{shipInfo.planAnchoringTime}}</view>
|
<text v-if="shipInfo.planArrivePortTime != 'null'">{{shipInfo.planArrivePortTime}}</text>
|
||||||
<view class="li">确报时间：{{shipInfo.confirmTime}}</view>
|
<text v-else>-</text>
|
||||||
<view class="li">船期状态：{{shipInfo.shipmentStatus}}</view>
|
</view>
|
||||||
<view class="li">靠泊状态：{{shipInfo.berthStatus}}</view>
|
<view class="li">
|
||||||
<view class="li">计划泊位：{{shipInfo.planBerthageName}}</view>
|
<p>计划离港时间：</p>
|
||||||
|
<text v-if="shipInfo.planDeparturePortTime != 'null'">{{shipInfo.planDeparturePortTime}}</text>
|
||||||
|
<text v-else>-</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p>计划靠泊时间：</p>
|
||||||
|
<text v-if="shipInfo.planBerthingTime != 'null'">{{shipInfo.planBerthingTime}}</text>
|
||||||
|
<text v-else>-</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p>计划离泊时间：</p>
|
||||||
|
<text v-if="shipInfo.planAnchoringTime != 'null'">{{shipInfo.planAnchoringTime}}</text>
|
||||||
|
<text v-else>-</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p>确报时间：</p>
|
||||||
|
<text v-if="shipInfo.confirmTime != 'null'">{{shipInfo.confirmTime}}</text>
|
||||||
|
<text v-else>-</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p>船期状态：</p>
|
||||||
|
<text v-if="shipInfo.shipmentStatus != 'null'">{{shipInfo.shipmentStatus}}</text>
|
||||||
|
<text v-else>-</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p>靠泊状态：</p>
|
||||||
|
<text v-if="shipInfo.berthStatus != 'null'">{{shipInfo.berthStatus}}</text>
|
||||||
|
<text v-else>-</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p>计划泊位：</p>
|
||||||
|
<text v-if="shipInfo.planBerthageName != 'null'">{{shipInfo.planBerthageName}}</text>
|
||||||
|
<text v-else>-</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<p class="title">计划信息</p>
|
<view class="liBox">
|
||||||
<view class="ul" v-for="(item,index) in vvyList" :key="index">
|
<p class="title">计划信息</p>
|
||||||
<view class="li">{{item.importExportFlagName}}航次：{{item.vvyName}}</view>
|
<view class="ul" v-for="(item,index) in vvyList" :key="index">
|
||||||
<view class="li">计划开工时间：{{item.planStartTime}}</view>
|
<view class="li">
|
||||||
<view class="li">计划完工时间：{{item.planFinishTime}}</view>
|
<p>{{item.importExportFlagName}}航次：</p>
|
||||||
<view class="li">品牌：{{item.vgdGoodName}}</view>
|
<text v-if="item.vvyName != 'null'">{{item.vvyName}}</text>
|
||||||
<view class="li">计划数量：{{item.planAmount}}</view>
|
<text v-else>-</text>
|
||||||
<view class="li">工班人数：{{item.planNum}}</view>
|
</view>
|
||||||
<view class="li">计划组数：{{item.teamNum}}</view>
|
<view class="li">
|
||||||
|
<p>计划开工时间：</p>
|
||||||
|
<text v-if="item.planStartTime != 'null'">{{item.planStartTime}}</text>
|
||||||
|
<text v-else>-</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p>计划完工时间：</p>
|
||||||
|
<text v-if="item.planFinishTime != 'null'">{{item.planFinishTime}}</text>
|
||||||
|
<text v-else>-</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p>品牌：</p>
|
||||||
|
<text v-if="item.vgdGoodName != 'null'">{{item.vgdGoodName}}</text>
|
||||||
|
<text v-else>-</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p>计划数量：</p>
|
||||||
|
<text v-if="item.planAmount != 'null'">{{item.planAmount}}</text>
|
||||||
|
<text v-else>-</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p>工班人数：</p>
|
||||||
|
<text v-if="item.planNum != 'null'">{{item.planNum}}</text>
|
||||||
|
<text v-else>-</text>
|
||||||
|
</view>
|
||||||
|
<view class="li">
|
||||||
|
<p>计划组数：</p>
|
||||||
|
<text v-if="item.teamNum != 'null'">{{item.teamNum}}</text>
|
||||||
|
<text v-else>-</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -80,28 +169,52 @@
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.shipPlan {
|
.shipPlan {
|
||||||
.container {
|
.container {
|
||||||
padding: 30px 20px;
|
padding: 16px;
|
||||||
|
|
||||||
.title {
|
.liBox {
|
||||||
padding-left: 10px;
|
width: 100%;
|
||||||
border-left: 5px solid #2979ff;
|
padding: 24px 16px;
|
||||||
font-size: 20px;
|
background-color: #fff;
|
||||||
font-weight: bold;
|
margin-bottom: 16px;
|
||||||
}
|
|
||||||
|
|
||||||
.ul {
|
.title {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
margin-bottom: 20px;
|
||||||
padding: 0 20px;
|
font-size: 18px;
|
||||||
margin-bottom: 20px;
|
font-weight: bold;
|
||||||
|
|
||||||
.li {
|
|
||||||
min-width: 45%;
|
|
||||||
margin: 10px 20px 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.wLi {
|
.ul {
|
||||||
width: 100%;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.liContent {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.li {
|
||||||
|
min-width: 32%;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
display: flex;
|
||||||
|
font-size: 14px;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #23262E;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wLi {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,9 +9,9 @@
|
||||||
class="canvsborder"></canvas>
|
class="canvsborder"></canvas>
|
||||||
</view>
|
</view>
|
||||||
<view class="sigh-btns">
|
<view class="sigh-btns">
|
||||||
<van-button class="btn" type="default" @tap="handleCancel">取消</van-button>
|
<view class="btn qx" @click="handleCancel">取消</view>
|
||||||
<van-button class="btn" type="default" @tap="handleReset">重写</van-button>
|
<view class="btn qc" @click="handleReset">清除</view>
|
||||||
<van-button class="btn" type="default" @tap="handleConfirm">确认</van-button>
|
<view class="btn bc" @click="handleConfirm">保存</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -206,6 +206,10 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
page {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
height: calc(100vh - 68px);
|
height: calc(100vh - 68px);
|
||||||
padding-bottom: 30px;
|
padding-bottom: 30px;
|
||||||
|
|
@ -228,21 +232,43 @@
|
||||||
.sigh-btns {
|
.sigh-btns {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 80px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
margin: 10px 10px 0;
|
margin: 15.5px 17px;
|
||||||
|
width: 200px;
|
||||||
|
height: 49px;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 18px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 49px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/.van-button {
|
.qx {
|
||||||
width: 100px;
|
background-color: #eee;
|
||||||
height: 50px;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.qc {
|
||||||
|
color: #0067CF;
|
||||||
|
background-color: rgba(0, 103, 207, 0.10);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bc {
|
||||||
|
color: #fff;
|
||||||
|
background: #0067CF;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.mycanvas {
|
.mycanvas {
|
||||||
margin: auto 0rpx;
|
margin: auto 0rpx;
|
||||||
background-color: #ececec;
|
background-color: #fbfbfb;
|
||||||
|
border: 1px dashed #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
.canvsborder {
|
.canvsborder {
|
||||||
|
|
|
||||||
|
|
@ -51,12 +51,11 @@
|
||||||
@confirm="delConfirm"></uni-popup-dialog>
|
@confirm="delConfirm"></uni-popup-dialog>
|
||||||
</uni-popup>
|
</uni-popup>
|
||||||
<view class="btnList">
|
<view class="btnList">
|
||||||
<van-button type="default" @click="cancel">取消</van-button>
|
<view class="btn qx" @click="cancel">取消</view>
|
||||||
<template v-if="status == 0 || status == 4 || status == 5 || status == 'null'">
|
<template v-if="status == 0 || status == 4 || status == 5 || status == 'null'">
|
||||||
<van-button type="danger" v-if="obj.state == 'look'" @click="del">删除</van-button>
|
<view class="btn sc" v-if="obj.state == 'look'" @click="del">删除</view>
|
||||||
<van-button type="info" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</van-button>
|
<view class="btn bc" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</view>
|
||||||
<van-button type="info" v-if="obj.state == 'add' || obj.state == 'edit'"
|
<view class="btn bc" v-if="obj.state == 'add' || obj.state == 'edit'" @click="save">保存</view>
|
||||||
@click="save">保存</van-button>
|
|
||||||
</template>
|
</template>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -396,11 +395,30 @@
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
|
||||||
|
|
||||||
/deep/ .van-button {
|
.btn {
|
||||||
margin: 15px 20px;
|
margin: 15.5px 17px;
|
||||||
width: 120px;
|
width: 200px;
|
||||||
height: 50px;
|
height: 49px;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 18px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 49px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qx {
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sc {
|
||||||
|
background-color: #E50101;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bc {
|
||||||
|
color: #fff;
|
||||||
|
background: #0067CF;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -63,12 +63,11 @@
|
||||||
@confirm="delConfirm"></uni-popup-dialog>
|
@confirm="delConfirm"></uni-popup-dialog>
|
||||||
</uni-popup>
|
</uni-popup>
|
||||||
<view class="btnList">
|
<view class="btnList">
|
||||||
<van-button type="default" @click="cancel">取消</van-button>
|
<view class="btn qx" @click="cancel">取消</view>
|
||||||
<template v-if="status == 0 || status == 4 || status == 5 || status == 'null'">
|
<template v-if="status == 0 || status == 4 || status == 5 || status == 'null'">
|
||||||
<van-button type="danger" v-if="obj.state == 'look'" @click="del">删除</van-button>
|
<view class="btn sc" v-if="obj.state == 'look'" @click="del">删除</view>
|
||||||
<van-button type="info" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</van-button>
|
<view class="btn bc" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</view>
|
||||||
<van-button type="info" v-if="obj.state == 'add' || obj.state == 'edit'"
|
<view class="btn bc" v-if="obj.state == 'add' || obj.state == 'edit'" @click="save">保存</view>
|
||||||
@click="save">保存</van-button>
|
|
||||||
</template>
|
</template>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -418,11 +417,30 @@
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
|
||||||
|
|
||||||
/deep/ .van-button {
|
.btn {
|
||||||
margin: 15px 20px;
|
margin: 15.5px 17px;
|
||||||
width: 120px;
|
width: 200px;
|
||||||
height: 50px;
|
height: 49px;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 18px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 49px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qx {
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sc {
|
||||||
|
background-color: #E50101;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bc {
|
||||||
|
color: #fff;
|
||||||
|
background: #0067CF;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -67,11 +67,10 @@
|
||||||
@confirm="delConfirm"></uni-popup-dialog>
|
@confirm="delConfirm"></uni-popup-dialog>
|
||||||
</uni-popup>
|
</uni-popup>
|
||||||
<view class="btnList">
|
<view class="btnList">
|
||||||
<van-button type="default" @click="cancel">取消</van-button>
|
<view class="btn qx" @click="cancel">取消</view>
|
||||||
<van-button type="danger" v-if="obj.state == 'look'" @click="del">删除</van-button>
|
<view class="btn sc" v-if="obj.state == 'look'" @click="del">删除</view>
|
||||||
<van-button type="info" v-if="obj.state == 'add' || obj.state == 'edit'"
|
<view class="btn bc" v-if="obj.state == 'add' || obj.state == 'edit'" @click="save">保存</view>
|
||||||
@click="save">保存</van-button>
|
<view class="btn bc" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</view>
|
||||||
<van-button type="info" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</van-button>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -448,11 +447,30 @@
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
|
||||||
|
|
||||||
/deep/ .van-button {
|
.btn {
|
||||||
margin: 15px 20px;
|
margin: 15.5px 17px;
|
||||||
width: 120px;
|
width: 200px;
|
||||||
height: 50px;
|
height: 49px;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 18px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 49px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qx {
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sc {
|
||||||
|
background-color: #E50101;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bc {
|
||||||
|
color: #fff;
|
||||||
|
background: #0067CF;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,150 @@
|
||||||
|
项目名称：海通Pad
|
||||||
|
项目描述：
|
||||||
|
技术架构描述：uni-app
|
||||||
|
|
||||||
|
外部组件列表及描述：
|
||||||
|
components/head-info 首页头部内容
|
||||||
|
参数：
|
||||||
|
navIndex 选中头部导航下标
|
||||||
|
|
||||||
|
components/head-view 内容头部，用于返回标题展示
|
||||||
|
参数：
|
||||||
|
title 标题
|
||||||
|
type 是否有下拉内容（船舶作业中用到）
|
||||||
|
url 跳转路径（不传则返回上一级）
|
||||||
|
|
||||||
|
components/lx-progress-bar 进度条（uni-app插件市场）
|
||||||
|
components/uni-drawer 抽屉（uni-app官方组件）
|
||||||
|
components/Winglau14-lotusLoading 全屏加载中（uni-app插件市场）
|
||||||
|
|
||||||
|
源代码清单：
|
||||||
|
登录：
|
||||||
|
pages/login/index 登录页
|
||||||
|
装船指令：
|
||||||
|
pages/index/index 装船指令首页
|
||||||
|
pages/index/instruct 装船指令内容
|
||||||
|
pages/index/instructDetails 装船指令指令详情
|
||||||
|
pages/index/place 装船指令场位图
|
||||||
|
卸船指令：
|
||||||
|
pages/discharge/index 卸船指令首页
|
||||||
|
pages/discharge/instruct 卸船指令内容
|
||||||
|
pages/discharge/instructDetails 卸船指令指令详情
|
||||||
|
船舶作业：
|
||||||
|
pages/shipWork/index 船舶作业首页
|
||||||
|
pages/shipWork/documentList 船舶作业内容列表选择
|
||||||
|
pages/shipWork/mixWork 杂项单证首页
|
||||||
|
pages/shipWork/peopleAdd 杂项单证人员信息新增查看编辑
|
||||||
|
pages/shipWork/shiftAdd 杂项单证工班信息新增编辑
|
||||||
|
pages/shipWork/shiftDetails 杂项单证工班信息查看
|
||||||
|
pages/shipWork/mixSign 杂项单证签名
|
||||||
|
pages/shipWork/untieCord 系解缆首页
|
||||||
|
pages/shipWork/untieAdd 系解缆新增查看编辑
|
||||||
|
pages/shipWork/untieSign 系解缆签名
|
||||||
|
pages/shipWork/supply 供给首页
|
||||||
|
pages/shipWork/supplyAdd 供给新增查看编辑
|
||||||
|
pages/shipWork/supplySign 供给签名
|
||||||
|
pages/shipWork/workAssign 指导员作业布置首页
|
||||||
|
pages/shipWork/workAssignAdd 指导员作业布置新增查看编辑
|
||||||
|
pages/shipWork/workAssignSign 指导员作业布置签名
|
||||||
|
pages/shipWork/notice 船舶装卸通知单首页
|
||||||
|
pages/shipWork/noticeAdd 船舶装卸通知单新增查看编辑
|
||||||
|
pages/shipWork/noticeSign 船舶装卸通知单签名
|
||||||
|
pages/shipWork/opinion 质量意见征询首页
|
||||||
|
pages/shipWork/opinionAdd 质量意见征询新增查看编辑
|
||||||
|
pages/shipWork/opinionSign 质量意见征询签名
|
||||||
|
pages/shipWork/abnormal 异常情况首页
|
||||||
|
pages/shipWork/abnormalAdd 异常情况新增查看编辑
|
||||||
|
pages/shipWork/abnormalSign 异常情况询签名
|
||||||
|
pages/shipWork/mafi MAFI清单首页
|
||||||
|
pages/shipWork/mafiAdd MAFI清单新增查看编辑
|
||||||
|
pages/shipWork/mafiSign MAFI清单询签名
|
||||||
|
pages/shipWork/sign 签名页
|
||||||
|
pages/shipWork/patrol 安全巡检首页
|
||||||
|
pages/shipWork/patrolAdd 安全巡检新增查看编辑
|
||||||
|
pages/shipWork/shipInfo 船舶资料
|
||||||
|
pages/shipWork/shipPlan 船舶计划
|
||||||
|
pages/shipWork/brandDetails 作业查询
|
||||||
|
pages/shipWork/carDetails 作业查询详情
|
||||||
|
残损信息：
|
||||||
|
pages/quality/index 残损信息首页
|
||||||
|
pages/quality/edit 残损信息新增编辑
|
||||||
|
pages/quality/details 残损信息详情
|
||||||
|
pages/quality/sign 残损信息签名
|
||||||
|
pages/quality/zsEdit 质损图编辑
|
||||||
|
场位管控：
|
||||||
|
pages/monitor/index 场位管控首页
|
||||||
|
pages/monitor/place 场位管控车道车位图
|
||||||
|
进出口货物交接单：
|
||||||
|
pages/receipt/index 进出口货物交接单首页
|
||||||
|
pages/receipt/details 进出口货物交接单详情
|
||||||
|
pages/receipt/sign 进出口货物交接单签名
|
||||||
|
|
||||||
|
接口使用清单：（接口地址：https://rtops4.haitongauto.com/tos/api/doc.html#/home）
|
||||||
|
登录
|
||||||
|
app登录：/api/app/login
|
||||||
|
获取港区：/api/app/user/getMinato
|
||||||
|
选择港区：/api/app/user/setMinato
|
||||||
|
|
||||||
|
装船指令（内贸）
|
||||||
|
总指令下发：/api/domestic/load/command/commandIssued
|
||||||
|
根据包id -> dlcId 指令暂停：/api/domestic/load/command/commandPause
|
||||||
|
分指令界面:重新发送指令：/api/domestic/load/command/commandReissuedForBranch
|
||||||
|
分指令界面:发送指令：/api/domestic/load/command/commandSendForBranch
|
||||||
|
内贸分页查询 flag：true-总指令-false分指令：/api/domestic/load/command/page
|
||||||
|
获取该工作包下所有货物明细数据：/api/domestic/load/command/pageForCargoDetails
|
||||||
|
根据指令id获取装船计划分组数据：/api/domestic/load/command/queryLoadPlanGroupForDclId
|
||||||
|
选择船：/api/domestic/load/command/queryLoadVoyages
|
||||||
|
装船指令（外贸）
|
||||||
|
总指令下发：/api/shipInstructions/commandIssued
|
||||||
|
根据包id -> lwpId 指令暂停：/api/shipInstructions/commandPause
|
||||||
|
分指令界面:重新发送指令：/api/shipInstructions/commandReissuedForBranch
|
||||||
|
分指令界面:发送指令：/api/shipInstructions/commandSendForBranch
|
||||||
|
配载详情：根据配载ID查询配载的货物明细信息：/api/shipInstructions/goodsDetail/page
|
||||||
|
货列表详情 基本信息-详细信息：/api/shipInstructions/listDetail
|
||||||
|
总指令：分页查询：/api/shipInstructions/page
|
||||||
|
装船指令-分指令分页：/api/shipInstructions/pageCommandForBranch
|
||||||
|
获取该工具包下所有货物明细数据：/api/shipInstructions/pageForCargoDetails
|
||||||
|
根据key条件查询出航次下拉框 条件：船名、船代码、航次 可根据ieType区分进出口：/api/shipInstructions/queryByKey
|
||||||
|
根据指令包 id 获取配给载数据：/api/shipInstructions/queryStowageForLwpId
|
||||||
|
获取装船指令航次数据：/api/shipInstructions/queryStowageVoyages
|
||||||
|
卸船指令：
|
||||||
|
总指令下发：/api/unload/command/commandIssued
|
||||||
|
根据包id -> lwpId 指令暂停：/api/unload/command/commandPause
|
||||||
|
分指令界面:重新发送指令：/api/unload/command/commandReissuedForBranch
|
||||||
|
分指令界面:发送指令：/api/unload/command/commandSendForBranch
|
||||||
|
卸船指令-总指令：分页查询：/api/unload/command/page
|
||||||
|
卸船指令-分指令分页：/api/unload/command/pageCommandForBranch
|
||||||
|
获取该工作包下所有货物明细数据：/api/unload/command/pageForCargoDetails
|
||||||
|
根据指令id获取卸船计划分组数据：/api/unload/command/queryShipUnloaderPlanGroupForLwpId
|
||||||
|
卸船指令选择船：获取卸船计划航次数据：/api/unload/command/queryUnloadVoyages
|
||||||
|
船舶作业：
|
||||||
|
pad-下载：/api/shipOperate/download
|
||||||
|
pad-获取港区：/api/shipOperate/queryPortArea
|
||||||
|
pad-装船作业-选择船-船名航次条件框：/api/shipOperate/queryShipmentVoyageData
|
||||||
|
pad-选择船：/api/shipOperate/select
|
||||||
|
pad-上传：/api/shipOperate/upload
|
||||||
|
安全巡检：
|
||||||
|
新增：/api/safetyInspection
|
||||||
|
安全巡检界面详情：/api/safetyInspection/details/{id}
|
||||||
|
分页查询：/api/safetyInspection/page
|
||||||
|
根据ID更新：/api/safetyInspection/{id}
|
||||||
|
安全巡检界面删除：/api/safetyInspection/{id}
|
||||||
|
场位管控：
|
||||||
|
场位异常货物信息：/api/yardGoods/monitor/error/list
|
||||||
|
释放堆场异常信息：/api/yardGoods/monitor/free/goods
|
||||||
|
在场货品牌：/api/yardGoods/monitor/goods/brand
|
||||||
|
货物列表：/api/yardGoods/monitor/goods/list
|
||||||
|
堆场下拉：/api/yardGoods/monitor/goods/manage/page
|
||||||
|
在场货港口：/api/yardGoods/monitor/goods/pot
|
||||||
|
车道统计车辆情况：/api/yardGoods/monitor/line/statistics
|
||||||
|
区域统计车辆情况：/api/yardGoods/monitor/region/statistics
|
||||||
|
车位统计车辆情况：/api/yardGoods/monitor/seat/statistics
|
||||||
|
场位概况：/api/yardGoods/monitor/situation
|
||||||
|
进出口货物交接单：
|
||||||
|
获取船只：/shp/iEDeliverySlipController/page
|
||||||
|
获取当前航次的船信息：/shp/iEDeliverySlipController/page
|
||||||
|
获取数据：/shp/iEDeliverySlipController/planPage
|
||||||
|
获取当前行的数据：/shp/iEDeliverySlipController/iEDeliverySlipPlanDamage
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
|
|
@ -4,7 +4,7 @@
|
||||||
<view :class="[direction==='column'?'uni-steps__column-text-container':'uni-steps__row-text-container']">
|
<view :class="[direction==='column'?'uni-steps__column-text-container':'uni-steps__row-text-container']">
|
||||||
<view v-for="(item,index) in options" :key="index"
|
<view v-for="(item,index) in options" :key="index"
|
||||||
:class="[direction==='column'?'uni-steps__column-text':'uni-steps__row-text']">
|
:class="[direction==='column'?'uni-steps__column-text':'uni-steps__row-text']">
|
||||||
<text :style="{color:index === active?activeColor:deactiveColor}"
|
<text :style="{color:index === active?activeColor:'#23262e'}"
|
||||||
:class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']">{{item.title}}</text>
|
:class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']">{{item.title}}</text>
|
||||||
<text :style="{color: deactiveColor}"
|
<text :style="{color: deactiveColor}"
|
||||||
:class="[direction==='column'?'uni-steps__column-desc':'uni-steps__row-desc']">{{item.desc}}</text>
|
:class="[direction==='column'?'uni-steps__column-desc':'uni-steps__row-desc']">{{item.desc}}</text>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue