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

<template>
    <view class="control">
        <view class="control-title">
            分时控制
        </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 class="">
                        开始时间
                    </view>
                    <view class="content">
                        <view class="value">{{ item.showValue.begin || '--' }}</view>
                    </view>
                </view>
                <view class="box">
                    <view class="">
                        结束时间
                    </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.funcname + "流量设定"].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">{{ changeItem.showValue.begin || ' --' }}
                        </view>
                    </view>
                </picker>
                <picker class="row" 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">{{ 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[changeItem.funcname + '流量设定'].num_scale == 0 ? 'number' : 'digit'">
                            <template slot="suffix">
                                {{ changeItem.params[changeItem.funcname + "流量设定"].unit || '' }}
                            </template>
                        </u-input>
                    </view>
                </view>
            </view>
        </My_input>
    </view>
</template>

<script>
let model = null;
export default {
    name: "division",
    data() {
        return {
            list: [],
            changeItem: {}
        }
    },
    methods: {
        loadData(newVal) {
            let reg = /^时段\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[`时段${i}`],
                    keyList = [
                        `时段${i}分钟开始`,//0
                        `时段${i}分钟结束`,//1
                        `时段${i}小时开始`,//2
                        `时段${i}小时结束`,//3
                        `时段${i}流量设定`,//4
                        `时间段${i}置位`,//5
                    ],
                    item = {
                        keyList,
                        index: i,
                        inputType: "slot",
                        paramValue: {
                            begin: newVal.paramcmdvalues[keyList[2]] ? newVal.paramcmdvalues[keyList[2]] + ":" + newVal.paramcmdvalues[keyList[0]] : "",
                            end: newVal.paramcmdvalues[keyList[3]] ? newVal.paramcmdvalues[keyList[3]] + ":" + newVal.paramcmdvalues[keyList[1]] : "",
                            value: newVal.paramcmdvalues[keyList[4]]
                        },
                        showValue: {
                            begin: newVal.paramvalues[keyList[2]] ? newVal.paramvalues[keyList[2]] + ":" + newVal.paramvalues[keyList[0]] : "",
                            end: newVal.paramvalues[keyList[3]] ? newVal.paramvalues[keyList[3]] + ":" + newVal.paramvalues[keyList[1]] : "",
                            value: newVal.paramvalues[keyList[4]]
                        },
                        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;
        },
        onClick(item) {
            if (!model) model = this.$refs.MyInput;
            model.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,
                funcname
            } = 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[funcname + '流量设定'].num_scale)
            MyInput.submit(w_functionid, {
                "时段1分钟开始": showValue.begin.split(":")[1],
                "时段1小时开始": showValue.begin.split(":")[0],
                "时段1分钟结束": showValue.end.split(":")[1],
                "时段1小时结束": showValue.end.split(":")[0],
                "时段1流量设定": showValue.value,
                [`时间段${index}置位`]: params[`时间段${index}置位`].lastvalue
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.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%;

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

}
</style>