shuiwu/src/system/IOT/controlPanel/model/06/modules/timeControl.vue

<template>
  <div class="header">
    <span style="color:#ffffff">分时控制设置</span>
    <!-- <customBtn :btnOptions="[{label:'保存',value:'timeshared'}]" @clickBtn="updateData" v-if="detailData.function['timeshared']"></customBtn> -->
  </div>
  <MyInput 
      v-if="detailData.function['TimeControl'] && params.TimeCon"
      :form="detailData.paramvalues"
      name="TimeCon" 
      :unit="params.TimeCon && params.TimeCon.unit" 
      :title="params.TimeCon && params.TimeCon.paramname"
      :btnName="detailData.isSite ? '更新' : ''"
      :text="params.TimeCon.options.filter(item => item.value == detailData.paramvalues.TimeCon).length && params.TimeCon.options.filter(item => item.value == detailData.paramvalues.TimeCon)[0].label"
    >
    <updataBtn :icon1="detailData.paramcmdvalues.TimeCon && detailData.isfeedback ? true : false">
      <MyRadio 
        :data="detailData.paramcmdvalues.TimeCon"
        textColor="#000000" 
        @Change="modelChange" 
        v-model:value="detailData.paramcmdvalues.TimeCon" 
        :options="params.TimeCon.options" 
      />
    </updataBtn>
  </MyInput>
  <div class="info">
    <div class="info-item" v-for="(i,index) in 12">
      <div class="title" v-if="params[`T${i}_T`]">
        <span>时间段{{ i }}</span>
        <updataBtn v-if="detailData.function[`T${i}`] && detailData.isSite" :icon1="detailData.paramcmdvalues[`T${i}_T`] && detailData.isfeedback ? true : false">
          <div class="info-item_item" v-if="params[`T${i}_T`]" style="margin-bottom: 10px;">
              <MyInput 
                :scale="params[`T${i}_T`] && params[`T${i}_T`].num_scale" 
                v-model:value="detailData.paramcmdvalues[`T${i}_T`]" 
                :name="`T${i}_T`" 
                :title="params[`T${i}_T`] && params[`T${i}_T`].paramname"
                type="h:m"
                :form="detailData.paramcmdvalues"
                :ref="`Input${i}`"
                :isCheck="true"
                :unit="params[`T${i}_T`] && params[`T${i}_T`].unit" 
                inputBorder="1px solid #ccc"
              >
            </MyInput>
          </div>
          <div class="info-item_item" v-if="params[`T${i}_T`]">
              <MyInput 
                :scale="params[`T${i}_P`] && params[`T${i}_P`].num_scale" 
                v-model:value="detailData.paramcmdvalues[`T${i}_P`]" 
                :name="`T${i}_P`" 
                :title="params[`T${i}_P`] && params[`T${i}_P`].paramname"
                :form="detailData.paramcmdvalues"
                :isCheck="true"
                :ref="`Input${i}`"
                :unit="params[`T${i}_P`] && params[`T${i}_P`].unit" 
                inputBorder="1px solid #ccc"
              >
            </MyInput>
          </div>
          <customBtn 
            style="text-align:right;margin-top: 10px;" btnColor="rgb(22,255,246)" 
            textColor="#000000" 
            :btnOptions="[{label:'更新',value:'timeshared'}]" 
            @clickBtn="updateData(i,$refs[`Input${i}`])" 
            v-if="detailData.function[`T${i}`]"
          ></customBtn>
        </updataBtn>
      </div>
      <div class="info-item_item" v-if="params[`T${i}_T`]">
          <MyInput 
            :scale="params[`T${i}_T`] && params[`T${i}_T`].num_scale" 
            v-model:value="detailData.paramvalues[`T${i}_T`]" 
            :name="`T${i}_T`" 
            :title="params[`T${i}_T`] && params[`T${i}_T`].paramname"
            type="h:m"
            :form="detailData.paramvalues"
            :disabled="true"
          >
        </MyInput>
      </div>
      <div class="info-item_item" v-if="params[`T${i}_T`]">
          <MyInput 
            :scale="params[`T${i}_P`] && params[`T${i}_P`].num_scale" 
            v-model:value="detailData.paramvalues[`T${i}_P`]" 
            :name="`T${i}_P`" 
            :title="params[`T${i}_P`] && params[`T${i}_P`].paramname"
            :form="detailData.paramvalues"
            :disabled="true"
          >
        </MyInput>
      </div>
    </div>
  </div>
