sssssssssss

src/views/pms/qhse/kanban/index.vue

@@ -0,0 +1,755 @@
+<script lang="ts" setup>
+import {
+  AlarmClock,
+  Checked,
+  CollectionTag,
+  DataAnalysis,
+  DocumentChecked,
+  Files,
+  Flag,
+  Histogram,
+  Opportunity,
+  Postcard,
+  Warning
+} from '@element-plus/icons-vue'
+import { DESIGN_HEIGHT, DESIGN_WIDTH } from '@/utils/kb'
+
+defineOptions({
+  name: 'PmsQhseKanban'
+})
+
+type SummaryCard = {
+  title: string
+  value: string
+  note: string
+  accent: string
+  glow: string
+  icon: any
+}
+
+type MetricBar = {
+  label: string
+  value: number
+  color: string
+}
+
+type RiskZone = {
+  title: string
+  desc: string
+  color: string
+}
+
+type PermitStat = {
+  label: string
+  value: string
+  accent: string
+  soft: string
+}
+
+type BottomCard = {
+  title: string
+  icon: any
+  accent: string
+  glow: string
+  lines: string[]
+}
+
+const wrapperRef = ref<HTMLDivElement>()
+const scale = ref(1)
+const supportsZoom = ref(false)
+
+let resizeObserver: ResizeObserver | null = null
+let resizeRaf = 0
+
+const pageTitle = 'QHSE管理看板'
+
+const summaryCards: SummaryCard[] = [
+  {
+    title: '风险总数(处)',
+    value: '126',
+    note: 'R:12',
+    accent: '#ff5a62',
+    glow: 'rgba(255, 90, 98, 0.26)',
+    icon: Warning
+  },
+  {
+    title: '今日隐患(条)',
+    value: '29',
+    note: 'Exp:2',
+    accent: '#ff9f2f',
+    glow: 'rgba(255, 159, 47, 0.24)',
+    icon: Opportunity
+  },
+  {
+    title: '隐患整改率',
+    value: '92.3%',
+    note: '较昨日 +1.6%',
+    accent: '#2ac7c9',
+    glow: 'rgba(42, 199, 201, 0.26)',
+    icon: DataAnalysis
+  },
+  {
+    title: '在线作业许可',
+    value: '11',
+    note: 'Active',
+    accent: '#4f8dff',
+    glow: 'rgba(79, 141, 255, 0.22)',
+    icon: DocumentChecked
+  },
+  {
+    title: '人员持证率',
+    value: '97.8%',
+    note: 'Warn:3',
+    accent: '#f2b800',
+    glow: 'rgba(242, 184, 0, 0.22)',
+    icon: Postcard
+  }
+]
+
+const hazardBars: MetricBar[] = [
+  { label: '已整改 628', value: 100, color: '#43c7ca' },
+  { label: '未整改 29', value: 61, color: '#ff981f' },
+  { label: '超期 2', value: 38, color: '#ff4c49' }
+]
+
+const incidentStats = [
+  { label: '安全事故', value: '0起', accent: '#2ac7c9' },
+  { label: '险情事件', value: '3起', accent: '#f2c11a' }
+]
+
+const riskZones: RiskZone[] = [
+  { title: '高危风险区', desc: '危化库 / 试压区 / 配电房', color: '#ff4c49' },
+  { title: '中风险区', desc: '焊接 / 机加 / 吊装区', color: '#ff981f' },
+  { title: '低风险区', desc: '物料库 / 维修 / 装卸区', color: '#f2c11a' },
+  { title: '安全控制区', desc: '办公区 / 展厅 / 主通道', color: '#5794ff' }
+]
+
+const permitStats: PermitStat[] = [
+  { label: '在线作业', value: '11', accent: '#4d8cff', soft: 'rgba(77, 140, 255, 0.16)' },
+  { label: '异常预警', value: '2', accent: '#d0a400', soft: 'rgba(208, 164, 0, 0.14)' }
+]
+
+const qualificationWarnings = [
+  { label: '证件过期', value: '0人', accent: '#24364f' },
+  { label: '即将到期', value: '3人（需复审）', accent: '#e6ab00' }
+]
+
+const bottomCards: BottomCard[] = [
+  {
+    title: '体系合规',
+    icon: Files,
+    accent: '#39c6cc',
+    glow: 'rgba(57, 198, 204, 0.22)',
+    lines: ['内审已完成', '外审待安排']
+  },
+  {
+    title: '特种设备',
+    icon: Histogram,
+    accent: '#4f8dff',
+    glow: 'rgba(79, 141, 255, 0.2)',
+    lines: ['在用: 32台', '待检: 2台（重点关注）']
+  },
+  {
+    title: '应急演练',
+    icon: AlarmClock,
+    accent: '#ff5b61',
+    glow: 'rgba(255, 91, 97, 0.22)',
+    lines: ['年度计划完成率', '89%（需补1次）']
+  },
+  {
+    title: '质量检验',
+    icon: Checked,
+    accent: '#f2c11a',
+    glow: 'rgba(242, 193, 26, 0.2)',
+    lines: ['产品一次合格率', '98.7%（达标）']
+  },
+  {
+    title: '环境危废',
+    icon: Flag,
+    accent: '#28c98b',
+    glow: 'rgba(40, 201, 139, 0.2)',
+    lines: ['危废暂存合规', '三废排放100%达标']
+  }
+]
+
+const targetWrapperStyle = computed(() => ({
+  width: `${DESIGN_WIDTH * scale.value}px`,
+  height: `${DESIGN_HEIGHT * scale.value}px`
+}))
+
+const targetAreaStyle = computed(() => {
+  const style = {
+    width: `${DESIGN_WIDTH}px`,
+    height: `${DESIGN_HEIGHT}px`,
+    transformOrigin: '0 0'
+  } as Record<string, string | number>
+
+  if (supportsZoom.value) {
+    style.zoom = scale.value
+  } else {
+    style.transform = `scale(${scale.value})`
+  }
+
+  return style
+})
+
+function updateScale() {
+  cancelAnimationFrame(resizeRaf)
+
+  resizeRaf = requestAnimationFrame(() => {
+    const wrapper = wrapperRef.value
+    if (!wrapper) return
+
+    const { clientWidth, clientHeight } = wrapper
+    if (!clientWidth || !clientHeight) return
+
+    scale.value = Math.min(clientWidth / DESIGN_WIDTH, clientHeight / DESIGN_HEIGHT)
+  })
+}
+
+onMounted(() => {
+  supportsZoom.value = typeof CSS !== 'undefined' && CSS.supports?.('zoom', '1') === true
+  nextTick(updateScale)
+  resizeObserver = new ResizeObserver(updateScale)
+  if (wrapperRef.value) {
+    resizeObserver.observe(wrapperRef.value)
+  }
+  window.addEventListener('resize', updateScale)
+})
+
+onUnmounted(() => {
+  resizeObserver?.disconnect()
+  window.removeEventListener('resize', updateScale)
+  cancelAnimationFrame(resizeRaf)
+})
+</script>
+
+<template>
+  <div ref="wrapperRef" class="bg absolute top-0 left-0 size-full z-10">
+    <div class="mx-a overflow-hidden" :style="targetWrapperStyle">
+      <div id="qhse-kanban" class="bg qhse-board" :style="targetAreaStyle">
+        <header class="header">{{ pageTitle }}</header>
+        <div class="board-body">
+          <section class="panel summary-panel kb-stage-card kb-stage-card--1">
+            <div class="panel-title">
+              <span class="icon-decorator"><span></span><span></span></span>
+              风险总览
+            </div>
+            <div class="summary-grid">
+              <article
+                v-for="card in summaryCards"
+                :key="card.title"
+                class="summary-card summary-tile"
+                :style="
+                  {
+                    '--card-accent': card.accent,
+                    '--card-glow': card.glow
+                  } as any
+                "
+              >
+                <span class="summary-card__shine"></span>
+                <span class="summary-card__corner"></span>
+                <div class="summary-card__icon">
+                  <el-icon class="summary-card__icon-glyph">
+                    <component :is="card.icon" />
+                  </el-icon>
+                </div>
+                <div class="summary-card__content">
+                  <div class="summary-card__label">{{ card.title }}</div>
+                  <div class="summary-tile__meta">
+                    <span class="summary-tile__value">{{ card.value }}</span>
+                    <span class="summary-tile__note" :style="{ color: card.accent }">{{ card.note }}</span>
+                  </div>
+                </div>
+              </article>
+            </div>
+          </section>
+
+          <div class="board-main">
+            <div class="left-column">
+              <section class="panel board-panel kb-stage-card kb-stage-card--2">
+                <div class="panel-title">
+                  <span class="icon-decorator"><span></span><span></span></span>
+                  隐患排查治理统计
+                </div>
+                <div class="chart-panel chart-panel--bars">
+                  <div v-for="bar in hazardBars" :key="bar.label" class="bar-card">
+                    <div class="bar-card__chart">
+                      <div class="bar-card__fill" :style="{ height: `${bar.value}%`, background: bar.color }"></div>
+                    </div>
+                    <div class="bar-card__label">{{ bar.label }}</div>
+                  </div>
+                </div>
+              </section>
+
+              <section class="panel board-panel kb-stage-card kb-stage-card--3">
+                <div class="panel-title">
+                  <span class="icon-decorator"><span></span><span></span></span>
+                  事故事件趋势（近12月）
+                </div>
+                <div class="incident-panel">
+                  <div class="incident-graphic">
+                    <div class="incident-graphic__axis"></div>
+                    <div class="incident-graphic__area"></div>
+                    <div class="incident-graphic__line"></div>
+                  </div>
+                  <div class="incident-metrics">
+                    <div v-for="item in incidentStats" :key="item.label" class="incident-metric">
+                      <span>{{ item.label }}：</span>
+                      <strong :style="{ color: item.accent }">{{ item.value }}</strong>
+                    </div>
+                  </div>
+                </div>
+              </section>
+            </div>
+
+            <div class="center-column">
+              <section class="panel board-panel board-panel--center kb-stage-card kb-stage-card--4">
+                <div class="panel-title panel-title--center">
+                  <span class="icon-decorator"><span></span><span></span></span>
+                  安全风险四色动态分布
+                </div>
+                <div class="risk-grid">
+                  <article v-for="zone in riskZones" :key="zone.title" class="risk-card">
+                    <div class="risk-card__title">
+                      <span class="risk-card__dot" :style="{ background: zone.color }"></span>
+                      <span :style="{ color: zone.color }">{{ zone.title }}</span>
+                    </div>
+                    <div class="risk-card__desc">{{ zone.desc }}</div>
+                  </article>
+                </div>
+              </section>
+            </div>
+
+            <div class="right-column">
+              <section class="panel board-panel kb-stage-card kb-stage-card--5">
+                <div class="panel-title">
+                  <span class="icon-decorator"><span></span><span></span></span>
+                  作业许可实时监控
+                </div>
+                <div class="permit-grid">
+                  <div
+                    v-for="item in permitStats"
+                    :key="item.label"
+                    class="permit-card"
+                    :style="{ '--permit-accent': item.accent, '--permit-soft': item.soft } as any"
+                  >
+                    <div class="permit-card__label">{{ item.label }}</div>
+                    <div class="permit-card__value">{{ item.value }}</div>
+                  </div>
+                </div>
+              </section>
+
+              <section class="panel board-panel kb-stage-card kb-stage-card--6">
+                <div class="panel-title">
+                  <span class="icon-decorator"><span></span><span></span></span>
+                  人员资质风险预警
+                </div>
+                <div class="qualification-panel">
+                  <div class="qualification-icon">
+                    <el-icon>
+                      <CollectionTag />
+                    </el-icon>
+                  </div>
+                  <div class="qualification-list">
+                    <div
+                      v-for="item in qualificationWarnings"
+                      :key="item.label"
+                      class="qualification-item"
+                    >
+                      <span class="qualification-item__label">{{ item.label }}：</span>
+                      <strong :style="{ color: item.accent }">{{ item.value }}</strong>
+                    </div>
+                  </div>
+                </div>
+              </section>
+            </div>
+          </div>
+
+          <section class="bottom-grid">
+            <article
+              v-for="(card, index) in bottomCards"
+              :key="card.title"
+              class="panel bottom-card kb-stage-card"
+              :class="`kb-stage-card--${index + 7}`"
+              :style="
+                {
+                  '--card-accent': card.accent,
+                  '--card-glow': card.glow
+                } as any
+              "
+            >
+              <span class="summary-card__shine"></span>
+              <div class="bottom-card__header">
+                <div class="summary-card__icon bottom-card__icon">
+                  <el-icon class="summary-card__icon-glyph">
+                    <component :is="card.icon" />
+                  </el-icon>
+                </div>
+                <div class="bottom-card__title">{{ card.title }}</div>
+              </div>
+              <div class="bottom-card__content">
+                <p v-for="line in card.lines" :key="line">{{ line }}</p>
+              </div>
+            </article>
+          </section>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import url('@/styles/kb.scss');
+
+.qhse-board {
+  color: #24364f;
+}
+
+.board-body {
+  padding: 18px 18px 24px;
+}
+
+.summary-panel {
+  padding-bottom: 22px;
+}
+
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 24px;
+  margin-top: 20px;
+}
+
+.summary-tile {
+  display: flex;
+  height: 136px;
+  padding: 28px 28px 24px;
+  border-radius: 22px;
+  align-items: center;
+  gap: 22px;
+}
+
+.summary-card__content {
+  position: relative;
+  z-index: 2;
+  min-width: 0;
+  flex: 1;
+}
+
+.summary-tile__meta {
+  display: flex;
+  margin-top: 14px;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.summary-tile__value {
+  font-family: YouSheBiaoTiHei, sans-serif;
+  font-size: 40px;
+  line-height: 1;
+  color: #114a9b;
+  letter-spacing: 1px;
+}
+
+.summary-tile__note {
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.board-main {
+  display: grid;
+  grid-template-columns: 1.02fr 1fr 0.98fr;
+  gap: 28px;
+  margin-top: 24px;
+}
+
+.left-column,
+.right-column {
+  display: grid;
+  gap: 24px;
+}
+
+.center-column {
+  display: block;
+}
+
+.board-panel {
+  min-height: 258px;
+}
+
+.board-panel--center {
+  min-height: 540px;
+}
+
+.chart-panel {
+  margin-top: 18px;
+}
+
+.chart-panel--bars {
+  display: flex;
+  height: 176px;
+  padding: 6px 10px 0;
+  align-items: flex-end;
+  gap: 34px;
+}
+
+.bar-card {
+  display: flex;
+  height: 100%;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.bar-card__chart {
+  display: flex;
+  width: 100%;
+  height: 120px;
+  padding: 0 20px;
+  align-items: flex-end;
+}
+
+.bar-card__fill {
+  width: 100%;
+  min-height: 32px;
+  border-radius: 0;
+  box-shadow: 0 10px 24px rgb(31 91 184 / 10%);
+}
+
+.bar-card__label {
+  margin-top: 14px;
+  font-size: 18px;
+  font-weight: 700;
+  color: #5b6f8f;
+}
+
+.incident-panel {
+  display: grid;
+  margin-top: 22px;
+  grid-template-columns: 180px 1fr;
+  align-items: center;
+  gap: 28px;
+}
+
+.incident-graphic {
+  position: relative;
+  width: 170px;
+  height: 132px;
+}
+
+.incident-graphic__axis {
+  position: absolute;
+  inset: 24px 16px 16px 16px;
+  border-bottom: 6px solid #4f8dff;
+  border-left: 6px solid #4f8dff;
+  border-radius: 2px;
+  opacity: 0.92;
+}
+
+.incident-graphic__area {
+  position: absolute;
+  right: 22px;
+  bottom: 24px;
+  width: 102px;
+  height: 68px;
+  background: linear-gradient(180deg, rgb(79 141 255 / 88%) 0%, rgb(79 141 255 / 28%) 100%);
+  clip-path: polygon(0 100%, 22% 50%, 54% 72%, 100% 0, 100% 100%);
+}
+
+.incident-graphic__line {
+  position: absolute;
+  right: 22px;
+  bottom: 24px;
+  width: 102px;
+  height: 68px;
+  border-top: 5px solid #4f8dff;
+  clip-path: polygon(0 100%, 22% 50%, 54% 72%, 100% 0, 100% 5%, 54% 77%, 22% 55%, 0 100%);
+}
+
+.incident-metrics {
+  display: grid;
+  gap: 20px;
+}
+
+.incident-metric {
+  font-size: 24px;
+  font-weight: 700;
+  color: #556b89;
+}
+
+.incident-metric strong {
+  margin-left: 4px;
+  font-size: 34px;
+  line-height: 1;
+}
+
+.panel-title--center {
+  justify-content: center;
+  padding-left: 0;
+  font-size: 32px;
+}
+
+.panel-title--center .icon-decorator {
+  left: 28px;
+}
+
+.risk-grid {
+  display: grid;
+  margin-top: 34px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 26px 28px;
+}
+
+.risk-card {
+  min-height: 132px;
+  padding: 34px 24px;
+  background: linear-gradient(180deg, rgb(255 255 255 / 42%) 0%, rgb(220 232 250 / 28%) 100%);
+  border: 1px solid rgb(255 255 255 / 58%);
+  border-radius: 18px;
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 74%),
+    0 8px 18px rgb(63 103 171 / 7%);
+}
+
+.risk-card__title {
+  display: flex;
+  font-size: 20px;
+  font-weight: 800;
+  align-items: center;
+  gap: 12px;
+}
+
+.risk-card__dot {
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  box-shadow: 0 0 0 6px rgb(255 255 255 / 35%);
+}
+
+.risk-card__desc {
+  margin-top: 16px;
+  font-size: 17px;
+  font-weight: 600;
+  color: #6f819a;
+  line-height: 1.55;
+}
+
+.permit-grid {
+  display: grid;
+  margin-top: 32px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 20px;
+}
+
+.permit-card {
+  min-height: 128px;
+  padding: 28px 20px;
+  text-align: center;
+  background: linear-gradient(180deg, var(--permit-soft) 0%, rgb(255 255 255 / 18%) 100%);
+  border: 1px solid rgb(255 255 255 / 54%);
+  border-radius: 18px;
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 68%),
+    0 8px 18px rgb(63 103 171 / 6%);
+}
+
+.permit-card__label {
+  font-size: 18px;
+  font-weight: 700;
+  color: #506684;
+}
+
+.permit-card__value {
+  margin-top: 18px;
+  font-family: YouSheBiaoTiHei, sans-serif;
+  font-size: 44px;
+  line-height: 1;
+  color: var(--permit-accent);
+}
+
+.qualification-panel {
+  display: grid;
+  margin-top: 26px;
+  grid-template-columns: 140px 1fr;
+  align-items: center;
+  gap: 26px;
+}
+
+.qualification-icon {
+  display: flex;
+  width: 132px;
+  height: 132px;
+  font-size: 74px;
+  color: #f09717;
+  background: radial-gradient(circle at 50% 40%, rgb(255 255 255 / 74%) 0%, rgb(231 240 255 / 42%) 100%);
+  border: 1px solid rgb(255 255 255 / 72%);
+  border-radius: 32px;
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 85%),
+    0 10px 22px rgb(55 94 160 / 10%);
+  align-items: center;
+  justify-content: center;
+}
+
+.qualification-list {
+  display: grid;
+  gap: 22px;
+}
+
+.qualification-item {
+  font-size: 24px;
+  font-weight: 700;
+  color: #516785;
+}
+
+.qualification-item strong {
+  font-size: 28px;
+}
+
+.bottom-grid {
+  display: grid;
+  margin-top: 26px;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 24px;
+}
+
+.bottom-card {
+  min-height: 190px;
+  padding: 28px 22px 24px;
+  overflow: hidden;
+}
+
+.bottom-card__header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.bottom-card__icon {
+  width: 54px;
+  height: 54px;
+}
+
+.bottom-card__title {
+  font-family: YouSheBiaoTiHei, sans-serif;
+  font-size: 24px;
+  color: #114a9b;
+  letter-spacing: 1px;
+}
+
+.bottom-card__content {
+  position: relative;
+  z-index: 2;
+  margin-top: 24px;
+}
+
+.bottom-card__content p {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: #5d718e;
+  line-height: 1.7;
+}
+</style>