diff --git a/api/user.js b/api/user.js
index 58ab7ef..d62cd33 100644
--- a/api/user.js
+++ b/api/user.js
@@ -49,3 +49,26 @@ export const getSimpleDictDataList = () => {
 export const refreshToken = (params) => {
   return post('/admin-api/system/auth/refresh-token?refreshToken='+params)
 }
+
+
+/**
+ * 获得当前用户的未读站内信数量
+ * @returns {Promise}
+ */
+export const getMsg = () => {
+  return get('/app-api/system/notify-message/my-page')
+}
+
+/**
+ * 获得当前用户的未读站内信数量
+ * @returns {Promise}
+ */
+export const getUnreadCount = () => {
+  return get('/app-api/system/notify-message/get-unread-count')
+}
+
+
+
+
+
+
diff --git a/components/uni-charts/index.js b/components/uni-charts/index.js
new file mode 100644
index 0000000..f3740fe
--- /dev/null
+++ b/components/uni-charts/index.js
@@ -0,0 +1,2 @@
+import uniCharts from './uni-charts.vue'
+export default uniCharts
\ No newline at end of file
diff --git a/components/uni-charts/package.json b/components/uni-charts/package.json
new file mode 100644
index 0000000..11718ad
--- /dev/null
+++ b/components/uni-charts/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "uni-charts",
+  "version": "1.0.0",
+  "description": "UniApp K线图组件",
+  "main": "index.js",
+  "keywords": ["uni-charts", "kline", "小程序"],
+  "author": "",
+  "license": "MIT"
+}
\ No newline at end of file
diff --git a/components/uni-charts/uni-charts.vue b/components/uni-charts/uni-charts.vue
new file mode 100644
index 0000000..5c9693b
--- /dev/null
+++ b/components/uni-charts/uni-charts.vue
@@ -0,0 +1,380 @@
+<template>
+  <view class="uni-charts">
+    <canvas
+        v-if="type !== 'map'"
+        class="charts-canvas"
+        :style="{width: width + 'px', height: height + 'px'}"
+        canvas-id="uni-charts"
+        @touchstart="touchStart"
+        @touchmove="touchMove"
+        @touchend="touchEnd"
+    ></canvas>
+    <view v-else class="map-container" :style="{width: width + 'px', height: height + 'px'}">
+      <slot name="map"></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'uniCharts',
+  props: {
+    type: {
+      type: String,
+      default: 'line'
+    },
+    data: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    categories: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    option: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    width: {
+      type: [Number, String],
+      default: 375
+    },
+    height: {
+      type: [Number, String],
+      default: 200
+    }
+  },
+  data () {
+    return {
+      ctx: null,
+      chartData: {},
+      touchInfo: {}
+    }
+  },
+  watch: {
+    data: {
+      deep: true,
+      handler () {
+        this.initChart()
+      }
+    },
+    categories: {
+      deep: true,
+      handler () {
+        this.initChart()
+      }
+    },
+    option: {
+      deep: true,
+      handler () {
+        this.initChart()
+      }
+    }
+  },
+  mounted () {
+    this.initChart()
+  },
+  methods: {
+    initChart () {
+      if (this.type === 'kline') {
+        this.drawKline()
+      } else if (this.type === 'line') {
+        this.drawLine()
+      }
+    },
+    // 折线图绘制（终极版：Y轴整数 + 自适应极值 + 修复文字折叠 + 优化图例间距）
+    drawLine () {
+      if (!this.data.length || !this.categories.length) return;
+
+      const ctx = uni.createCanvasContext('uni-charts', this)
+      this.ctx = ctx
+      const { width, height } = this
+      const {
+        grid = {},
+        xAxis = {},
+        yAxis = {},
+        legend = {},
+        color = ['#25AF69', '#B34C17'],
+        lineSmooth = true
+      } = this.option
+
+      // 清空画布
+      ctx.clearRect(0, 0, width, height)
+
+      // 调整Grid布局，彻底解决重叠
+      const gridTop = grid.top ? (typeof grid.top === 'string' ? parseFloat(grid.top) / 100 * height : grid.top) : 60
+      const gridLeft = grid.left ? (typeof grid.left === 'string' ? parseFloat(grid.left) / 100 * width : grid.left) : 70
+      const gridRight = grid.right ? (typeof grid.right === 'string' ? parseFloat(grid.right) / 100 * width : grid.right) : 20
+      const gridBottom = grid.bottom ? (typeof grid.bottom === 'string' ? parseFloat(grid.bottom) / 100 * height : grid.bottom) : 50
+
+      const drawWidth = width - gridLeft - gridRight
+      const drawHeight = height - gridTop - gridBottom
+
+      // Y轴最大值自适应（无小数点）
+      let allValues = []
+      this.data.forEach(series => {
+        allValues = allValues.concat(series.data)
+      })
+      if (allValues.length === 0) return;
+
+      // 动态计算Y轴极值（保留10%顶部余量，转为整数）
+      const rawMaxVal = Math.max(...allValues)
+      const rawMinVal = Math.min(...allValues)
+      const maxVal = yAxis.max || Math.ceil(rawMaxVal * 1.1) // 向上取整，保证能容纳最大值
+      const minVal = yAxis.min || (rawMinVal < 0 ? Math.floor(rawMinVal * 1.1) : 0) // 向下取整（负数），默认0
+      const valRange = maxVal - minVal || 1
+
+      // 计算X轴每个点的宽度
+      const xStep = drawWidth / (this.categories.length - 1 || 1)
+
+      // X轴标签防拥挤
+      const minLabelWidth = 30
+      const maxShowLabels = Math.floor(drawWidth / minLabelWidth)
+      const labelInterval = maxShowLabels < this.categories.length
+          ? Math.ceil(this.categories.length / maxShowLabels)
+          : 1
+
+      // 绘制网格线 + Y轴整数刻度
+      ctx.setStrokeStyle(yAxis.splitLine?.lineStyle?.color || '#f5f5f7')
+      ctx.setLineWidth(1)
+      const yTickCount = 5
+      const yTickStep = valRange / yTickCount
+
+      for (let i = 0; i <= yTickCount; i++) {
+        const y = gridTop + drawHeight - (i * drawHeight / yTickCount)
+        // 绘制网格线
+        ctx.beginPath()
+        ctx.moveTo(gridLeft, y)
+        ctx.lineTo(width - gridRight, y)
+        ctx.stroke()
+
+        // ========== 核心修改：Y轴显示整数（无小数点） ==========
+        ctx.setFillStyle(yAxis.axisLabel?.color || '#666')
+        ctx.setFontSize(yAxis.axisLabel?.fontSize || 12)
+        const val = minVal + (i * yTickStep)
+        // 转为整数（四舍五入），彻底去掉小数点
+        const intVal = Math.round(val)
+        let valText = intVal.toString()
+        // 长数字处理（仍为整数格式）
+        if (valText.length > 6) {
+          valText = intVal.toLocaleString() // 用千分位显示长整数，如 1234567 → 1,234,567
+        }
+        // 文字右对齐，避免折叠
+        const textWidth = ctx.measureText(valText).width
+        ctx.fillText(valText, gridLeft - 10 - textWidth, y + 5)
+      }
+
+      // 绘制X轴标签
+      ctx.setFillStyle(xAxis.axisLabel?.color || '#666')
+      ctx.setFontSize(xAxis.axisLabel?.fontSize || 12)
+      this.categories.forEach((text, index) => {
+        if (index % labelInterval === 0) {
+          const x = gridLeft + index * xStep
+          let labelText = text
+          if (text.length > 6) {
+            labelText = text.slice(0, 6) + '...'
+          }
+          const textLines = labelText.split('\n')
+
+          textLines.forEach((line, lineIdx) => {
+            const textWidth = ctx.measureText(line).width
+            ctx.fillText(line, x - textWidth / 2, height - gridBottom + 20 + (lineIdx * 12))
+          })
+        }
+      })
+
+      // 优化图例间距
+      if (legend.show) {
+        ctx.setFontSize(legend.textStyle?.fontSize || 12)
+        let legendX = gridLeft + 10
+        this.data.forEach((series, idx) => {
+          let seriesName = series.name || `系列${idx + 1}`
+          if (seriesName.length > 8) {
+            seriesName = seriesName.slice(0, 8) + '...'
+          }
+          const textWidth = ctx.measureText(seriesName).width
+          const legendItemWidth = textWidth + 25
+
+          const legendY = gridTop - 30
+          ctx.setFillStyle(series.color || color[idx % color.length])
+          ctx.fillRect(legendX, legendY, 10, 10)
+          ctx.setFillStyle('#666')
+          ctx.fillText(seriesName, legendX + 15, legendY + 8)
+
+          legendX += Math.max(80, legendItemWidth + 10)
+        })
+      }
+
+      // 绘制平滑折线（无数据点）
+      this.data.forEach((series, seriesIdx) => {
+        const seriesColor = series.color || color[seriesIdx % color.length]
+
+        ctx.setStrokeStyle(seriesColor)
+        ctx.setLineWidth(2)
+        ctx.beginPath()
+
+        series.data.forEach((value, index) => {
+          const x = gridLeft + index * xStep
+          const y = gridTop + drawHeight - ((value - minVal) / valRange) * drawHeight
+
+          if (index === 0) {
+            ctx.moveTo(x, y)
+          } else {
+            if (lineSmooth && index < series.data.length - 1) {
+              const prevX = gridLeft + (index - 1) * xStep
+              const prevY = gridTop + drawHeight - ((series.data[index - 1] - minVal) / valRange) * drawHeight
+              const nextX = gridLeft + (index + 1) * xStep
+              const nextY = gridTop + drawHeight - ((series.data[index + 1] - minVal) / valRange) * drawHeight
+
+              const cp1x = (prevX + x) / 2
+              const cp1y = prevY
+              const cp2x = (x + nextX) / 2
+              const cp2y = y
+
+              ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
+            } else {
+              ctx.lineTo(x, y)
+            }
+          }
+        })
+
+        ctx.stroke()
+      })
+
+      ctx.draw()
+    },
+    // K线图绘制（同步修改Y轴为整数）
+    drawKline () {
+      const ctx = uni.createCanvasContext('uni-charts', this)
+      this.ctx = ctx
+      const { width, height } = this
+      const { grid = {}, xAxis = {}, yAxis = {}, color = ['#B34C17', '#25AF69'] } = this.option
+
+      ctx.clearRect(0, 0, width, height)
+
+      // 调整Grid布局
+      const gridTop = grid.top ? (typeof grid.top === 'string' ? parseFloat(grid.top) / 100 * height : grid.top) : 50
+      const gridLeft = grid.left ? (typeof grid.left === 'string' ? parseFloat(grid.left) / 100 * width : grid.left) : 70
+      const gridRight = grid.right ? (typeof grid.right === 'string' ? parseFloat(grid.right) / 100 * width : grid.right) : 20
+      const gridBottom = grid.bottom ? (typeof grid.bottom === 'string' ? parseFloat(grid.bottom) / 100 * height : grid.bottom) : 40
+
+      const drawWidth = width - gridLeft - gridRight
+      const drawHeight = height - gridTop - gridBottom
+
+      // Y轴自适应极值（整数）
+      let allValues = []
+      this.data.forEach(item => {
+        allValues = allValues.concat([item.open, item.high, item.low, item.close])
+      })
+      if (allValues.length === 0) return;
+
+      const rawMaxVal = Math.max(...allValues)
+      const rawMinVal = Math.min(...allValues)
+      const maxVal = yAxis.max || Math.ceil(rawMaxVal * 1.1)
+      const minVal = yAxis.min || (rawMinVal < 0 ? Math.floor(rawMinVal * 1.1) : 0)
+      const valRange = maxVal - minVal || 1
+
+      const xStep = drawWidth / (this.data.length || 1)
+
+      // 绘制网格线和Y轴整数刻度
+      ctx.setStrokeStyle('#f5f5f7')
+      ctx.setLineWidth(1)
+      const yTickCount = 5
+      for (let i = 0; i <= yTickCount; i++) {
+        const y = gridTop + drawHeight - (i * drawHeight / yTickCount)
+        ctx.beginPath()
+        ctx.moveTo(gridLeft, y)
+        ctx.lineTo(width - gridRight, y)
+        ctx.stroke()
+
+        // Y轴显示整数
+        ctx.setFillStyle(yAxis.axisLabel?.color || '#666')
+        ctx.setFontSize(yAxis.axisLabel?.fontSize || 12)
+        const val = minVal + (i * valRange / yTickCount)
+        const intVal = Math.round(val)
+        let valText = intVal.toString()
+        if (valText.length > 6) valText = intVal.toLocaleString()
+        const textWidth = ctx.measureText(valText).width
+        ctx.fillText(valText, gridLeft - 10 - textWidth, y + 5)
+      }
+
+      // X轴标签（防拥挤）
+      ctx.setFillStyle(xAxis.axisLabel?.color || '#666')
+      ctx.setFontSize(xAxis.axisLabel?.fontSize || 12)
+      const minLabelWidth = 30
+      const maxShowLabels = Math.floor(drawWidth / minLabelWidth)
+      const labelInterval = maxShowLabels < this.categories.length
+          ? Math.ceil(this.categories.length / maxShowLabels)
+          : 1
+
+      this.categories.forEach((text, index) => {
+        if (index % labelInterval === 0) {
+          const x = gridLeft + index * xStep + xStep / 2
+          let labelText = text
+          if (text.length > 6) labelText = text.slice(0, 6) + '...'
+          ctx.fillText(labelText, x - ctx.measureText(labelText).width / 2, height - gridBottom + 20)
+        }
+      })
+
+      // 绘制K线
+      this.data.forEach((item, index) => {
+        const { open, high, low, close } = item
+        const x = gridLeft + index * xStep + xStep / 2
+        const yOpen = gridTop + drawHeight - ((open - minVal) / valRange) * drawHeight
+        const yClose = gridTop + drawHeight - ((close - minVal) / valRange) * drawHeight
+        const yHigh = gridTop + drawHeight - ((high - minVal) / valRange) * drawHeight
+        const yLow = gridTop + drawHeight - ((low - minVal) / valRange) * drawHeight
+
+        // 绘制高低线
+        ctx.setStrokeStyle(close >= open ? color[0] : color[1])
+        ctx.setLineWidth(1)
+        ctx.beginPath()
+        ctx.moveTo(x, yHigh)
+        ctx.lineTo(x, yLow)
+        ctx.stroke()
+
+        // 绘制实体
+        const rectWidth = xStep / 3
+        ctx.setFillStyle(close >= open ? color[0] : color[1])
+        const rectY = Math.min(yOpen, yClose)
+        const rectHeight = Math.abs(yClose - yOpen) || 2
+        ctx.fillRect(x - rectWidth / 2, rectY, rectWidth, rectHeight)
+      })
+
+      ctx.draw()
+    },
+    touchStart (e) {
+      this.touchInfo = {
+        x: e.changedTouches[0].x,
+        y: e.changedTouches[0].y,
+        time: Date.now()
+      }
+    },
+    touchMove (e) {
+      this.touchInfo.x = e.changedTouches[0].x
+      this.touchInfo.y = e.changedTouches[0].y
+    },
+    touchEnd (e) {
+      // 可扩展点击交互逻辑
+    }
+  }
+}
+</script>
+
+<style scoped>
+.uni-charts {
+  position: relative;
+}
+.charts-canvas {
+  display: block;
+}
+.map-container {
+  position: relative;
+}
+</style>
\ No newline at end of file
diff --git a/pages-sub/data/tree-archive/editTree.vue b/pages-sub/data/tree-archive/editTree.vue
index 6c20929..186c8be 100644
--- a/pages-sub/data/tree-archive/editTree.vue
+++ b/pages-sub/data/tree-archive/editTree.vue
@@ -235,15 +235,15 @@
 <script setup>
 import { ref, reactive, nextTick } from 'vue'
 import { onReady, onLoad, onShow, onUnload } from '@dcloudio/uni-app';
