#

whycq

2022-07-19 c6b1363a759595e3d9334cab8a8e753d0783987a

#

 Monitor-APP/main.js

@@ -3,6 +3,8 @@
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
Vue.prototype.baseHttp = 'http://'
Vue.prototype.baseUrl = '/jkwcs'
App.mpType = 'app'
const app = new Vue({
    ...App

 Monitor-APP/pages.json

@@ -17,6 +17,12 @@
            "style": {
                "navigationStyle":"custom"
            }
        },
        {
            "path": "pages/index/animation",
            "style": {
                "navigationStyle":"custom"
            }
        }
        
        

 Monitor-APP/pages/index/data.json

@@ -1,7 +1,7 @@
{"dataYYY":{"data":{"msg":"操作成功","code":200,"data":[{
                "title":"全板出库",
                "workNo":7016,
                "orderNo":"CK22037502300",
                "orderNo":"CK20220717665",
                "ioType":101, 
                "staNo":188,
                "sourceStaNo":null,
@@ -26,6 +26,6 @@
                    {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22037505148","count":1.0}
                    ],
                    "emptyMk":false}]}} ,
    "dataEEE":{"data":{"msg":"操作成功","code":200,"data":"A"}}
    "dataEEE":{"data":{"msg":"操作成功","code":200,"data":""}}
}
                    

 Monitor-APP/pages/index/index.vue

@@ -1,6 +1,8 @@
<template>
    <view class="container">
        <!-- 跳动信息板 -->
        <view class="floor-screen" :class="floorMove" >
            <!-- 头部 -->
            <view class="head">
                <text @click="port()">自动仓库WCS监控平台</text>
                <view class="time-tools">{{year}}-{{month}}-{{day}}&nbsp{{hours}}:{{minutes}}:{{seconds}}&nbsp{{week}}</view>
@@ -14,17 +16,21 @@
                        <view class="box-border box-border2"></view>
                        <view class="box-border box-border3"></view>
                        <view class="box-border box-border4"></view>
                        <!-- 全板出库 -->
                        <view style="width: 10%;height: 100%;display:inline-block;float: left;text-align: center;padding-top: 180px;">
                            <text>{{title}}</text>
                        </view>
                        <view style="width: 80%;height: 100%;display: inline-block;float: left;font-size: 160rpx;">
                        <!-- 滚动区域 -->
                        <view style="width: 80%;height: 100%;display: inline-block;">
                             <!--显示order订单编号 -->
                            <text v-show="orderShow" style="display: inline-block;position: absolute; height: 12%;width: 68%;background-color: #001ead;z-index: 9999;" >CK20220718</text>
                            <!-- 显示滚动列表 -->
                            <text class="animate" style="" v-show="!errorShow && pakinShow && pakinGun">{{newspaper}}</text>
                            <text v-show="errorShow">{{errorPaper}}</text>
                            <text v-show="pakinShow">{{newspaper}}</text>
                            <text v-show="orderShow" style="display: block;font-size: 140rpx;" >{{orderNo}}</text>
                            <swiper :class="swiper" circular="true" vertical="true" display-multiple-items="6" :autoplay="autoplay" :interval="interval" :duration="duration">
                                <swiper-item v-for="(item,index) in matList" :key="index">
                                    <view style="font-size: 160rpx;">{{item}}</view>
                                </swiper-item>
                            </swiper>
                        </view>
                        <!-- 站台号 -->
                        <view style="width: 10%;height: 100%;display: inline-block;float: right;padding-top: 180px;">
                            <text>{{staNo}}</text>
                        </view>
@@ -95,7 +101,7 @@
                                <p class="english">EQUIPMENT USAGE THIS MONTH</p>
                            </view>
                            <view class="use-right">
                                <h3>20%</h3>
                                <h3>{{usedPr}}%</h3>
                                <p class="english">同比上月 + 5%</p>
                            </view>
                            <view class="use-main">
@@ -149,6 +155,7 @@
                                <p class="english">Today</p>
                            </view>
                            <view class="sub-main">
                                <!-- 折线图 -->
                                <view class="charts-box ring">
                                    <qiun-data-charts type="ring" :opts="{legend:{position:'bottom'}}" :eopts="ringOpts" :chartData="chartsDataPie2" :echartsH5="true" :echartsApp="true"/>
                                </view>
@@ -179,7 +186,7 @@
                        <view class="box-border box-border4"></view>
                        <!-- <text>浙江中扬立库技术有限公司</text>
                        <text>当前版本号</text> -->
                        <view>浙江中扬立库技术有限公司</view>
                        <view @click="crn()">浙江中扬立库技术有限公司</view>
                        <image src="../../static/barcode.png" mode="aspectFit"></image>
                    </view>
                </view>
@@ -188,7 +195,7 @@
        <view>
            <!-- 输入url -->
            <uni-popup ref="url" type="dialog">
                <uni-popup-dialog ref="inputClose" mode="input" title="配置url" :value="baseUrl"
                <uni-popup-dialog ref="inputClose" mode="input" title="配置url" :value="baseIP"
                    placeholder="示例:192.168.1.1" @confirm="baseUrlConfirm"></uni-popup-dialog>
            </uni-popup>
        </view>
@@ -206,6 +213,13 @@
                    placeholder="示例:9090" @confirm="portConfirm"></uni-popup-dialog>
            </uni-popup>
        </view>
        <view>
            <!-- 输入crnId -->
            <uni-popup ref="crnId" type="dialog">
                <uni-popup-dialog ref="inputClose" mode="input" title="配置堆垛机" :value="crnId"
                    placeholder="示例:1" @confirm="crnConfirm"></uni-popup-dialog>
            </uni-popup>
        </view>
    </view>
</template>

@@ -215,12 +229,14 @@
    export default {
        data() {
            return {
                commonUrl:null, // 通用url
                show: true,
                modeClass: 'fade',
                styles: {},
                baseUrl:'10.10.0.200',
                baseIP:'',
                baseLedId:'',
                basePort:'',
                crnId:'',
                value: '',
                xDistance: 0,
                yDistance:0,
@@ -267,32 +283,41 @@
                pakinShow:'',
                pakinGun:'',
                orderShow:false,
                orderNo:null,
                swiper:'swiper-here',
                autoplay:true, // 自动循环
                interval:1000, // 调用时长
                duration:8000, // 移动速度
                matList:[], // 订单列表
            }
        },
        mounted() {
            let that = this
            const BaseUrl = uni.getStorageSync('BaseUrl');
            const BaseIP = uni.getStorageSync('BaseIp');
            const BaseLedId = uni.getStorageSync('BaseLedId');
            const BasePort = uni.getStorageSync('BasePort');
            if (BaseUrl && BaseLedId) {
                that.baseUrl = BaseUrl
            const BaseCrnId = uni.getStorageSync('BaseCrnId');
            if (BaseIP && BaseLedId) {
                that.baseIP = BaseIP
                that.baseLedId = BaseLedId
                that.basePort = BasePort
                that.baseCrnId = BaseCrnId
            } else {
                that.baseUrl = ''
                that.baseLedId = ''
            }
            this.commonUrl = this.baseHttp + this.baseIP + ':' +this.basePort + this.baseUrl
        },
        onReady() {
            // 获得初始数据
            setTimeout(() => {
                // this.initlineChart();
                // this.initPieChart();
				
                this.initlineChart();
                this.initPieChart();
            }, 0);
            setTimeout(() => {
                // this.getServerData();
                // this.getOther();
                // this.getPakin();
                this.getServerData();
                this.getOther();
                this.getPakin();
            }, 1000);
            setInterval(() => {
                this.getDate();
@@ -301,19 +326,35 @@
                // this.getYYY();
                // this.getEEE();
                this.animation();
            },1000)
            },2000)
        },
        methods: {
            getEEE() {
                var result = ycqdata.dataEEE
            // 获取错误信息
            getError() {
                let that = this
                let res = result.data
                var res
                uni.request({
                    url: that.commonUrl + "/monitor/led/error",
                    data: {
                        ledId:that.baseLedId
                    },
                    method:'GET',
                    success(result) {
                        // res = result.data 
                        // 测试用 ↓
                    result = ycqdata.dataEEE
                    res = result.data
                        // 测试用 ↑
                        // 返回结果有值 且值不等于空值 就是有错误信息需要展示
                if (res.data && res.data !== "") {
                            that.matList = []
                            that.orderNo = null
                            that.matList.push(res.data)
                            that.swiper = 'swiper-here-error'
                    that.title = ''
                    that.staNo = ''
                    that.pakinShow = false
                    that.errorShow = true
                    that.errorPaper = res.data
                    that.move = false // 显示
                } else {
                    that.errorPaper = ''
@@ -324,13 +365,28 @@
                        that.move = true // 隐藏
                    }
                }
                    }
                });
            },
            getYYY() {
                var result = ycqdata.dataYYY
            getPakin () {
                let that = this
                that.matList = [] // 清空条码列表
                var newsData = ''
                var str = ''
                let res = result.data
                let res 
                uni.request({
                    url: that.commonUrl + "/monitor/led",
                    data: {
                        ledId:that.baseLedId
                    },
                    method:'GET',
                    success(result) {
                        // res = result.data
                        // 测试用 ↓
                    result = ycqdata.dataYYY
                    res = result.data
                        // 测试用 ↑
                        console.log(res)
                if(res.data && res.data !== null) {
                    if (res.data[0].matDtos.length > 0) {
                        that.pakinShow = true
@@ -341,14 +397,18 @@
                            that.title = '检料出库'
                        }
                        if (res.data[0].orderNo) {
                                    that.orderNo = "订单号：" + res.data[0].orderNo
                                    that.swiper = 'swiper-here-oN'
                            that.orderShow = true
                        } else {
                                    that.orderNo = null;
                                    that.swiper = 'swiper-here'
                            that.orderShow = false
                        }
                        that.staNo = '目标站' + res.data[0].staNo
                        for (var i = 0; i < res.data[0].matDtos.length; i++) {
                            str = res.data[0].matDtos[i].matnr + ' - ' + res.data[0].matDtos[i].batch + '\n'
                            newsData = newsData + str 
                                    var matnr = res.data[0].matDtos[i].matnr + ' - ' + res.data[0].matDtos[i].batch 
                                    that.matList.push(matnr)
                        }
                        if (that.errorShow) {
                            // that.pakinShow = false
@@ -368,87 +428,8 @@
                } else {
                    that.move = true
                }
				
            },
            getError() {
                let that = this
                uni.request({
                    url: "http://" + that.baseUrl + ":" + that.basePort + "/jkwcs/monitor/led/error",
                    data: {
                        ledId:that.baseLedId
                    },
                    method:'GET',
                    success(result) {
                        let res = result.data 
                        if (res.data && res.data !== "") {
                            that.title = ''
                            that.staNo = ''
                            that.pakinShow = false
                            that.errorShow = true
                            that.errorPaper = res.data
                            that.move = false // 显示
                        } else {
                            that.errorPaper = ''
                            that.errorShow = false
                            if (that.pakinShow) {
                                return;
                            } else {
                                that.move = true // 隐藏
                            }
                        }
                    }
                });
            },
            getPakin () {
                let that = this
                uni.request({
                    url: "http://" + that.baseUrl + ":" + that.basePort + "/jkwcs/monitor/led",
                    data: {
                        ledId:that.baseLedId
                    },
                    method:'GET',
                    success(result) {
                        var newsData = ''
                        var str = ''
                        let res = result.data
                        if(res.data && res.data !== null) {
                            if (res.data[0].matDtos.length > 0) {
                                that.pakinShow = true
                                that.pakinGun = true
                                if (res.data[0].ioType === 101) {
                                    that.title = '全板出库'
                                } else if(res.data[0].ioType === 103) {
                                    that.title = '检料出库'
                                }
                                if (res.data[0].orderNo) {
                                    that.orderShow = true
                                } else {
                                    that.orderShow = false
                                }
                                that.staNo = '目标站' + res.data[0].staNo
                                for (var i = 0; i < res.data[0].matDtos.length; i++) {
                                    str = res.data[0].matDtos[i].matnr + ' - ' + res.data[0].matDtos[i].batch + '\n'
                                    newsData = newsData + str 
                                }
                                if (that.errorShow) {
                                    return;
                                } else {
                                    that.newspaper = newsData
                                    that.move = false
                                }
                                if (res.data[0].matDtos.length <= 8) {
                                    that.errorShow = true
                                    that.pakinShow = true
                                    that.pakinGun  = false
                                }
                            } else {
                                that.move = true
                            }
                        } else {
                            that.move = true
                        }
                    }
                })
            },
            animation() {
                if (this.move) {
@@ -473,12 +454,15 @@
            initlineChart() {
                let that = this
                uni.request({
                    url: "http://10.10.0.222:9090/jswcs/monitor/line/charts",
                    url: that.commonUrl + "/monitor/line/charts",
                    method:'GET',
                    success(result) {
                        var res = result.data
                        if (res.code === 200) {
                            that.chartsData.Line.categories = [that.getDateFormat(-11),that.getDateFormat(-10),that.getDateFormat(-9),that.getDateFormat(-8),that.getDateFormat(-7),that.getDateFormat(-6),that.getDateFormat(-5),that.getDateFormat(-4),that.getDateFormat(-3),that.getDateFormat(-2),that.getDateFormat(-1),that.getDateFormat(0),]
                            that.chartsData.Line.categories = [
                                that.getDateFormat(-11),that.getDateFormat(-10),that.getDateFormat(-9),that.getDateFormat(-8),
                                that.getDateFormat(-7),that.getDateFormat(-6),that.getDateFormat(-5),that.getDateFormat(-4),
                                that.getDateFormat(-3),that.getDateFormat(-2),that.getDateFormat(-1),that.getDateFormat(0),]
                            that.chartsData.Line.series = res.data.rows
                        }
                    }
@@ -488,13 +472,13 @@
            initPieChart() {
                let that = this
                uni.request({
                    url: "http://10.10.0.222:9090/jswcs/monitor/loc/rep",
                    url: that.commonUrl + "/monitor/loc/rep",
                    method:'GET',
                    success(result) {
                        var res = result.data
                        if (res.code === 200) {
                            that.chartsData.Pie.series[0].data = res.data.pie
                            that.stockCount = res.data.stockCount
                            that.stockCount = res.data.stockCunt
                            that.emptyCount = res.data.emptyCount
                            that.noneCount = res.data.noneCount
                            that.used = res.data.used
@@ -507,10 +491,10 @@
                let that = this
                uni.request({
                    // http://10.10.0.222:9090/jkwcs/monitor/led?ledId=186
                    url: "http://" + that.baseUrl + ":9090/jswcs/monitor/other",
                    url: that.commonUrl + "/monitor/other",
                    data: {
                        crnId: 1, 
                        ledId: this.baseLedId,
                        crnId: that.baseCrnId, 
                        ledId: 1,
                    },
                    success(result) {
                        var res = result.data
@@ -519,7 +503,6 @@
                            that.yDistance = res.data.yDistance
                            that.xDuration = res.data.xDuration
                            that.yDuration = res.data.yDuration
                            console.log(res)
                        } else if (res.code === 403) {
                            
                        } else {
@@ -537,9 +520,12 @@
            ledId() {
                this.$refs.ledId.open()
            },
            crn() {
                this.$refs.crnId.open()
            },
            baseUrlConfirm(val) {
                this.baseUrl = val
                uni.setStorageSync('BaseUrl', this.baseUrl);
                this.baseIp = val
                uni.setStorageSync('BaseIp', this.baseIp);
            },
            ledIdConfirm(val) {
                this.baseLedId = val
@@ -548,6 +534,10 @@
            portConfirm(val) {
                this.basePort = val
                uni.setStorageSync('BasePort',this.basePort);
            },
            crnConfirm(val) {
                this.baseCrnId = val
                uni.setStorageSync('BaseCrnId',this.baseCrnId);
            },
            getServerData() {
                this.chartsDataLine1=JSON.parse(JSON.stringify(this.chartsData.Line))
@@ -580,6 +570,30 @@
</script>

<style>
    /* 当前页面无 orderNo */
    .swiper-here {
        display: inline-block;
        margin: 0 auto;
        width: 100%;
        height: 100%;
    }
    /* 当前页面有 orderNo */
    .swiper-here-oN{
        display: inline-block;
        /* background-color: #063A7B; */
        margin: 0 auto;
        width: 100%;
        height: 90%;
    }
    /* 当前页面有 error提示 */
    .swiper-here-error {
        display: inline-block;
        /* background-color: #063A7B; */
        /* margin: 0 auto; */
        margin-top: 20%;
        width: 100%;
        height: 100%;
    }
    .animate {
        display: inline-block;
                /* white-space: nowrap; */
@@ -1025,3 +1039,19 @@
        bottom: 0;
    }
</style>
<!-- {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22037502300","count":1.0},
                    {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22037505146","count":1.0},
                    {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22027504801","count":1.0},
                    {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22027507729","count":1.0},
                    {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22027507727","count":1.0},
                    {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22027507731","count":1.0},
                    {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22027504807","count":1.0},
                    {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22027504805","count":1.0},
                    {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22027504797","count":1.0},
                    {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22027504794","count":1.0},
                    {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22027504791","count":1.0},
                    {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22027504793","count":1.0},
                    {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22037505141","count":1.0},
                    {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22027507728","count":1.0},
                    {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22027504810","count":1.0},
                    {"matnr":"1100349-10000","maknx":"C5S-4-M03/333/KS","batch":"22037505148","count":1.0} -->

 Monitor-APP/pages/index/index_test.vue

@@ -1,6 +1,8 @@
<template>
    <view class="container">
        <!-- 跳动信息板 -->
        <view class="floor-screen" :class="floorMove" >
            <!-- 头部 -->
            <view class="head">
                <text @click="port()">自动仓库WCS监控平台</text>
                <view class="time-tools">{{year}}-{{month}}-{{day}}&nbsp{{hours}}:{{minutes}}:{{seconds}}&nbsp{{week}}</view>