ops-management-platform-frontend/src/views/analysis/satisify/detailDrawer.vue

<template>
  <div>
    <!-- 抽屉组件 -->
    <a-drawer
      title="详情"
      placement="right"
      :closable="true"
      :open="visible"
      @close="onClose"
      width="1000px"
    >
      <div style="margin-bottom: 20px">附件：{{ attachment }}</div>
      <a-button type="primary" @click="handleAdd">新增</a-button>
      <a-table :dataSource="dataSource" :columns="columns" bordered>
        <template #bodyCell="{ record, column }">
          <template v-if="column.key === 'action'">
            <a-button type="link" @click="handleEdit(record.id)">编辑</a-button>
          </template>
        </template>
      </a-table>
    </a-drawer>
    <add-modal ref="addModalRef" />
  </div>
</template>

<script>
  import { ref } from 'vue';
  import addModal from './addModal.vue';
  // import { getInfo } from './api';

  export default {
    components: {
      addModal,
    },
    setup() {
      const visible = ref(false);
      const showDrawer = () => {
        visible.value = true;
      };
      // 关闭抽屉的方法
      const onClose = () => {
        visible.value = false;
      };
      const attachment = ref([]);
      const dataSource = ref([]);
      const columns = [
        {
          title: '辖区',
          dataIndex: 'area',
          key: 'area',
        },
        {
          title: '视频平台运营情况',
          dataIndex: 'videoOperation',
          key: 'videoOperation',
        },
        {
          title: '视频设备故障率',
          dataIndex: 'vedioFault',
          key: 'vedioFault',
        },
        {
          title: '存储可用率',
          dataIndex: 'save',
          key: 'save',
        },
        {
          title: '运维修复率',
          dataIndex: 'ioFix',
          key: 'ioFix',
        },
        {
          title: '系统总体运行情状况',
          dataIndex: 'systemRun',
          key: 'systemRun',
        },
        {
          title: '运维人月素质',
          dataIndex: 'ioPeopleQuality',
          key: 'ioPeopleQuality',
        },
        {
          title: '整体服务水平',
          dataIndex: 'serviceLevel',
          key: 'serviceLevel',
        },
        {
          title: '综合评价',
          dataIndex: 'assess',
          key: 'assess',
        },
        {
          title: '意见反馈',
          dataIndex: 'opinion',
          key: 'opinion',
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
        },
      ];
      //打开弹窗
      const addModalRef = ref();
      const handleAdd = () => {
        addModalRef.value.showModal(1);
      };
      const handleEdit = (id) => {
        addModalRef.value.showModal(2, id);
      };
      return {
        visible,
        showDrawer,
        onClose,
        dataSource,
        columns,
        attachment,
        addModalRef,
        handleAdd,
        handleEdit,
      };
    },
  };
</script>

<style scoped>
  /* 可选样式调整 */
  .ant-btn {
    margin: 20px;
  }

  /* .singerDetail{
  margin-bottom: 10px;
} */
  div {
    margin-bottom: 10px;
  }

  .timeText {
    margin: 0 0 40px 20px;
    color: red;
  }

  .titleLabel {
    color: gray;
  }
</style>