</template>

<script setup>
import MyInput from '../../../modules/myInput.vue'
import MyRadio from '../../../modules/myRadio.vue'
import customBtn from '../../../modules/customBtn.vue'
import updataBtn from '../../../modules/updataBtn.vue'
import {ref, defineProps, defineEmits, inject} from 'vue'
import {Modal} from 'ant-design-vue'
import Api from '@/api/api'
import utils from '@/utils/utils'
import {useRouter} from 'vue-router'
let emit = defineEmits(['onSuccess'])
let props = defineProps({})

let router = useRouter()

let detailData = inject('detail')
let params = ref(detailData.value.params)
let form = ref(detailData.value.paramvalues)
let cmdForm = ref(detailData.value.paramcmdvalues)

const radioStyle = ref({
  color:'#ffffff',
  marginBottom:'10px',
  fontSize:'12px'
});

let Input = ref()

let modelChange = (num) => {
  Modal.confirm({
    title:'确定改变模式吗?',
    async onOk () {
      let res = await Api.requested({
        "id": "20230627163701",
        "content": {
          "w_deviceid": router.currentRoute.value.query.id,
          "w_functionid": detailData.value.function.TimeControl.w_functionid,
          "params": {
            ['TimeCon']: num
          }
        }
      })
      utils.message(res,'操作成功',() => {
      })
    },
    onCancel () {
      cmdForm.value.TimeCon = cmdForm.value.TimeCon == 1 ? 0 : 1 
    }
  })
}

let updateData = async (i,vm) => {
  let check = await vm[0].Form.validateFields()
  if (!check) return
  Modal.confirm({
    title:'确定更新数据吗?',
    async onOk () {
      let keys = Object.keys(detailData.value.function[`T${i}`].params)
      let obj = {}
      keys.forEach(item => {
        obj[item] = detailData.value.paramcmdvalues[item].replace(':','_')
      })
      let res = await Api.requested({
        "id": "20230627163701",
        "content": {
          "w_deviceid": router.currentRoute.value.query.id,
          "w_functionid": detailData.value.function[`T${i}`].w_functionid,
          "params": obj
        }
      })
      utils.message(res,'操作成功',() => {
        emit('onSuccess')
      })
    }
  })
  // let length = 0
  // Input.value.forEach( async i => {
  //   i.valiDator(() => {
  //     length = length + 1
  //     if (length >= Input.value.length) {
  //       Modal.confirm({
  //         title:'确定更新数据吗?',
  //         async onOk () {
  //           let functions = detailData.value.function[data.value]
  //             let keys = Object.keys(functions.params)
  //             let obj = {}
  //             keys.forEach(item => {
  //               obj[item] = form.value[item]
  //             })
  //             obj['TimeCon'] = form.value['timeCon']
  //             console.log(functions);
  //             let res = await Api.requested({
  //               "id": "20230627163701",
  //               "content": {
  //                 "w_deviceid": router.currentRoute.value.query.id,
  //                 "w_functionid": functions.w_functionid,
  //                 "params": obj
  //               }
  //             })
  //             utils.message(res,'操作成功',() => {
  //             })
  //         }
  //       })
  //     }
  //   })
  // })
}
</script>

<style scoped>
*{
  box-sizing: border-box;
}
.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.header:first-child {
  font-size: 14px;
}
.header:last-child {
  font-size: 12px;
}
.info {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  height: calc(100% - 60px);
  scrollbar-width: none;
}
.info .info-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
.info .info-item .title {
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.info .info-item .info-item_item {
  display: flex;
  margin-bottom: 10px;
}
.info .info-item .info-item_item .name {
  font-size: 12px;
  color: #ffffff;
  background: rgb(255, 225, 255,.25);
  padding: 0 10px;
  flex: 1;
}
.info .info-item .info-item_item .value {
  font-size: 12px;
  color:#16FFF6;
  background: rgb(255, 225, 255,.10);
  padding: 0 10px;
  flex: 2.5;
  text-align: right;
}

::-webkit-scrollbar {
  display: none;
}
/deep/ .ant-form-item {
  margin-bottom: 0 !important;
}
</style>