swOperation/src/operation/moduleNormal/controlPanel/model/dianci/modules/controlPanel.vue

<template>
  <div class="header">
    <span style="color:#ffffff">控制面板</span>
  </div>
  <div style="height: calc(100% - 25px);overflow-y: scroll;">
    <MyInput 
        v-if="params.FlowAcc"
        :form="form"
        :scale="params.FlowAcc && params.FlowAcc.num_scale" 
        v-model:value="form.FlowAcc" 
        name="FlowAcc" 
        :unit="params.FlowAcc && params.FlowAcc.unit" 
        :title="params.FlowAcc && params.FlowAcc.paramname"
        :isCheck="true" 
        btnName="更新"
        @upData="updateData('Flow control')"
        :max="params.FlowAcc && params.FlowAcc.num_maxvalue"
        :min="params.FlowAcc && params.FlowAcc.num_minvalue"
        :step="params.FlowAcc && params.FlowAcc.num_step"
      >
    </MyInput>

    <MyInput 
        v-if="params.PresAcc"
        type="int" 
        :scale="params.PresAcc && params.PresAcc.num_scale" 
        :isCheck="true" 
        v-model:value="form.PresAcc" 
        name="PresAcc" 
        :unit="params.PresAcc && params.PresAcc.unit" 
        :title="params.PresAcc && params.PresAcc.paramname"
        btnName="更新"
        :form="form"
        @upData="updateData('pressure control')"
        :max="params.PresAcc && params.PresAcc.num_maxvalue"
        :min="params.PresAcc && params.PresAcc.num_minvalue"
        :step="params.PresAcc && params.PresAcc.num_step"
      >
    </MyInput>
    <MyRadio v-if="detailData.function.Config" @Change="sleepChange" v-model:value="form.Config" :title="detailData.function.Config.funcname" :options="params.Config.options"></MyRadio>

    <MyInput 
        v-if="params.SleepTime"
        type="int" 
        :scale="params.SleepTime && params.SleepTime.num_scale" 
        :isCheck="true" 
        v-model:value="form.SleepTime" 
        name="SleepTime" 
        :unit="params.SleepTime && params.SleepTime.unit" 
        :title="params.SleepTime && params.SleepTime.paramname"
        btnName="更新"
        :form="form"
        @upData="updateData('Sleep time')"
        :max="params.SleepTime && params.SleepTime.num_maxvalue"
        :min="params.SleepTime && params.SleepTime.num_minvalue"
        :step="params.SleepTime && params.SleepTime.num_step"
      >
    </MyInput>

    <MyInput 
        v-if="params.FloMinP"
        :form="form"
        v-model:value="form.FloMinP" 
        name="FloMinP" 
        :unit="params.FloMinP && params.FloMinP.unit" 
        :title="params.FloMinP && params.FloMinP.paramname"
        :scale="params.FloMinP && params.FloMinP.num_scale" 
        :isCheck="true" 
        btnName="更新"
        @upData="updateData('Minimum')"
        :max="params.FloMinP && params.FloMinP.num_maxvalue"
        :min="params.FloMinP && params.FloMinP.num_minvalue"
        :step="params.FloMinP && params.FloMinP.num_step"
      >
    </MyInput>

    <MyInput 
        v-if="params.FloMaxP"
        :form="form"
        v-model:value="form.FloMaxP" 
        name="FloMaxP" 
        :unit="params.FloMaxP && params.FloMaxP.unit" 
        :title="params.FloMaxP && params.FloMaxP.paramname"
        :scale="params.FloMaxP && params.FloMaxP.num_scale" 
        :isCheck="true" 
        btnName="更新"
        @upData="updateData('MOP')"
        :max="params.FloMaxP && params.FloMaxP.num_maxvalue"
        :min="params.FloMaxP && params.FloMaxP.num_minvalue"
        :step="params.FloMaxP && params.FloMaxP.num_step"
      >
    </MyInput>
    <span v-if="params.ConMode">当前模式：</span>
  <customBtn 
    v-if="params.ConMode"
    style="margin-top: 20px;"
    ref="tab"
    :select="true"
    v-model:value="form.Control"
    :btnOptions="params.ConMode.options" 
    :tab="true" 
    @selectChange="modelChange"
    >
    <template #slot0="{data}">
      <div>
        <p style="font-size: 12px;">{{params.UpP && params.UpP.paramname}}：<span style="font-size: 18px;">{{ form.UpP }}MPa</span></p>
        <MyInput 
            v-if="params.UpTar"
            type="int" 
            :scale="params.UpTar && params.UpTar.num_scale" 
            :isCheck="true" 
            v-model:value="form.UpTar" 
            name="UpTar" 
            :unit="params.UpTar && params.UpTar.unit" 
            :title="params.UpTar && params.UpTar.paramname"
            :labelWidth="4"
            :inputWidth="5"
            btnName="更新"
            :form="form"
            @upData="updateData('Upstream')"
            :max="params.UpTar && params.UpTar.num_maxvalue"
            :min="params.UpTar && params.UpTar.num_minvalue"
            :step="params.UpTar && params.UpTar.num_step"
          >
        </MyInput>
      </div>
    </template>

    <template #slot1="{data}">
      <div>
        <p style="font-size: 12px;">{{params.DownP && params.DownP.paramname}}：<span style="font-size: 18px;">{{ form.DownP }}MPa</span></p>
          <MyInput 
              v-if="params.DownTar"
              type="int" 
              scale="2" 
              :scale="params.DownTar && params.DownTar.num_scale" 
              :isCheck="true" 
              v-model:value="form.DownTar" 
              name="DownTar" 
              :unit="params.DownTar && params.DownTar.unit" 
              :title="params.DownTar && params.DownTar.paramname"
              :labelWidth="4"
              :inputWidth="5"
              btnName="更新"
              :form="form"
              @upData="updateData('Downstream')"
              :max="params.DownTar && params.DownTar.num_maxvalue"
              :min="params.DownTar && params.DownTar.num_minvalue"
              :step="params.DownTar && params.DownTar.num_step"
            >
          </MyInput>
      </div>
    </template>

    <template #slot2="{data}">
      <div>
        <p style="font-size: 12px;">{{params.NowFlow && params.NowFlow.paramname}}：<span style="font-size: 18px;">{{ form.NowFlow }}m³/h</span></p>
          <MyInput 
              v-if="params.TatFlow"
              type="int" 
              :scale="params.TatFlow && params.TatFlow.num_scale" 
              :isCheck="true" 
              v-model:value="form.TatFlow" 
              name="TatFlow" 
              :unit="params.TatFlow && params.TatFlow.paramname" 
              :title="params.TatFlow && params.TatFlow.paramname"
              :labelWidth="4"
              :inputWidth="5"
              btnName="更新"
              :form="form"
              @upData="updateData('Constantflow')"
              :max="params.TatFlow && params.TatFlow.num_maxvalue"
              :min="params.TatFlow && params.TatFlow.num_minvalue"
              :step="params.TatFlow && params.TatFlow.num_step"
            >
          </MyInput>
      </div>
    </template>

    <template #slot3="{data}">
      <div>
        <p style="font-size: 12px;">{{params.MostBad && params.MostBad.paramname}}：<span style="font-size: 18px;">{{ form.MostBad }}MPa</span></p>
          <MyInput 
              v-if="params.TarBad"
              type="int" 
              :scale="params.TarBad && params.TarBad.num_scale" 
              :isCheck="true" 
              v-model:value="form.TarBad" 
              name="TarBad" 
              :unit="params.TarBad && params.TarBad.unit" 
              :title="params.TarBad && params.TarBad.paramname"
              :labelWidth="4"
              ::inputWidth="5"
              btnName="更新"
              :form="form"
              @upData="updateData('unfavorable')"
              :max="params.TarBad && params.TarBad.num_maxvalue"
              :min="params.TarBad && params.TarBad.num_minvalue"
              :step="params.TarBad && params.TarBad.num_step"
            >
          </MyInput>
      </div>
    </template>
  </customBtn>
  </div>
    
    
