gas-injection/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, inject } 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 globalConfig = inject('globalConfig');

  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) => {
        if (globalConfig.History_Type == 'remote') {
          message.success('指令已下发至生产管控平台成功！');
        } else {
          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>