代码调整

zouyu

6 天以前 8c04f7a021496b0dc0d08c8fd4580ef8f3e1dd49

代码调整

 .env.development

@@ -1,5 +1,5 @@
# é¡µé¢æ ‡é¢˜

VITE_APP_TITLE = èŠ¯å¯¼äº‘（管理信息系统）

VITE_APP_TITLE = å·¥è‰ºæŠ¥è­¦ä¼˜åŒ–管理系统



# å¼€å‘环境配置

VITE_APP_ENV = 'development'


 .env.production

@@ -1,5 +1,5 @@
# é¡µé¢æ ‡é¢˜

VITE_APP_TITLE = MIS（管理信息系统）

VITE_APP_TITLE = å·¥è‰ºæŠ¥è­¦ä¼˜åŒ–管理系统



# ç”Ÿäº§çŽ¯å¢ƒé…ç½®

VITE_APP_ENV = 'production'


 src/api/alarmManagement/alarmConfig.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,66 @@
import request from '@/utils/request';

// æŸ¥è¯¢æŠ¥è­¦é…ç½®åˆ—表
export function listAlarmConfig(query) {
  return request({
    url: '/alarm/config/list',
    method: 'get',
    params: query
  });
}

// èŽ·å–报警配置详细信息
export function getAlarmConfig(configId) {
  return request({
    url: '/alarm/config/' + configId,
    method: 'get'
  });
}

// æ–°å¢žæŠ¥è­¦é…ç½®
export function addAlarmConfig(data) {
  return request({
    url: '/alarm/config',
    method: 'post',
    data: data
  });
}

// ä¿®æ”¹æŠ¥è­¦é…ç½®
export function updateAlarmConfig(data) {
  return request({
    url: '/alarm/config',
    method: 'put',
    data: data
  });
}

// åˆ é™¤æŠ¥è­¦é…ç½®
export function delAlarmConfig(configIds) {
  return request({
    url: '/alarm/config/' + configIds,
    method: 'delete'
  });
}

// ä¿®æ”¹æŠ¥è­¦é…ç½®çŠ¶æ€
export function changeStatus(configId, status) {
  const data = {
    configId,
    status
  };
  return request({
    url: '/alarm/config/changeStatus',
    method: 'put',
    data: data
  });
}

// å¯¼å‡ºæŠ¥è­¦é…ç½®
export function exportAlarmConfig(query) {
  return request({
    url: '/alarm/config/export',
    method: 'get',
    params: query
  });
}

 src/api/alarmManagement/alarmHistory.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,27 @@
import request from '@/utils/request';

// æŸ¥è¯¢æŠ¥è­¦åŽ†å²åˆ—表
export function listAlarmHistory(query) {
  return request({
    url: '/alarm/history/list',
    method: 'get',
    params: query
  });
}

// èŽ·å–报警历史详情
export function getAlarmHistoryDetail(alarmId) {
  return request({
    url: '/alarm/history/detail/' + alarmId,
    method: 'get'
  });
}

// å¯¼å‡ºæŠ¥è­¦åŽ†å²
export function exportAlarmHistory(query) {
  return request({
    url: '/alarm/history/export',
    method: 'get',
    params: query
  });
}

 src/api/alarmManagement/alarmMonitor.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,36 @@
import request from '@/utils/request';

// æŸ¥è¯¢æŠ¥è­¦ç›‘控列表
export function listAlarmMonitor(query) {
  return request({
    url: '/alarm/monitor/list',
    method: 'get',
    params: query
  });
}

// ç¡®è®¤æŠ¥è­¦
export function confirmAlarm(data) {
  return request({
    url: '/alarm/monitor/confirm',
    method: 'post',
    data: data
  });
}

// è§£å†³æŠ¥è­¦
export function resolveAlarm(data) {
  return request({
    url: '/alarm/monitor/resolve',
    method: 'post',
    data: data
  });
}

// èŽ·å–报警详情
export function getAlarmDetail(alarmId) {
  return request({
    url: '/alarm/monitor/detail/' + alarmId,
    method: 'get'
  });
}

 src/api/alarmManagement/alarmStatistics.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,55 @@
import request from '@/utils/request';

// èŽ·å–报警统计数据
export function getAlarmStatistics(query) {
  return request({
    url: '/alarm/statistics',
    method: 'get',
    params: query
  });
}

// èŽ·å–报警类型分布
export function getAlarmTypeDistribution(query) {
  return request({
    url: '/alarm/statistics/typeDistribution',
    method: 'get',
    params: query
  });
}

// èŽ·å–报警等级分布
export function getAlarmLevelDistribution(query) {
  return request({
    url: '/alarm/statistics/levelDistribution',
    method: 'get',
    params: query
  });
}

// èŽ·å–报警趋势分析
export function getAlarmTrend(query) {
  return request({
    url: '/alarm/statistics/trend',
    method: 'get',
    params: query
  });
}

// èŽ·å–设备报警排行榜
export function getDeviceAlarmRank(query) {
  return request({
    url: '/alarm/statistics/deviceRank',
    method: 'get',
    params: query
  });
}

// èŽ·å–报警处理耗时统计
export function getHandleTimeStatistics(query) {
  return request({
    url: '/alarm/statistics/handleTime',
    method: 'get',
    params: query
  });
}

 src/router/index.js

@@ -108,21 +108,21 @@
      }

    ]

  },

  {

    path: '/main/MobileChat',

    component: Layout,

    redirect: '',

    hidden: true,

    permissions: ['MobileChat:edit'],

    children: [

      {

        path: '',

        component: () => import('@/views/chatHome/chatHomeIndex/MobileChat'),

        name: 'MobileChat',

        meta: { title: 'AI对话', activeMenu: '/chatHome/chatHomeIndex'}

      }

    ]

  },

  // {

  //   path: '/main/MobileChat',

  //   component: Layout,

  //   redirect: '',

  //   hidden: true,

  //   permissions: ['MobileChat:edit'],

  //   children: [

  //     {

  //       path: '',

  //       component: () => import('@/views/chatHome/chatHomeIndex/MobileChat'),

  //       name: 'MobileChat',

  //       meta: { title: 'AI对话', activeMenu: '/chatHome/chatHomeIndex'}

  //     }

  //   ]

  // },

  {

    path: '/system/role-auth',

    component: Layout,


 src/views/alarmManagement/alarmAnalysis/alarmTrend.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,176 @@
<template>
  <div class="alarm-trend-analysis">
    <el-card shadow="never" class="search-card">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="报警级别">
          <el-select v-model="searchForm.alarmLevel" placeholder="请选择报警级别" clearable>
            <el-option label="严重" value="严重" />
            <el-option label="中等" value="中等" />
            <el-option label="轻微" value="轻微" />
          </el-select>
        </el-form-item>
        <el-form-item label="设备类型">
          <el-select v-model="searchForm.equipmentType" placeholder="请选择设备类型" clearable>
            <el-option label="工艺设备" value="工艺设备" />
            <el-option label="检测设备" value="检测设备" />
            <el-option label="其他设备" value="其他设备" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="never" class="chart-card">
          <template #header>
            <span>报警趋势分析</span>
          </template>
          <div ref="chartContainer" class="chart-container"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card shadow="never" class="chart-card">
          <template #header>
            <span>报警级别分布</span>
          </template>
          <div ref="levelChartContainer" class="chart-container"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="never" class="chart-card">
          <template #header>
            <span>报警设备类型分布</span>
          </template>
          <div ref="equipmentChartContainer" class="chart-container"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'AlarmTrendAnalysis',
  data() {
    return {
      searchForm: {
        dateRange: [],
        alarmLevel: '',
        equipmentType: ''
      },
      trendData: {
        categories: ['12-01', '12-02', '12-03', '12-04', '12-05', '12-06', '12-07'],
        severe: [8, 12, 9, 15, 11, 13, 10],
        moderate: [22, 25, 20, 28, 24, 26, 23],
        minor: [35, 38, 32, 40, 36, 39, 34]
      },
      levelData: [
        { name: '严重', value: 78 },
        { name: '中等', value: 178 },
        { name: '轻微', value: 272 }
      ],
      equipmentData: [
        { name: '工艺设备', value: 280 },
        { name: '检测设备', value: 120 },
        { name: '其他设备', value: 128 }
      ]
    }
  },
  mounted() {
    this.initCharts()
  },
  methods: {
    handleSearch() {
      console.log('查询数据', this.searchForm)
      this.initCharts()
    },
    initCharts() {
      this.renderTrendChart()
      this.renderLevelChart()
      this.renderEquipmentChart()
    },
    renderTrendChart() {
      console.log('渲染报警趋势图表', this.trendData)
    },
    renderLevelChart() {
      console.log('渲染报警级别分布图表', this.levelData)
    },
    renderEquipmentChart() {
      console.log('渲染报警设备类型分布图表', this.equipmentData)
    }
  }
}
</script>

<style scoped>
.alarm-trend-analysis {
  padding: 16px;
  background-color: #f0f2f5;
  min-height: 100vh;
}