</template>

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

let router = useRouter()
let detailData = inject('detail')
let params = ref(detailData.value.params)
let form = ref(detailData.value.paramvalues)
let tab = ref()
console.log(params,'params');
console.log(form.value,'formData');

nextTick(() => {
  tab.value.active = form.value.Control
})

let updateData = (funName) => {
   Modal.confirm({
    title:'确定更新数据吗?',
    async onOk () {
      let functions = detailData.value.function[funName]
        let keys = Object.keys(functions.params)
        let obj = {}
        keys.forEach(item => {
          obj[item] = form.value[item]
        })
        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,'操作成功',() => {
          emit('onSuccess')
        })
    }
   })
}

let modelChange = async (data) => {
  let res = await Api.requested({
    "id": "20230627163701",
    "content": {
      "w_deviceid": router.currentRoute.value.query.id,
      "w_functionid": detailData.value.function.Ctrl.w_functionid,
      "params": {
        'Control':data
      }
    }
  })
  utils.message(res,'操作成功',() => {
    emit('onSuccess')
  })
}

let sleepChange = async () => {
  let res = await Api.requested({
    "id": "20230627163701",
    "content": {
      "w_deviceid": router.currentRoute.value.query.id,
      "w_functionid": detailData.value.function.Config.w_functionid,
      "params": {
        ['Config']: form.value.Config == 0 ? 1 : 0
      }
    }
  })
  if (res.code == 0) {
    form.value.Config = form.value.Config == 1 ? 0 : 1 
  }
  console.log(form.value.Config);
  utils.message(res,'操作成功',() => {
  })
}

</script>

<style scoped>
*{
  box-sizing: border-box;
  color: #ffffff;
}
p{
  margin: 0;
}
.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.header:first-child {
  font-size: 14px;
}
.lamp-box {
  display: flex;
  justify-content: space-between;
  width: 252px;
}

.lamp {
  color:#ffffff;
  font-size: 12px;
  display: flex;
  flex-direction: column;
}
.lamp img {
  width: 20px;
  height: 20px;
  margin-bottom: 6px;
}

.info-box {
  border: 1px dashed rgb(255, 225, 255,.45);
  color: #ffffff;
  width: 130px;
  padding: 10px;
}

/deep/.ant-form-item-label>label {
  color:#ffffff !important;
}
/deep/.ant-radio-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
/deep/.ant-radio-checked .ant-radio-inner {
  border-color: #16FFF6 !important;
}
/deep/.ant-radio-inner:after {
  background-color: #16FFF6 !important;
}
/deep/.ant-radio-inner {
  background: none;
}
/deep/.ant-form-item {
  margin-bottom: 10px !important;
}
</style>