hrms-manual/src/modules/01_manual/components/3_Structure/33_Structure.vue

<script setup lang="ts">
import { ref } from "vue";
const rightDrawerOpen = ref(false);
const text = ref("");
</script>

<template>
  <!-- <div class="row col-12">
    <div class="col-9">
      <div class="toptitle text-dark col-12 row items-center">
        คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
      </div> -->

  <q-card
    flat
    bordered
    class="col-12 q-pa-md"
    style="
      background-color: #ecebeb;
      border-radius: 8px 8px 0px 0px;
      padding: 10px 16px 10px 16px;
    "
  >
    <div class="custom-topic text-dark">
      <div style="font-size: 16px; font-weight: 700">
        ระบบโครงสร้างอัตรากำลัง
      </div>
    </div>
  </q-card>

  <q-card
    flat
    bordered
    class="col-12 q-pa-md"
    style="border-radius: 0px 0px 8px 8px"
  >
    <div style="font-weight: bold; font-size: 15px; color: #00aa86">
      3.2 แผนภูมิโครงสร้าง
    </div>

    <div class="col-12" style="margin-top: 20px; margin-left: 10px">
      - กดเลือกแถบเมนูย่อยของโครงสร้างอัตรากำลัง “แผนภูมิโครงสร้าง”
      ระบบแสดงหน้าจอดังรูปภาพ
    </div>

    <div class="col-12">
      <q-img
        src="@/assets/manual/03_structure/3_structure/3-12.png"
        style="
          display: block;
          margin: 0 auto;
          border-radius: 20px;
          margin-top: 20px;
          border: 1px solid #97b2de;
        "
      />
      <div class="text-center text-grey-6" style="margin-top: 20px">
        รูปภาพที่ 3 - 12 หน้าแผนภูมิโครงสร้าง
      </div>

      <div
        style="
          margin-top: 20px;
          padding: 10px;
          background-color: #f3f3f3;
          font-size: 14px;
          color: #000000;
          border-radius: 5px;
        "
      >
        หมายเลข 1 ดาวน์โหลดรูปภาพเป็นไฟล์ PNG <br />
        หมายเลข 2 ดาวน์โหลดไฟล์เป็นไฟล์ PDF <br />
        หมายเลข 3 การเข้าถึงของแต่ละหัวข้อหลัก <br />
        หมายเลข 4 รายละเอียดแผนภูมิโครงสร้าง
        โดยสามารถเข้าถึงแต่ละหัวข้อเพื่อให้แสดงข้อมูล
      </div>
    </div>

    <div class="col-12">
      <p style="margin-top: 50px; margin-left: 10px">
        - เมื่อต้องการดูข้อมูลให้เล็กลงสามารถกดเลือกแต่ละหัวข้อต่างๆได้
        ดังรูปภาพ
      </p>
    </div>

    <div class="col-12">
      <q-img
        src="@/assets/manual/03_structure/3_structure/3-13.png"
        style="
          display: block;
          margin: 0 auto;
          border-radius: 20px;
          margin-top: 20px;
          border: 1px solid #97b2de;
        "
      />

      <div class="text-center text-grey-6" style="margin-top: 20px">
        รูปภาพที่ 3 - 13 รายละเอียดโครงสร้าง
      </div>
    </div>

    <div class="col-12">
      <p style="margin-top: 50px; margin-left: 10px">
        - เมื่อกดเลือกหัวข้อที่ต้องการ ระบบจะแสดงเฉพาะข้อมูลที่เลือก
        โดยจะมีการบอกหัวข้อที่มีการเข้าถึง ดังรูปภาพ
      </p>
    </div>

    <div class="col-12">
      <q-img
        src="@/assets/manual/03_structure/3_structure/3-14.png"
        style="
          display: block;
          margin: 0 auto;
          border-radius: 20px;
          margin-top: 20px;
          border: 1px solid #97b2de;
        "
      />

      <div class="text-center text-grey-6" style="margin-top: 20px">
        รูปภาพที่ 3 - 14 รายละเอียดโครงสร้างที่แสดงเฉพาะข้อมูลที่ทำการเลือก
      </div>

      <div
        style="
          margin-top: 20px;
          padding: 10px;
          background-color: #f3f3f3;
          font-size: 14px;
          color: #000000;
          border-radius: 5px;
        "
      >
        หมายเลข 1 คอลัมน์แสดงการเข้าถึงของแต่ละหน้า <br />
        หมายเลข 2 ช่องสำหรับแสดงรายละเอียดข้อมูลหน่วยงานที่ได้ทำการเข้าถึง
      </div>
    </div>

    <div class="col-12">
      <p style="margin-top: 50px; margin-left: 10px">
        - สามารถกดไอคอน
        <q-icon
          name="mdi-image-area"
          style="margin: 0 5px; color: #00aa86"
          size="xs"
        />
        เพื่อดาวน์โหลดไฟล์ PNG โดยจะได้ไฟล์รูปภาพ ดังรูปภาพ
      </p>
    </div>

    <div class="col-12">
      <q-img
        src="@/assets/manual/03_structure/3_structure/3-15.png"
        style="
          display: block;
          margin: 0 auto;
          border-radius: 20px;
          margin-top: 20px;
          border: 1px solid #97b2de;
        "
      />

      <div class="text-center text-grey-6" style="margin-top: 20px">
        รูปภาพที่ 3 - 15 ดาวน์โหลดไฟล์ PNG
      </div>

      <div
        style="
          margin-top: 20px;
          padding: 10px;
          background-color: #f3f3f3;
          font-size: 14px;
          color: #000000;
          border-radius: 5px;
        "
      >
        หมายเลข 1 ไอคอนสำหรับคลิกเพื่อดาวน์โหลดไฟล์รูปภาพ PNG
      </div>
    </div>

    <div class="col-12">
      <p style="margin-top: 50px; margin-left: 10px">
        - ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PNG ดังรูปภาพ
      </p>

      <q-img
        class="col-12"
        src="@/assets/manual/03_structure/3_structure/3-16.png"
        style="
          max-width: 100%;
          display: block;
          margin: 0 auto;
          border-radius: 20px;
          margin-top: 20px;
          border: 1px solid #97b2de;
        "
      />
      <div class="text-center text-grey-6" style="margin-top: 20px">
        รูปภาพที่ 3 - 16 ไฟล์ PNG ที่ได้จากการดาวน์โหลด
      </div>
    </div>

    <div class="col-12">
      <p style="margin-top: 50px; margin-left: 10px">
        - ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PNG ดังรูปภาพ - โดยสามารถคลิกไอคอน
        <q-icon
          name="mdi-image-area"
          style="margin: 0 5px; color: #00aa86"
          size="xs"
        />
        เพื่อดาวน์โหลดไฟล์ PNG ในแต่ละหัวข้อที่ต้องการได้
        ดังรูปภาพสามารถเข้าถึงหัวข้อที่ต้องการ เพื่อดาวน์โหลดได้
      </p>
      <q-img
        class="col-12"
        src="@/assets/manual/03_structure/3_structure/3-17.png"
        style="
          max-width: 100%;
          display: block;
          margin: 0 auto;
          border-radius: 20px;
          margin-top: 20px;
          border: 1px solid #97b2de;
        "
      />
      <div class="text-center text-grey-6" style="margin-top: 20px">
        รูปภาพที่ 3 - 17 ดาวน์โหลดไฟล์ PNG ที่มีการเข้าถึงหัวข้อที่ต้องการ
      </div>

      <div
        style="
          margin-top: 20px;
          padding: 10px;
          background-color: #f3f3f3;
          font-size: 14px;
          color: #000000;
          border-radius: 5px;
        "
      >
        หมายเลข 1 ไอคอนสำหรับคลิกดาวน์โหลดไฟล์ภาพ PNG
        (ข้อมูลเฉพาะที่มีการเข้าถึงหน่วยงานนั้นๆ)
      </div>
    </div>

    <div class="col-12">
      <p style="margin-top: 50px; margin-left: 10px">
        - ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PNG
        ที่มีการเข้าถึงหัวข้อที่ต้องการ ดังรูปภาพ
      </p>
    </div>
    <div class="col-12">
      <q-img
        src="@/assets/manual/03_structure/3_structure/3-18.png"
        style="
          max-width: 100%;
          display: block;
          margin: 0 auto;
          border-radius: 20px;
          margin-top: 20px;
          border: 1px solid #97b2de;
        "
      />
      <div class="text-center text-grey-6" style="margin-top: 20px">
        รูปภาพที่ 3 - 18 ไฟล์ PNG จากการดาวน์โหลดที่มีการเข้าถึงหัวข้อที่ต้องการ
      </div>
    </div>

    <div class="col-12">
      <p style="margin-top: 50px; margin-left: 10px">
        - สามารถคลิกไอคอน
        <q-icon
          name="mdi-file-pdf-box"
          style="margin: 0 5px; color: hsl(0, 100%, 50%)"
          size="xs"
        />
        เพื่อดาวน์โหลดไฟล์ PDF โดยจะได้ไฟล์รูปภาพ ดังรูปภาพ
      </p>
      <q-img
        class="col-12"
        src="@/assets/manual/03_structure/3_structure/3-19.png"
        style="
          max-width: 100%;
          display: block;
          margin: 0 auto;
          border-radius: 20px;
          margin-top: 20px;
          border: 1px solid #97b2de;
        "
      />
      <div class="text-center text-grey-6" style="margin-top: 20px">
        รูปภาพที่ 3 - 19 ดาวน์โหลดไฟล์ PDF
      </div>

      <div
        style="
          margin-top: 20px;
          padding: 10px;
          background-color: #f3f3f3;
          font-size: 14px;
          color: #000000;
          border-radius: 5px;
        "
      >
        หมายเลข 1 ไอคอนสำหรับคลิกเพื่อดาวน์โหลดไฟล์รูปภาพเป็นไฟล์ข้อมูล PDF
      </div>
    </div>

    <div class="col-12">
      <p style="margin-top: 50px; margin-left: 10px">
        - ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PDF ดังรูปภาพ
      </p>

      <q-img
        class="col-12"
        src="@/assets/manual/03_structure/3_structure/3-20.png"
        style="
          max-width: 100%;
          display: block;
          margin: 0 auto;
          border-radius: 20px;
          margin-top: 20px;
          border: 1px solid #97b2de;
        "
      />
      <div class="text-center text-grey-6" style="margin-top: 20px">
        รูปภาพที่ 3 - 20 ไฟล์ PDF ที่ได้จากการดาวน์โหลด
      </div>
    </div>

    <div class="col-12">
      <p style="margin-top: 50px; margin-left: 10px">
        - โดยสามารถคลิกไอคอน
        <q-icon
          name="mdi-file-pdf-box"
          style="margin: 0 5px; color: hsl(0, 100%, 50%)"
          size="xs"
        />
        เพื่อดาวน์โหลดไฟล์ PNG ในแต่ละหัวข้อที่ต้องการได้
        ดังรูปภาพสามารถเข้าถึงหัวข้อที่ต้องการ เพื่อดาวน์โหลดได้
      </p>
      <q-img
        class="col-12"
        src="@/assets/manual/03_structure/3_structure/3-21.png"
        style="
          max-width: 100%;
          display: block;
          margin: 0 auto;
          border-radius: 20px;
          margin-top: 20px;
          border: 1px solid #97b2de;
        "
      />
      <div class="text-center text-grey-6" style="margin-top: 20px">
        รูปภาพที่ 3 - 21 ดาวน์โหลดไฟล์ PNG ที่มีการเข้าถึงหัวข้อที่ต้องการ
      </div>

      <div
        style="
          margin-top: 20px;
          padding: 10px;
          background-color: #f3f3f3;
          font-size: 14px;
          color: #000000;
          border-radius: 5px;
        "
      >
        หมายเลข 1 ไอคอนสำหรับคลิกเพื่อดาวน์โหลดรูปภาพเป็นไฟล์ PNG
        (ข้อมูลเฉพาะที่มีการเข้าถึงหน่วยงานนั้นๆ)
      </div>
    </div>

    <div class="col-12">
      <p style="margin-top: 50px; margin-left: 10px">
        - ไฟล์รูปภาพที่ได้จากการดาวน์โหลดไฟล์ PNG
        ที่มีการเข้าถึงหัวข้อที่ต้องการ ดังรูปภาพ
      </p>
      <q-img
        class="col-12"
        src="@/assets/manual/03_structure/3_structure/3-22.png"
        style="
          max-width: 100%;
          display: block;
          margin: 0 auto;
          border-radius: 20px;
          margin-top: 20px;
          border: 1px solid #97b2de;
        "
      />
      <div class="text-center text-grey-6" style="margin-top: 20px">
        รูปภาพที่ 3 - 22 ไฟล์ PNG จากการดาวน์โหลดที่มีการเข้าถึงหัวข้อที่ต้องการ
      </div>
    </div>
  </q-card>
  <!-- </div>
  </div> -->
</template>