water_affairs/control/components/prodnum-MT03/modules/tabs.vue

<template>
    <view class="tabs">
        <view class="box">
            <u-tabs :list="tabList" @click="changeTab" lineColor="#052E5D"
                :activeStyle="{ color: '#052E5D', fontWeight: 'bold' }" :inactiveStyle="{
                    color: '#BBBBBB',
                }" lineWidth="36" />
        </view>
        <view class="content">
            <view class="gdsz" v-show="showPage == '关断设置'">
                <mpattern ref="关断复位" /><!-- fColor="#000" -->
                <mpattern ref="关断设置" /><!-- fColor="#000" -->
                <!--      <view class="llcj" v-if="llcj.paramname">
                    {{ llcj.paramname }}：{{ llcj.lastvalue || ' -- ' }}<text class="unit">{{ llcj.unit || '' }}</text>
                </view> -->
                <view class="yblc">
                    <control-item v-show="showPage == '关断设置'" v-for="item in gdszList" :key="item.paramName" :item="item"
                        @click.native="onClick(item)" />
                </view>

            </view>
            <view class="yblc" v-show="showPage == '报警设置'">
                <control-item v-show="showPage == '报警设置'" v-for="item in bjszList" :key="item.paramName" :item="item"
                    @click.native="onClick(item)" />
            </view>

            <view class="yblc" v-show="showPage == '仪表量程'">
                <control-item v-show="showPage == '仪表量程'" v-for="item in yclbList" :key="item.paramName" :item="item"
                    @click.native="onClick(item)" />
            </view>

            <view class="plcsz" v-if="showPage == 'PLC时钟'">
                <view class="label">
                    年月日时分秒
                </view>
                <view class="value" v-if="plc.funcname">
                    {{ plc.params.lastvalue || '--' }}
                    <view class="plcsz-but" hover-class="navigator-hover" @click="datetimeShow = true">{{
                        plc.isfeedback ? '待更新' : '更新' }}</view>
                    <u-datetime-picker :show="datetimeShow" title="PLC时钟" v-model="plclastvalue" @cancel="onCancel"
                        @confirm="onConfirm" mode="datetime" />
                </view>
            </view>
        </view>
        <My_input ref="MyInput" />
    </view>
</template>

<script>
let model = null;
import mpattern from "./mpattern";
import { formatTime } from "../../../../utils/getTime";

export default {
    name: "tabs",
    components: { mpattern },
    props: {
        control: Object
    },
    data() {
        return {
            tabList: [],
            showPage: '关断设置',
            bjszList: [],
            yclbList: [],
            gdszList: [],
            llcj: {},
            plc: {},
            datetimeShow: false,
            plclastvalue: ""
        }
    },
    watch: {
        control: function (newVal) {
            if (newVal) {
                this.tabList = [{
                    name: '关断设置',
                }, {
                    name: '报警设置',
                }, {
                    name: '仪表量程'
                }, {
                    name: 'PLC时钟'
                }]
                try {
                    this.$refs.关断设置.ctrlModel = this.__proto__.getControlItem(['关断设置'], newVal)[0];
                    this.$refs.关断复位.ctrlModel = this.__proto__.getControlItem(['关断复位'], newVal, { 关断复位: "switch" })[0];
                    this.llcj = newVal.params.流量采集;
                    let nameList = ['关断流量设置', '关断延时设置']
                    this.gdszList = this.__proto__.getControlItem(nameList, newVal)
                } catch (error) {
                    console.error("关断设置", error)
                }
                try {
                    this.bjszList = this.__proto__.getControlItem(["失压警告", "失压警告设定", "失压报警", "失压报警设定", "超流量警告", "超流量警告设定", "超流量报警", "超流量报警设定"], newVal)
                } catch (error) {
                    console.error("报警设置", error)
                }
                try {
                    let nameList = ['压力量程高值', '压力量程低值', '流量量程高值', '流量量程低值',]
                    this.yclbList = this.__proto__.getControlItem(nameList, newVal)
                } catch (error) {
                    console.error("仪表量程", error)
                }
                try {
                    this.plc = this.__proto__.getControlItem(['PLC时钟'], newVal, { Ctrl: "datatime" })[0];
                    this.plclastvalue = this.plc.params.lastvalue;
                } catch (error) {
                    console.error("PLC时钟", error)
                }
            }
        }
    },
    methods: {
        changeTab(e) {
            this.showPage = e.name;
        },
        onClick(item) {
            if (!model) model = this.$refs.MyInput;
            model.openInput(item)
        },
        onCancel(e) {
            this.datetimeShow = false;
        },
        async onConfirm(e) {
            let date = formatTime(new Date(e.value)),
                plc = this.plc;
            let res = await this.$Http.setControlItem(plc.w_functionid, {
                [`${plc.paramName}`]: date
            });
            this.datetimeShow = false;
        }
    },
}
</script>

<style lang="scss" scoped>
.tabs {
    position: relative;
    box-sizing: border-box;

    .box {
        background: #fff;
        border: 4px;
        border-radius: 4px;
        box-sizing: border-box;
    }

    /deep/ .controlItem {
        width: 160px !important;
    }

    /deep/ .uni-scroll-view,
    /deep/.u-tabs__wrapper__nav__item {
        height: 35px !important;
    }

    /deep/ .u-tabs__wrapper__nav__item__text {
        font-size: 12px !important;
    }

    .content {
        // padding: 0 10px 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
        width: 100%;

        .gdsz {
            padding-top: 10px;

            .llcj {
                display: flex;
                align-items: center;
                font-size: 3.2vw;

                .unit {
                    font-size: 3.2vw;
                }
            }
        }

        .yblc {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .plcsz {
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 10px 10px 0;
            line-height: 25px;
            color: #fff;

            .value {
                display: flex;
                color: #fff;

                .plcsz-but {
                    background-color: #004A92;
                    font-size: 12px;
                    padding: 0 6px !important;
                    margin-right: 6px;
                    border-radius: 4px;
                    box-sizing: border-box;
                    margin-left: 20px;
                    color: #fff;
                    font-size: 10px;
                    height: 22px;
                    line-height: 22px;
                }
            }
        }
    }
}
</style>