From bb95119354a2e63d358b212b9d7d6db1d36e858f Mon Sep 17 00:00:00 2001
From: qweasdzxclm <2795631299@qq.com>
Date: Mon, 19 Jan 2026 11:07:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=A8=E6=99=AF=E7=94=BB=E5=83=8F=E5=85=A5?=
 =?UTF-8?q?=E5=8F=A3=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/modules/remaining.ts   |  20 ++
 src/views/DashEntry/DashEntry.vue | 513 ++++++++++++++++++++++++++++++
 2 files changed, 533 insertions(+)
 create mode 100644 src/views/DashEntry/DashEntry.vue

diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 834f8210..e334970d 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -184,6 +184,26 @@ const remainingRouter: AppRouteRecordRaw[] = [
       noTagsView: true
     }
   },
+  {
+    path: '/dashentry',
+    component: Layout,
+    name: 'DashEntryL',
+    meta: {
+      hidden: true
+    },
+    children: [
+      {
+        path: '',
+        component: () => import('@/views/DashEntry/DashEntry.vue'),
+        name: 'DashEntry',
+        meta: {
+          hidden: true,
+          title: 'DashEntry',
+          noTagsView: true
+        }
+      }
+    ]
+  },
   {
     path: '/login',
     component: () => import('@/views/Login/Login.vue'),
diff --git a/src/views/DashEntry/DashEntry.vue b/src/views/DashEntry/DashEntry.vue
new file mode 100644
index 00000000..00f676a9
--- /dev/null
+++ b/src/views/DashEntry/DashEntry.vue
@@ -0,0 +1,513 @@
+<template>
+  <div class="dash-entry-container">
+    <!-- 顶部四个数据卡片 -->
+    <div class="stats-cards">
+      <div v-for="(card, index) in statsCards" :key="index" class="stat-card">
+        <div class="stat-card-icon" :class="`icon-${card.type}`">
+          <Icon :icon="card.icon" :size="20" />
+        </div>
+        <div class="stat-card-content">
+          <div class="stat-card-title">{{ card.title }}</div>
+          <div class="stat-card-value">{{ card.value }}</div>
+          <div class="stat-card-subtitle">
+            {{ card.subtitle }}
+            <span class="trend-icon" :class="card.trend === 'up' ? 'trend-up' : 'trend-down'">{{
+              card.trend === 'up' ? '↑' : '↓'
+            }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 中间图表区域 -->
+    <div class="charts-section">
+      <!-- 左侧：风险等级分布（环形图） -->
+      <div class="chart-card">
+        <div class="chart-title">风险等级分布</div>
+        <div class="chart-content">
+          <EChart :options="riskDistributionOptions" :width="'100%'" :height="'300px'" />
+        </div>
+      </div>
+
+      <!-- 右侧：风险趋势图（折线图） -->
+      <div class="chart-card">
+        <div class="chart-title">风险趋势图</div>
+        <div class="chart-content">
+          <EChart :options="riskTrendOptions" :height="'300px'" />
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部表格 -->
+    <div class="table-section">
+      <div class="table-title">重点关注对象列表</div>
+      <el-table :data="paginatedResults" style="width: 100%" stripe>
+        <el-table-column prop="name" label="姓名" width="130" class-name="name-column">
+          <template #default="{ row }">
+            <span v-if="row.isNew" class="new-tag">新增</span>
+            {{ row.name }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="gender" label="性别" width="80" />
+        <el-table-column prop="age" label="年龄" width="80" />
+        <el-table-column prop="riskLevel" label="风险等级" width="120">
+          <template #default="{ row }">
+            <span :class="`risk-level risk-${row.riskLevelType}`">
+              {{ row.riskLevel }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="supervisionArea" label="监区" width="120" />
+        <el-table-column prop="psychologicalRiskLevel" label="心理风险等级" width="150" />
+        <el-table-column label="操作" width="120">
+          <template #default="{ row }">
+            <el-link type="primary" @click="handleView(row)">全景画像</el-link>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="table-pagination">
+        <span class="total-count">共{{ tableData.total }}条</span>
+        <el-pagination
+          v-model:current-page="tableData.current"
+          v-model:page-size="pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="tableData.total"
+          layout="sizes, prev, pager, next"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import type { EChartsOption } from 'echarts'
+// @ts-ignore
+import EChart from '@/components/Echart/src/Echart.vue'
+import { Icon } from '@/components/Icon'
+import { useRouter } from 'vue-router'
+
+defineOptions({ name: 'DashEntry' })
+
+const router = useRouter()
+
+// 统计数据卡片
+const statsCards = ref([
+  {
+    title: '全部人员',
+    value: '59人',
+    subtitle: '本月45人 +15',
+    trend: 'up',
+    type: 'all',
+    icon: 'ep:user'
+  },
+  {
+    title: '高危人员',
+    value: '12人',
+    subtitle: '本月3人 -3',
+    trend: 'down',
+    type: 'high',
+    icon: 'ep:warning-filled'
+  },
+  {
+    title: '预警人员',
+    value: '23人',
+    subtitle: '本月4人 +2',
+    trend: 'up',
+    type: 'warning',
+    icon: 'ep:bell'
+  },
+  {
+    title: '普通人员',
+    value: '32人',
+    subtitle: '本月5人 +1',
+    trend: 'up',
+    type: 'normal',
+    icon: 'ep:user-filled'
+  }
+])
+
+// 风险等级分布图表配置（环形图）
+const riskDistributionOptions = computed<EChartsOption>(() => ({
+  tooltip: {
+    trigger: 'item',
+    formatter: '{b}: {c} ({d}%)'
+  },
+  legend: {
+    show: true,
+    bottom: 0,
+    left: 'center',
+    itemGap: 20,
+    icon: 'circle',
+    textStyle: {
+      fontSize: 12
+    },
+    data: ['普通 (80%)', '预警 (15%)', '高危 (5%)']
+  },
+  series: [
+    {
+      name: '风险等级分布',
+      type: 'pie',
+      radius: ['40%', '70%'],
+      center: ['50%', '50%'],
+      avoidLabelOverlap: false,
+      itemStyle: {
+        borderRadius: 10,
+        borderColor: '#fff',
+        borderWidth: 2
+      },
+      label: {
+        show: true,
+        formatter: '{b}\n{d}%'
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 14,
+          fontWeight: 'bold'
+        }
+      },
+      data: [
+        { value: 978, name: '普通 (80%)', itemStyle: { color: '#5470c6' } },
+        { value: 189, name: '预警 (15%)', itemStyle: { color: '#fac858' } },
+        { value: 67, name: '高危 (5%)', itemStyle: { color: '#ee6666' } }
+      ]
+    }
+  ]
+}))
+
+// 风险趋势图配置（折线图）
+const riskTrendOptions = computed<EChartsOption>(() => ({
+  tooltip: {
+    trigger: 'axis'
+  },
+  legend: {
+    data: ['高危', '预警', '普通'],
+    bottom: 10
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '15%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    data: ['2024-10', '2024-11', '2024-12', '2025-01', '2025-02', '2025-03', '2025-04']
+  },
+  yAxis: {
+    type: 'value',
+    min: 0,
+    max: 300,
+    interval: 50
+  },
+  series: [
+    {
+      name: '高危',
+      type: 'line',
+      data: [50, 52, 48, 51, 49, 50, 48],
+      itemStyle: { color: '#ee6666' },
+      lineStyle: { color: '#ee6666' },
+      symbol: 'circle',
+      symbolSize: 6
+    },
+    {
+      name: '预警',
+      type: 'line',
+      data: [150, 180, 170, 190, 185, 175, 180],
+      itemStyle: { color: '#fac858' },
+      lineStyle: { color: '#fac858', type: 'dashed' },
+      symbol: 'circle',
+      symbolSize: 6
+    },
+    {
+      name: '普通',
+      type: 'line',
+      data: [250, 280, 270, 290, 285, 275, 280],
+      itemStyle: { color: '#666' },
+      lineStyle: { color: '#666' },
+      symbol: 'circle',
+      symbolSize: 6
+    }
+  ]
+}))
+
+// 表格数据
+const tableData = ref({
+  current: 1,
+  total: 3,
+  results: [
+    {
+      name: '王建国',
+      isNew: true,
+      gender: '男',
+      age: 34,
+      riskLevel: '高危',
+      riskLevelType: 'high',
+      supervisionArea: '第一监区',
+      psychologicalRiskLevel: '一级风险'
+    },
+    {
+      name: '李秀英',
+      isNew: true,
+      gender: '女',
+      age: 29,
+      riskLevel: '预警',
+      riskLevelType: 'warning',
+      supervisionArea: '第二监区',
+      psychologicalRiskLevel: '二级风险'
+    },
+    {
+      name: '张伟',
+      isNew: false,
+      gender: '男',
+      age: 41,
+      riskLevel: '普通',
+      riskLevelType: 'normal',
+      supervisionArea: '第一监区',
+      psychologicalRiskLevel: '三级风险'
+    }
+  ]
+})
+
+// 分页
+const pageSize = ref(10)
+
+// 分页后的数据
+const paginatedResults = computed(() => {
+  const start = (tableData.value.current - 1) * pageSize.value
+  const end = start + pageSize.value
+  return tableData.value.results.slice(start, end)
+})
+
+// 处理每页大小变化
+const handleSizeChange = (val: number) => {
+  pageSize.value = val
+  tableData.value.current = 1 // 重置到第一页
+}
+
+// 处理当前页变化
+const handleCurrentChange = (val: number) => {
+  tableData.value.current = val
+}
+
+const handleView = (row: any) => {
+  router.push({
+    name: 'Dashboard',
+    query: {
+      id: row.id || row.name
+    }
+  })
+}
+</script>
+
+<style scoped lang="scss">
+.dash-entry-container {
+  padding: 20px;
+  background: #f5f5f5;
+  min-height: 100vh;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+// 统计卡片区域
+.stats-cards {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+  margin-bottom: 20px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.stat-card {
+  background: #ffffff;
+  border-radius: 8px;
+  padding: 10px 20px;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s;
+  width: 100%;
+  box-sizing: border-box;
+  min-width: 0;
+  position: relative;
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+}
+
+.stat-card-icon {
+  position: absolute;
+  top: 10px;
+  right: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 16px;
+  font-size: 28px;
+
+  &.icon-all {
+    background: #e6f4ff;
+    color: #1890ff;
+  }
+
+  &.icon-high {
+    background: #fff1f0;
+    color: #ff4d4f;
+  }
+
+  &.icon-warning {
+    background: #fff7e6;
+    color: #faad14;
+  }
+
+  &.icon-normal {
+    background: #f6ffed;
+    color: #52c41a;
+  }
+}
+
+.stat-card-content {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.stat-card-title {
+  font-size: 9px;
+  color: #666;
+  margin-bottom: 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.stat-card-value {
+  font-size: 10px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.stat-card-subtitle {
+  font-size: 8px;
+  color: #999;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  .trend-icon {
+    margin-left: 4px;
+    &.trend-up {
+      color: #52c41a;
+    }
+
+    &.trend-down {
+      color: #ff4d4f;
+    }
+  }
+}
+
+// 图表区域
+.charts-section {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.chart-card {
+  background: #ffffff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.chart-title {
+  font-size: 11px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 16px;
+}
+
+.chart-content {
+  height: 250px;
+}
+
+// 表格区域
+.table-section {
+  background: #ffffff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.table-title {
+  font-size: 11px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 16px;
+}
+
+:deep(.name-column) {
+  padding-left: 20px;
+}
+
+.new-tag {
+  display: inline-block;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 0;
+  padding: 1px 3px;
+  background: #1890ff;
+  color: #ffffff;
+  font-size: 9px;
+  border-radius: 2px;
+  margin-right: 8px;
+}
+
+.risk-level {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 9px;
+
+  &.risk-high {
+    color: #ff4d4f;
+    background: #fff1f0;
+  }
+
+  &.risk-warning {
+    color: #faad14;
+    background: #fff7e6;
+  }
+
+  &.risk-normal {
+    color: #666;
+    background: #f5f5f5;
+  }
+}
+
+.table-pagination {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 16px;
+
+  .total-count {
+    color: #666;
+    font-size: 14px;
+  }
+}
+</style>