.search-card {
  margin-bottom: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.chart-card {
  margin-bottom: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.chart-container {
  height: 400px;
  background-color: #ffffff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 16px;
  border: 1px solid #e4e7ed;
}

/* æŒ‰é’®æ ·å¼ä¼˜åŒ– */
:deep(.el-button) {
  border-radius: 6px;
  padding: 8px 16px;
  text-align: center;
  white-space: nowrap;
}

/* è¡¨å•æŽ§ä»¶æ ·å¼ä¼˜åŒ– */
:deep(.el-input__inner),
:deep(.el-select__input) {
  border-radius: 6px;
}

:deep(.el-date-editor) {
  border-radius: 6px;
}

/* å¡ç‰‡å¤´éƒ¨æ ·å¼ */
:deep(.el-card__header) {
  background-color: #fafafa;
  border-bottom: 1px solid #e4e7ed;
}
</style>

 src/views/alarmManagement/alarmConfig/alarmRule.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,173 @@
<template>
  <div class="alarm-rule-config">
    <el-card shadow="never" class="search-card">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="规则名称">
          <el-input v-model="searchForm.ruleName" placeholder="请输入规则名称" />
        </el-form-item>
        <el-form-item label="设备类型">
          <el-select v-model="searchForm.equipmentType" placeholder="请选择设备类型">
            <el-option label="工艺设备" value="工艺设备" />
            <el-option label="检测设备" value="检测设备" />
            <el-option label="其他设备" value="其他设备" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never" class="table-card">
      <template #header>
        <div class="card-header">
          <span>报警规则配置</span>
          <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增规则</el-button>
        </div>
      </template>
      <el-table :data="ruleList" style="width: 100%" :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="ruleName" label="规则名称" />
        <el-table-column prop="equipmentType" label="设备类型" />
        <el-table-column prop="parameter" label="监控参数" />
        <el-table-column prop="alarmLevel" label="报警级别" />
        <el-table-column prop="createTime" label="创建时间" width="180" show-overflow-tooltip/>
        <el-table-column prop="status" label="状态" width="150">
          <template #default="scope">
            <el-switch v-model="scope.row.status" active-text="启用" inactive-text="禁用" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="scope">
            <el-button size="small" type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="text" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :total="ruleList.length"
          :page-size="10"
          :page-sizes="[10, 20, 30, 50]"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'AlarmRule',
  data() {
    return {
      searchForm: {
        ruleName: '',
        equipmentType: ''
      },
      ruleList: [
        {
          id: 1,
          ruleName: '温度过高报警',
          equipmentType: '工艺设备',
          parameter: '温度',
          alarmLevel: '严重',
          createTime: '2025-12-01 10:30:00',
          status: true
        },
        {
          id: 2,
          ruleName: '压力异常报警',
          equipmentType: '工艺设备',
          parameter: '压力',
          alarmLevel: '中等',
          createTime: '2025-12-02 14:20:00',
          status: true
        },
        {
          id: 3,
          ruleName: '流量过低报警',
          equipmentType: '检测设备',
          parameter: '流量',
          alarmLevel: '轻微',
          createTime: '2025-12-03 09:15:00',
          status: false
        },
        {
          id: 4,
          ruleName: '电压不稳定报警',
          equipmentType: '其他设备',
          parameter: '电压',
          alarmLevel: '中等',
          createTime: '2025-12-04 16:45:00',
          status: true
        },
        {
          id: 5,
          ruleName: '液位异常报警',
          equipmentType: '工艺设备',
          parameter: '液位',
          alarmLevel: '严重',
          createTime: '2025-12-05 11:20:00',
          status: true
        }
      ]
    }
  },
  methods: {
    handleSearch() {
      console.log('搜索', this.searchForm)
    },
    handleReset() {
      this.searchForm = {
        ruleName: '',
        equipmentType: ''
      }
    },
    handleAdd() {
      console.log('新增规则')
    },
    handleEdit(row) {
      console.log('编辑规则', row)
    },
    handleDelete(row) {
      console.log('删除规则', row)
    }
  }
}
</script>

<style scoped>
.alarm-rule-config {
  padding: 16px;
  background-color: #f0f2f5;
  min-height: 100vh;
}

.search-card {
  margin-bottom: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.table-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.pagination {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
}

</style>

 src/views/alarmManagement/alarmKnowledge/alarmHandle.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,180 @@
<template>
  <div class="alarm-handle-knowledge">
    <el-card shadow="never" class="search-card">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="知识库标题">
          <el-input v-model="searchForm.title" placeholder="请输入知识库标题" />
        </el-form-item>
        <el-form-item label="报警类型">
          <el-select v-model="searchForm.alarmType" placeholder="请选择报警类型" clearable>
            <el-option label="温度报警" value="温度报警" />
            <el-option label="压力报警" value="压力报警" />
            <el-option label="振动报警" value="振动报警" />
            <el-option label="液位报警" value="液位报警" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          <el-button icon="el-icon-plus" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never" class="table-card" >
      <el-table :data="knowledgeList" style="width: 100%" :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="title" label="知识库标题" min-width="200" />
        <el-table-column prop="alarmType" label="报警类型" width="120" />
        <el-table-column prop="alarmLevel" label="报警级别" width="100">
          <template #default="scope">
            <el-tag :type="getAlarmLevelType(scope.row.alarmLevel)">
              {{ scope.row.alarmLevel }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column prop="creator" label="创建人" width="100" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === '启用' ? 'success' : 'info'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" fixed="right">
          <template #default="scope">
            <el-button size="small" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
            <el-button size="small" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :total="knowledgeList.length"
          :page-size="10"
          :page-sizes="[10, 20, 30, 50]"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'AlarmHandleKnowledge',
  data() {
    return {
      searchForm: {
        title: '',
        alarmType: ''
      },
      knowledgeList: [
        {
          id: 1,
          title: '反应釜温度过高报警处理流程',
          alarmType: '温度报警',
          alarmLevel: '严重',
          createTime: '2025-12-01 14:30:00',
          creator: '管理员',
          status: '启用'
        },
        {
          id: 2,
          title: '离心泵振动异常报警处理指南',
          alarmType: '振动报警',
          alarmLevel: '中等',
          createTime: '2025-12-02 09:15:00',
          creator: '设备工程师',
          status: '启用'
        },
        {
          id: 3,
          title: '储罐液位过低报警处理方法',
          alarmType: '液位报警',
          alarmLevel: '轻微',
          createTime: '2025-12-03 16:45:00',
          creator: '工艺工程师',
          status: '启用'
        },
        {
          id: 4,
          title: '压缩机压力过高报警应急预案',
          alarmType: '压力报警',
          alarmLevel: '严重',
          createTime: '2025-12-04 11:20:00',
          creator: '安全主管',
          status: '启用'
        },
        {
          id: 5,
          title: '干燥机湿度异常报警处理流程',
          alarmType: '湿度报警',
          alarmLevel: '中等',
          createTime: '2025-12-05 15:10:00',
          creator: '工艺工程师',
          status: '禁用'
        }
      ]
    }
  },
  methods: {
    getAlarmLevelType(level) {
      switch (level) {
        case '严重':
          return 'danger'
        case '中等':
          return 'warning'
        case '轻微':
          return 'info'
        default:
          return 'info'
      }
    },
    handleSearch() {
      console.log('搜索知识库', this.searchForm)
    },
    handleAdd() {
      console.log('新增知识库')
    },
    handleView(row) {
      console.log('查看知识库详情', row)
    },
    handleEdit(row) {
      console.log('编辑知识库', row)
    },
    handleDelete(row) {
      console.log('删除知识库', row)
    }
  }
}
</script>

<style scoped>
.alarm-handle-knowledge {
  padding: 16px;
  background-color: #f0f2f5;
  min-height: 100vh;
}

.search-card {
  margin-bottom: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.table-card {
  margin-top: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.pagination {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
}

</style>

 src/views/alarmManagement/alarmMonitor/realTimeAlarm.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,271 @@
<template>
  <div class="real-time-alarm">
    <el-card shadow="never" class="alarm-stats-card">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-number severe">12</div>
            <div class="stat-label">严重报警</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-number moderate">28</div>
            <div class="stat-label">中等报警</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-number minor">45</div>
            <div class="stat-label">轻微报警</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-number total">85</div>
            <div class="stat-label">今日总报警</div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-card shadow="never" class="table-card">
      <template #header>
        <div class="card-header">
          <span>实时报警监控</span>
          <el-button type="primary" icon="el-icon-refresh" @click="handleRefresh">刷新</el-button>
        </div>
      </template>
      <el-table :data="alarmList" style="width: 100%" height="500" :header-cell-style="{textAlign: 'center'}" :cell-style="{textAlign: 'center'}">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="alarmTime" label="报警时间" width="180" />
        <el-table-column prop="equipmentName" label="设备名称" />
        <el-table-column prop="parameter" label="报警参数" />
        <el-table-column prop="alarmValue" label="报警值" />
        <el-table-column prop="threshold" label="阈值" />
        <el-table-column prop="alarmLevel" label="报警级别" width="100">
          <template #default="scope">
            <el-tag :type="getAlarmLevelType(scope.row.alarmLevel)">
              {{ scope.row.alarmLevel }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="处理状态" width="120">
          <template #default="scope">
            <el-tag :type="scope.row.status === '已处理' ? 'success' : 'warning'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="scope">
            <el-button size="small" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
            <el-button size="small" type="text" icon="el-icon-check" @click="handleProcess(scope.row)">处理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'RealTimeAlarm',
  data() {
    return {
      alarmList: [
        {
          id: 1,
          alarmTime: '2025-12-16 11:50:23',
          equipmentName: '反应釜A',
          parameter: '温度',
          alarmValue: '185°C',
          threshold: '≤180°C',
          alarmLevel: '严重',
          status: '未处理'
        },
        {
          id: 2,
          alarmTime: '2025-12-16 11:48:15',
          equipmentName: '离心机B',
          parameter: '振动',
          alarmValue: '0.8mm/s',
          threshold: '≤0.5mm/s',
          alarmLevel: '中等',
          status: '未处理'
        },
        {
          id: 3,
          alarmTime: '2025-12-16 11:45:30',
          equipmentName: '输送泵C',
          parameter: '压力',
          alarmValue: '4.2MPa',
          threshold: '≤4.0MPa',
          alarmLevel: '轻微',
          status: '已处理'
        },
        {
          id: 4,
          alarmTime: '2025-12-16 11:42:18',
          equipmentName: '反应釜D',
          parameter: 'pH值',
          alarmValue: '4.2',
          threshold: '5.0-7.0',
          alarmLevel: '中等',
          status: '未处理'
        },
        {
          id: 5,
          alarmTime: '2025-12-16 11:38:55',
          equipmentName: '干燥机E',
          parameter: '湿度',
          alarmValue: '15%',
          threshold: '≤10%',
          alarmLevel: '轻微',
          status: '已处理'
        }
      ]
    }
  },
  methods: {
    getAlarmLevelType(level) {
      switch (level) {
        case '严重':
          return 'danger'
        case '中等':
          return 'warning'
        case '轻微':
          return 'info'
        default:
          return 'info'
      }
    },
    handleRefresh() {
      console.log('刷新报警数据')
    },
    handleView(row) {
      console.log('查看报警详情', row)
    },
    handleProcess(row) {
      console.log('处理报警', row)
    }
  }
}
</script>

<style scoped>
.real-time-alarm {
  padding: 16px;
  background-color: #f0f2f5;
  min-height: 100vh;
}

.alarm-stats-card {
  margin-bottom: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.table-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.stat-item {
  text-align: center;
  padding: 24px 16px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stat-number {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.stat-number.severe {
  color: #f56c6c;
  text-shadow: 0 2px 4px rgba(245, 108, 108, 0.1);
}

.stat-number.moderate {
  color: #e6a23c;
  text-shadow: 0 2px 4px rgba(230, 162, 60, 0.1);
}

.stat-number.minor {
  color: #67c23a;
  text-shadow: 0 2px 4px rgba(103, 194, 58, 0.1);
}

.stat-number.total {
  color: #409eff;
  text-shadow: 0 2px 4px rgba(64, 158, 255, 0.1);
}

.stat-label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

/* è¡¨æ ¼æ ·å¼ä¼˜åŒ– */
:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-table__header-wrapper) {
  background-color: #f5f7fa;
}

:deep(.el-table__header th) {
  font-weight: 600;
  background-color: #f5f7fa;
}

:deep(.el-table__body tr:hover) {
  background-color: #f5f7fa;
}

/* æŒ‰é’®æ ·å¼ä¼˜åŒ– */
:deep(.el-button) {
  border-radius: 6px;
  padding: 8px 16px;
  text-align: center;
  white-space: nowrap;
}

/* æ“ä½œæ ä¸æ¢è¡Œ */
:deep(.el-table__column--fixed-right) {
  white-space: nowrap;
}

:deep(.el-table__fixed-right) {
  height: 100% !important;
}

/* æ ‡ç­¾æ ·å¼ä¼˜åŒ– */
:deep(.el-tag) {
  border-radius: 12px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
}
</style>

 src/views/alarmManagement/alarmReport/alarmStats.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,260 @@
<template>
  <div class="alarm-stats-report">
    <el-card shadow="never" class="search-card">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="报表类型">
          <el-select v-model="searchForm.reportType" placeholder="请选择报表类型">
            <el-option label="日报" value="日报" />
            <el-option label="周报" value="周报" />
            <el-option label="月报" value="月报" />
            <el-option label="季报" value="季报" />
            <el-option label="年报" value="年报" />
          </el-select>
        </el-form-item>
        <el-form-item label="统计时间">
          <el-date-picker
            v-model="searchForm.statsDate"
            type="date"
            placeholder="选择统计日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">生成报表</el-button>
          <el-button type="success" icon="el-icon-download" @click="handleExport">导出报表</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never" class="report-card">
      <template #header>
        <span>报警统计报表 - 2025å¹´12月</span>
      </template>
      
      <div class="report-summary">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="summary-item">
              <div class="summary-label">总报警数</div>
              <div class="summary-value">425</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="summary-item">
              <div class="summary-label">已处理报警</div>
              <div class="summary-value handled">398</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="summary-item">
              <div class="summary-label">未处理报警</div>
              <div class="summary-value pending">27</div>
            </div>
          </el-col>
        </el-row>
      </div>

      <div class="report-content">
        <h3>1. æŠ¥è­¦çº§åˆ«ç»Ÿè®¡</h3>
        <el-table :data="levelStats" style="width: 100%; margin-bottom: 20px;">
          <el-table-column prop="level" label="报警级别" />
          <el-table-column prop="count" label="数量" />
          <el-table-column prop="percentage" label="占比" />
          <el-table-column prop="handled" label="已处理" />
          <el-table-column prop="pending" label="未处理" />
        </el-table>

        <h3>2. è®¾å¤‡ç±»åž‹æŠ¥è­¦ç»Ÿè®¡</h3>
        <el-table :data="equipmentStats" style="width: 100%; margin-bottom: 20px;">
          <el-table-column prop="type" label="设备类型" />
          <el-table-column prop="count" label="报警数量" />
          <el-table-column prop="percentage" label="占比" />
        </el-table>

        <h3>3. æŠ¥è­¦å¤„理时效统计</h3>
        <el-table :data="handlingTimeStats" style="width: 100%; margin-bottom: 20px;">
          <el-table-column prop="range" label="处理时长范围" />
          <el-table-column prop="count" label="报警数量" />
          <el-table-column prop="percentage" label="占比" />
        </el-table>

        <h3>4. æœˆåº¦æŠ¥è­¦è¶‹åŠ¿</h3>
        <div ref="trendChart" class="trend-chart-container"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'AlarmStatsReport',
  data() {
    return {
      searchForm: {
        reportType: '月报',
        statsDate: '2025-12-01'
      },
      levelStats: [
        { level: '严重', count: 78, percentage: '18.35%', handled: 75, pending: 3 },
        { level: '中等', count: 178, percentage: '41.88%', handled: 170, pending: 8 },
        { level: '轻微', count: 169, percentage: '39.76%', handled: 153, pending: 16 }
      ],
      equipmentStats: [
        { type: '工艺设备', count: 280, percentage: '65.88%' },
        { type: '检测设备', count: 85, percentage: '20.00%' },
        { type: '其他设备', count: 60, percentage: '14.12%' }
      ],
      handlingTimeStats: [
        { range: '0-30分钟', count: 280, percentage: '65.88%' },
        { range: '30-60分钟', count: 75, percentage: '17.65%' },
        { range: '1-2小时', count: 45, percentage: '10.59%' },
        { range: '2小时以上', count: 25, percentage: '5.88%' }
      ]
    }
  },
  mounted() {
    this.initTrendChart()
  },
  methods: {
    handleSearch() {
      console.log('生成报表', this.searchForm)
    },
    handleExport() {
      console.log('导出报表')
    },
    initTrendChart() {
      console.log('初始化趋势图表')
    }
  }
}
</script>

<style scoped>
.alarm-stats-report {
  padding: 16px;
  background-color: #f0f2f5;
  min-height: 100vh;
}

.search-card {
  margin-bottom: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.report-card {
  margin-top: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.report-summary {
  margin: 20px;
  padding: 20px;
  background-color: #fafafa;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
}

.summary-item {
  background-color: #ffffff;
  padding: 24px 16px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.summary-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.summary-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 12px;
  font-weight: 500;
}

.summary-value {
  font-size: 32px;
  font-weight: bold;
  color: #409eff;
  letter-spacing: 1px;
}

.summary-value.handled {
  color: #67c23a;
}

.summary-value.pending {
  color: #e6a23c;
}

.report-content {
  margin: 20px;
}

.report-content h3 {
  margin-bottom: 16px;
  color: #303133;
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 8px;
  border-bottom: 2px solid #409eff;
  display: inline-block;
}

.trend-chart-container {
  height: 350px;
  background-color: #ffffff;
  border-radius: 8px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  border: 1px solid #e4e7ed;
}

/* è¡¨æ ¼æ ·å¼ä¼˜åŒ– */
:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
}

:deep(.el-table__header-wrapper) {
  background-color: #f5f7fa;
}

:deep(.el-table__header th) {
  font-weight: 600;
  background-color: #f5f7fa;
}

:deep(.el-table__body tr:hover) {
  background-color: #f5f7fa;
}

/* æŒ‰é’®æ ·å¼ä¼˜åŒ– */
:deep(.el-button) {
  border-radius: 6px;
  padding: 8px 16px;
  text-align: center;
  white-space: nowrap;
}

/* è¡¨å•æŽ§ä»¶æ ·å¼ä¼˜åŒ– */
:deep(.el-input__inner),
:deep(.el-select__input) {
  border-radius: 6px;
}

:deep(.el-date-editor) {
  border-radius: 6px;
}
</style>

 src/views/basicData/customerFile/index.vue

ÎļþÒÑɾ³ý

 src/views/basicData/product/ImportExcel/index.vue

ÎļþÒÑɾ³ý

 src/views/basicData/product/index.vue

ÎļþÒÑɾ³ý

 src/views/basicData/supplierManage/index.vue

ÎļþÒÑɾ³ý

 src/views/chatHome/chatHomeIndex/MobileChat.vue

ÎļþÒÑɾ³ý

 src/views/chatHome/chatHomeIndex/home.vue

ÎļþÒÑɾ³ý

 src/views/collaborativeApproval/approvalProcess/components/approvalDia.vue

ÎļþÒÑɾ³ý

 src/views/collaborativeApproval/approvalProcess/components/infoFormDia.vue

ÎļþÒÑɾ³ý

 src/views/collaborativeApproval/approvalProcess/fileList.vue

ÎļþÒÑɾ³ý

 src/views/collaborativeApproval/approvalProcess/index.vue

ÎļþÒÑɾ³ý

 src/views/collaborativeApproval/approvalProcess/index1.vue

ÎļþÒÑɾ³ý

 src/views/collaborativeApproval/approvalProcess/index2.vue

ÎļþÒÑɾ³ý

 src/views/collaborativeApproval/approvalProcess/index3.vue

ÎļþÒÑɾ³ý

 src/views/collaborativeApproval/approvalProcess/index4.vue

ÎļþÒÑɾ³ý

 src/views/collaborativeApproval/attendanceManagement/index.vue

ÎļþÒÑɾ³ý

 src/views/collaborativeApproval/knowledgeBase/index.vue

ÎļþÒÑɾ³ý

 src/views/collaborativeApproval/meetingBoard/index.vue

ÎļþÒÑɾ³ý

 src/views/collaborativeApproval/noticeManagement/index.vue

ÎļþÒÑɾ³ý

 src/views/collaborativeApproval/notificationManagement/index.vue

ÎļþÒÑɾ³ý

 src/views/collaborativeApproval/rpaManagement/index.vue

ÎļþÒÑɾ³ý

 src/views/collaborativeApproval/warningSystem/index.vue

ÎļþÒÑɾ³ý

 src/views/customerService/afterSalesHandling/components/formDia.vue

ÎļþÒÑɾ³ý

 src/views/customerService/afterSalesHandling/index.vue

ÎļþÒÑɾ³ý

 src/views/customerService/feedbackRegistration/components/formDia.vue

ÎļþÒÑɾ³ý

 src/views/customerService/feedbackRegistration/index.vue

ÎļþÒÑɾ³ý

 src/views/demo/fakePage/index.vue

ÎļþÒÑɾ³ý

 src/views/energyManagement/dynamicEnergySaving/index.vue

ÎļþÒÑɾ³ý

 src/views/energyManagement/energyArea/index.vue

ÎļþÒÑɾ³ý

 src/views/energyManagement/energyCockpit/index.vue

ÎļþÒÑɾ³ý

 src/views/energyManagement/energyPeriodTime/index.vue

ÎļþÒÑɾ³ý

 src/views/energyManagement/energyPower/components/formDia.vue

ÎļþÒÑɾ³ý

 src/views/energyManagement/energyPower/index.vue

ÎļþÒÑɾ³ý

 src/views/energyManagement/energyTrends/index.vue

ÎļþÒÑɾ³ý

 src/views/energyManagement/gasManagement/index.vue

ÎļþÒÑɾ³ý

 src/views/energyManagement/meterCollection/index.vue

ÎļþÒÑɾ³ý

 src/views/energyManagement/waterManagement/components/formDia.vue

ÎļþÒÑɾ³ý

 src/views/energyManagement/waterManagement/components/waterBillForm.vue

ÎļþÒÑɾ³ý

 src/views/energyManagement/waterManagement/index.vue

ÎļþÒÑɾ³ý

 src/views/energyManagement/waterManagement/waterBill.vue

ÎļþÒÑɾ³ý

 src/views/energyManagement/waterManagement/waterTrends.vue

ÎļþÒÑɾ³ý

 src/views/environmentAccess/accessManagement/index.vue

ÎļþÒÑɾ³ý

 src/views/environmentAccess/intelligentInspectionManagement/index.vue

ÎļþÒÑɾ³ý

 src/views/environmentAccess/remoteMonitoringOfEquipment/index.vue

ÎļþÒÑɾ³ý

 src/views/environmentAccess/vehicleInformationCollection/index.vue

ÎļþÒÑɾ³ý

 src/views/equipmentManagement/calibration/index.vue

ÎļþÒÑɾ³ý

 src/views/equipmentManagement/gasTank/simple.vue

ÎļþÒÑɾ³ý

 src/views/equipmentManagement/iotMonitor/index.vue

ÎļþÒÑɾ³ý

 src/views/equipmentManagement/iotMonitor/indexWD.vue

ÎļþÒÑɾ³ý

 src/views/equipmentManagement/ledger/Form.vue

ÎļþÒÑɾ³ý

 src/views/equipmentManagement/ledger/Modal.vue

ÎļþÒÑɾ³ý

 src/views/equipmentManagement/ledger/index.vue

ÎļþÒÑɾ³ý

 src/views/equipmentManagement/measurementEquipment/components/calibrationDia.vue

ÎļþÒÑɾ³ý

 src/views/equipmentManagement/measurementEquipment/components/formDia.vue

ÎļþÒÑɾ³ý

 src/views/equipmentManagement/measurementEquipment/filesDia.vue

ÎļþÒÑɾ³ý

 src/views/equipmentManagement/measurementEquipment/index.vue

ÎļþÒÑɾ³ý

 src/views/equipmentManagement/repair/Form/MaintainForm.vue

ÎļþÒÑɾ³ý

 src/views/equipmentManagement/repair/Form/RepairForm.vue

ÎļþÒÑɾ³ý

 src/views/equipmentManagement/repair/Modal/MaintainModal.vue

ÎļþÒÑɾ³ý

 src/views/equipmentManagement/repair/Modal/RepairModal.vue

ÎļþÒÑɾ³ý

 src/views/equipmentManagement/repair/index.vue

ÎļþÒÑɾ³ý

 src/views/equipmentManagement/upkeep/Form/MaintenanceForm.vue

ÎļþÒÑɾ³ý

 src/views/equipmentManagement/upkeep/Form/PlanForm.vue

ÎļþÒÑɾ³ý

 src/views/equipmentManagement/upkeep/Modal/MaintenanceModal.vue

ÎļþÒÑɾ³ý

 src/views/equipmentManagement/upkeep/Modal/PlanModal.vue

ÎļþÒÑɾ³ý

 src/views/equipmentManagement/upkeep/index.vue

ÎļþÒÑɾ³ý

 src/views/financialManagement/expenseManagement/Form.vue

ÎļþÒÑɾ³ý

 src/views/financialManagement/expenseManagement/Modal.vue

ÎļþÒÑɾ³ý

 src/views/financialManagement/expenseManagement/index.vue

ÎļþÒÑɾ³ý

 src/views/financialManagement/financialStatements/index.vue

ÎļþÒÑɾ³ý

 src/views/financialManagement/revenueManagement/Form.vue

ÎļþÒÑɾ³ý

 src/views/financialManagement/revenueManagement/Modal.vue

ÎļþÒÑɾ³ý

 src/views/financialManagement/revenueManagement/filesDia.vue

ÎļþÒÑɾ³ý

 src/views/financialManagement/revenueManagement/index.vue

ÎļþÒÑɾ³ý

 src/views/index.vue

@@ -2,82 +2,58 @@
    <div class="dashboard">
        <!-- é¡¶éƒ¨æ¨ªå‘两栏 -->
        <div class="dashboard-top">
            <!-- å·¦ï¼šä¼ä¸šä¿¡æ¯+三大数据卡片（上下排列） -->
            <!-- å·¦ï¼šç³»ç»Ÿæ¦‚览+数据卡片 -->
            <div class="top-left">
                <div class="company-info">
                    <div class="section-title">登陆信息</div>
                <div class="system-info">
                    <div class="section-title">工艺报警优化管理系统</div>
                    <div style="display: flex;align-items: center;gap: 20px">
                        <img :src="userStore.avatar" class="avatar" alt=""/>
                        <div class="company-card">
                            <div class="company-name">{{userStore.name}}</div>
                            <div class="company-meta">{{userStore.roleName}}</div>
                        <div class="system-card">
                            <div class="system-name">工艺报警优化管理系统</div>
                            <div class="system-meta">实时监控 Â· æ™ºèƒ½åˆ†æž Â· é«˜æ•ˆå¤„理</div>
                        </div>
                        <div style="display: flex;align-items: center;gap: 8px">
                            <el-icon color="#5053B5" size="22"><Clock /></el-icon>
                            <span>登陆日期：{{userStore.currentLoginTime}}</span>
                            <span>当前时间：{{ currentTime }}</span>
                        </div>
                    </div>
                </div>
                <div class="data-cards">
                    <div class="data-card sales">
                        <div class="data-title">销售数据</div>
                        <div class="data-num">
                            <div>
                                <div class="data-desc">本月销售额/元</div>
                                <div class="data-value">{{businessInfo.monthSaleMoney}}</div>
                            </div>
                            <div>
                                <div class="data-desc">未开票金额/元</div>
                                <div class="data-value">{{businessInfo.monthSaleHaveMoney}}</div>
                            </div>
                        </div>
						
                    <div class="data-card total">
                        <div class="data-title">总报警数</div>
                        <div class="data-value">{{ alarmStats.total }}</div>
                        <div class="data-desc">已处理 {{ alarmStats.handled }} | æœªå¤„理 {{ alarmStats.pending }}</div>
                    </div>
                    <div class="data-card purchase">
                        <div class="data-title">采购数据</div>
                        <div class="data-num">
                            <div>
                                <div class="data-desc">本月采购额/元</div>
                                <div class="data-value">{{businessInfo.monthPurchaseMoney}}</div>
                            </div>
                            <div>
                                <div class="data-desc">待付款金额/元</div>
                                <div class="data-value">{{businessInfo.monthPurchaseHaveMoney}}</div>
                            </div>
                        </div>
                    <div class="data-card pending">
                        <div class="data-title">未处理报警</div>
                        <div class="data-value">{{ alarmStats.pending }}</div>
                        <div class="data-desc">严重 {{ alarmStats.severePending }} | ä¸­ç­‰ {{ alarmStats.moderatePending }} | è½»å¾® {{ alarmStats.minorPending }}</div>
                    </div>
                    <div class="data-card inventory">
                        <div class="data-title">库存数据</div>
                        <div class="data-num">
                            <div>
                                <div class="data-desc">当前库存总量/件</div>
                                <div class="data-value">{{businessInfo.inventoryNum}}</div>
                            </div>
                            <div>
                                <div class="data-desc">今日入库/件</div>
                                <div class="data-value">{{businessInfo.todayInventoryNum}}</div>
                            </div>
                        </div>
                    <div class="data-card today">
                        <div class="data-title">今日报警</div>
                        <div class="data-value">{{ alarmStats.today }}</div>
                        <div class="data-desc">同比 {{ alarmStats.today同比 }}% | çŽ¯æ¯” {{ alarmStats.today环比 }}%</div>
                    </div>
                </div>
            </div>
            <!-- å³ï¼šå¾…办事项 -->
            <div class="todo-panel">
                <div class="section-title">待办事项</div>
                <ul class="todo-list" v-if="todoList.length > 0">
                    <li v-for="item in todoList" :key="item.id">
                        <div style="display: flex;flex-direction: column;justify-content: space-between;width: 100%;gap: 20px">
            <!-- å³ï¼šå¾…处理报警列表 -->
            <div class="alarm-panel">
                <div class="section-title">待处理报警</div>
                <ul class="alarm-list" v-if="pendingAlarms.length > 0">
                    <li v-for="item in pendingAlarms" :key="item.id">
                        <div style="display: flex;flex-direction: column;justify-content: space-between;width: 100%;gap: 10px">
                            <div style="display: flex;justify-content: space-between;align-items: center;">
                                <div class="todo-title">流程编号：{{item.approveId}}</div>
                                <div class="todo-division">申请部门：{{item.approveDeptName}}</div>
                                <div class="todo-time">{{item.approveTime}}</div>
                                <div class="alarm-title">{{ item.equipmentName }} - {{ item.parameter }}</div>
                                <el-tag :type="getAlarmLevelType(item.alarmLevel)">{{ item.alarmLevel }}</el-tag>
                            </div>
                            <div class="todo-division">审批事由：{{item.approveReason}}</div>
                            <div style="display: flex;justify-content: space-between;align-items: center;">
                                <div class="alarm-value">报警值: {{ item.alarmValue }} | é˜ˆå€¼: {{ item.threshold }}</div>
                                <div class="alarm-time">{{ item.alarmTime }}</div>
                            </div>
                        </div>
                    </li>
                </ul>
                <div v-else style="text-align: center">
                    æš‚无数据
                <div v-else style="text-align: center; color: #909399; padding: 20px;">
                    æš‚无待处理报警
                </div>
            </div>
        </div>
@@ -85,216 +61,200 @@
        <!-- ä¸­éƒ¨æ¨ªå‘两栏 -->
        <div class="dashboard-row">
            <div class="main-panel">
                <div class="section-title">客户合同金额分析</div>
                <div class="contract-summary">
                    <div class="contract-info">
                        <img src="../assets/images/khtitle.png" alt="" style="width: 42px"/>
                        <div class="contract-card">
                            <div class="contract-name">总合同金额(元)</div>
                            <div class="contract-meta">
                                <div class="main-amount">{{sum}}</div>
                                <div>周同比: <span class="up">{{yny}}% </span> æ—¥çŽ¯æ¯”: <span class="up">{{chain}}% </span></div>
                            </div>
                        </div>
                <div class="section-title">报警趋势分析</div>
                <Echarts ref="chart" :chartStyle="chartStyle" :grid="grid" :legend="lineLegend" :series="lineSeries" :tooltip="tooltipLine" :xAxis="xAxis" :yAxis="yAxis" style="height: 300px;"></Echarts>
            </div>
            <div class="main-panel">
                <div class="section-title">报警级别分布</div>
                <div style="display: flex;align-items: center;gap: 20px;justify-content: space-evenly;height: 300px;">
                    <div style="width: 50%;">
                        <Echarts ref="chart" :legend="pieLegend" :chartStyle="chartStylePie" :series="levelPieSeries" :tooltip="pieTooltip"></Echarts>
                    </div>
                </div>
                <div style="display: flex;align-items: center;gap: 20px;justify-content: space-evenly;height: 180px;margin-top: 20px">
                    <div>
                        <Echarts ref="chart" :legend="pieLegend" :chartStyle="chartStylePie"
                                         :series="materialPieSeries"
                                         :tooltip="pieTooltip"></Echarts>
                    </div>
                    <ul class="contract-list">
                        <li v-for="item in materialPieSeries[0].data" :key="item.name">
                    <ul class="level-list" style="width: 50%;">
                        <li v-for="item in levelPieSeries[0].data" :key="item.name">
                            <div style="display: flex;align-items: center;justify-content: space-between;width: 100%">
                                <div class="line" :style="{color: item.itemStyle.color}">●{{item.name}}</div>
                                <div style="width: 70px">{{item.rate}}%</div>
                                <div>ï¿¥{{item.value}}</div>
                                <div class="line" :style="{color: item.itemStyle.color}">●{{ item.name }}</div>
                                <div style="width: 60px;">{{ item.value }}次</div>
                                <div style="width: 60px;">{{ item.rate }}%</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="main-panel">
                <div style="display: flex;justify-content: space-between;">
                    <div class="section-title">应收应付统计</div>
<!--                    <el-radio-group v-model="radio1" size="large" @change="statisticsReceivable">-->
<!--                        <el-radio-button label="按周" :value="1" />-->
<!--                        <el-radio-button label="按月" :value="2" />-->
<!--                        <el-radio-button label="按季度" :value="3" />-->
<!--                    </el-radio-group>-->
                </div>
                <Echarts ref="chart"
                                 :color="barColors2"
                                 :chartStyle="chartStyle"
                                 :grid="grid"
                                 :series="barSeries"
                                 :tooltip="tooltip"
                                 :xAxis="xAxis"
                                 :yAxis="yAxis"
                                 style="height: 260px"></Echarts>
            </div>
        </div>
        
        <!-- åº•éƒ¨æ¨ªå‘两栏 -->
        <div class="dashboard-row">
<!--            <div class="main-panel">-->
<!--                <div class="section-title">质量统计</div>-->
<!--                <div class="quality-cards">-->
<!--                    <div class="quality-card one">原材料已检测数 <span>{{qualityStatisticsObject.supplierNum}}件</span></div>-->
<!--                    <div class="quality-card two">过程检验数量 <span>{{qualityStatisticsObject.processNum}}件</span></div>-->
<!--                    <div class="quality-card three">出厂已检数量 <span>{{qualityStatisticsObject.factoryNum}}件</span></div>-->
<!--                </div>-->
<!--                <Echarts ref="chart"-->
<!--                                 :chartStyle="chartStyle"-->
<!--                                 :grid="grid"-->
<!--                                 :legend="barLegend"-->
<!--                                 :series="barSeries1"-->
<!--                                 :tooltip="tooltip"-->
<!--                                 :xAxis="xAxis1"-->
<!--                                 :yAxis="yAxis1"-->
<!--                                 style="height: 260px"></Echarts>-->
<!--            </div>-->
            <div class="main-panel">
                <div class="section-title">回款与开票分析</div>
                <Echarts ref="chart" :chartStyle="chartStyle" :grid="grid" :legend="lineLegend" :series="lineSeries"
                                 :tooltip="tooltipLine" :xAxis="xAxis2" :yAxis="yAxis2" style="height: 270px;"></Echarts>
                <div class="section-title">设备报警统计</div>
                <Echarts ref="chart" :color="barColors" :chartStyle="chartStyle" :grid="grid" :series="equipmentBarSeries" :tooltip="tooltip" :xAxis="equipmentXAxis" :yAxis="yAxis" style="height: 300px;"></Echarts>
            </div>
            <div class="main-panel">
                <div class="section-title">报警处理时效分析</div>
                <Echarts ref="chart" :color="barColors" :chartStyle="chartStyle" :grid="grid" :series="handlingTimeSeries" :tooltip="tooltip" :xAxis="handlingTimeXAxis" :yAxis="yAxis" style="height: 300px;"></Echarts>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ref, onMounted, reactive, computed } from 'vue'
import Echarts from "@/components/Echarts/echarts.vue";
import * as echarts from 'echarts';
import useUserStore from "@/store/modules/user.js";
import {
    analysisCustomerContractAmounts, getAmountHalfYear,
    getBusiness,
    homeTodos,
    qualityStatistics,
    statisticsReceivablePayable
} from "@/api/viewIndex.js";
import { Clock } from '@element-plus/icons-vue';

const userStore = useUserStore()
// å½“前时间
const currentTime = computed(() => {
    const now = new Date();
    return now.toLocaleString('zh-CN');
});

const businessInfo = ref({
    inventoryNum: 0,
    monthPurchaseHaveMoney: 0,
    monthPurchaseMoney: 0,
    monthSaleHaveMoney: 0,
    monthSaleMoney: 0,
    todayInventoryNum: 0,
})
const qualityStatisticsObject = ref({
    supplierNum: 0,
    processNum: 0,
    factoryNum: 0,
})
const sum = ref(0)
const yny = ref(0)
const chain = ref(0)
// æŠ¥è­¦ç»Ÿè®¡æ•°æ®
const alarmStats = reactive({
    total: 425,
    handled: 398,
    pending: 27,
    severePending: 8,
    moderatePending: 12,
    minorPending: 7,
    today: 35,
    today同比: '+12.5',
    today环比: '-8.3'
});

const pieLegend = reactive({
    show: false,
})
const barSeries = ref([
// å¾…处理报警列表
const pendingAlarms = ref([
    {
        type: 'bar',
        data: [],
        label: {
            show: true,
        }
    },
])
const barSeries1 = ref([
    {
        name: '原材料不合格数',
        type: 'bar',
        barGap: 0,
        emphasis: {
            focus: 'series'
        },
        data: []
        id: 1,
        equipmentName: '反应釜A',
        parameter: '温度',
        alarmValue: '185°C',
        threshold: '≤180°C',
        alarmLevel: '严重',
        alarmTime: '2025-12-16 14:30:23'
    },
    {
        name: '过程不合格数',
        type: 'bar',
        emphasis: {
            focus: 'series'
        },
        data: []
        id: 2,
        equipmentName: '离心机B',
        parameter: '振动',
        alarmValue: '0.8mm/s',
        threshold: '≤0.5mm/s',
        alarmLevel: '中等',
        alarmTime: '2025-12-16 14:28:15'
    },
    {
        name: '出厂不合格数',
        type: 'bar',
        emphasis: {
            focus: 'series'
        },
        data: []
        id: 3,
        equipmentName: '反应釜D',
        parameter: 'pH值',
        alarmValue: '4.2',
        threshold: '5.0-7.0',
        alarmLevel: '中等',
        alarmTime: '2025-12-16 14:22:18'
    },
])
    {
        id: 4,
        equipmentName: '干燥机E',
        parameter: '湿度',
        alarmValue: '15%',
        threshold: '≤10%',
        alarmLevel: '轻微',
        alarmTime: '2025-12-16 14:18:55'
    }
]);

// å›¾è¡¨æ ·å¼
const chartStyle = {
    width: '100%',
    height: '100%' // è®¾ç½®å›¾è¡¨å®¹å™¨çš„高度
}
    height: '100%'
};

const chartStylePie = {
    width: '140%',
    height: '140%' // è®¾ç½®å›¾è¡¨å®¹å™¨çš„高度
}
    width: '100%',
    height: '100%'
};

const grid = {
    left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
}
const barLegend = {
    show: true,
    data: ['原材料不合格数', '过程不合格数', '出厂不合格数']
}
const barLegend1 = {
    show: true,
    data: ['预付账款', '应付账款', '预收账款', '应收账款']
}
    right: '4%',
    bottom: '3%',
    containLabel: true
};

// æŠ¥è­¦è¶‹åŠ¿åˆ†æž - æŠ˜çº¿å›¾
const lineLegend = {
    show: true,
    data: ['开票', '回款']
}
const tooltip = {
    data: ['严重', '中等', '轻微']
};

const tooltipLine = {
    trigger: 'axis',
    axisPointer: {
        type: 'shadow'
        type: 'cross'
    }
}
const xAxis = [{
};

const xAxis = ref({
    type: 'category',
    data: ['12-01', '12-02', '12-03', '12-04', '12-05', '12-06', '12-07']
});

const yAxis = ref({
    type: 'value',
}]
const xAxis1 = ref([{
    type: 'category',
    axisTick: { show: false },
    data: []
}])
const yAxis = [{
    type: 'category',
    data: [ '应付账款', '应收账款',]
}]
const yAxis1 = [{
    type: 'value'
}]
const pieTooltip = reactive({
    trigger: 'item',
    formatter: function (params) {
        // åŠ¨æ€ç”Ÿæˆæç¤ºä¿¡æ¯ï¼ŒåŸºäºŽæ•°æ®é¡¹çš„ name å±žæ€§
        const description = params.name === '本月回款金额' ? '本月回款金额' : '应收款金额';
        return `${description} ${formatNumber(params.value)}元 ${params.percent}%`;
    name: '报警数量'
});

const lineSeries = ref([
    {
        name: '严重',
        type: 'line',
        data: [8, 12, 9, 15, 11, 13, 10],
        itemStyle: {
            color: '#f56c6c'
        },
        lineStyle: {
            width: 2
        },
        showSymbol: true
    },
    position: 'right'
})
const materialPieSeries = ref([
    {
        name: '中等',
        type: 'line',
        data: [22, 25, 20, 28, 24, 26, 23],
        itemStyle: {
            color: '#e6a23c'
        },
        lineStyle: {
            width: 2
        },
        showSymbol: true
    },
    {
        name: '轻微',
        type: 'line',
        data: [35, 38, 32, 40, 36, 39, 34],
        itemStyle: {
            color: '#67c23a'
        },
        lineStyle: {
            width: 2
        },
        showSymbol: true
    }
]);

// æŠ¥è­¦çº§åˆ«åˆ†å¸ƒ - é¥¼å›¾
const pieLegend = {
    show: false
};

const pieTooltip = {
    trigger: 'item',
    formatter: '{b}: {c}次 ({d}%)'
};

const levelPieSeries = ref([
    {
        type: 'pie',
        radius: ['66%', '90%'],
        radius: ['60%', '80%'],
        avoidLabelOverlap: false,
        itemStyle: {
            borderColor: '#fff',
@@ -303,188 +263,97 @@
        label: {
            show: false
        },
        data: []
    }
])
const lineSeries = ref([
    {
        type: 'line',
        data: [],
        label: {
            show: true
        },
    showSymbol: true, // æ˜¾ç¤ºåœ†ç‚¹
    },
])
const tooltipLine = {
    trigger: 'axis',
}
const yAxis2 = ref([
    {
        type: 'value',
    }
])
const xAxis2 = ref([
    {
        type: 'category',
        data: [],
        axisLabel: {
            interval: 0,
            formatter: function(value) {
                return value.replace(/~/g, '\n');
        data: [
            {
                name: '严重',
                value: 78,
                rate: 18.35,
                itemStyle: { color: '#f56c6c' }
            },
            {
                name: '中等',
                value: 178,
                rate: 41.88,
                itemStyle: { color: '#e6a23c' }
            },
            {
                name: '轻微',
                value: 169,
                rate: 39.76,
                itemStyle: { color: '#67c23a' }
            }
        ]
    }
]);

// è®¾å¤‡æŠ¥è­¦ç»Ÿè®¡ - æŸ±çŠ¶å›¾
const barColors = ['#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399'];

const tooltip = {
    trigger: 'axis',
    axisPointer: {
        type: 'shadow'
    }
};

const equipmentXAxis = ref({
    type: 'category',
    data: ['反应釜', '离心机', '输送泵', '干燥机', '压缩机']
});

const equipmentBarSeries = ref([
    {
        name: '报警数量',
        type: 'bar',
        data: [125, 85, 78, 65, 72],
        itemStyle: {
            color: function(params) {
                return barColors[params.dataIndex % barColors.length];
            }
        },
        label: {
            show: true,
            position: 'top'
        }
    }
])
]);

// å¾…办事项
const todoList = ref([])
const radio1 = ref(1)
// æŠ¥è­¦å¤„理时效分析 - æŸ±çŠ¶å›¾
const handlingTimeXAxis = ref({
    type: 'category',
    data: ['0-30分钟', '30-60分钟', '1-2小时', '2小时以上']
});

// å›¾è¡¨å¼•ç”¨
const barChart = ref(null)
const lineChart = ref(null)
const barColors2 = ['#5181DB', '#D369E0', '#F2CA6D', '#60CCA8']
const handlingTimeSeries = ref([
    {
        name: '处理数量',
        type: 'bar',
        data: [280, 75, 45, 25],
        itemStyle: {
            color: function(params) {
                return barColors[params.dataIndex % barColors.length];
            }
        },
        label: {
            show: true,
            position: 'top'
        }
    }
]);

// éšæœºé¢œè‰²ç”Ÿæˆå‡½æ•°
const getRandomColor = () => {
  return '#' + Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0');
}
// èŽ·å–报警级别样式
const getAlarmLevelType = (level) => {
    switch(level) {
        case '严重': return 'danger';
        case '中等': return 'warning';
        case '轻微': return 'info';
        default: return 'info';
    }
};

onMounted(() => {
    getBusinessData()
    analysisCustomer()
    todoInfoS()
    statisticsReceivable()
    qualityStatisticsInfo()
    getAmountHalfYearNum()
})
// æ•°æ®ç»Ÿè®¡
const getBusinessData = () => {
    getBusiness().then((res) => {
        businessInfo.value = {...res.data}
    })
}
// åˆåŒé‡‘额
const analysisCustomer = () => {
    analysisCustomerContractAmounts().then((res) => {
        sum.value = res.data.sum
        yny.value = res.data.yny
        chain.value = res.data.chain
    // ä¸ºæ¯ä¸ªæ•°æ®é¡¹åˆ†é…éšæœºé¢œè‰²
    materialPieSeries.value[0].data = res.data.item.map(item => ({
      ...item,
      itemStyle: { color: getRandomColor() }
    }))
    })
}
// å¾…办事项
const todoInfoS = () => {
    homeTodos().then((res) => {
        todoList.value = res.data
    })
}
// åº”付应收统计
const statisticsReceivable = (type) => {
    console.log(type)
    statisticsReceivablePayable({type: radio1.value}).then((res) => {
        barSeries.value[0].data = [
            // { value: res.data.prepayMoney, itemStyle: { color: barColors2[0] } },
            { value: res.data.payableMoney, itemStyle: { color: barColors2[0] } },
            // { value: res.data.advanceMoney, itemStyle: { color: barColors2[2] } },
            { value: res.data.receivableMoney, itemStyle: { color: barColors2[1] } }
        ]
    })
}
// è´¨æ£€ç»Ÿè®¡
const qualityStatisticsInfo = () => {
    qualityStatistics().then((res) => {
        res.data.item.forEach(item => {
            xAxis1.value[0].data.push(item.date)
            barSeries1.value[0].data.push(item.supplierNum)
            barSeries1.value[1].data.push(item.processNum)
            barSeries1.value[2].data.push(item.factoryNum)
        })
        qualityStatisticsObject.value.supplierNum = res.data.supplierNum
        qualityStatisticsObject.value.processNum = res.data.processNum
        qualityStatisticsObject.value.factoryNum = res.data.factoryNum
    })
}
const getAmountHalfYearNum = async () => {
    const res = await getAmountHalfYear()
    console.log(res)
    const monthName = []
    const receiptAmount = []
    const invoiceAmount = []
    res.data.forEach(item => {
        monthName.push(item.month)
        receiptAmount.push(item.receiptAmount)
        invoiceAmount.push(item.invoiceAmount)
    })
    // æ­£ç¡®å“åº”式赋值：创建新的 xAxis å’Œ series å¯¹è±¡
    xAxis2.value[0].data = monthName
    xAxis2.value[0].data = monthName.map(item => item.replace(/~/g, '\n~'));
    lineSeries.value = [
        {
            name: '开票',
            type: 'line',
            data: receiptAmount,
            stack: 'Total',
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgba(131, 207, 255, 1)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(186, 228, 255, 1)'
                    }
                ])
            },
            itemStyle: {
                color: '#2D99FF',
                borderColor: '#2D99FF'
            },
            emphasis: {
                focus: 'series'
            },
            lineStyle: {
                width: 0
            },
            showSymbol: true,
        },
        {
            name: '回款',
            type: 'line',
            data: invoiceAmount,
            stack: 'Total',
            lineStyle: {
                width: 0
            },
            itemStyle: {
                color: '#83CFFF',
                borderColor: '#83CFFF'
            },
            showSymbol: true,
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgba(54, 153, 255, 1)'
                    },
                    {
                        offset: 1,
                        color: 'rgba(89, 169, 254, 1)'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
        }
    ]
}
    // é¡µé¢åŠ è½½å®ŒæˆåŽçš„初始化操作
});
</script>

