| | |
| | | <template> |
| | | <view class="container"> |
| | | <uni-transition :duration="duration" :mode-class="homeMode" :show="homeViewShow"> |
| | | <view class="home-view"> |
| | | <view class="head"> |
| | | <text>自动仓库WCS监控平台</text> |
| | | </view> |
| | | <!-- 日历 --> |
| | | <view class="time-tools">{{calendar}}</view> |
| | | <view class="button-left" @click="ejected()"></view> |
| | | <view class="button-right" @click="ejected()"></view> |
| | | <!-- 主视图 --> |
| | | <view class="main"> |
| | | <view class="mian-item"> |
| | | <view class="mian-item-box"> |
| | | <y-box> |
| | | <view class="box-item"> |
| | | <text class="item-title">自动化立体仓库</text> |
| | | <text class="item-subTitle">Automatic Storageand Retrieval System</text> |
| | | <text class="item-text" style="text-align: left;">利用立体仓库设备可实现仓库高层合理化、存取自动化、操作简便化;自动化立体仓库是当前技术水平较高的形式。自动化立体仓库的主体由货架、巷道式堆垛起重机、入(出)库工作台和自动运进(出)及操作控制系统组成。货架是钢结构或钢筋混凝土结构的建筑物或结构体,货架内是标准尺寸的货位空间,巷道堆垛起重机穿行于货架之间的巷道中,完成存、取货的工作。管理上采用计算机及条形码技术。</text> |
| | | </view> |
| | | <view class="box-item"> |
| | | <text class="item-title">仓库数据</text> |
| | | <text class="item-subTitle">warehouse data</text> |
| | | <view class="img-box"> |
| | | |
| | | <view class="item-img"> |
| | | <image src="../../static/a1.png" mode="aspectFit"></image> |
| | | <view class="flex-col" style="width: calc(100% - 5vw);"> |
| | | <view class="flex-row" style="position: relative;" > |
| | | <view style="width: 2vw;padding-left: 2vw;;font-size: 2vw;">{{baseInfo.xDistance}}</view> |
| | | <view style="position: absolute;bottom: 0;left: 10vw;">KM</view> |
| | | </view> |
| | | <view style="height: 100%;text-align: left;text-indent: 2em;">累计走行距离(千米)</view> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="item-img"> |
| | | <image src="../../static/b1.png" mode="aspectFit"></image> |
| | | <view class="flex-col" style="width: calc(100% - 5vw);"> |
| | | <view class="flex-row" style="position: relative;" > |
| | | <view style="width: 2vw;padding-left: 2vw;;font-size: 2vw;">{{baseInfo.yDistance}}</view> |
| | | <view style="position: absolute;bottom: 0;left: 10vw;">KM</view> |
| | | </view> |
| | | <view style="height: 100%;text-align: left;text-indent: 2em;">累计升降距离(千米)</view> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="item-img"> |
| | | <image src="../../static/c1.png" mode="aspectFit"></image> |
| | | <view class="flex-col" style="width: calc(100% - 5vw);"> |
| | | <view class="flex-row" style="position: relative;" > |
| | | <view style="-width: 2vw;padding-left: 2vw;;font-size: 2vw;">{{baseInfo.xDuration}}</view> |
| | | <view style="position: absolute;bottom: 0;left: 10vw;">H</view> |
| | | </view> |
| | | <view style="height: 100%;text-align: left;text-indent: 2em;">累计走行时长(小时)</view> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="item-img"> |
| | | <image src="../../static/d1.png" mode="aspectFit"></image> |
| | | <view class="flex-col" style="width: calc(100% - 5vw);"> |
| | | <view class="flex-row" style="position: relative;" > |
| | | <view style="width: 2vw;padding-left: 2vw;;font-size: 2vw;">{{baseInfo.yDuration}}</view> |
| | | <view style="position: absolute;bottom: 0;left: 10vw;">H</view> |
| | | </view> |
| | | <view style="height: 100%;text-align: left;text-indent: 2em;">累计升降时长(小时)</view> |
| | | </view> |
| | | </view> |
| | | |
| | | <view> |
| | | <view v-if="crnErrorShow"> |
| | | <swiper |
| | | class="message-swiper" |
| | | autoplay |
| | | circular |
| | | interval="2000" |
| | | duration="500" |
| | | > |
| | | <swiper-item v-for="(message, index) in messages" :key="index"> |
| | | <view class="message-item">{{ message }}</view> |
| | | </swiper-item> |
| | | </swiper> |
| | | </view> |
| | | |
| | | <view class="container"> |
| | | <uni-transition :duration="duration" :mode-class="homeMode" :show="homeViewShow"> |
| | | <view class="home-view"> |
| | | <view class="head"> |
| | | <text>智能大屏显示系统</text> |
| | | </view> |
| | | <!-- 日历 --> |
| | | <view class="time-tools">{{calendar}}</view> |
| | | <view class="button-left" @click="ejected()"></view> |
| | | <view class="button-right" @click="ejected()"></view> |
| | | <!-- 主视图 --> |
| | | <view class="main"> |
| | | <view class="mian-item"> |
| | | <view class="mian-item-box"> |
| | | <y-box> |
| | | <view class="box-item"> |
| | | <text class="item-title">智能大屏显示系统</text> |
| | | <text class="item-subTitle">Automatic Storageand Retrieval System</text> |
| | | <text class="item-text" style="text-align: left;">利用立体仓库设备可实现仓库高层合理化、存取自动化、操作简便化;自动化立体仓库是当前技术水平较高的形式。自动化立体仓库的主体由货架、巷道式堆垛起重机、入(出)库工作台和自动运进(出)及操作控制系统组成。货架是钢结构或钢筋混凝土结构的建筑物或结构体,货架内是标准尺寸的货位空间,巷道堆垛起重机穿行于货架之间的巷道中,完成存、取货的工作。管理上采用计算机及条形码技术。</text> |
| | | </view> |
| | | </view> |
| | | <view class="box-item"> |
| | | <view class="flex-row" style="width: 100%;"> |
| | | <!-- 左侧 --> |
| | | <view class="flex-col" style="align-items: flex-start;justify-content: flex-start;"> |
| | | <text class="item-title">库位使用率</text> |
| | | <text class="item-subTitle">EQUIPMENT USAGE THIS MONTH</text> |
| | | <view class="box-item"> |
| | | <text class="item-title">仓库数据</text> |
| | | <text class="item-subTitle">warehouse data</text> |
| | | <view class="img-box"> |
| | | |
| | | <view class="item-img"> |
| | | <image src="../../static/a1.png" mode="aspectFit"></image> |
| | | <view class="flex-col" style="width: calc(100% - 5vw);"> |
| | | <view class="flex-row" style="position: relative;" > |
| | | <view style="width: 2vw;padding-left: 2vw;;font-size: 2vw;">{{baseInfo.xDistance}}</view> |
| | | <view style="position: absolute;bottom: 0;left: 10vw;">KM</view> |
| | | </view> |
| | | <view style="height: 100%;text-align: left;text-indent: 2em;">累计走行距离(千米)</view> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="item-img"> |
| | | <image src="../../static/b1.png" mode="aspectFit"></image> |
| | | <view class="flex-col" style="width: calc(100% - 5vw);"> |
| | | <view class="flex-row" style="position: relative;" > |
| | | <view style="width: 2vw;padding-left: 2vw;;font-size: 2vw;">{{baseInfo.yDistance}}</view> |
| | | <view style="position: absolute;bottom: 0;left: 10vw;">KM</view> |
| | | </view> |
| | | <view style="height: 100%;text-align: left;text-indent: 2em;">累计升降距离(千米)</view> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="item-img"> |
| | | <image src="../../static/c1.png" mode="aspectFit"></image> |
| | | <view class="flex-col" style="width: calc(100% - 5vw);"> |
| | | <view class="flex-row" style="position: relative;" > |
| | | <view style="-width: 2vw;padding-left: 2vw;;font-size: 2vw;">{{baseInfo.xDuration}}</view> |
| | | <view style="position: absolute;bottom: 0;left: 10vw;">H</view> |
| | | </view> |
| | | <view style="height: 100%;text-align: left;text-indent: 2em;">累计走行时长(小时)</view> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="item-img"> |
| | | <image src="../../static/d1.png" mode="aspectFit"></image> |
| | | <view class="flex-col" style="width: calc(100% - 5vw);"> |
| | | <view class="flex-row" style="position: relative;" > |
| | | <view style="width: 2vw;padding-left: 2vw;;font-size: 2vw;">{{baseInfo.yDuration}}</view> |
| | | <view style="position: absolute;bottom: 0;left: 10vw;">H</view> |
| | | </view> |
| | | <view style="height: 100%;text-align: left;text-indent: 2em;">累计升降时长(小时)</view> |
| | | </view> |
| | | </view> |
| | | |
| | | </view> |
| | | <!-- 右侧 --> |
| | | <view style="margin-left: auto;"> |
| | | <!-- 百分比 --> |
| | | <view class="flex-col" style="align-items: flex-end;justify-content: flex-end;" > |
| | | <!-- style="justify-content: flex-end;position: absolute;top: 0;right: 1vw;text-align: right;" --> |
| | | <text class="item-title">{{baseInfo.usedPr}}%</text> |
| | | <text class="item-subTitle">同比上月 + 5%</text> |
| | | </view> |
| | | <view class="box-item"> |
| | | <view class="flex-row" style="width: 100%;"> |
| | | <!-- 左侧 --> |
| | | <view class="flex-col" style="align-items: flex-start;justify-content: flex-start;"> |
| | | <text class="item-title">库位使用率</text> |
| | | <text class="item-subTitle">EQUIPMENT USAGE THIS MONTH</text> |
| | | </view> |
| | | <!-- 右侧 --> |
| | | <view style="margin-left: auto;"> |
| | | <!-- 百分比 --> |
| | | <view class="flex-col" style="align-items: flex-end;justify-content: flex-end;" > |
| | | <!-- style="justify-content: flex-end;position: absolute;top: 0;right: 1vw;text-align: right;" --> |
| | | <text class="item-title">{{baseInfo.usedPr}}%</text> |
| | | <text class="item-subTitle">同比上月 + 5%</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="flex-col" style="width: 100%;align-items: flex-start;position: relative;font-size: 1vw"> |
| | | <!-- 进度条 --> |
| | | <view class="flex-row" style="width: 100%;position: relative;margin-top: 5%;"> |
| | | <view class="progressBar" style="width: 80%;height: 2vw;"> |
| | | <view class="progress" :style="'width:'+ baseInfo.usedPr + '%'"></view> |
| | | </view> |
| | | <view style="position: absolute;bottom: 0;right: 0;font-size: 2.5vw;color: #FF5722;;">{{baseInfo.used}}</view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </y-box> |
| | | </view> |
| | | </view> |
| | | <view class="mian-item"> |
| | | <view class="mian-item-box"> |
| | | <view style="width: 100%;height: 100%;"> |
| | | <view style="height: 35%;"> |
| | | <!-- 折线图 --> |
| | | <y-box> |
| | | <view class="box-item"> |
| | | <view class="flex-row" style="width: 100%;"> |
| | | <!-- 左侧 --> |
| | | <view class="flex-col" style="align-items: flex-start;justify-content: flex-start;"> |
| | | <text class="item-title">入出库统计</text> |
| | | <text class="item-subTitle">ORDER STATISTICS</text> |
| | | </view> |
| | | <!-- 右侧 --> |
| | | <view style="margin-left: auto;"> |
| | | <!-- 百分比 --> |
| | | <view class="flex-col" style="align-items: flex-end;justify-content: flex-end;" > |
| | | <!-- style="justify-content: flex-end;position: absolute;top: 0;right: 1vw;text-align: right;" --> |
| | | <text class="item-title">{{ baseLedId }}</text> |
| | | <text class="item-subTitle">站点编号</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="charts-box"> |
| | | <qiun-data-charts type="line" :chartData="chartsDataLine1" :echartsH5="true" :echartsApp="true"/> |
| | | </view> |
| | | </view> |
| | | </y-box> |
| | | </view> |
| | | |
| | | <view class="flex-col" style="width: 100%;align-items: flex-start;position: relative;font-size: 1vw"> |
| | | <!-- 进度条 --> |
| | | <view class="flex-row" style="width: 100%;position: relative;margin-top: 5%;"> |
| | | <view class="progressBar" style="width: 80%;height: 2vw;"> |
| | | <view class="progress" :style="'width:'+ baseInfo.usedPr + '%'"></view> |
| | | |
| | | <!-- null --> |
| | | <view style="height: 2%;"></view> |
| | | |
| | | |
| | | <view style="height: 61%;"> |
| | | <y-box> |
| | | <view class="box-item"> |
| | | <view class="flex-row" style="width: 100%;"> |
| | | <!-- 左侧 --> |
| | | <view class="flex-col" style="align-items: flex-start;justify-content: flex-start;"> |
| | | <text class="item-title">库存类型</text> |
| | | <text class="item-subTitle">INCOME DATE</text> |
| | | </view> |
| | | <!-- 右侧 --> |
| | | <view style="margin-left: auto;"> |
| | | <!-- 百分比 --> |
| | | <view class="flex-col" style="align-items: flex-end;justify-content: flex-end;" > |
| | | <text class="item-title">今天</text> |
| | | <text class="item-subTitle">Today</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="flex-row" style="width: 100%;"> |
| | | <!-- 左 --> |
| | | <view class="charts-box-ring"> |
| | | <qiun-data-charts type="ring" :opts="{legend:{position:'bottom'}}" :eopts="ringOpts" :chartData="chartsDataPie2" :echartsH5="true" :echartsApp="true"/> |
| | | </view> |
| | | <!-- 右 --> |
| | | <view> |
| | | <view class="flex-row sub-info"> |
| | | <image src="../../static/g1.png" mode="aspectFit"></image> |
| | | <view style="width: 8vw;height: 4vw;line-height: 4vw;">在库</view> |
| | | <view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.stockCount}}</view> |
| | | </view> |
| | | <view class="flex-row sub-info" style="margin-top: 2vh;"> |
| | | <image src="../../static/f1.png" mode="aspectFit"></image> |
| | | <view style="width: 8vw;height: 4vw;line-height: 4vw;">空库</view> |
| | | <view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.emptyCount}}</view> |
| | | </view> |
| | | <view class="flex-row sub-info" style="margin-top: 2vh;"> |
| | | <image src="../../static/e1.png" mode="aspectFit"></image> |
| | | <view style="width: 8vw;height: 4vw;line-height: 4vw;">锁定</view> |
| | | <view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.noneCount}}</view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view style="position: absolute;bottom: 0;right: 0;font-size: 2.5vw;color: #FF5722;;">{{baseInfo.used}}</view> |
| | | </view> |
| | | |
| | | </y-box> |
| | | </view> |
| | | <view style="height: 2%;"></view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | </view> |
| | | </uni-transition> |
| | | <!-- 全板/拣料信息 --> |
| | | <uni-transition :duration="duration" :mode-class="infoMode" :show="infoViewShow"> |
| | | <view class="home-view"> |
| | | <view class="head"> |
| | | <text>{{infoText.title}}</text> |
| | | </view> |
| | | <!-- 日历 --> |
| | | <view class="time-tools">{{calendar}}</view> |
| | | <view class="button-left" @click="ejected()"></view> |
| | | <view class="button-right" @click="ejected()"></view> |
| | | <!-- 主体 --> |
| | | <view class="info-main"> |
| | | <view class="info-box"> |
| | | <y-box> |
| | | <!-- 文本容器 --> |
| | | <view class="text-content"> |
| | | <!-- head --> |
| | | <view class="swiper-head"> |
| | | <view style="width: 20%;">工作号: {{infoText.workNo}}</view> |
| | | <view style="width: 30%;">源库位: {{infoText.sourceLocNo}}</view> |
| | | <view style="width: 20%;">目标站: {{infoText.staNo}}</view> |
| | | <view style="width: 30%;">托盘码: {{infoText.barcode}}</view> |
| | | <!-- <view style="width: 10%;">数量</view> --> |
| | | </view> |
| | | <!-- body --> |
| | | <view class="swiper-body"> |
| | | <!-- swiper 一些说明 |
| | | circular 是否采用衔接滑动,即播放到末尾后重新回到开头 |
| | | vertical 滑动方向是否为纵向 |
| | | display-multiple-items 同时显示的滑块数量 --> |
| | | <swiper class="swiper-body-main" vertical="true" |
| | | display-multiple-items="1" |
| | | circular="true" :autoplay="true" :interval="10000" :duration="3000"> |
| | | <swiper-item class="swiper-item" v-for="(item,i) in swiperList" :key="i"> |
| | | <view style="width: 100%;">{{i+1}} / {{swiperList.length}}</view> |
| | | <view style="width: 50%;">单号: {{item.orderNo}}</view> |
| | | <view style="width: 50%;">库存状态: {{item.cstateid}}</view> |
| | | <view style="width: 50%;">商品编号: {{item.matnr}}</view> |
| | | <view style="width: 50%;">商品名称: {{item.maktx}}</view> |
| | | <view style="width: 50%;">规格: {{item.specs}}</view> |
| | | <view style="width: 50%;">U8旧品名: {{item.sku}}</view> |
| | | <view style="width: 100%;">型号: {{item.model}}</view> |
| | | <view style="width: 100%;color: red;font-size: 3.1vw;">客户名称: {{item.supp}}</view> |
| | | <view style="width: 100%;color: red;font-size: 3.1vw;">开票客户: {{item.kpCstmrName}}</view> |
| | | <!-- <view style="width: 25%;">主数量: {{item.count}}</view> --> |
| | | <view style="width: 25%;color: red;font-size: 3.1vw;">辅数量: {{item.allWeight}}</view> |
| | | <view style="width: 25%;">库存: {{item.allStock}}</view> |
| | | <view style="width: 25%;">剩余: {{item.lessStock}}</view> |
| | | <!-- <view style="width: 25%;">辅库存: {{item.totalWeight}}</view> --> |
| | | </swiper-item> |
| | | </swiper> |
| | | </view> |
| | | </view> |
| | | </y-box> |
| | | </view> |
| | | </view> |
| | | <view class="mian-item"> |
| | | <view class="mian-item-box"> |
| | | <view style="width: 100%;height: 100%;"> |
| | | <view style="height: 35%;"> |
| | | <!-- 折线图 --> |
| | | <y-box> |
| | | <view class="box-item"> |
| | | <view class="flex-row" style="width: 100%;"> |
| | | <!-- 左侧 --> |
| | | <view class="flex-col" style="align-items: flex-start;justify-content: flex-start;"> |
| | | <text class="item-title">入出库统计</text> |
| | | <text class="item-subTitle">ORDER STATISTICS</text> |
| | | </view> |
| | | <!-- 右侧 --> |
| | | <view style="margin-left: auto;"> |
| | | <!-- 百分比 --> |
| | | <view class="flex-col" style="align-items: flex-end;justify-content: flex-end;" > |
| | | <!-- style="justify-content: flex-end;position: absolute;top: 0;right: 1vw;text-align: right;" --> |
| | | <text class="item-title">31</text> |
| | | <text class="item-subTitle">今日订单数</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="charts-box"> |
| | | <qiun-data-charts type="line" :chartData="chartsDataLine1" :echartsH5="true" :echartsApp="true"/> |
| | | </view> |
| | | </view> |
| | | </y-box> |
| | | </view> |
| | | </uni-transition> |
| | | <!-- 异常信息 --> |
| | | <uni-transition :duration="duration" :mode-class="errorInfoMode" :show="errorInfoViewShow"> |
| | | <view class="error-info-view"> |
| | | <view class="head"> |
| | | <text>{{infoText.title}}</text> |
| | | </view> |
| | | <!-- 日历 --> |
| | | <view class="time-tools">{{calendar}}</view> |
| | | <view class="button-left"></view> |
| | | <view class="button-right"></view> |
| | | <!-- 主体 --> |
| | | <view class="info-main" > |
| | | <view class="info-box"> |
| | | <y-box> |
| | | <view class="info-box-text"> |
| | | <view class="flex-col info-box-text-item">{{infoText.error}}</view> |
| | | </view> |
| | | |
| | | |
| | | <!-- null --> |
| | | <view style="height: 2%;"></view> |
| | | |
| | | |
| | | <view style="height: 43%;"> |
| | | <y-box> |
| | | <view class="box-item"> |
| | | <view class="flex-row" style="width: 100%;"> |
| | | <!-- 左侧 --> |
| | | <view class="flex-col" style="align-items: flex-start;justify-content: flex-start;"> |
| | | <text class="item-title">库存类型</text> |
| | | <text class="item-subTitle">INCOME DATE</text> |
| | | </view> |
| | | <!-- 右侧 --> |
| | | <view style="margin-left: auto;"> |
| | | <!-- 百分比 --> |
| | | <view class="flex-col" style="align-items: flex-end;justify-content: flex-end;" > |
| | | <text class="item-title">今天</text> |
| | | <text class="item-subTitle">Today</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="flex-row" style="width: 100%;"> |
| | | <!-- 左 --> |
| | | <view class="charts-box-ring"> |
| | | <qiun-data-charts type="ring" :opts="{legend:{position:'bottom'}}" :eopts="ringOpts" :chartData="chartsDataPie2" :echartsH5="true" :echartsApp="true"/> |
| | | </view> |
| | | <!-- 右 --> |
| | | <view> |
| | | <view class="flex-row sub-info"> |
| | | <image src="../../static/g1.png" mode="aspectFit"></image> |
| | | <view style="width: 8vw;height: 4vw;line-height: 4vw;">在库</view> |
| | | <view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.stockCount}}</view> |
| | | </view> |
| | | <view class="flex-row sub-info" style="margin-top: 2vh;"> |
| | | <image src="../../static/f1.png" mode="aspectFit"></image> |
| | | <view style="width: 8vw;height: 4vw;line-height: 4vw;">空库</view> |
| | | <view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.emptyCount}}</view> |
| | | </view> |
| | | <view class="flex-row sub-info" style="margin-top: 2vh;"> |
| | | <image src="../../static/e1.png" mode="aspectFit"></image> |
| | | <view style="width: 8vw;height: 4vw;line-height: 4vw;">锁定</view> |
| | | <view style="width: 8vw;height: 4vw;line-height: 4vw;font-size: 2vw;">{{baseInfo.noneCount}}</view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | </y-box> |
| | | </view> |
| | | <view style="height: 2%;"></view> |
| | | <view style="height: 18%;"> |
| | | <y-box> |
| | | <view class="flex-col" style="width: 100%;height: 100%;font-size: 4vh;justify-content: center;letter-spacing: 1vh;"> |
| | | <!-- 嘉善边锋机械股份有限公司 --> |
| | | 自动仓库WCS监控平台 |
| | | <!-- <image src="../../static/vietnam.jpg" mode="" style="width: 100%;"></image> --> |
| | | </view> |
| | | </y-box> |
| | | </view> |
| | | </y-box> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </uni-transition> |
| | | |
| | | <!-- 自定义弹出层 --> |
| | | <view class="eject-mask" v-show="ejectShow"> |
| | | <view class="eject"> |
| | | <!-- 弹出title --> |
| | | <view class="eject-title">修改 / 配置</view> |
| | | <!-- input --> |
| | | <scroll-view scroll-y class="eject-input"> |
| | | <view class="item"> |
| | | <view class="desc">ip:</view> |
| | | <view class="input"> |
| | | <input type="text" v-model="baseIP"> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | </view> |
| | | </uni-transition> |
| | | <!-- 全板/拣料信息 --> |
| | | <uni-transition :duration="duration" :mode-class="infoMode" :show="infoViewShow"> |
| | | <view class="home-view"> |
| | | <view class="head"> |
| | | <text>{{infoText.title}}</text> |
| | | </view> |
| | | <!-- 日历 --> |
| | | <view class="time-tools">{{calendar}}</view> |
| | | <view class="button-left" @click="ejected()"></view> |
| | | <view class="button-right" @click="ejected()"></view> |
| | | <!-- 主体 --> |
| | | <view class="info-main"> |
| | | <view class="info-box"> |
| | | <y-box> |
| | | <!-- 文本容器 --> |
| | | <view class="text-content"> |
| | | <!-- head --> |
| | | <view class="swiper-head"> |
| | | <view style="width: 30%;">托盘码: {{infoText.barcode}}</view> |
| | | <view style="width: 20%;">工作号: {{infoText.workNo}}</view> |
| | | <view style="width: 30%;">源库位: {{infoText.sourceLocNo}}</view> |
| | | <view style="width: 20%;">目标站: {{infoText.staNo}}</view> |
| | | <!-- <view style="width: 10%;">数量</view> --> |
| | | </view> |
| | | <!-- body --> |
| | | <view class="swiper-body"> |
| | | <!-- swiper 一些说明 |
| | | circular 是否采用衔接滑动,即播放到末尾后重新回到开头 |
| | | vertical 滑动方向是否为纵向 |
| | | display-multiple-items 同时显示的滑块数量 --> |
| | | <swiper class="swiper-body-main" vertical="true" |
| | | display-multiple-items="3" |
| | | circular="true" :autoplay="true" :interval="3000" :duration="2000"> |
| | | <swiper-item class="swiper-item" v-for="(item,i) in swiperList" :key="i"> |
| | | <view style="width: 30%;">{{i+1}} / {{swiperList.length}}</view> |
| | | <!-- <view style="width: 30%;">料号: {{item.matnr}}</view> --> |
| | | <view style="width: 40%;">名称: {{item.maknx}}</view> |
| | | <view style="width: 30%;">客户: {{item.manu}}</view> |
| | | |
| | | |
| | | <view style="width: 30%;">出库: {{item.count}} / 总数: {{item.total}}</view> |
| | | <view style="width: 40%;">规格: {{item.specs}}</view> |
| | | <view style="width: 30%;">备注: {{item.memo}}</view> |
| | | |
| | | |
| | | </swiper-item> |
| | | </swiper> |
| | | </view> |
| | | <view class="item"> |
| | | <view class="desc">port:</view> |
| | | <view class="input"> |
| | | <input type="text" v-model="basePort"> |
| | | </view> |
| | | </y-box> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </uni-transition> |
| | | <!-- 异常信息 --> |
| | | <uni-transition :duration="duration" :mode-class="errorInfoMode" :show="errorInfoViewShow"> |
| | | <view class="error-info-view"> |
| | | <view class="head"> |
| | | <text>{{infoText.title}}</text> |
| | | </view> |
| | | <!-- 日历 --> |
| | | <view class="time-tools">{{calendar}}</view> |
| | | <view class="button-left"></view> |
| | | <view class="button-right"></view> |
| | | <!-- 主体 --> |
| | | <view class="info-main" > |
| | | <view class="info-box"> |
| | | <y-box> |
| | | <view class="info-box-text"> |
| | | <view class="flex-col info-box-text-item">{{infoText.error}}</view> |
| | | </view> |
| | | <view class="item"> |
| | | <view class="desc">ledId:</view> |
| | | <view class="input"> |
| | | <input type="text" v-model="baseLedId"> |
| | | </view> |
| | | </y-box> |
| | | </view> |
| | | <view class="item"> |
| | | <view class="desc">CrnId:</view> |
| | | <view class="input"> |
| | | <input type="text" v-model="baseCrnId"> |
| | | </view> |
| | | </view> |
| | | <view class="item"> |
| | | <view class="desc">Url:</view> |
| | | <view class="input"> |
| | | <input type="text" v-model="baseUrl"> |
| | | </view> |
| | | </view> |
| | | </scroll-view> |
| | | <!-- button --> |
| | | <view class="eject-button"> |
| | | <view class="button-item" @click="ejectClose">取 消</view> |
| | | <view class="button-item" @click="ejectConfirm">确 认</view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </uni-transition> |
| | | |
| | | <!-- 自定义弹出层 --> |
| | | <view class="eject-mask" v-show="ejectShow"> |
| | | <view class="eject"> |
| | | <!-- 弹出title --> |
| | | <view class="eject-title">修改 / 配置</view> |
| | | <!-- input --> |
| | | <scroll-view scroll-y class="eject-input"> |
| | | <view class="item"> |
| | | <view class="desc">ip:</view> |
| | | <view class="input"> |
| | | <input type="text" v-model="baseIP"> |
| | | </view> |
| | | </view> |
| | | <view class="item"> |
| | | <view class="desc">port:</view> |
| | | <view class="input"> |
| | | <input type="text" v-model="basePort"> |
| | | </view> |
| | | </view> |
| | | <view class="item"> |
| | | <view class="desc">ledId:</view> |
| | | <view class="input"> |
| | | <input type="text" v-model="baseLedId"> |
| | | </view> |
| | | </view> |
| | | <view class="item"> |
| | | <view class="desc">CrnId:</view> |
| | | <view class="input"> |
| | | <input type="text" v-model="baseCrnId"> |
| | | </view> |
| | | </view> |
| | | <view class="item"> |
| | | <view class="desc">Url:</view> |
| | | <view class="input"> |
| | | <input type="text" v-model="baseUrl"> |
| | | </view> |
| | | </view> |
| | | </scroll-view> |
| | | <!-- button --> |
| | | <view class="eject-button"> |
| | | <view class="button-item" @click="ejectClose">取 消</view> |
| | | <view class="button-item" @click="ejectConfirm">确 认</view> |
| | | </view> |
| | | <view style="color: #FFF;position: fixed;bottom: 10px;left: 10px;" v-show="timeOut"> |
| | | 连接超时: {{times}} s |
| | | </view> |
| | | </view> |
| | | <view style="color: #FFF;position: fixed;bottom: 10px;left: 10px;" v-show="timeOut"> |
| | | 连接超时: {{times}} s |
| | | </view> |
| | | </view> |
| | | </template> |
| | |
| | | homeMode: [], |
| | | infoMode: [], |
| | | errorInfoMode: [], |
| | | useInfo: '', |
| | | baseInfo: { |
| | | xDistance: 1, |
| | | yDistance: 2, |
| | |
| | | baseLedId: '', |
| | | baseCrnId: '', |
| | | baseUrl: '', |
| | | getLedInfosIp: '172.17.60.92', |
| | | getLedInfosPort: '9090', |
| | | getLedInfosUrl: 'flsbwcs', |
| | | info: null, |
| | | error: null, |
| | | infoType: 0, |
| | |
| | | swiperList: [], |
| | | timeOut: false, |
| | | times: 0, |
| | | currDate: '' |
| | | currDate: '', |
| | | crnErrorShow: false, |
| | | messages: [] |
| | | } |
| | | }, |
| | | onShow() { |
| | |
| | | }, |
| | | mounted() { |
| | | let that = this |
| | | |
| | | const BaseIP = uni.getStorageSync('BaseIp'); |
| | | const BaseLedId = uni.getStorageSync('BaseLedId'); |
| | | const BasePort = uni.getStorageSync('BasePort'); |
| | |
| | | that.baseLedId = BaseLedId |
| | | that.basePort = BasePort |
| | | that.baseCrnId = BaseCrnId |
| | | // this.getUrl() |
| | | this.getUrl() |
| | | |
| | | setTimeout(() => { |
| | | this.getLedInfos() |
| | | },2000) |
| | | }, |
| | | onLoad() { |
| | | setInterval(()=>{ |
| | |
| | | this.initlineChart() |
| | | this.initPieChart() |
| | | this.getOther() |
| | | this.getUserInfo() |
| | | // this.getDate() |
| | | this.getDate2() |
| | | this.getInfo() |
| | |
| | | // this.getError2() |
| | | this.getUrl() |
| | | this.controller() |
| | | // 测试用 |
| | | this.getCrnError() |
| | | |
| | | },1000) |
| | | }, |
| | | methods: { |
| | | timeOut() { |
| | | console.log(this.times); |
| | | }, |
| | | getLedInfos(){ |
| | | let that = this |
| | | this.getUrl() |
| | | uni.request({ |
| | | url: this.baseHttp + that.getLedInfosIp + ':' +this.getLedInfosPort + "/" + this.getLedInfosUrl + "/console/getLedInfos", |
| | | method:"GET", |
| | | data: {}, |
| | | success(res) { |
| | | let data = res.data.data; |
| | | that.baseLedId = data.staArr[0] |
| | | that.baseCrnId = 1 |
| | | |
| | | that.baseIP = that.getLedInfosIp; |
| | | that.basePort = that.getLedInfosPort; |
| | | that.baseUrl = that.getLedInfosUrl; |
| | | |
| | | uni.setStorageSync('BaseIp', that.baseIP); |
| | | uni.setStorageSync('BaseLedId', that.baseLedId); |
| | | uni.setStorageSync('BasePort',that.basePort); |
| | | uni.setStorageSync('BaseCrnId',that.baseCrnId); |
| | | uni.setStorageSync('UPROJ',that.baseUrl); |
| | | } |
| | | }) |
| | | }, |
| | | getUrl() { |
| | | this.commonUrl = this.baseHttp + this.baseIP + ':' +this.basePort + "/" +this.baseUrl |
| | |
| | | if (res.data[0].ioType === 101) { |
| | | that.infoText.title = '全板出库' |
| | | } else if(res.data[0].ioType === 103) { |
| | | that.infoText.title = '检料出库' |
| | | that.infoText.title = '拣料出库' |
| | | } else if(res.data[0].ioType === 107) { |
| | | that.infoText.title = '盘点出库' |
| | | } else if(res.data[0].ioType === 1) { |
| | |
| | | that.infoType = 0 |
| | | } |
| | | }, |
| | | getUserInfo() { |
| | | let that = this |
| | | uni.request({ |
| | | url: that.commonUrl + "/monitor/led", |
| | | method:"GET", |
| | | data: {ledId:that.baseLedId}, |
| | | success(res) { |
| | | res = res.data |
| | | if (res.data && res.data != '') { |
| | | that.useInfo = res.data |
| | | } |
| | | } |
| | | }) |
| | | }, |
| | | getInfo() { |
| | | let that = this |
| | | uni.request({ |
| | |
| | | if (res.data[0].ioType === 101) { |
| | | that.infoText.title = '全板出库' |
| | | } else if(res.data[0].ioType === 103) { |
| | | that.infoText.title = '检料出库' |
| | | that.infoText.title = '拣料出库' |
| | | } else if(res.data[0].ioType === 107) { |
| | | that.infoText.title = '盘点出库' |
| | | } else if(res.data[0].ioType === 1) { |
| | |
| | | that.infoText.workNo = res.data[0].workNo |
| | | that.infoText.sourceLocNo = res.data[0].sourceLocNo |
| | | that.infoText.staNo = res.data[0].staNo |
| | | that.swiperList = res.data[0].matDtos |
| | | |
| | | let matDtos = res.data[0].matDtos; |
| | | |
| | | let allWeight = 0; |
| | | let allStock = 0; |
| | | matDtos.forEach((item) => { |
| | | allWeight += item.weight; |
| | | allStock += item.totalWeight; |
| | | }) |
| | | |
| | | let lessStock = allStock - allWeight; |
| | | |
| | | let matDto = matDtos[0]; |
| | | matDto.allWeight = allWeight; |
| | | matDto.allStock = allStock; |
| | | matDto.lessStock = lessStock; |
| | | that.swiperList = [matDto] |
| | | |
| | | // that.infoText.matnr = res.data[0].matDtos[0].matnr |
| | | // that.infoText.specs = res.data[0].matDtos[0].specs |
| | | // that.infoText.maknx = res.data[0].matDtos[0].maknx |
| | |
| | | }, |
| | | fail(err) { |
| | | that.timeOut = true |
| | | that.times = that.times+3 |
| | | that.times = that.times+1 |
| | | that.infoType = 0 |
| | | } |
| | | }) |
| | |
| | | that.timeOut = false |
| | | that.times = 0 |
| | | var res = result.data |
| | | console.log(res); |
| | | if (res.data && res.data !== "") { |
| | | var errorInfo = res.data |
| | | if (that.infoType == 1) { |
| | |
| | | } |
| | | }) |
| | | }, |
| | | getCrnError() { |
| | | let that = this |
| | | uni.request({ |
| | | url: that.commonUrl + "/monitor/crn/error", |
| | | data: {}, |
| | | success(result) { |
| | | var res = result.data |
| | | if (res.code === 200) { |
| | | let data = res.data; |
| | | if(data.length > 0) { |
| | | let tmpList = [] |
| | | data.forEach((item) => { |
| | | tmpList.push(item.crnNo + "号堆垛机" + item.errorName) |
| | | }) |
| | | that.messages = tmpList; |
| | | that.crnErrorShow = true; |
| | | }else{ |
| | | that.crnErrorShow = false; |
| | | } |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | |
| | | } |
| | |
| | | background-color: #00163E; |
| | | color: #fff; |
| | | text-align: center; |
| | | |
| | | position: relative; |
| | | } |
| | | /* 主视图 */ |
| | | .home-view { |
| | |
| | | height: 20%;font-size: 8vh; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .message-swiper { |
| | | width: 100%; |
| | | height: 30px; |
| | | background-color: #ff0000; |
| | | display: flex; |
| | | align-items: center; |
| | | overflow: hidden; |
| | | position: relative; |
| | | } |
| | | .message-item { |
| | | white-space: nowrap; |
| | | padding: 0 10px; |
| | | color: #ffffff; |
| | | text-align: center; |
| | | } |
| | | </style> |