SaaS-lib/hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/status.vue

<template>
  <ns-drawer
    v-model:visible="visible"
    width="550"
    :title="' '"
    :footer-style="{ textAlign: 'right' }"
    :ok="btnClick"
    :cancel="handleClose"
    placement="right"
    @close="handleClose">
    <a-tabs>
      <a-tab-pane key="1" tab="状态流程">
        <!-- 只有创建工单流程 -->
        <NsSteps v-bind="config" />
      </a-tab-pane>
    </a-tabs>
    <template #footer>
      <a-button type="primary" @click="btnClick">确定</a-button>
    </template>
  </ns-drawer>
</template>
<script>
  import { defineComponent } from 'vue';
  import { ref } from 'vue';
  import NsSteps from '/@/components/ns-steps.vue';
  import { getEnum } from '/@/api';

  export default defineComponent({
    components: { NsSteps },

    setup() {
      const visible = ref(false);
      const stateOptions = ref();
      const logList = ref([
        { realName: '李四', state: 3, createTime: '2024-03-10 10:00:00', remarks: '完成' },
        { realName: '王五', state: 5, createTime: '2024-03-10 10:00:00' },
        { realName: '王五', state: 4, createTime: '2024-03-10 10:00:00' },
        { realName: '王五', state: 2, createTime: '2024-03-10 10:00:00', remarks: '创建工单' },
        { realName: '赵六', state: 1, createTime: '2024-03-10 10:00:00' },
      ]);
      const config = ref({
        size: logList.value.length,
        dataSource: logList.value,
      });
      const handleClose = () => {
        visible.value = false;
      };
      const btnClick = () => {
        visible.value = false;
      };
      const toggle = async (data) => {
        console.log(data, 'xxxxxx');
        let states = await getEnum({ params: { enumType: 'AlarmLogStateEnum' } });
        stateOptions.value = states.data;
        let stateMap = {
          1: '待处理',
          2: '处理中',
          3: '已完成',
          4: '超时',
          5: '已关闭',
        };
        let colorMap = {
          1: '#ff7602',
          2: '#00a1e6',
          3: '#04d919',
          4: '#d9001b',
          5: '#a6a6a6',
        };
        logList.value.forEach((item) => {
          item.stateName = stateMap[item.state];
          item.color = colorMap[item.state];
          item.src = 'state-' + item.state;
        });
        visible.value = true;
      };
      return {
        stateOptions,
        btnClick,
        visible,
        logList,
        config,
        handleClose,
        toggle,
      };
    },
  });
</script>
<style scoped lang="less">
  :deep(.ant-form-item-label) {
    z-index: 20;
    text-align: right;
    width: 17%;
  }
</style>