water_affairs/control/components/prodnum-MT02/modules/division.vue

<template>
    <view class="control">
        <view class="control-title">
            分时控制
        </view>
        <view class="update-line">
            <view class="label">
                {{ timeControl.funcname }}
            </view>
            <view class="content">
                {{ timeControl.showValue }}
                <view class="control-updata-but" hover-class="navigator-hover" @click="onClick(timeControl)">{{
                    timeControl.isfeedback ? '待更新' : '更新' }}</view>
            </view>
        </view>
        <view class="item" hover-class="navigator-hover" v-for="item in list" :key="item.index" @click="onClick(item)">
            <view class="title">
                {{ item.funcname }}
            </view>
            <view class="row">
                <view class="box">
                    <view>
                        开始时间
                    </view>
                    <view class="content">
                        <view class="value">{{ item.showValue.begin || '--' }}</view>
                    </view>
                </view>
                <view class="box">
                    <view>
                        结束时间
                    </view>
                    <view class="content">
                        <view class="value">{{ item.showValue.end || '--' }}</view>
                    </view>
                </view>
                <view class="box">
                    <view class="">
                        压力设置
                    </view>
                    <view class="content">
                        <view class="value">{{ item.showValue.value || '--' }}</view>
                        <view class="unit">{{ item.params[item.keyList[4]].unit || '' }}</view>
                    </view>
                </view>
            </view>
            <view v-if="item.isfeedback" class="dot" />
        </view>
        <My_input ref="MyInput" @customMethod="customMethod">
            <view class="change-item" v-if="changeItem.funcname">
                <picker mode="time" :value="changeItem.showValue.begin" :end="changeItem.showValue.end" data-name="begin"
                    @change="timeChange">
                    <view class="row">
                        <view class="label">
                            开始时间：
                        </view>
                        <view class="value day-parting-row">{{ changeItem.showValue.begin || ' --' }}
                        </view>
                    </view>
                </picker>
                <picker mode="time" :start="changeItem.showValue.begin" :value="changeItem.showValue.end" data-name="end"
                    @change="timeChange">
                    <view class="row">
                        <view class="label">
                            结束时间：
                        </view>
                        <view class="value day-parting-row">{{ changeItem.showValue.end || ' --' }}</view>
                    </view>
                </picker>
                <view class="row">
                    <view class="label">
                        压力设置：
                    </view>
                    <view class="value">
                        <u-input :placeholder="changeItem.showValue.value || '压力设置'" v-model="changeItem.showValue.value"
                            :type="changeItem.params[`T${changeItem.index}_P`].num_scale == 0 ? 'number' : 'digit'">
                            <template slot="suffix">
                                {{ changeItem.params[`T${changeItem.index}_P`].unit || '' }}
                            </template>
                        </u-input>
                    </view>
                </view>
            </view>
        </My_input>
    </view>
</template>

