修改首页草药名称过长UI错乱问题

朱桂飞

2023-04-11 e86013cd8d4b88ca916067b01eeb452401b38c7b

修改首页草药名称过长UI错乱问题

本地图片上传云

 App.vue

@@ -2,7 +2,7 @@
    import Vue from 'vue'
    export default {

        globalData: {

            token: "aaa"

            token: ""

        },

        onLaunch: function() {

            uni.getSystemInfo({

@@ -39,25 +39,9 @@
            //console.log('App Hide')

        },
        methods:{
		 
            
        },

        mounted() {

            var i = 0;

            // setInterval(function() {

            //     i++

            //     if (i % 2 == 0) {

            //         uni.showTabBarRedDot({

            //             index: 1

            //         })

            //     } else {

            //         uni.hideTabBarRedDot({

            //             index: 1

            //         })

            //     }

            // }, 3000)







        }

    }


 pages.json

@@ -102,7 +102,7 @@
    ],

    "globalStyle": {

        "navigationBarTextStyle": "white",

        "navigationBarTitleText": "uni-app",

        "navigationBarTitleText": "兰宝智能",

        "navigationBarBackgroundColor": "#F8F8F8",

        "backgroundColor": "#F8F8F8"

    },


 pages/tabBar/general.vue

@@ -14,7 +14,7 @@
        <cu-custom bgColor="bg-gradual-blue" :isBack="false">

            <block slot="content">干燥设备监控系统</block>

        </cu-custom>



        <u-toast ref="uToast"></u-toast>

        <!--         <view class="card-box dynamic shadow cu-list menu">

            <view class="title-box">

                <view class="left">

@@ -177,7 +177,7 @@
                    <view class="flex">

                        <text>中草药</text>

                        <text>丨</text>

                        <text>{{showValue(item.herbName)}}</text>

                        <text @click="showLongName(showValue(item.herbName))" class="text-cut flex-twice">{{showValue(item.herbName)}}</text>

                        <!-- <view class="margin-lr-sm">

                            <u-tag text="报警一次" plain size="mini" type="warning"></u-tag>

                        </view> -->

@@ -363,7 +363,14 @@
            this.getOrderList(day, day)



        },

        methods: {

        methods: {
            showLongName(longName){
                    this.$refs.uToast.show({
                        type: 'default',
                        message: longName
                    })
				
            },

            dayChange(dayInfo) { // 点击日期

                this.model.date = dayInfo.date

                console.log("点击日期", JSON.parse(JSON.stringify(dayInfo)));


 pages/tabBar/main.vue

@@ -37,7 +37,6 @@
            return {
                current:0,
                list: [
                    '../../static/image/equ1.png',
                    'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe2.jpg',
                    'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe3.jpg',
                    'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe4.jpg',

 pages/tabBar/monitor.vue

@@ -5,8 +5,25 @@
            <block slot="content">机台监控</block>

        </cu-custom>

        <!-- <u-notice-bar :text="notice" mode="closable"  ></u-notice-bar> -->

        <!--  -->

        <view class="uni-padding-wrap">

	 
        <!--  <view class="nav uni-padding-wrap margin-bottom-xs">

            <u--image v-if="runStatu" :showLoading="true" :fade="true" duration="450"

                src="https://dev.shlanbao.cn:9999/fileTransfer/preview?userFileId=1645312976277106688&isMin=false&shareBatchNum=&extractionCode="

                width="100%" height="200px" mode="aspectFit">

                <template v-slot:loading>

                    <u-loading-icon></u-loading-icon>

                </template>

            </u--image>



            <u--image v-else :showLoading="true" :fade="true" duration="450"

                src="https://dev.shlanbao.cn:9999/fileTransfer/preview?userFileId=1645312976381964288&isMin=false&shareBatchNum=&extractionCode="

                width="100%" height="200px" mode="aspectFit">

                <template v-slot:loading>

                    <u-loading-icon></u-loading-icon>

                </template>

            </u--image>

        </view> -->

        <view  class="uni-padding-wrap">

            <view class="page-section swiper">

                <view class="page-section-spacing">

                    <swiper class="swiper" style="height: 450rpx;" circular="true" indicator-dots="true" autoplay="true"

@@ -40,20 +57,23 @@


            <view class="text-gray  margin-top-xs">

                <text class="margin-right-xs">投料:</text>

                <text class="text-cyan">{{$lget(model,'feed')}} <text class="text-gray margin-left-xs">筐</text></text>
			 
            </view>
            <view class="text-gray  margin-top-xs">
                <text class="margin-right-xs">重量:</text>
                <text class="text-cyan margin-right-xs">{{$lget(model,'trendVo.weight')}}<text class="text-gray margin-left-xs">/</text></text>
                <text>  <text class="text-line-through">{{$lget(model,'originWeight')}}</text>  <text class="text-gray margin-left-xs">kg</text></text>
			 
            </view>
			
            <view class="text-gray  margin-top-xs">
                <text class="margin-right-xs">用时:</text>
                <text class="text-cyan">{{$lget(model,'trendVo.totalTime')}}<text class="text-gray margin-left-xs">min</text></text>
			 
                <text class="text-cyan">{{$lget(model,'feed')}} <text class="text-gray margin-left-xs">筐</text></text>



            </view>

            <view class="text-gray  margin-top-xs">

                <text class="margin-right-xs">重量:</text>

                <text class="text-cyan margin-right-xs">{{$lget(model,'trendVo.weight')}}<text

                        class="text-gray margin-left-xs">/</text></text>

                <text> <text class="text-line-through">{{$lget(model,'originWeight')}}</text> <text

                        class="text-gray margin-left-xs">kg</text></text>



            </view>



            <view class="text-gray  margin-top-xs">

                <text class="margin-right-xs">用时:</text>

                <text class="text-cyan">{{$lget(model,'trendVo.totalTime')}}<text

                        class="text-gray margin-left-xs">min</text></text>



            </view>



            <view class="margin-tb-sm" style="position: relative;">

@@ -61,14 +81,16 @@
                <text class="text-cyan text-bold text-xl margin-right-xs">{{ $lget(this.model, 'trendVo.moisture') }}%

                </text>

                <text class="text-gray text-df margin-right-xs">热风:</text>

                <text class="text-cyan text-bold text-xl margin-right-xs">{{$lget(this.model, 'trendVo.bellowsTemp') }} ℃

                <text class="text-cyan text-bold text-xl margin-right-xs">{{$lget(this.model, 'trendVo.bellowsTemp') }}℃

                </text>





                <view class="scoreBox">

                    <text class="text-gray text-sm">目标: <text class="text-green text-xl text-bold">{{$lget(model,'target')}}% </text> </text>

                    <text class="text-gray text-sm">初始: <text class="text-gray text-xl text-bold">{{$lget(model,'initial')}}% </text></text>

					
                    <text class="text-gray text-sm">目标: <text

                            class="text-green text-xl text-bold">{{$lget(model,'target')}}% </text> </text>

                    <text class="text-gray text-sm">初始: <text

                            class="text-gray text-xl text-bold">{{$lget(model,'initial')}}% </text></text>



                    <!-- <view class="text-yellow text-xs flex justify-around">

                        <uni-text class="text-yellow cuIcon-favorfill"></uni-text>

                        <uni-text class="text-yellow cuIcon-favorfill"></uni-text>

@@ -199,7 +221,7 @@
                    <view class="h-td">干燥时间</view>

                </view>

                <view class="h-tr h-tr-2">

                    <view class="h-td">{{$lget(model,'envTemp')  == "" ? "--" :  $lget(model,'envTemp')}}℃</view>

                    <view class="h-td">{{$lget(model,'envTemp') == "" ? "--" :  $lget(model,'envTemp')}}℃</view>

                    <view class="h-td">{{$lget(model,'envHum') == "" ? "--" :$lget(model,'envHum') }}%</view>

                    <view class="h-td">{{$lget(model,'windTemp')}}℃</view>

                    <view class="h-td">{{$lget(model,'delay')}}ms</view>

@@ -329,7 +351,8 @@
            </view>

        </view>

        <view class="chartsMain">

            <qiun-data-charts type="area" :opts="opts" :animation="false" :canvas2d="true" :ontouch="true" :chartData="chartData" />

            <qiun-data-charts type="area" :opts="opts" :animation="false" :canvas2d="true" :ontouch="true"

                :chartData="chartData" />

        </view>





@@ -407,6 +430,7 @@




        },

	
        onLoad(e) {



        },

@@ -418,16 +442,16 @@
            console.info(this.$monitorTimer)

        },

        onUnload() {

		 


        },

        mounted() {



        },

        onReady() {

            //this.getServerData()
            //this.getServerData()



        },

        methods: {

        methods: {
            getServerData() {

                //模拟从服务器获取数据时的延时

                setTimeout(() => {

@@ -452,7 +476,9 @@
                }, 500);

            },





            /**
             * 组件数据
             */

            createData() {

                //温度数据 10s一次

                let bellowsTemp = this.$lget(this.model, 'bellowsTemp');

@@ -462,23 +488,23 @@
                let wmap = {} //取出所有重量数据

                let mmap = {} //取出所有温度数据

                let minW = null; //第一个重量数据

                let minM = null; //第一个温度数据
                let minM = null; //第一个温度数据

                let maxW = null; //最后一个重量数据

                let maxM = null; //最后一个温度数据

                //取出重量和湿度数据

                if (detailList && detailList.length > 0) {

                    for (var i = 0; i < detailList.length; i++) {

                        let item = detailList[i]
                        let item = detailList[i]

                        //每个时间节点重量数据

                        wmap[item.totalTime] = item.weight

                        mmap[item.totalTime] = item.moisture

                        if (i == 0) {

                            minW = item.weight

                            minM = item.moisture

                        }
                        if (i == (detailList.length - 1)) {
                            maxW = item.weight
                            maxM = item.moisture
                        }

                        if (i == (detailList.length - 1)) {

                            maxW = item.weight

                            maxM = item.moisture

                        }

                    }

                }

@@ -489,29 +515,29 @@
                //根据温度数据长度，生成x轴、重量和湿度数组等

                for (let key in bellowsTemp) {

                    //console.log(key + '---' + bellowsTemp[key])

                        tList.push(bellowsTemp[key])

                        wList.push(wmap[key] || null)

                        mList.push(mmap[key] || null)

                        xList.push(key)

                }
                //填充虚拟数据 TODO 删除
                // for(let i = 1 ; i <= 10 ; i++){
                //     tList.push(i*2)
                //     wList.push(i*100)
                //     mList.push(i*10)
                //     xList.push(i)
                // }
				
                //d第一个数据为空 设置为第一次称重数据（没有称重数据则设置为0）
                if (!wList[0]) {
                    wList[0] = minW||0 
                }
				 
				
                if (!mList[0]) {
                    mList[0] = minM||0
                }
				
                    tList.push(bellowsTemp[key])

                    wList.push(wmap[key] || null)

                    mList.push(mmap[key] || null)

                    xList.push(key)

                }

                //填充测试数据 TODO 删除

                // for(let i = 1 ; i <= 10 ; i++){

                //     tList.push(i*2)

                //     wList.push(i*100)

                //     mList.push(i*10)

                //     xList.push(i)

                // }



                //第一个数据为空 设置为第一次称重数据（没有称重数据则设置为0）

                if (!wList[0]) {

                    wList[0] = minW || 0

                }





                if (!mList[0]) {

                    mList[0] = minM || 0

                }



                //最后一个数据为空 设置为最后一次称重数据

                if (!wList[wList.length - 1]) {

                    wList[wList.length - 1] = maxW

@@ -540,19 +566,21 @@
                    color: '#1890ff'

                }]



                console.error(wmap)

                console.error(mmap)

                console.error("============")

                console.error(wList)

                console.error(mList)

                console.error(tList)

                // console.error(wmap)

                // console.error(mmap)

                // console.error("============")

                // console.error(wList)

                // console.error(mList)

                // console.error(tList)

                let res = {

                    categories: xList,

                    series: series

                }

                this.chartData = JSON.parse(JSON.stringify(res));

            },



            /**
             * 获取实时数据
             */

            getRealData() {

                this.$api.getRealTimeData(this.queryParam).then((res) => {

                    if (res.success) {

@@ -574,7 +602,7 @@
        computed: {

            //运行状态

            runStatu() {

                let stop = this.$lget(this.model, 'result.stop');

                let stop = this.$lget(this.model, 'stop');

                return !stop



            },

@@ -606,10 +634,11 @@
                return formula

            },

            //干燥开始时间

            startTime() {

                if (this.model && this.model.detailList) {

                    if (this.model.detailList.length > 0) {

                        return this.model.detailList[0].tim

            startTime() {
                let detailList = this.$lget(this.model, 'detailList')

                if (detailList) {

                    if (detailList.length > 0) {

                        return detailList[0].tim

                    }

                }

                return ""

@@ -706,4 +735,15 @@
        width: 100%;

        height: 300px;

    }

</style>


    .nav {

        background-color: white;

        width: 100%;

        height: 200px;



        image {

            width: 100%;

            height: 100%;

        }

    }

</style>

 static/image/equ1.png

Binary files differ