<style scoped>
@@ -494,34 +363,25 @@
    padding: 20px;
    box-sizing: border-box;
}

.dashboard-top {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}
.company-info {

.system-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    min-width: 0;
    background-color: #EFF2FB; /* ä½¿ç”¨æŒ‡å®šçš„背景颜色 */
    background-image: url("../assets/images/denglu.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #EFF2FB;
    border-radius: 12px;
    height: 138px;
}
.avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: contain;
    background: #fff;
    border: 1px solid #eee;
}
.company-card {

.system-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
@@ -529,26 +389,18 @@
    padding-right: 15px;
}

.company-card::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #C9C5C5;
    border-radius: 2px;
}
.company-name {
    font-weight: 400;
    font-size: 16px;
.system-name {
    font-weight: 600;
    font-size: 18px;
    color: #161A9A;
}
.company-meta {

.system-meta {
    font-weight: 400;
    font-size: 12px;
    color: #818185;
}

.data-cards {
    display: flex;
    gap: 16px;
@@ -557,123 +409,121 @@
    border-radius: 12px;
    padding: 20px;
}
.data-title {
    font-weight: 700;
    font-size: 26px;
    color: #FFFFFF;
}
.data-num {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

.data-card {
    background: #fff;
    border-radius: 12px;
    padding: 14px 10px 10px 10px;
    padding: 16px;
    min-width: 160px;
    box-shadow: 0 2px 8px #eee;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 32%;
    height: 140px;
    transition: all 0.3s ease;
}
.data-card.sales {
    background-image: url("../assets/images/xioashoushuju.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

.data-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.data-card.purchase {
    background-image: url("../assets/images/caigou.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

.data-card.total {
    background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
    color: #fff;
}
.data-card.inventory {
    background-image: url("../assets/images/kucun.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

.data-card.pending {
    background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
    color: #fff;
}
.data-desc {
    font-weight: 500;
    font-size: 13px;
    color: #FFFFFF;

.data-card.today {
    background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
    color: #fff;
}

.data-title {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 12px;
}

.data-value {
    font-size: 18px;
    font-weight: 500;
    margin: 10px 0;
    color: #FFFFFF;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 8px;
}

.data-desc {
    font-size: 12px;
    opacity: 0.9;
}

.top-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 50%;
    width: 60%;
}
.todo-panel {

.alarm-panel {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    width: 50%;
    width: 40%;
}
.todo-list {

.alarm-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 15px;
    font-size: 14px;
    overflow-y: auto;
    height: 260px;
}
.todo-list li {

.alarm-list li {
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 8px 20px;
    height: 74px;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(225,227,250,0.62);
    background: #f8f9fa;
    border-left: 4px solid #409eff;
    transition: all 0.3s ease;
}
.todo-title {
    font-weight: 400;

.alarm-list li:hover {
    background: #e9ecef;
    transform: translateX(4px);
}

.alarm-title {
    font-weight: 600;
    font-size: 14px;
    color: #303133;
}

.alarm-value {
    font-size: 12px;
    color: #000000;
    position: relative;
    color: #606266;
}
.todo-title::before {
    content: ''; /* å¿…需，表示这里有一个内容 */
    position: absolute;
    left: -10px; /* å®šä½åˆ°å·¦ä¾§ */
    top: 50%; /* åž‚直居中 */
    transform: translateY(-50%); /* å¾®è°ƒåž‚直居中 */
    width: 6px; /* åœ†çš„直径 */
    height: 6px; /* åœ†çš„直径 */
    background: #498CEB;
    border-radius: 50%; /* è®©å…¶å˜æˆåœ†å½¢ */
}
.todo-division {
    font-weight: 400;

.alarm-time {
    font-size: 12px;
    color: #000000;
    color: #909399;
}
.todo-time {
    font-weight: 400;
    font-size: 12px;
    color: #000000;
}
.todo-meta {
    color: #888;
    font-size: 13px;
}

.dashboard-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.main-panel {
    background: #fff;
    border-radius: 12px;
@@ -683,12 +533,13 @@
    display: flex;
    flex-direction: column;
}

.section-title {
    position: relative;
    font-size: 18px;
    color: #333;
    padding-left: 10px;
    margin-bottom: 10px;
    margin-bottom: 20px;
    font-weight: 700;
}

@@ -699,107 +550,34 @@
    content: '';
    width: 4px;
    height: 18px;
    background-color: #002FA7;
    background-color: #409eff;
    border-radius: 2px;
}
.contract-info {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 90px;
    background: rgba(245,245,245,0.59);
    width: 100%;
    border-radius: 10px;
    padding: 10px 30px;
}
.contract-summary {
    display: flex;
    align-items: center;
    gap: 30px;
}
.contract-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.contract-name {
    font-weight: 400;
    font-size: 14px;
    color: #050505;
}
.contract-meta {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 80px;
}
.main-amount {
    font-size: 24px;
    color: rgba(51,50,50,0.85);
}
.up { color: #e57373; }
.contract-list {
    margin-top: 16px;
    font-size: 14px;
    color: #666;
    list-style: none;

.level-list {
    margin: 0;
    padding: 0;
    height: 190px;
    list-style: none;
    height: 200px;
    overflow-y: auto;
    width: 460px;
    width: 100%;
}

.level-list li {
    margin-bottom: 15px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.level-list li:hover {
    background: #e9ecef;
}

.line {
    position: relative;
    width: 230px;
}
.line::after {
    content: '';
    position: absolute;
    right: 2px;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #C9C5C5;
    border-radius: 2px;
}
.contract-list li {
    margin-top: 10px;
}
.quality-cards {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}
.quality-card {
    border-radius: 8px;
    padding: 15px 10px 10px 50px;
    font-weight: 400;
    font-size: 12px;
    color: rgba(0,0,0,0.67);
    width: 236px;
    height: 49px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.quality-card.one {
    background-image: url("../assets/images/yuancailiao.png");
}
.quality-card.two {
    background-image: url("../assets/images/guocheng.png");
}
.quality-card.three {
    background-image: url("../assets/images/chuchang.png");
	
}
.quality-card span {
    color: #4fc3f7;
    font-weight: bold;
    margin-left: 6px;
}
.chart {
    width: 100%;
    height: 220px;
    margin-top: 10px;
    width: 80px;
    font-weight: 500;
}
</style>

 src/views/inventoryManagement/dispatchLog/index.vue

ÎļþÒÑɾ³ý

 src/views/inventoryManagement/issueManagement/index.vue

ÎļþÒÑɾ³ý

 src/views/inventoryManagement/receiptManagement/index.vue

ÎļþÒÑɾ³ý

 src/views/inventoryManagement/stockManagement/index.vue

ÎļþÒÑɾ³ý

 src/views/inventoryManagement/stockWarning/index.vue

ÎļþÒÑɾ³ý

 src/views/personnelManagement/contractManagement/components/formDia.vue

ÎļþÒÑɾ³ý

 src/views/personnelManagement/contractManagement/filesDia.vue

ÎļþÒÑɾ³ý

 src/views/personnelManagement/contractManagement/index.vue

ÎļþÒÑɾ³ý

 src/views/personnelManagement/dimission/components/formDia.vue

ÎļþÒÑɾ³ý

 src/views/personnelManagement/dimission/index.vue

ÎļþÒÑɾ³ý

 src/views/personnelManagement/employeeRecord/components/formDia.vue

ÎļþÒÑɾ³ý

 src/views/personnelManagement/employeeRecord/index.vue

ÎļþÒÑɾ³ý

 src/views/personnelManagement/onboarding/components/formDia.vue

ÎļþÒÑɾ³ý

 src/views/personnelManagement/onboarding/index.vue

ÎļþÒÑɾ³ý

 src/views/personnelManagement/payrollManagement/components/formDia.vue

ÎļþÒÑɾ³ý

 src/views/personnelManagement/payrollManagement/index.vue

ÎļþÒÑɾ³ý

 src/views/procurementManagement/invoiceEntry/components/ExpandTable.vue

ÎļþÒÑɾ³ý

 src/views/procurementManagement/invoiceEntry/components/Modal.vue

ÎļþÒÑɾ³ý

 src/views/procurementManagement/invoiceEntry/index.vue

ÎļþÒÑɾ³ý

 src/views/procurementManagement/invoiceEntry/indexOld.vue

ÎļþÒÑɾ³ý

 src/views/procurementManagement/paymentEntry/index.vue

ÎļþÒÑɾ³ý

 src/views/procurementManagement/paymentHistory/index.vue

ÎļþÒÑɾ³ý

 src/views/procurementManagement/paymentLedger/index.vue

ÎļþÒÑɾ³ý

 src/views/procurementManagement/procurementInvoiceLedger/Form/EditForm.vue

ÎļþÒÑɾ³ý

 src/views/procurementManagement/procurementInvoiceLedger/Modal/EditModal.vue

ÎļþÒÑɾ³ý

 src/views/procurementManagement/procurementInvoiceLedger/Modal/UploadModal.vue

ÎļþÒÑɾ³ý

 src/views/procurementManagement/procurementInvoiceLedger/index.vue

ÎļþÒÑɾ³ý

 src/views/procurementManagement/procurementInvoiceLedger/indexOld.vue

ÎļþÒÑɾ³ý

 src/views/procurementManagement/procurementLedger/index.vue

ÎļþÒÑɾ³ý

 src/views/procurementManagement/thePaymentLedger/index.vue

ÎļþÒÑɾ³ý

 src/views/productionManagement/operationScheduling/components/formDia.vue

ÎļþÒÑɾ³ý

 src/views/productionManagement/operationScheduling/index.vue

ÎļþÒÑɾ³ý

 src/views/productionManagement/productionCosting/index.vue

ÎļþÒÑɾ³ý

 src/views/productionManagement/productionDispatching/components/formDia.vue

ÎļþÒÑɾ³ý

 src/views/productionManagement/productionDispatching/index.vue

ÎļþÒÑɾ³ý

 src/views/productionManagement/productionOrder/index.vue

ÎļþÒÑɾ³ý

 src/views/productionManagement/productionReporting/components/formDia.vue

ÎļþÒÑɾ³ý

 src/views/productionManagement/productionReporting/index.vue

ÎļþÒÑɾ³ý

 src/views/productionManagement/safetyMonitoring/index.vue

ÎļþÒÑɾ³ý

 src/views/qualityManagement/finalInspection/components/filesDia.vue

ÎļþÒÑɾ³ý

 src/views/qualityManagement/finalInspection/components/formDia.vue

ÎļþÒÑɾ³ý

 src/views/qualityManagement/finalInspection/components/inspectionFormDia.vue

ÎļþÒÑɾ³ý

 src/views/qualityManagement/finalInspection/index.vue

ÎļþÒÑɾ³ý

 src/views/qualityManagement/metricMaintenance/index.vue

ÎļþÒÑɾ³ý

 src/views/qualityManagement/nonconformingManagement/components/formDia.vue

ÎļþÒÑɾ³ý

 src/views/qualityManagement/nonconformingManagement/components/inspectionFormDia.vue

ÎļþÒÑɾ³ý

 src/views/qualityManagement/nonconformingManagement/index.vue

ÎļþÒÑɾ³ý

 src/views/qualityManagement/processInspection/components/filesDia.vue

ÎļþÒÑɾ³ý

 src/views/qualityManagement/processInspection/components/formDia.vue

ÎļþÒÑɾ³ý

 src/views/qualityManagement/processInspection/components/inspectionFormDia.vue

ÎļþÒÑɾ³ý

 src/views/qualityManagement/processInspection/index.vue

ÎļþÒÑɾ³ý

 src/views/qualityManagement/rawMaterialInspection/components/filesDia.vue

ÎļþÒÑɾ³ý

 src/views/qualityManagement/rawMaterialInspection/components/formDia.vue

ÎļþÒÑɾ³ý

 src/views/qualityManagement/rawMaterialInspection/components/inspectionFormDia.vue

ÎļþÒÑɾ³ý

 src/views/qualityManagement/rawMaterialInspection/index.vue

ÎļþÒÑɾ³ý

 src/views/reportAnalysis/projectProfit/index.vue

ÎļþÒÑɾ³ý

 src/views/reportAnalysis/taxComparison/index.vue

ÎļþÒÑɾ³ý

 src/views/salesManagement/invoiceLedger/index.vue

ÎļþÒÑɾ³ý

 src/views/salesManagement/invoiceRegistration/index.vue

ÎļþÒÑɾ³ý

 src/views/salesManagement/receiptPayment/index.vue

ÎļþÒÑɾ³ý

 src/views/salesManagement/receiptPaymentHistory/index.vue

ÎļþÒÑɾ³ý

 src/views/salesManagement/receiptPaymentLedger/index.vue

ÎļþÒÑɾ³ý

 src/views/salesManagement/salesLedger/fileList.vue

ÎļþÒÑɾ³ý

 src/views/salesManagement/salesLedger/index.vue

ÎļþÒÑɾ³ý

 vite.config.js

@@ -8,8 +8,8 @@
  const { VITE_APP_ENV } = env;

  const baseUrl =

    VITE_APP_ENV == "development"

      ? "http://192.168.1.147:7003" // å¼€å‘环境后端接口

      : "http://10.136.12.71:7003"; // ç”Ÿäº§çŽ¯å¢ƒåŽç«¯æŽ¥å£

      ? "http://127.0.0.1:7003" // å¼€å‘环境后端接口

      : "http://10.136.12.71:8016"; // ç”Ÿäº§çŽ¯å¢ƒåŽç«¯æŽ¥å£



  return {

    // éƒ¨ç½²ç”Ÿäº§çŽ¯å¢ƒå’Œå¼€å‘环境下的URL。