mky-vent-base/src/views/vent/monitorManager/gasPumpMonitor/components/DetailModalCC.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>
      <a-divider class="divider">设备控制</a-divider>
      <div class="">
        <template v-for="(ctrlItem, ctrlIndex) in detailCtrl" :key="ctrlIndex">
          <div class="parameter-title group-parameter-title"
            ><SvgIcon class="icon" size="14" name="pulp-title" /><span>{{ ctrlItem.title }}</span></div
          >
          <div class="vent-margin-b-10">
            <div v-for="(ctrlType, index) in ctrlItem.type" :key="index">
              <template v-for="(ctrlTitleItem, deviceTypeIndex) in ctrlType.childTitle" :key="deviceTypeIndex">
                <div class="device-group">
                  <div class="title">{{ ctrlTitleItem }}：</div>
                  <div class="btn-group">
                    <a-button
                      class="btn"
                      v-for="(device, i) in ctrlItem.items"
                      :key="i"
                      type="primary"
                      @click="handlerFn(ctrlType.key[deviceTypeIndex] + device.code)"
                      >{{ device.title }}</a-button
                    >
                  </div>
                </div>
              </template>
            </div>
          </div>
        </template>
      </div>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { onMounted, ref, defineEmits, onUnmounted, inject } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { detailCtrl } from '../gasPump.dataCc';
  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>