-// 接口修改：删除addTree，新增 treeDetailReq + updateTree
+
 import { treeRoadReq, treeLogReq, treeDetailReq, updateTree } from "@/api/tree-archive/tree-archive.js";
 import { timeFormat } from '@/uni_modules/uview-plus';
 import { useUploadImgs } from '@/common/utils/useUploadImgs'
 import { useUserStore } from '@/pinia/user';
 
-// ========== 常量配置区 - 完全对标参考页写法 集中管理 ==========
+// ========== 常量配置区
 const CONST = {
-  // 上传配置 统一抽离，和参考页一致
+  // 上传配置 统一抽离
   UPLOAD_CONFIG: { maxCount: 3, uploadText: '选择图片', sizeType: ['compressed'] }
 }
 
@@ -275,13 +275,13 @@ const treeLevelData = ref([])
 const showActionSheet = ref(false);
 const currentActionSheetData = reactive({type: '', list: [], title: ''});
 
-// ========== 核心修复：图片上传配置 - 1:1对标工单页面 无任何冗余 ==========
+// ========== 核心修复：图片上传配置  ==========
 const treeImgList = useUploadImgs({
   ...CONST.UPLOAD_CONFIG,
   formRef: formRef,
   fieldName: 'treeImgList'
 })
-// ✅ 初始化图片数组为纯净空数组，杜绝残留数据
+// 初始化图片数组为纯净空数组，杜绝残留数据
 treeImgList.imgList.value = []
 treeImgList.rawImgList.value = []
 