<script>
export default {
    name: "division",
    data() {
        return {
            list: [],
            changeItem: {},
            timeControl: {}
        }
    },
    methods: {
        loadData(newVal) {
            let reg = /^T\d{1,5}$/,
                count = 0,
                list = [];
            for (const key in newVal.function) {
                if (reg.test(key)) count++
            }
            for (let i = 1; i <= count; i++) {
                let obj = newVal.function[`T${i}`],
                    keyList = [
                        `T${i}H`,//开始小时
                        `T${i}M`,//开始分钟
                        `T${i}H1`,//结束小时
                        `T${i}M1`,//结束分钟
                        `T${i}_P`,//压力设置
                    ],
                    item = {
                        keyList,
                        index: i,
                        inputType: "slot",
                        paramValue: {
                            begin: newVal.paramcmdvalues[`T${i}H`] + newVal.paramcmdvalues[`T${i}M`] ? newVal.paramcmdvalues[`T${i}H`] + ":" + newVal.paramcmdvalues[`T${i}M`] : "",
                            end: newVal.paramcmdvalues[`T${i}H1`] + newVal.paramcmdvalues[`T${i}M1`] ? newVal.paramcmdvalues[`T${i}H1`] + ":" + newVal.paramcmdvalues[`T${i}M1`] : "",
                            value: newVal.paramcmdvalues[`T${i}_P`]
                        },
                        showValue: {
                            begin: newVal.paramvalues[`T${i}H`] + newVal.paramvalues[`T${i}M`] ? newVal.paramvalues[`T${i}H`] + ":" + newVal.paramvalues[`T${i}M`] : "",
                            end: newVal.paramvalues[`T${i}H1`] + newVal.paramvalues[`T${i}M1`] ? newVal.paramvalues[`T${i}H1`] + ":" + newVal.paramvalues[`T${i}M1`] : "",
                            value: newVal.paramvalues[`T${i}_P`]
                        },
                        params: {}
                    };

                keyList.forEach(key => {
                    item.params[key] = newVal.params[key];
                });
                item.isfeedback = (newVal.isfeedback && (obj.paramValue.begin || obj.paramValue.end || obj.paramValue.value)) ? true : false;
                list.push(Object.assign(obj, item))
            }
            this.list = list;
            this.timeControl = this.__proto__.getControlItem(["TimeCon"], newVal)[0]
        },
        onClick(item) {
            this.$refs.MyInput.openInput(item, true)
            if (this.changeItem.funcname != item.funcname) this.changeItem = JSON.parse(JSON.stringify(item));
            let toBeUpdated = [];
            if (item.paramValue.begin) toBeUpdated.push(`开始时间：${item.paramValue.begin}`);
            if (item.paramValue.end) toBeUpdated.push(`结束时间：${item.paramValue.begin}`);
            if (item.paramValue.value) toBeUpdated.push(`压力设置：${item.paramValue.value}`);
            if (toBeUpdated.length) {
                model.toBeUpdated = '待更新记录：' + toBeUpdated.join(",")
            }
        },
        timeChange(e) {
            const name = e.currentTarget.dataset.name;
            this.changeItem.showValue[name] = e.detail.value;
        },
        customMethod() {
            const {
                showValue,
                w_functionid,
                params,
                index
            } = this.changeItem,
                MyInput = this.$refs.MyInput;
            if (!showValue.begin) return MyInput.submitBreak("还未填写开始时间")
            if (!showValue.end) return MyInput.submitBreak("还未填写结束时间")
            if ((showValue.value + '').length == 0) return MyInput.submitBreak("还未设定压力")
            showValue.value = (showValue.value - 0).toFixed(params[`T${index}_P`].num_scale)
            MyInput.submit(w_functionid, {
                [`T${index}H`]: showValue.begin.split(":")[1],
                [`T${index}M`]: showValue.begin.split(":")[0],
                [`T${index}H1`]: showValue.end.split(":")[1],
                [`T${index}M1`]: showValue.end.split(":")[0],
                [`T${index}_P`]: showValue.value,
            })
        }
    }
}
</script>

<style lang="scss" scoped>
/* 边框 */
.day-parting-row {
    display: flex;
    align-items: center;
    flex: 1;
    width: 0;
    border: 1px solid #dadbde;
    border-radius: 4px;
    padding: 6px 9px;
    height: 35px;
    font-size: 14px;
    box-sizing: border-box;
}

.item {
    position: relative;
    padding: 4px 6px 6px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 4px;
    margin-bottom: 5px;

    .title {
        margin-bottom: 6px;
        font-weight: bold;
    }

    .row {
        display: flex;

        .box {
            width: 33.33%;

            .content {
                display: flex;
                margin-top: 6px;
                align-items: flex-end;

                .value {
                    width: 0;
                    flex: 1;
                    color: #333;
                    font-size: 16px;
                    flex-shrink: 0;
                    font-weight: bold;
                }

                .unit {
                    font-size: 10px;
                    color: #666;
                    flex-shrink: 0;
                    max-width: 50px;
                }
            }
        }


    }

    .dot {
        position: absolute;
        right: 2px;
        top: 2px;
        width: 10px;
        height: 10px;
        background: #D9001B;
        border-radius: 50%;
    }
}

.change-item {

    .row {
        display: flex;
        align-items: center;
        line-height: 35px;
        width: 100%;
        margin-top: 4px;

        .label {
            width: 80px;
            flex-shrink: 0;
        }
    }

}
</style>