From fb472c72a72e1cdaf3736ef4a1bad19e76b4c9bc Mon Sep 17 00:00:00 2001
From: bb_pan <max_163email@163.com>
Date: Thu, 11 Dec 2025 20:03:52 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/basic/home.js                         |  74 +++
 src/router/index.js                           |   2 +-
 .../home/components/MunicipalCompany.vue      | 598 ++++++++++++++++++
 .../home/components/ProvincialCompany.vue     | 496 +++++++++++++++
 src/views/home/index.vue                      |  30 +
 vue.config.js                                 |   4 +-
 6 files changed, 1201 insertions(+), 3 deletions(-)
 create mode 100644 src/api/basic/home.js
 create mode 100644 src/views/home/components/MunicipalCompany.vue
 create mode 100644 src/views/home/components/ProvincialCompany.vue
 create mode 100644 src/views/home/index.vue

diff --git a/src/api/basic/home.js b/src/api/basic/home.js
new file mode 100644
index 00000000..17f55566
--- /dev/null
+++ b/src/api/basic/home.js
@@ -0,0 +1,74 @@
+import request from '@/utils/request'
+
+// 数据总览
+// /getDeviceNum
+export function getDeviceNumAll(query) {
+  return request({
+    url: '/material-mall/index/getDeviceNum',
+    method: 'get',
+    params: query,
+  })
+}
+
+// 使用情况
+export function getUseDeviceNum(query) {
+  return request({
+    url: '/material-mall/index/getUseDeviceNum',
+    method: 'get',
+    params: query,
+  })
+}
+
+// 实时事件
+export function getReal(query) {
+  return request({
+    url: '/material-mall/index/getReal',
+    method: 'get',
+    params: query,
+  })
+}
+
+// 装备对比
+export function getDeviceByDept(query) {
+  return request({
+    url: '/material-mall/index/getDeviceByDept',
+    method: 'get',
+    params: query,
+  })
+}
+
+// 数量
+export function getDeviceNumByMonth(query) {
+  return request({
+    url: '/material-mall/index/getDeviceNumByMonth',
+    method: 'get',
+    params: query,
+  })
+}
+
+// 告警
+export function getMaQc(query) {
+  return request({
+    url: '/material-mall/index/getMaQc',
+    method: 'get',
+    params: query,
+  })
+}
+
+// 待办
+export function getApprover(query) {
+  return request({
+    url: '/material-mall/index/getApprover',
+    method: 'get',
+    params: query,
+  })
+}
+
+// 共享
+export function getShare(query) {
+  return request({
+    url: '/material-mall/index/getShare',
+    method: 'get',
+    params: query,
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index a6214d93..4b461aad 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -68,7 +68,7 @@ export const constantRoutes = [
     children: [
       {
         path: 'index',
-        component: () => import('@/views/index_2'),
+        component: () => import('@/views/home/index'),
         name: 'Index',
         meta: { title: '首页', icon: 'dashboard', affix: true }
       },
diff --git a/src/views/home/components/MunicipalCompany.vue b/src/views/home/components/MunicipalCompany.vue
new file mode 100644
index 00000000..887fc356
--- /dev/null
+++ b/src/views/home/components/MunicipalCompany.vue
@@ -0,0 +1,598 @@
+<template>
+  <div class="app-container">
+    <div class="top">
+      <div class="top-item">
+        <el-card class="card-box">
+          <div class="title">
+            <i class="el-icon-pie-chart icon-tip" />
+            <span>数据总览</span>
+          </div>
+          <!-- 饼图 -->
+          <div style="display: flex; justify-content: center">
+            <div ref="chartRef" style="width: 490px; height: 280px"></div>
+          </div>
+          <div style="display: flex; justify-content: space-between; margin-top: 15px">
+            <div class="left-tip">平台设备总数：{{ dataAll.totalSum }}</div>
+            <div class="left-tip">装备总数：{{ dataAll.maNum }}</div>
+            <div class="left-tip">工具总数：{{ dataAll.toolNum }}</div>
+          </div>
+        </el-card>
+      </div>
+
+      <div class="top-item">
+        <el-card class="card-box">
+          <div class="title">
+            <i class="el-icon-bangzhu icon-tip" />
+            <span>告警</span>
+          </div>
+          <div class="content">
+            <div class="content-item">
+              <div class="item-box">
+                <div class="num">{{ errData.maintainExpireMonthNum }}</div>
+                <div>一个月内维保到期数量</div>
+              </div>
+            </div>
+            <div class="content-item">
+              <div class="item-box">
+                <div class="num">{{ errData.maintainOverdueNum }}</div>
+                <div>维保已超期数量</div>
+              </div>
+            </div>
+          </div>
+          <div class="content">
+            <div class="content-item">
+              <div class="item-box">
+                <div class="num">{{ errData.useYearExpireMonthNum }}</div>
+                <div>一年内使用年限到期</div>
+              </div>
+            </div>
+            <div class="content-item">
+              <div class="item-box">
+                <div class="num">{{ errData.useYearOverdueNum }}</div>
+                <div>已超最大使用年限</div>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </div>
+
+      <div class="top-item">
+        <el-card class="card-box">
+          <div class="title">
+            <i class="el-icon-date icon-tip" />
+            <span>待办</span>
+          </div>
+          <!-- 滚动列表 -->
+          <div class="scroll-wrapper" ref="wrap" @mouseenter="pause" @mouseleave="resume">
+            <ul class="scroll-list" ref="list">
+              <li v-for="(item, index) in eventList" :key="item.id" :class="{ odd: index % 2 === 1 }">
+                <div
+                  style="display: flex; align-items: center; justify-content: space-between; cursor: pointer"
+                  @click="handleEvent(item)"
+                >
+                  <div style="width: 65%">
+                    <span>{{ index + 1 }}. </span>
+                    <span
+                      >您有一个单号为<span>{{ item.code }}</span
+                      >的"{{ item.businessName }}"单据待审核
+                    </span>
+                  </div>
+                  <div>{{ item.createTime }}</div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </el-card>
+      </div>
+    </div>
+
+    <div class="top">
+      <div class="top-item">
+        <el-card class="card-box">
+          <div class="title">
+            <i class="el-icon-copy-document icon-tip" />
+            <span>当月出库数量</span>
+          </div>
+          <div class="content">
+            <div class="content-item content-item2">
+              <div class="item-box">
+                <div class="num2">{{ numData.selfUseApplyNum }}</div>
+                <div>本月自用申请数量</div>
+              </div>
+            </div>
+            <div class="content-item content-item2">
+              <div class="item-box">
+                <div class="num2">{{ numData.selfUseAuditNum }}</div>
+                <div>本月自用审核数量</div>
+              </div>
+            </div>
+            <div class="content-item content-item2">
+              <div class="item-box">
+                <div class="num2">{{ numData.selfUseOutNum }}</div>
+                <div>本月自用出库数量</div>
+              </div>
+            </div>
+          </div>
+          <div class="content">
+            <div class="content-item content-item2">
+              <div class="item-box">
+                <div class="num2">{{ shareData.buyerNum }}</div>
+                <div>本月申请共享数量</div>
+              </div>
+            </div>
+            <div class="content-item content-item2">
+              <div class="item-box">
+                <div class="num2">{{ shareData.sellerNum }}</div>
+                <div>本月共享订单数量</div>
+              </div>
+            </div>
+            <div class="content-item content-item2">
+              <div class="item-box">
+                <div class="num2">{{ shareData.toolNum }}</div>
+                <div>本月共享出库数量</div>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </div>
+
+      <div class="top-item">
+        <el-card class="card-box">
+          <div class="title">
+            <i class="el-icon-set-up icon-tip" />
+            <span>当月退库数量</span>
+          </div>
+          <div class="content">
+            <div class="content-item content-item2">
+              <div class="item-box">
+                <div class="num2">{{ numData.returnApplyNum }}</div>
+                <div>本月退库申请数量</div>
+              </div>
+            </div>
+            <div class="content-item content-item2">
+              <div class="item-box">
+                <div class="num2">{{ numData.returnAuditApplyNum }}</div>
+                <div>本月退库审核数量</div>
+              </div>
+            </div>
+          </div>
+          <div class="content">
+            <div class="content-item content-item2">
+              <div class="item-box">
+                <div class="num2">{{ numData.returnAuditStoreNum }}</div>
+                <div>本月退库入库数量</div>
+              </div>
+            </div>
+            <div class="content-item content-item2">
+              <div class="item-box">
+                <div class="num2">{{ numData.returnAuditRepairNum }}</div>
+                <div>本月退库维修数量</div>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </div>
+
+      <div class="top-item">
+        <el-card class="card-box">
+          <div class="title">
+            <i class="el-icon-setting icon-tip" />
+            <span>当月维修数量</span>
+          </div>
+          <div class="content">
+            <div class="content-item content-item2">
+              <div class="item-box">
+                <div class="num2">{{ numData.repairPendingNum }}</div>
+                <div>本月待维修数量</div>
+              </div>
+            </div>
+            <div class="content-item content-item2">
+              <div class="item-box">
+                <div class="num2">{{ numData.repairQualifiedNum }}</div>
+                <div>本月维修合格数量</div>
+              </div>
+            </div>
+          </div>
+          <div class="content">
+            <div class="content-item content-item2">
+              <div class="item-box">
+                <div class="num2">{{ numData.repairRetireNum }}</div>
+                <div>本月维修退役数量</div>
+              </div>
+            </div>
+            <div class="" style="flex: 1"> </div>
+          </div>
+        </el-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { getDeviceNumAll, getDeviceNumByMonth, getMaQc, getApprover, getShare } from '@/api/basic/home'
+
+export default {
+  name: 'MunicipalCompany',
+  data() {
+    return {
+      isLoading: false,
+      dataAll: {},
+      toolTotal: 60,
+      equipTotal: 50,
+      activeTab: true,
+      errData: {},
+      shareData: {},
+      eventList: [],
+      timer: null,
+      speed: 30,
+      numData: {
+        selfUseApplyNum: 0, // 自用申请数
+        selfUseAuditNum: 0, // 自用审核数
+        selfUseOutNum: 0, // 自用出库数
+        returnApplyNum: 0, // 退库申请数
+        returnAuditApplyNum: 0, // 退库审核数
+        returnAuditStoreNum: 0, // 退库入库数
+        returnAuditRepairNum: 0, // 退库维修数
+        repairPendingNum: 0, // 待维修数
+        repairQualifiedNum: 0, // 维修合格数
+        repairRetireNum: 0, // 维修合格数
+      },
+    }
+  },
+  mounted() {
+    this.getEventList()
+    this.getDataAll()
+    this.getNumData()
+    this.getErrData()
+    this.getShareData()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+  },
+
+  methods: {
+    async getDataAll() {
+      try {
+        const res = await getDeviceNumAll()
+        this.dataAll = res.data
+        this.initChart()
+      } catch (error) {
+        console.log('🚀 ~ error:', error)
+      }
+    },
+    async getEventList() {
+      try {
+        const res = await getApprover()
+        this.eventList = res.data
+        this.startScroll()
+      } catch (error) {
+        console.log('🚀 ~ error:', error)
+      }
+    },
+    handleEvent(item) {
+      console.log('🚀 ~ item:', item)
+      let url = ''
+      if (item.businessName == '设备出库') {
+        url = '/business/addAudit'
+      } else if (item.businessName == '设备退库') {
+        url = '/business/warehouse/auditDetails'
+      } else if (item.businessName == '设备维修') {
+        url = '/equipment/repair/approval-detail'
+      } else if (item.businessName == '设备退役') {
+        this.$router.push({
+          name: 'RetireApplyAuditDetail',
+          params: { id: item.id },
+          query: { taskInfo: JSON.stringify(item) },
+        })
+      }
+      if (item.businessName == '设备退役') return
+      this.$router.push({
+        path: url,
+        query: {
+          id: item.id,
+          isEdit: true,
+        },
+      })
+    },
+    async getShareData() {
+      try {
+        const res = await getShare()
+        this.shareData = res.data
+      } catch (error) {
+        console.log('🚀 ~ error:', error)
+      }
+    },
+    async getNumData() {
+      try {
+        const res = await getDeviceNumByMonth()
+        this.numData = res.data
+      } catch (error) {
+        console.log('🚀 ~ error:', error)
+      }
+    },
+    async getErrData() {
+      try {
+        const res = await getMaQc()
+        this.errData = res.data
+      } catch (error) {
+        console.log('🚀 ~ error:', error)
+      }
+    },
+    handleActive() {
+      this.activeTab = !this.activeTab
+      if (!this.activeTab) {
+        this.$nextTick(() => {
+          this.initBarChart()
+        })
+      }
+    },
+    startScroll() {
+      const wrap = this.$refs.wrap
+
+      this.timer = setInterval(() => {
+        wrap.scrollTop++
+
+        // 如果滚到底部，则跳回 0，实现无缝滚动
+        if (wrap.scrollTop >= wrap.scrollHeight - wrap.clientHeight) {
+          wrap.scrollTop = 0
+        }
+      }, this.speed)
+    },
+
+    pause() {
+      clearInterval(this.timer)
+    },
+
+    resume() {
+      this.startScroll()
+    },
+    initChart() {
+      const chartDom = this.$refs.chartRef
+      const chart = echarts.init(chartDom)
+
+      const option = {
+        legend: {
+          orient: 'horizontal',
+          bottom: 0,
+          textStyle: {
+            fontSize: 14,
+          },
+        },
+
+        series: [
+          {
+            name: '数量',
+            type: 'pie',
+            radius: ['20%', '65%'],
+            label: {
+              show: true,
+              position: 'outside',
+              formatter: (params) => {
+                return `{a|${params.percent}%}\n{b|${params.name}}`
+              },
+              rich: {
+                a: {
+                  fontSize: 16,
+                  fontWeight: 'bold',
+                  lineHeight: 20,
+                },
+                b: {
+                  fontSize: 12,
+                  color: '#666',
+                  lineHeight: 18,
+                },
+              },
+            },
+            data: [
+              { value: this.dataAll.maNum, name: '装备总数' },
+              { value: this.dataAll.toolNum, name: '工具总数' },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+              },
+            },
+          },
+        ],
+      }
+
+      chart.setOption(option)
+    },
+    initBarChart() {
+      const barDom = this.$refs.barRef
+      const barChart = echarts.init(barDom)
+
+      const companyNames = this.tableList.map((item) => item.name)
+      const equipTotals = this.tableList.map((item) => item.equipTotal)
+      const toolTotals = this.tableList.map((item) => item.toolTotal)
+
+      const option = {
+        tooltip: { trigger: 'axis' },
+
+        legend: {
+          top: 0,
+          right: 20,
+          data: ['装备总数', '工具总数'],
+        },
+
+        grid: {
+          left: '3%',
+          right: '3%',
+          bottom: '3%',
+          containLabel: true,
+        },
+
+        xAxis: {
+          type: 'category',
+          data: companyNames,
+
+          axisLabel: {
+            fontSize: 13,
+            interval: 0, // 强制全部显示
+            lineHeight: 16,
+            formatter: function (name) {
+              const maxLen = 6 // 每行6字符，可调整
+              if (name.length <= maxLen) return name
+              const rows = Math.ceil(name.length / maxLen)
+              let res = ''
+              for (let i = 0; i < rows; i++) {
+                res += name.substring(i * maxLen, (i + 1) * maxLen) + '\n'
+              }
+              return res
+            },
+          },
+        },
+
+        yAxis: {
+          type: 'value',
+          name: '数量（个）',
+          nameTextStyle: { fontSize: 14 },
+        },
+
+        series: [
+          {
+            name: '装备总数',
+            type: 'bar',
+            barWidth: 35,
+            barGap: '0%', // ← 两个柱子紧贴
+            barCategoryGap: '0%', // ← 类目间无空隙
+            itemStyle: {
+              color: '#5470C6',
+              borderRadius: [4, 4, 0, 0],
+            },
+            data: equipTotals,
+          },
+          {
+            name: '工具总数',
+            type: 'bar',
+            barWidth: 35,
+            barGap: '0%',
+            barCategoryGap: '0%',
+            itemStyle: {
+              color: '#91CC75',
+              borderRadius: [4, 4, 0, 0],
+            },
+            data: toolTotals,
+          },
+        ],
+      }
+
+      barChart.setOption(option)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  background: #f2f2f2;
+}
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  margin-bottom: 10px;
+  .top-item {
+    flex: 1;
+  }
+  .left-tip {
+    font-size: 13px;
+    background: #f5f5f5;
+    padding: 3px 10px;
+    border-radius: 5px;
+    color: #75787d;
+  }
+}
+.card-box {
+  width: 100%;
+  border-radius: 15px;
+  height: 380px;
+}
+.card-box2 {
+  width: 100%;
+  border-radius: 15px;
+  min-height: 430px;
+}
+.title {
+  font-weight: 900;
+}
+.icon-tip {
+  margin-right: 10px;
+  font-weight: 900;
+}
+::v-deep .card-box {
+  padding: 0 !important;
+}
+
+.content {
+  width: 100%;
+  margin-top: 20px;
+  display: flex;
+  gap: 20px;
+
+  .content-item {
+    flex: 1;
+    border-radius: 8px;
+    height: 140px;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    border-radius: 16px;
+    background: linear-gradient(180deg, #fff7f7 0%, #fff 60%);
+    box-shadow: 0 0 0.5px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 0 rgba(0, 0, 0, 0.15);
+
+    .item-box {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      color: #75787d;
+      font-size: 13px;
+    }
+    .num {
+      margin-bottom: 10px;
+      font-size: 21px;
+      color: red;
+      font-weight: 800;
+    }
+  }
+  .content-item2 {
+    background: linear-gradient(180deg, #e8f9f3 0%, #fff 60.1%);
+    box-shadow: 0 0 0.5px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 0 rgba(0, 0, 0, 0.15);
+  }
+}
+.num2 {
+  margin-bottom: 10px;
+  font-size: 21px;
+  color: #54a798;
+  font-weight: 800;
+}
+
+.scroll-wrapper {
+  margin-top: 10px;
+  height: 300px; /* 按你卡片内部高度调整 */
+  overflow: hidden;
+  position: relative;
+}
+
+.scroll-list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.scroll-list li {
+  padding: 8px 12px;
+  font-size: 14px;
+  transition: background 0.3s;
+}
+
+/* 隔行背景色 */
+.scroll-list li.odd {
+  background-color: #ebf8f3;
+}
+</style>
diff --git a/src/views/home/components/ProvincialCompany.vue b/src/views/home/components/ProvincialCompany.vue
new file mode 100644
index 00000000..e9a5f915
--- /dev/null
+++ b/src/views/home/components/ProvincialCompany.vue
@@ -0,0 +1,496 @@
+<template>
+  <div class="app-container">
+    <div class="top">
+      <div class="top-item">
+        <el-card class="card-box">
+          <div class="title">
+            <i class="el-icon-pie-chart icon-tip" />
+            <span>数据总览</span>
+          </div>
+          <!-- 饼图 -->
+          <div style="display: flex; justify-content: center">
+            <div ref="chartRef" style="width: 490px; height: 270px"></div>
+          </div>
+          <div style="display: flex; justify-content: space-between; margin-top: 15px">
+            <div class="left-tip">平台设备总数：{{ dataAll.totalSum }}</div>
+            <div class="left-tip">装备总数：{{ dataAll.maNum }}</div>
+            <div class="left-tip">工具总数：{{ dataAll.toolNum }}</div>
+          </div>
+        </el-card>
+      </div>
+
+      <!--  -->
+      <div class="top-item">
+        <el-card class="card-box">
+          <div class="title">
+            <i class="el-icon-bangzhu icon-tip" />
+            <span>使用情况</span>
+          </div>
+          <div class="content">
+            <div class="content-item" style="background: #f3fbf8">
+              <div class="line" style="background: #79d1b8" />
+              <div class="item-box">
+                <div>在库数量</div>
+                <div class="num">{{ useData.availableNum }}</div>
+              </div>
+            </div>
+            <div class="content-item" style="background: #f2f6fe">
+              <div class="line" style="background: #9dbefa" />
+              <div class="item-box">
+                <div>自用数量</div>
+                <div class="num">{{ useData.inNum }}</div>
+              </div>
+            </div>
+            <div class="content-item" style="background: #f3fbf8">
+              <div class="line" style="background: #79d1b8" />
+              <div class="item-box">
+                <div>共享数量</div>
+                <div class="num">{{ useData.shareNum }}</div>
+              </div>
+            </div>
+          </div>
+          <div class="content">
+            <div class="content-item" style="background: #fdf1ea">
+              <div class="line" style="background: #f2ab7f" />
+              <div class="item-box">
+                <div>维修数量</div>
+                <div class="num">{{ useData.repairNum }}</div>
+              </div>
+            </div>
+            <div class="content-item" style="background: #fbedeb">
+              <div class="line" style="background: #e56d74" />
+              <div class="item-box">
+                <div>退役数量</div>
+                <div class="num">{{ useData.scrapNum }}</div>
+              </div>
+            </div>
+            <div style="flex: 1"></div>
+          </div>
+        </el-card>
+      </div>
+
+      <div class="top-item">
+        <el-card class="card-box">
+          <div class="title">
+            <i class="el-icon-date icon-tip" />
+            <span>实时事件</span>
+          </div>
+          <!-- 滚动列表 -->
+          <div class="scroll-wrapper" ref="wrap" @mouseenter="pause" @mouseleave="resume">
+            <ul class="scroll-list" ref="list">
+              <li v-for="(item, index) in eventList" :key="item.id" :class="{ odd: index % 2 === 1 }">
+                <div style="display: flex; align-items: center; justify-content: space-between">
+                  <div style="width: 65%">
+                    <span>{{ index + 1 }}. </span>
+                    <span>{{ item.deptAbbreviation }} </span>
+                    <span>{{ item.applyUser }} </span>
+                    <span>{{ item.businessName }}</span>
+                  </div>
+                  <div>{{ item.applyTime }}</div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </el-card>
+      </div>
+    </div>
+
+    <div class="bottom">
+      <el-card class="card-box2">
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px">
+          <div class="title">
+            <i class="el-icon-reading icon-tip" />
+            <span>装备对比</span>
+          </div>
+          <div style="display: flex; justify-content: space-between; align-items: center">
+            <el-button type="primary" size="mini" @click="handleActive">图表分析</el-button>
+            <i class="el-icon-download icon-tip" style="margin-left: 10px; cursor: pointer" @click="handleExport" />
+          </div>
+        </div>
+
+        <el-table
+          v-if="activeTab"
+          v-loading="isLoading"
+          :data="tableList"
+          highlight-current-row
+          border
+          stripe
+          style="width: 100%"
+        >
+          <el-table-column type="index" width="55" label="序号" align="center" />
+          <el-table-column
+            v-for="(column, index) in tableColumns"
+            show-overflow-tooltip
+            :key="index"
+            :label="column.label"
+            :prop="column.prop"
+            align="center"
+          >
+          </el-table-column>
+        </el-table>
+        <!-- 柱状图 -->
+        <div v-else ref="barRef" style="width: 100%; height: 340px; margin-top: 20px"></div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { getDeviceNumAll, getUseDeviceNum, getReal, getDeviceByDept } from '@/api/basic/home'
+
+export default {
+  name: 'ProvincialCompany',
+  data() {
+    return {
+      isLoading: false,
+      toolTotal: 60,
+      equipTotal: 50,
+      activeTab: true,
+      dataAll: {
+        maNum: 0,
+        maPercent: 0,
+        toolNum: 0,
+        toolPercent: 0,
+        totalSum: 0,
+      },
+      useData: {
+        availableNum: 0,
+        inNum: 0,
+        repairNum: 0,
+        scrapNum: 0,
+        shareNum: 0,
+      },
+      eventList: [],
+      timer: null,
+      speed: 30,
+
+      tableColumns: [
+        { label: '公司名称', prop: 'companyName' },
+        { label: '装备总数', prop: 'maNum' },
+        { label: '装备总价值', prop: 'maCost' },
+        { label: '工具总数', prop: 'toolNum' },
+        { label: '编码工具总数', prop: 'toolCodeNum' },
+        { label: '数量工具总数', prop: 'toolNoCodeNum' },
+      ],
+      tableList: [],
+    }
+  },
+  mounted() {
+    this.getDataAll()
+    this.getUseData()
+    this.getEventList()
+    this.getList()
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+  },
+
+  methods: {
+    async getDataAll() {
+      try {
+        const res = await getDeviceNumAll()
+        this.dataAll = res.data
+        this.initChart()
+      } catch (error) {
+        console.log('🚀 ~ error:', error)
+      }
+    },
+    async getUseData() {
+      try {
+        const res = await getUseDeviceNum()
+        this.useData = res.data
+      } catch (error) {
+        console.log('🚀 ~ error:', error)
+      }
+    },
+    async getEventList() {
+      try {
+        const res = await getReal()
+        this.eventList = res.data
+        this.startScroll()
+      } catch (error) {
+        console.log('🚀 ~ error:', error)
+      }
+    },
+    async getList() {
+      try {
+        const res = await getDeviceByDept()
+        this.tableList = res.data
+      } catch (error) {
+        console.log('🚀 ~ error:', error)
+      }
+    },
+    handleActive() {
+      this.activeTab = !this.activeTab
+      if (!this.activeTab) {
+        this.$nextTick(() => {
+          this.initBarChart()
+        })
+      }
+    },
+    startScroll() {
+      const wrap = this.$refs.wrap
+
+      this.timer = setInterval(() => {
+        wrap.scrollTop++
+
+        // 如果滚到底部，则跳回 0，实现无缝滚动
+        if (wrap.scrollTop >= wrap.scrollHeight - wrap.clientHeight) {
+          wrap.scrollTop = 0
+        }
+      }, this.speed)
+    },
+
+    pause() {
+      clearInterval(this.timer)
+    },
+
+    resume() {
+      this.startScroll()
+    },
+    handleExport() {
+      this.download('material-mall/index/export', {}, `装备对比_${new Date().getTime()}.xlsx`)
+    },
+    initChart() {
+      const chartDom = this.$refs.chartRef
+      const chart = echarts.init(chartDom)
+
+      const option = {
+        legend: {
+          orient: 'horizontal',
+          bottom: 0,
+          textStyle: {
+            fontSize: 14,
+          },
+        },
+
+        series: [
+          {
+            name: '数量',
+            type: 'pie',
+            radius: ['20%', '65%'],
+            label: {
+              show: true,
+              position: 'outside',
+              formatter: (params) => {
+                return `{a|${params.percent}%}\n{b|${params.name}}`
+              },
+              rich: {
+                a: {
+                  fontSize: 16,
+                  fontWeight: 'bold',
+                  lineHeight: 20,
+                },
+                b: {
+                  fontSize: 12,
+                  color: '#666',
+                  lineHeight: 18,
+                },
+              },
+            },
+            data: [
+              { value: this.dataAll.maNum, name: '装备总数' },
+              { value: this.dataAll.toolNum, name: '工具总数' },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+              },
+            },
+          },
+        ],
+      }
+
+      chart.setOption(option)
+    },
+    initBarChart() {
+      const barDom = this.$refs.barRef
+      const barChart = echarts.init(barDom)
+
+      const companyNames = this.tableList.map((item) => item.companyName)
+      const equipTotals = this.tableList.map((item) => item.maNum)
+      const toolTotals = this.tableList.map((item) => item.toolNum)
+
+      const option = {
+        tooltip: { trigger: 'axis' },
+
+        legend: {
+          top: 0,
+          right: 20,
+          data: ['装备总数', '工具总数'],
+        },
+
+        grid: {
+          left: '3%',
+          right: '3%',
+          bottom: '3%',
+          containLabel: true,
+        },
+
+        xAxis: {
+          type: 'category',
+          data: companyNames,
+
+          axisLabel: {
+            fontSize: 13,
+            interval: 0, // 强制全部显示
+            lineHeight: 16,
+            formatter: function (name) {
+              const maxLen = 3 // 每行6字符，可调整
+              if (name.length <= maxLen) return name
+              const rows = Math.ceil(name.length / maxLen)
+              let res = ''
+              for (let i = 0; i < rows; i++) {
+                res += name.substring(i * maxLen, (i + 1) * maxLen) + '\n'
+              }
+              return res
+            },
+          },
+        },
+
+        yAxis: {
+          type: 'value',
+          name: '数量（个）',
+          nameTextStyle: { fontSize: 14 },
+        },
+
+        series: [
+          {
+            name: '装备总数',
+            type: 'bar',
+            barWidth: 35,
+            barGap: '0%', // ← 两个柱子紧贴
+            barCategoryGap: '0%', // ← 类目间无空隙
+            itemStyle: {
+              color: '#5470C6',
+              borderRadius: [4, 4, 0, 0],
+            },
+            data: equipTotals,
+          },
+          {
+            name: '工具总数',
+            type: 'bar',
+            barWidth: 35,
+            barGap: '0%',
+            barCategoryGap: '0%',
+            itemStyle: {
+              color: '#91CC75',
+              borderRadius: [4, 4, 0, 0],
+            },
+            data: toolTotals,
+          },
+        ],
+      }
+
+      barChart.setOption(option)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  background: #f2f2f2;
+}
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  margin-bottom: 10px;
+  .top-item {
+    flex: 1;
+  }
+  .left-tip {
+    font-size: 13px;
+    background: #f5f5f5;
+    padding: 3px 10px;
+    border-radius: 5px;
+    color: #75787d;
+  }
+}
+.card-box {
+  width: 100%;
+  border-radius: 15px;
+  height: 360px;
+}
+.card-box2 {
+  width: 100%;
+  border-radius: 15px;
+  min-height: 430px;
+}
+.title {
+  font-weight: 900;
+}
+.icon-tip {
+  margin-right: 10px;
+  font-weight: 900;
+}
+::v-deep .card-box {
+  padding: 0 !important;
+}
+
+.content {
+  width: 100%;
+  margin-top: 20px;
+  display: flex;
+  gap: 20px;
+
+  .content-item {
+    flex: 1;
+    border-radius: 8px;
+    height: 90px;
+    /* background: #f3fbf8; */
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+
+    .line {
+      width: 4px;
+      height: 90px;
+      /* background: #79d1b8; */
+    }
+    .item-box {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      color: #75787d;
+      font-size: 13px;
+    }
+    .num {
+      margin-top: 10px;
+      font-size: 20px;
+      color: #333;
+      font-weight: 800;
+    }
+  }
+}
+
+.scroll-wrapper {
+  margin-top: 10px;
+  height: 300px;
+  overflow: hidden;
+  position: relative;
+}
+
+.scroll-list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.scroll-list li {
+  padding: 8px 12px;
+  font-size: 14px;
+  transition: background 0.3s;
+}
+
+/* 隔行背景色 */
+.scroll-list li.odd {
+  background-color: #ebf8f3;
+}
+</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
new file mode 100644
index 00000000..ee2fa682
--- /dev/null
+++ b/src/views/home/index.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <component ref="" :is="isShowComponent" />
+  </div>
+</template>
+
+<script>
+import ProvincialCompany from './components/ProvincialCompany'
+import MunicipalCompany from './components/MunicipalCompany'
+export default {
+  name: 'Home',
+  components: {
+    ProvincialCompany,
+    MunicipalCompany,
+  },
+  data() {
+    return {
+      isShowComponent: 'ProvincialCompany',
+    }
+  },
+  created() {
+    const deptName = sessionStorage.getItem('deptName')
+    // 如果 deptName 包含 省公司 则显示ProvincialCompany 否则 显示 MunicipalCompany
+    this.isShowComponent = deptName.includes('省公司') ? 'ProvincialCompany' : 'MunicipalCompany'
+  },
+  methods: {},
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/vue.config.js b/vue.config.js
index 865b17e4..c50ac5e2 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -38,9 +38,9 @@ module.exports = {
                 // target: `http://localhost:18080`,
                 // target: `http://192.168.0.96:28080`,//马
                 // target: `http://192.168.0.110:18080`,//洪
-                target: `http://127.0.0.1:28080`,//阮
+                // target: `http://192.168.0.41:28080`,//蒋
                 // target: `http://36.33.26.201:17788/proxyApi`, //测试
-                // target: `http://192.168.0.14:19190/prod-api`, //测试
+                target: `http://36.33.26.201:21999/prod-api`, //测试
                 // target: `http://192.168.137.1:18080`,//
                 changeOrigin: true,
                 pathRewrite: {