@@ -440,7 +440,6 @@ onLoad((options) => {
 onShow(async () => {
   treeLevelData.value = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('tree_level'))
   treeOwnershipData.value = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('tree_ownership'))
-  // ✅ 核心修复：只执行一次回显加载，彻底杜绝重复加载
   if (activeTab.value === 0 && treeId.value && !isInit.value) {
     await getTreeDetail()
     isInit.value = true // 加载完成后标记为true，永不重复执行
@@ -467,7 +466,7 @@ const treeRoadQuery = async () => {
   rows.value = res.list
 }
 
-// ========== ✅ 终极修复：图片回显逻辑 - 彻底解决重复渲染4张图的问题 ==========
+// ==========
 const getTreeDetail = async () => {
   const res = await treeDetailReq({id: treeId.value})
   Object.assign(formData, res)
@@ -475,7 +474,6 @@ const getTreeDetail = async () => {
   formData.oldtreeownershipText = uni.$dict.getDictLabel('tree_ownership', res.oldtreeownership)
   formData.treeleveltext = uni.$dict.getDictLabel('tree_level', formData.treelevel)
 
-  // ✅ 第一步：强制清空为纯净空数组，杜绝任何残留
   treeImgList.imgList.value = []
   treeImgList.rawImgList.value = []
   formData.treephotoone = ''
@@ -485,7 +483,6 @@ const getTreeDetail = async () => {
   formData.treephotofour = ''
   formData.treephotofive = ''
 
-  // ✅ 第二步：接口返回几张就渲染几张，绝对不会重复
   if (Array.isArray(res.treeImgList) && res.treeImgList.length > 0) {
     const imgList = res.treeImgList.map((url, idx) => ({
       url,
@@ -563,7 +560,7 @@ const submit = async () => {
   // 表单校验
   const valid = await formRef.value.validate()
   if (!valid) return
-  // 对标参考页：图片取值 统一调用封装方法
+  // 图片取值 统一调用封装方法
   const uploadImgUrls = treeImgList.getSuccessImgUrls()
   formData.maintainunit = userStore.userInfo.user.companyId
   formData.treeImgList = uploadImgUrls
diff --git a/pages-sub/msg/index.vue b/pages-sub/msg/index.vue
new file mode 100644
index 0000000..e5f1f66
--- /dev/null
+++ b/pages-sub/msg/index.vue
@@ -0,0 +1,63 @@
+<template>
+  <view class="user-center-page">
+    <up-card
+        :border="false"
+        :foot-border-top="false"
+        v-for="(item,index) in orderList"
+        :key="`${item.orderNo}_${index}`"
+        :show-head="false"
+    >
+
+      <template #body>
+        <view class="card-body">
+          <view class="u-flex common-item-center common-justify-between" style="font-size: 14px;margin-top: 5px;">
+            <view class="u-line-1" style="flex: 1;margin-right: 20px;color: #333"> {{ item.orderName || '无' }}</view>
+            <view style="color: #000">{{ timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
+          </view>
+          <view class="u-line-1 ">
+            {{ item.remark || '无' }}
+          </view>
+
+
+        </view>
+      </template>
+    </up-card>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed,ref } from 'vue'
+import { useUserStore } from '@/pinia/user'
+import {  onShow } from '@dcloudio/uni-app'
+import { getMsg } from '@/api/user'
+// 初始化Pinia仓库
+const userStore = useUserStore()
+import { timeFormat } from '@/uni_modules/uview-plus';
+// 计算属性获取用户信息（响应式）
+const userInfo = computed(() => userStore.userInfo.user || {})
+const orderList = ref([
+  {
+    orderNo:'123',
+    orderName:'阜成门内大街巡检阜成门内大街巡检阜成门内大街巡检阜成门内大街巡检阜成门内大街巡检阜成门内大街巡检',
+    remark:'阜成门内大街周期计划即将到期，请及时处理。阜成门内大街周期计划即将到期，请及时处理。阜成门内大街周期计划即将到期，请及时处理。阜成门内大街周期计划即将到期，请及时处理。',
+    createTime:'1736160000000'
+  },
+  {
+    orderNo:'1223',
+    orderName:'阜成门内大街巡检阜成门内大街巡检阜成门内大街巡检阜成门内大街巡检阜成门内大街巡检阜成门内大街巡检',
+    remark:'阜成门内大街周期计划即将到期，请及时处理。阜成门内大街周期计划即将到期，请及时处理。阜成门内大街周期计划即将到期，请及时处理。阜成门内大街周期计划即将到期，请及时处理。',
+    createTime:'1736160000000'
+  }
+])
+
+// 页面显示时检查登录状态
+onShow( async () => {
+  const  res = await getMsg()
+})
+</script>
+
+
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/pages-sub/problem/work-order-manage/index.vue b/pages-sub/problem/work-order-manage/index.vue
index abd105d..0fddf0c 100644
--- a/pages-sub/problem/work-order-manage/index.vue
+++ b/pages-sub/problem/work-order-manage/index.vue
@@ -138,7 +138,7 @@
               </view>
               <view class="u-body-item u-flex">
                 <view class="u-body-item-title">工单位置：</view>
-                <view class="u-line-1 u-body-value">{{ item.roadName || '-' }}</view>
+                <view class="u-line-1 u-body-value">{{ item.lonLatAddress || '-' }}</view>
               </view>
               <view class="u-body-item u-flex">
                 <view class="u-body-item-title">工单名称：</view>
diff --git a/pages.json b/pages.json
index 2ba085f..b9c5f0d 100644
--- a/pages.json
+++ b/pages.json
@@ -218,9 +218,15 @@
 					"style": { "navigationBarTitleText": "树木详情" }
 				}
 
-
-
-
+			]
+		},
+		{
+			"root": "pages-sub/msg",
+			"pages": [
+				{
+					"path": "index",
+					"style": { "navigationBarTitleText": "消息中心" }
+				}
 			]
 		}
 	],
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 51710eb..f8dedd8 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -3,305 +3,400 @@
     <!-- 用户信息栏 -->
     <view class="user-info-bar">
       <view class="user-info">
-        <image class="avatar" src="../../static/imgs/default-avatar.png" mode="widthFix"></image>
         <view class="user-text">
-          <view class="username">林晓明</view>
-          <view class="login-time">上次登录1天前</view>
+          <view class="username">你好{{ userName }}，欢迎登录</view>
+          <view class="login-desc">全域智能运营管理平台</view>
         </view>
       </view>
-      <view class="msg-icon">
-        <u-icon name="message" color="#fff" size="32rpx" />
-        <view class="msg-badge">5</view>
+      <view class="msg-icon" @click="handleMsgClick" hover-class="msg-icon--hover">
+        <up-icon name="chat" color="#fff" size="24" />
+        <view class="msg-badge" v-if="msgCount > 0">
+          <up-badge type="error" max="999" :value="msgCount"></up-badge>
+        </view>
       </view>
     </view>
 
-    <!-- 任务完成情况卡片 -->
-    <view class="task-card">
-      <view class="card-title">任务完成情况</view>
-      <view class="card-header">
-        <view class="unit">单位: 个</view>
-        <!-- ✅ 核心修改：日期范围改为可点击的选择器 -->
-        <view class="date-range" @click="openDatePicker">
-<!--          {{ dateText }}-->
-          <neo-datetime-pro
-              v-model="dateRange"
-              type="daterange"
-              placeholder="请选择日期范围"
+    <view class="content-wrap">
+      <!-- 任务完成情况标题 -->
+      <view class="module-title">任务完成情况（K线图）</view>
+
+      <!-- 任务完成情况卡片 -->
+      <view class="task-chart-card">
+        <view class="card-header">
+          <view class="unit-tip">单位: 个</view>
+          <view class="date-picker-wrap" @click="openDatePicker">
+            <neo-datetime-pro
+                v-model="dateRange"
+                type="daterange"
+                :clearable="false"
+                placeholder="请选择日期范围"
+                @confirm="handleDateConfirm"
+            />
+          </view>
+        </view>
+
+        <!-- 双折线K线图（匹配示例图） -->
+        <view class="chart-container">
+          <uni-charts
+              type="line"
+              :data="klineChartData"
+              :categories="klineCategories"
+              :option="klineOption"
+              :width="chartWidth"
+              :height="chartHeight"
           />
         </view>
       </view>
-      <!-- 折线图 -->
-      <view class="chart-wrap">
-        <!--        <u-line-chart-->
-        <!--            :chart-data="chartData"-->
-        <!--            :x-axis="xAxis"-->
-        <!--            :y-axis="yAxis"-->
-        <!--            :legend="legend"-->
-        <!--            height="300rpx"-->
-        <!--        ></u-line-chart>-->
-      </view>
-    </view>
 
-    <!-- 待办/已办切换栏 -->
-    <view class="tab-bar">
-      <view
-          class="tab-item"
-          :class="{ active: currentTab === 'todo' }"
-          @click="currentTab = 'todo'"
-      >
-        待办事项(5)
-        <view class="tab-active-line" v-if="currentTab === 'todo'"></view>
-      </view>
-      <view
-          class="tab-item"
-          :class="{ active: currentTab === 'done' }"
-          @click="currentTab = 'done'"
-      >
-        已办事项(89)
-        <view class="tab-active-line" v-if="currentTab === 'done'"></view>
+      <!-- 待办/已办切换栏 -->
+      <view class="tab-switch-bar">
+        <view
+            class="tab-item"
+            :class="{ active: currentTab === 'todo' }"
+            @click="switchTab('todo')"
+            hover-class="tab-item--hover"
+        >
+          待办事项({{ todoList.length }})
+          <view class="tab-active-line" v-if="currentTab === 'todo'"></view>
+        </view>
+        <view
+            class="tab-item"
+            :class="{ active: currentTab === 'done' }"
+            @click="switchTab('done')"
+            hover-class="tab-item--hover"
+        >
+          已办事项({{ doneList.length }})
+          <view class="tab-active-line" v-if="currentTab === 'done'"></view>
+        </view>
       </view>
-    </view>
 
-    <!-- 事项列表 -->
-    <view class="task-list">
-      <view class="task-item" v-for="(item, index) in currentTaskList" :key="index">
-        <view class="task-name">事项名称: {{ item.name }}{{ item.name }}{{ item.name }}{{ item.name }}{{ item.name }}{{ item.name }}</view>
-        <view class="task-desc">
-          <view>紧急程度: {{ item.urgency }}</view>
-          <view class="task-time">{{ item.time }}</view>
+      <!-- 事项列表 -->
+      <view class="task-list-container">
+        <up-empty v-if="!currentTaskList.length" text="暂无相关事项" />
+        <view
+            class="task-item"
+            v-for="(item, index) in currentTaskList"
+            :key="index"
+            @click="handleTaskClick(item)"
+            hover-class="task-item--hover"
+        >
+          <view class="task-name">
+            {{ item.name }}
+          </view>
+          <view class="task-meta">
+            <view class="urgency-tag" :class="`urgency-tag--${getUrgencyType(item.urgency)}`">
+              {{ item.urgency || '普通' }}
+            </view>
+            <view class="task-time">{{ timeFormat(item.time) }}</view>
+          </view>
         </view>
       </view>
     </view>
-
-
   </view>
 </template>
 
 <script setup>
-import { ref, reactive, watch } from 'vue';
-
-// 折线图数据
-const chartData = reactive([
-  {
-    name: '已完成任务数',
-    data: [5, 35, 55, 40, 65, 50, 70],
-    color: '#4CAF50'
-  },
-  {
-    name: '待完成总任务数',
-    data: [5, 70, 75, 70, 75, 75, 90],
-    color: '#E53935'
-  }
-]);
-const xAxis = reactive(['12.28', '12.29', '12.30', '12.31', '01.01', '01.02', '01.03']);
-const yAxis = reactive([0, 25, 50, 75, 100]);
-const legend = reactive(['已完成任务数', '待完成总任务数']);
-
-// 标签切换
-const currentTab = ref('todo');
-const dateRange=ref( [])
-// ✅ 核心新增：时间选择器相关数据
-const showDatePicker = ref(false);
-// 默认显示的时间文本
-const dateText = ref('2025/12/28—2026/01/04');
-// 选中的开始/结束时间
-const selectStartDate = ref('');
-const selectEndDate = ref('');
-
-// 打开时间选择器
-const openDatePicker = () => {
-  showDatePicker.value = true;
+import { ref, watch, computed, onMounted } from 'vue';
+import { useUserStore } from '@/pinia/user';
+import { timeFormat } from '@/uni_modules/uview-plus';
+import uniCharts from '@/components/uni-charts/uni-charts.vue';
+
+// ========== 1. 常量抽离 ==========
+const FORMAT_CONST = {
+  DATE: 'MM.DD', // 匹配示例图的日期格式（12.28）
+  DATETIME: 'YYYY-MM-DD HH:mm',
+  TIME: 'HH:mm'
 };
 
-// 确认选择时间
-const confirmDate = (e) => {
-  // 格式化选中的时间
-  selectStartDate.value = formatDate(e.value[0]);
-  selectEndDate.value = formatDate(e.value[1]);
-  dateText.value = `${selectStartDate.value}—${selectEndDate.value}`;
-  showDatePicker.value = false;
-  // 这里可以加：时间改变后重新请求图表数据的逻辑
-  // getChartData(selectStartDate.value, selectEndDate.value)
+const URGENCY_MAP = {
+  特急: 'urgent',
+  紧急: 'high',
+  一般: 'normal',
+  普通: 'normal',
+  '--': 'normal'
 };
 
-// 时间格式化函数：YYYY/MM/DD 格式
-const formatDate = (dateVal) => {
-  const year = dateVal.getFullYear();
-  const month = (dateVal.getMonth() + 1).toString().padStart(2, '0');
-  const day = dateVal.getDate().toString().padStart(2, '0');
-  return `${year}/${month}/${day}`;
-};
+// ========== 2. 响应式数据 ==========
+const msgCount = ref(9999);
+const currentTab = ref('todo');
+const dateRange = ref([]);
 
-// 待办事项数据
-const todoList = reactive([
+// 双折线K线图专用数据
+const chartWidth = ref(0);
+const chartHeight = ref(300);
+const klineCategories = ref([]); // X轴日期（12.28/12.29...）
+const klineChartData = ref([
   {
-    name: '绿地卫生验收',
-    urgency: '特急',
-    time: '2025-12-31 15:45:23'
+    name: '已完成任务数', // 匹配示例图的绿色折线
+    data: [],
+    color: '#25AF69'
   },
   {
-    name: '阜成门内大街年度计划巡检',
-    urgency: '--',
-    time: '2025-12-31 09:02:00'
+    name: '待完成总任务数', // 匹配示例图的棕色折线
+    data: [],
+    color: '#B34C17'
+  }
+]);
+// 图表配置（匹配示例图样式）
+const klineOption = ref({
+  grid: {
+    top: '25%',
+    left: '15%',
+    right: '8%',
+    bottom: '20%'
   },
-  {
-    name: '金融街年度计划巡检',
-    urgency: '--',
-    time: '2025-12-31 09:02:00'
+  xAxis: {
+    axisLabel: { fontSize: 12, color: '#666' }
   },
-  {
-    name: '金融街年度计划巡检',
-    urgency: '--',
-    time: '2025-12-31 09:02:00'
+  yAxis: {
+    min: 0,
+
+    splitLine: { lineStyle: { color: '#f5f5f7' } },
+    axisLabel: { fontSize: 12, color: '#666' }
   },
-  {
-    name: '示例事项',
-    urgency: '一般',
-    time: '2026-01-04 10:00:00'
+  tooltip: {
+    trigger: 'axis',
+    formatter: (params) => {
+      return `${params[0].name}<br
+      ${params[0].seriesName}: ${params[0].data}<br
+      ${params[1].seriesName}: ${params[1].data}`;
+    }
+  },
+  legend: {
+    show: true,
+    top: '5%',
+    textStyle: { fontSize: 12 }
   }
+});
+
+// 任务列表数据
+const todoList = ref([
+  { name: '绿地卫生验收', urgency: '特急', time: '2025-12-31 15:45:23' },
+  { name: '阜成门内大街年度计划巡检', urgency: '--', time: '2025-12-31 09:02:00' },
+  { name: '金融街年度计划巡检', urgency: '--', time: '2025-12-31 09:02:00' },
+  { name: '示例事项', urgency: '一般', time: '2026-01-04 10:00:00' }
+]);
+const doneList = ref([
+  { name: '道路清洁验收', urgency: '普通', time: '2025-12-30 14:20:00' }
 ]);
 
-// 已办事项数据（示例）
-const doneList = reactive([
-  {
-    name: '道路清洁验收',
-    urgency: '普通',
-    time: '2025-12-30 14:20:00'
+// ========== 3. 计算属性 ==========
+const userStore = useUserStore();
+const userName = computed(() => userStore.userInfo?.user?.nickname || '用户');
+const currentTaskList = computed(() => {
+  return currentTab.value === 'todo' ? todoList.value : doneList.value;
+});
+
+// ========== 4. 工具函数 ==========
+const rpx2px = (rpx) => {
+  const systemInfo = wx.getSystemInfoSync();
+  return Math.floor(rpx * (systemInfo.screenWidth / 750));
+};
+
+const getUrgencyType = (urgency) => {
+  return URGENCY_MAP[urgency] || 'normal';
+};
+
+const initRecent7Days = () => {
+  const now = new Date();
+  const sevenDaysAgo = new Date();
+  sevenDaysAgo.setDate(now.getDate() - 6);
+  dateRange.value = [sevenDaysAgo, now];
+};
+
+/**
+ * 初始化双折线K线数据（匹配示例图）
+ */
+const fetchKlineData = async () => {
+  try {
+    // 模拟示例图数据（日期+已完成+待完成）
+    const rawData = [
+      { date: '12.21', done: 10, total: 110 },
+      { date: '12.22', done: 35, total: 70 },
+      { date: '12.23', done: 55, total: 728 },
+      { date: '12.24', done: 35, total: 65 },
+      { date: '12.25', done: 65, total: 78 },
+      { date: '12.26', done: 50, total: 272 },
+      { date: '12.22', done: 35, total: 70 },
+      { date: '12.23', done: 55, total: 78 },
+      { date: '12.24', done: 35, total: 65 },
+      { date: '12.25', done: 65, total: 78 },
+      { date: '12.26', done: 50, total: 72 },
+      { date: '12.27', done: 72, total: 92 }
+    ];
+
+    // 转换为uni-charts格式
+    klineCategories.value = rawData.map(item => item.date);
+    klineChartData.value[0].data = rawData.map(item => item.done);
+    klineChartData.value[1].data = rawData.map(item => item.total);
+  } catch (error) {
+    wx.showToast({ title: '获取K线数据失败', icon: 'none' });
   }
-]);
+};
+
+// ========== 5. 业务逻辑 ==========
+const switchTab = (tabType) => {
+  if (currentTab.value === tabType) return;
+  currentTab.value = tabType;
+};
+
+const openDatePicker = () => {};
+
+const handleDateConfirm = (e) => {
+  if (!e?.value?.length) return;
+  fetchKlineData();
+};
 
-// 当前显示的事项列表
-const currentTaskList = ref(todoList);
-// 监听标签切换
-watch(currentTab, (newVal) => {
-  currentTaskList.value = newVal === 'todo' ? todoList : doneList;
+const handleMsgClick = () => {
+  wx.navigateTo({ url: '/pages-sub/msg/index' });
+};
+
+const handleTaskClick = (item) => {
+  wx.navigateTo({ url: `/pages-sub/task/detail?id=${item.id || ''}` });
+};
+
+// ========== 6. 生命周期 ==========
+onMounted(() => {
+  chartWidth.value = rpx2px(750 - 60);
+  chartHeight.value = rpx2px(300);
+  initRecent7Days();
+  fetchKlineData();
 });
 </script>
 
 <style scoped lang="scss">
+/* 样式保持不变，无需修改 */
+$primary-color: #1677ff;
+$danger-color: #E53935;
+$success-color: #4CAF50;
+$text-color: #333;
+$text-color-light: #666;
+$text-color-placeholder: #999;
+$bg-color: #f5f5f7;
+$card-bg: #fff;
+$border-radius: 32rpx;
+$card-radius: 10rpx;
+$spacing-sm: 10rpx;
+$spacing-md: 20rpx;
+$spacing-lg: 30rpx;
+
 .home-page {
-  background-color: #f5f7fa;
+  background-color: $bg-color;
   min-height: 100vh;
 }
 
-/* 用户信息栏 */
 .user-info-bar {
-  background-color: #1677ff;
-  padding: 180rpx 30rpx 120rpx;
+  background: url("https://img.jichengshanshui.com.cn:28207/appimg/bg.jpg") no-repeat;
+  background-size: 100% 100%;
+  padding: 200rpx $spacing-lg 270rpx;
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: #fff;
-  z-index: 1;
   position: relative;
+  z-index: 1;
 
-  .user-info {
-    display: flex;
-    align-items: center;
-
-    .avatar {
-      width: 80rpx;
-      height: 80rpx;
-      border-radius: 50%;
-      margin-right: 20rpx;
-    }
-
-    .username {
-      font-size: 32rpx;
-      font-weight: 500;
-    }
+  .username {
+    font-size: 32rpx;
+    font-weight: 500;
+    margin-bottom: 8rpx;
+  }
 
-    .login-time {
-      font-size: 24rpx;
-      opacity: 0.8;
-    }
+  .login-desc {
+    font-size: 24rpx;
+    opacity: 0.8;
   }
 
   .msg-icon {
     position: relative;
+    padding: 10rpx;
+    border-radius: 50%;
+    transition: background-color 0.2s;
+
+    &--hover {
+      background-color: rgba(255, 255, 255, 0.2);
+    }
 
     .msg-badge {
       position: absolute;
       top: -10rpx;
       right: -10rpx;
-      background-color: #ff3d00;
-      color: #fff;
-      font-size: 20rpx;
-      width: 28rpx;
-      height: 28rpx;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
     }
   }
 }
 
-/* 任务完成情况卡片 */
-.task-card {
-  background-color: #fff;
-  margin: 0 30rpx;
-  margin-top: -60rpx;
-  border-radius: 16rpx 16rpx 0 0;
-  padding: 20rpx;
-  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
+.content-wrap {
+  margin-top: -245rpx;
+  border-radius: $border-radius $border-radius 0 0;
+  background-color: $bg-color;
   position: relative;
   z-index: 2;
+  overflow: hidden;
+}
 
-  .card-title {
-    font-size: 30rpx;
-    font-weight: 600;
-    margin-bottom: 15rpx;
-  }
+.module-title {
+  padding: $spacing-lg $spacing-lg 0;
+  font-size: 30rpx;
+  font-weight: 600;
+  color: $text-color-light;
+  margin-bottom: $spacing-sm;
+}
+
+.task-chart-card {
+  background-color: $card-bg;
+  border-radius: $card-radius;
+  margin: 0 $spacing-lg $spacing-md;
+  padding: $spacing-md;
 
   .card-header {
     display: flex;
     justify-content: space-between;
-    font-size: 24rpx;
-    color: #999;
-    margin-bottom: 10rpx;
     align-items: center;
-  }
+    font-size: 24rpx;
+    color: $text-color-placeholder;
+    margin-bottom: $spacing-md;
 
-  // ✅ 日期选择器样式
-  .date-range {
-    display: flex;
-    align-items: center;
-    gap: 6rpx;
-    padding: 4rpx 8rpx;
-    border-radius: 6rpx;
-    &:active {
-      background-color: #f5f5f5;
+    .date-picker-wrap {
+      padding: 4rpx 8rpx;
+      border-radius: 6rpx;
+      transition: background-color 0.2s;
+
+      &:active {
+        background-color: $bg-color;
+      }
     }
   }
-  .date-icon {
-    margin-top: 2rpx;
-  }
 
-  .chart-wrap {
+  .chart-container {
     width: 100%;
     height: 300rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 }
 
-/* 待办/已办切换栏 */
-.tab-bar {
+.tab-switch-bar {
   display: flex;
-  background-color: #fff;
-  margin: 0 30rpx;
-  border-radius: 0;
-  overflow: hidden;
+  margin: 0 $spacing-lg;
+  background-color: $card-bg;
+  border-radius: $card-radius $card-radius 0 0;
 
   .tab-item {
     flex: 1;
     text-align: center;
-    padding: 20rpx 0;
+    padding: $spacing-md 0;
     font-size: 28rpx;
-    color: #666;
+    color: $text-color-light;
     position: relative;
+    transition: color 0.2s;
+
+    &--hover {
+      background-color: $bg-color;
+    }
 
     &.active {
-      color: #1677ff;
+      color: $primary-color;
       font-weight: 500;
     }
 
@@ -311,22 +406,26 @@ watch(currentTab, (newVal) => {
       left: 0;
       width: 100%;
       height: 4rpx;
-      background-color: #1677ff;
+      background-color: $primary-color;
     }
   }
 }
 
-/* 事项列表 */
-.task-list {
-  background-color: #fff;
-  margin: 0 30rpx ;
-  border-radius: 0 0 16rpx 16rpx;
-  padding: 10rpx 20rpx;
-  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
+.task-list-container {
+  background-color: $card-bg;
+  margin: 0 $spacing-lg;
+  padding: $spacing-md;
+  border-radius: 0 0 $card-radius $card-radius;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
 
   .task-item {
-    padding: 20rpx 0;
-    border-bottom: 1px solid #f5f5f5;
+    padding: $spacing-md;
+    border-bottom: 1px solid $bg-color;
+    transition: background-color 0.2s;
+
+    &--hover {
+      background-color: $bg-color;
+    }
 
     &:last-child {
       border-bottom: none;
@@ -334,22 +433,39 @@ watch(currentTab, (newVal) => {
 
     .task-name {
       font-size: 28rpx;
-      color: #333;
-      margin-bottom: 10rpx;
-      // ✅ 修复超长文字溢出：单行显示+超出省略
+      color: $text-color;
+      margin-bottom: $spacing-sm;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }
 
-    .task-desc {
+    .task-meta {
       display: flex;
       justify-content: space-between;
+      align-items: center;
       font-size: 24rpx;
-      color: #666;
+
+      .urgency-tag {
+        padding: 2rpx 8rpx;
+        border-radius: 4rpx;
+        color: #fff;
+
+        &--urgent {
+          background-color: $danger-color;
+        }
+
+        &--high {
+          background-color: #fa8c16;
+        }
+
+        &--normal {
+          background-color: $text-color-placeholder;
+        }
+      }
 
       .task-time {
-        color: #999;
+        color: $text-color-placeholder;
       }
     }
   }