gasInjection-project/src/views/vent/monitorManager/gasPumpMonitor/components/DetailModal.vue

<template>
  <BasicModal @register="register" title="设备控制" width="700px" v-bind="$attrs" @ok="onSubmit" @cancel="onSubmit">
    <div>
      <div class="password-box">
        <div class="vent-flex-row">
          <ExclamationCircleFilled style="color: #ffb700; font-size: 30px" />
          <div class="warning-text">请先输入密码再进行操作！</div>
        </div>
        <div class="vent-flex-row input-box">
          <div class="label">操作密码：</div>
          <a-input size="small" type="password" v-model:value="passWord" />
        </div>
      </div>
      <div class="">
         <a-divider class="divider">公共设备控制</a-divider>
        <div>
          <div v-for="(pumpType, index) in publicPumpCtrlType" :key="index">
            <div class="device-group"  v-for="key in 2" :key="key">
              <div class="title">#{{ key }}{{ pumpType.title }}：</div>
              <div class="btn-group">
                <a-button class="btn" v-for="(pump, i) in PumpCtrlItems" :key="i" type="primary" @click="handlerFn(`${pumpType.code}${key}${pump.code}`)">#{{ key }}{{ pumpType.title }}{{ pump.title }}</a-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="">
        <a-divider class="divider">单动控制</a-divider>
        <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="pulp-title"/><span>泵站控制</span></div>
        <div class="vent-margin-b-10">
          <div v-for="(pumpType, index) in pumpCtrlType" :key="index">
            <div class="device-group"  v-for="key in 2" :key="key">
              <div class="title">#{{ key }}{{ pumpType.title }}：</div>
              <div class="btn-group">
                <a-button class="btn" v-for="(pump, i) in PumpCtrlItems" :key="i" type="primary" @click="handlerFn(`${pumpType.code}${key}${pump.code}`)">#{{ key }}{{ pumpType.title }}{{ pump.title }}</a-button>
              </div>
            </div>
          </div>
        </div>
        <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="pulp-title"/><span>阀门控制</span></div>
        <div  v-for="key in 2" :key="key">
          <div class="device-group" v-for="(valveType, index) in valveCtrlType" :key="index">
            <div class="title">#{{ key }}{{ valveType.title }}：</div>
            <div class="btn-group">
              <a-button class="btn" v-for="(valve, i) in valveCtrl" :key="i" type="primary" @click="handlerFn(`CentrifugalPump${key}_${valveType.code}${valve.code}`)">#{{ key }}{{ valveType.title }}{{ valve.title }}</a-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>

import { onMounted, ref, defineEmits, onUnmounted } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { pumpCtrlType, valveCtrlType, valveCtrl, PumpCtrlItems, publicPumpCtrlType } from '../gasPump.data'
import { SvgIcon } from '/@/components/Icon'
import { message } from 'ant-design-vue';
import { ExclamationCircleFilled } from '@ant-design/icons-vue';
import { deviceControlApi } from '/@/api/vent/index';

const emit = defineEmits(['close', 'register'])
const props = defineProps({
  deviceType: {
    type: String,
    required: true,
  },
  deviceId: {
    type: String,
    required: true,
  }
})

const passWord = ref('')
// 注册 modal
const [register, { closeModal }] = useModalInner(() => {
  passWord.value = ''
});

async function onSubmit() {
  emit('close')
  closeModal();
}

function handlerFn(paramcode) {
  if (!passWord.value) {
    message.warning('请先输入密码！！！');
    return;
  }
  let value = null
  const data = {
    deviceid: props.deviceId,
    devicetype: props.deviceType,
    paramcode: paramcode,
    password: passWord.value,
    value: value,
  };
  deviceControlApi(data).then((res) => {
    message.success('控制成功成功！');
  }).catch((err) => {
    // message.success('控制异常');
  });
}

onMounted(async () => {

});
onUnmounted(() => {

});
</script>
<style scoped lang="less">

  @import '/@/design/vent/modal.less';
  @import '../../comment/less/workFace.less';
   @ventSpace: zxm;
  
  
  .@{ventSpace}-input {
    width: 150px;
  }
  .password-box{
    .warning-text{
      font-size: 24px;
      margin-left: 8px;
    }
    .input-box{
      margin-top: 10px;
      margin-left: 40px;
      .label {
        width: 80px;
        color: #73e8fe;
      }
    }
    
  }
  
  .btn-group{
    margin-bottom: 8px;
    .btn-item{
      width: calc(50% - 16px);
      margin: 0 4px;
    }
  }
  .divider{
    color: #fff;
    border-color: #73e8fe;
  }
  .parameter-title{
    margin-bottom: 15px;
  }
  .device-group{
    display: flex;
    align-items: center;
    .title{
      width: 100px;
      color: #73e8fe;
    }
    .btn{
      margin: 0 5px;
    }
  }
</style>