From 84eb6adbd50803dc731a1025fddae52f330142ba Mon Sep 17 00:00:00 2001
From: yuzongping <835949940@qq.com>
Date: Fri, 6 Jun 2025 14:54:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E5=9B=BE=E6=A0=87=E5=B0=81?=
 =?UTF-8?q?=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 src/components/block/index.scss               |   2 +-
 src/components/charts/line/index.html         |   1 +
 src/components/charts/line/index.js           | 184 ++++++++++++++++++
 src/components/charts/line/index.scss         |   6 +
 src/components/charts/line/index.vue          |   3 +
 src/components/charts/pie/index.html          |   1 +
 src/components/charts/pie/index.js            | 177 +++++++++++++++++
 src/components/charts/pie/index.scss          |   6 +
 src/components/charts/pie/index.vue           |   3 +
 src/components/pannel-tabs/index.html         |   3 +
 src/components/pannel-tabs/index.js           |  34 ++++
 src/components/pannel-tabs/index.scss         |  26 +++
 src/components/pannel-tabs/index.vue          |   3 +
 src/components/pannel/index.scss              |   1 +
 src/components/scroll-table/data.js           |  65 +++++++
 src/components/scroll-table/index.html        |  14 ++
 src/components/scroll-table/index.js          |  69 +++++++
 src/components/scroll-table/index.scss        | 132 +++++++++++++
 src/components/scroll-table/index.vue         |   3 +
 .../capital/comps/left/middle/1/index.html    |  10 +-
 .../capital/comps/left/middle/1/index.js      |  11 ++
 .../capital/comps/left/middle/1/index.scss    |  17 ++
 .../capital/comps/right/bottom/1/index.html   |   2 +-
 .../capital/comps/right/bottom/1/index.js     |   2 +
 .../capital/comps/right/middle/1/index.html   |   2 +-
 .../capital/comps/right/middle/1/index.js     |   2 +
 src/views/capital/comps/right/top/1/1.png     | Bin 0 -> 2934 bytes
 src/views/capital/comps/right/top/1/2.png     | Bin 0 -> 2890 bytes
 src/views/capital/comps/right/top/1/3.png     | Bin 0 -> 2848 bytes
 src/views/capital/comps/right/top/1/data.js   |  26 +++
 .../capital/comps/right/top/1/index.html      |   8 +-
 src/views/capital/comps/right/top/1/index.js  |  11 +-
 .../capital/comps/right/top/1/index.scss      |  12 ++
 34 files changed, 825 insertions(+), 12 deletions(-)
 create mode 100644 src/components/charts/line/index.html
 create mode 100644 src/components/charts/line/index.js
 create mode 100644 src/components/charts/line/index.scss
 create mode 100644 src/components/charts/line/index.vue
 create mode 100644 src/components/charts/pie/index.html
 create mode 100644 src/components/charts/pie/index.js
 create mode 100644 src/components/charts/pie/index.scss
 create mode 100644 src/components/charts/pie/index.vue
 create mode 100644 src/components/pannel-tabs/index.html
 create mode 100644 src/components/pannel-tabs/index.js
 create mode 100644 src/components/pannel-tabs/index.scss
 create mode 100644 src/components/pannel-tabs/index.vue
 create mode 100644 src/components/scroll-table/data.js
 create mode 100644 src/components/scroll-table/index.html
 create mode 100644 src/components/scroll-table/index.js
 create mode 100644 src/components/scroll-table/index.scss
 create mode 100644 src/components/scroll-table/index.vue
 create mode 100644 src/views/capital/comps/right/top/1/1.png
 create mode 100644 src/views/capital/comps/right/top/1/2.png
 create mode 100644 src/views/capital/comps/right/top/1/3.png
 create mode 100644 src/views/capital/comps/right/top/1/data.js

diff --git a/package.json b/package.json
index 7ba8a51..096b8eb 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
     "node-sass": "^4.14.1",
     "sass-loader": "8.0.0",
     "vue-axios": "2.1.4",
+    "vue-seamless-scroll": "^1.1.23",
     "vue-template-compiler": "2.6.10"
   },
   "eslintConfig": {
diff --git a/src/components/block/index.scss b/src/components/block/index.scss
index 8d9d99b..67e7918 100644
--- a/src/components/block/index.scss
+++ b/src/components/block/index.scss
@@ -7,7 +7,7 @@
 
   .icon {
     width: 80px;
-    height: 90px;
+    height: 100px;
   }
 
   .right {
diff --git a/src/components/charts/line/index.html b/src/components/charts/line/index.html
new file mode 100644
index 0000000..d60fced
--- /dev/null
+++ b/src/components/charts/line/index.html
@@ -0,0 +1 @@
+<div :id="id" class="chart"></div>
diff --git a/src/components/charts/line/index.js b/src/components/charts/line/index.js
new file mode 100644
index 0000000..7a4df22
--- /dev/null
+++ b/src/components/charts/line/index.js
@@ -0,0 +1,184 @@
+import * as echarts from 'echarts';
+import elementResizeDetectorMaker from 'element-resize-detector';
+export default {
+  props: {
+    id: {
+      type: String,
+      default: 'line'
+    },
+    data: {
+      type: Array,
+      default: function () {
+        return [
+          {
+            name: '1月',
+            value: '10'
+          },
+          {
+            name: '2月',
+            value: '19'
+          }
+        ];
+      }
+    }
+  },
+  data () {
+    return {
+      chart: null
+    };
+  },
+  mounted () {
+    this.initChart();
+  },
+  computed: {
+  },
+  methods: {
+    // 设置监听器 页面尺寸变化重新绘制图表
+    initResizeCallBack () {
+      const erd = elementResizeDetectorMaker();
+      erd.listenTo(document.getElementById(this.id), () => {
+        this.$nextTick(() => {
+          this.chart.resize();
+        });
+      });
+    },
+    initChart () {
+      this.chart = echarts.init(document.getElementById(this.id));
+      this.chartSetOption();
+    },
+    chartSetOption () {
+      let xAxisData = [];
+      let data = [];
+      this.data.forEach(item => {
+        xAxisData.push(item.name)
+        data.push(item.value)
+      });
+      const option = {
+        grid: {
+          left: "5%",
+          right: "10%",
+          top: "15%",
+          bottom: "10%",
+          containLabel: true,
+        },
+        tooltip: {
+          show: true,
+          trigger: "item",
+        },
+        legend: {
+          show: false
+        },
+        color: {
+          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+            {
+              offset: 1,
+              color: "rgba(134, 91, 252, 1)",
+            },
+            {
+              offset: 0.5,
+              color: "rgba(26, 106, 226, 0.5)",
+            },
+            {
+              offset: 0,
+              color: "rgba(26, 106, 226, 0)",
+            },
+          ]),
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            axisLabel: {
+              color: 'rgba(185, 211, 235, 1)',
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            },
+            data: xAxisData
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "单位：万元",
+            nameTextStyle: {
+              color: 'rgba(185, 211, 235, 1)'
+            },
+            axisLabel: {
+              formatter: "{value}",
+              textStyle: {
+                color: "rgba(185, 211, 235, 1)",
+              },
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#27b4c2",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#11366e",
+              },
+            },
+          }
+        ],
+        series: [
+          {
+
+            name: "",
+            type: "line",
+            smooth: true,
+            // symbol: "circle",
+            symbolSize: 12,
+            itemStyle: {
+              normal: {
+                color: "#0092f6",
+                lineStyle: {
+                  color: "#0092f6",
+                  width: 1,
+                },
+                areaStyle: {
+                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                    {
+                      offset: 1,
+                      color: "rgba(134, 91, 252, 1)",
+                    },
+                    {
+                      offset: 0.5,
+                      color: "rgba(26, 106, 226, 0.5)",
+                    },
+                    {
+                      offset: 0,
+                      color: "rgba(26, 106, 226, 0)",
+                    },
+                  ]),
+                },
+              },
+            },
+            markPoint: {
+              itemStyle: {
+                normal: {
+                  color: "red",
+                },
+              },
+            },
+            data: data
+          }
+        ],
+      };;
+      this.chart.setOption(option);
+      this.initResizeCallBack();
+
+    }
+  }
+};
diff --git a/src/components/charts/line/index.scss b/src/components/charts/line/index.scss
new file mode 100644
index 0000000..b89d9dc
--- /dev/null
+++ b/src/components/charts/line/index.scss
@@ -0,0 +1,6 @@
+.chart {
+  overflow: visible;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}
\ No newline at end of file
diff --git a/src/components/charts/line/index.vue b/src/components/charts/line/index.vue
new file mode 100644
index 0000000..5ca257a
--- /dev/null
+++ b/src/components/charts/line/index.vue
@@ -0,0 +1,3 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped></style>
diff --git a/src/components/charts/pie/index.html b/src/components/charts/pie/index.html
new file mode 100644
index 0000000..d60fced
--- /dev/null
+++ b/src/components/charts/pie/index.html
@@ -0,0 +1 @@
+<div :id="id" class="chart"></div>
diff --git a/src/components/charts/pie/index.js b/src/components/charts/pie/index.js
new file mode 100644
index 0000000..9110512
--- /dev/null
+++ b/src/components/charts/pie/index.js
@@ -0,0 +1,177 @@
+import * as echarts from 'echarts';
+import elementResizeDetectorMaker from 'element-resize-detector';
+export default {
+  props: {
+    id: {
+      type: String,
+      default: 'pie'
+    },
+    data: {
+      type: Array,
+      default: function () {
+        return [
+          {
+            name: '1月',
+            value: '10'
+          },
+          {
+            name: '2月',
+            value: '19'
+          }
+        ];
+      }
+    }
+  },
+  data () {
+    return {
+      chart: null
+    };
+  },
+  mounted () {
+    this.initChart();
+  },
+  computed: {
+  },
+  methods: {
+    // 设置监听器 页面尺寸变化重新绘制图表
+    initResizeCallBack () {
+      const erd = elementResizeDetectorMaker();
+      erd.listenTo(document.getElementById(this.id), () => {
+        this.$nextTick(() => {
+          this.chart.resize();
+        });
+      });
+    },
+    initChart () {
+      this.chart = echarts.init(document.getElementById(this.id));
+      this.chartSetOption();
+    },
+    chartSetOption () {
+      var scale = 1;
+      var echartData = [
+        {
+          value: 2154,
+          unit: '万元',
+          name: "经营收入",
+        },
+        {
+          value: 3854,
+          unit: '万元',
+          name: "投资收益",
+        },
+        {
+          value: 3854,
+          unit: '万吨',
+          name: "补助收入",
+        },
+        {
+          value: 3854,
+          unit: '万吨',
+          name: "其他收入",
+        }
+      ];
+      var rich = {
+        yellow: {
+          color: "rgba(185, 211, 235, 1)",
+          fontSize: 18 * scale,
+          padding: [5, 4],
+          align: "center",
+        },
+        total: {
+          color: "#ffc72b",
+          fontSize: 40 * scale,
+          align: "center",
+        },
+        white: {
+          color: "rgba(185, 211, 235, 1)",
+          align: "center",
+          fontSize: 18 * scale,
+          padding: [0, 0],
+        },
+        blue: {
+          color: "rgba(185, 211, 235, 1)",
+          fontSize: 16 * scale,
+          align: "center",
+        },
+        hr: {
+          // borderColor: "#0b5263",
+          width: "100%",
+          borderWidth: 1,
+          height: 0,
+        },
+      };
+      let xAxisData = [];
+      let data = [];
+      this.data.forEach(item => {
+        xAxisData.push(item.name)
+        data.push(item.value)
+      });
+      const option = {
+        title: [
+          {
+            text: "总库存量",
+            left: "center",
+            top: "40%",
+            padding: [0, 0],
+            textStyle: {
+              color: "#fff",
+              fontSize: 18 * scale,
+              align: "center",
+            },
+          },
+          {
+            text: "1000 万吨",
+            left: "center",
+            top: "50%",
+            padding: [0, 0],
+            textStyle: {
+              color: "#fff",
+              fontSize: 18 * scale,
+              align: "center",
+            },
+          }
+        ],
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: ["42%", "60%"],
+            hoverAnimation: false,
+            color: ["#c487ee", "#deb140", "#49dff0", "#034079", "#6f81da", "#00ffb4"],
+            label: {
+              normal: {
+                formatter: function (params, ticket, callback) {
+                  var total = 0; //考生总数量
+                  var percent = 0; //考生占比
+                  echartData.forEach(function (value, index, array) {
+                    total += value.value;
+                  });
+                  percent = ((params.value / total) * 100).toFixed(1);
+                  return (
+                    "{white|" +
+                    percent + "%" +
+                    "}\n{blue|" +
+                    params.name +
+                    "}\n{hr|}\n{yellow|" +
+                    params.value + params.data.unit + '}'
+                  );
+                },
+                rich: rich,
+              },
+            },
+            labelLine: {
+              normal: {
+                length: 10 * scale,
+                length2: 20 * scale,
+              },
+            },
+            data: echartData,
+          },
+        ],
+      };
+      this.chart.setOption(option);
+      this.initResizeCallBack();
+
+    }
+  }
+};
diff --git a/src/components/charts/pie/index.scss b/src/components/charts/pie/index.scss
new file mode 100644
index 0000000..b89d9dc
--- /dev/null
+++ b/src/components/charts/pie/index.scss
@@ -0,0 +1,6 @@
+.chart {
+  overflow: visible;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}
\ No newline at end of file
diff --git a/src/components/charts/pie/index.vue b/src/components/charts/pie/index.vue
new file mode 100644
index 0000000..5ca257a
--- /dev/null
+++ b/src/components/charts/pie/index.vue
@@ -0,0 +1,3 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped></style>
diff --git a/src/components/pannel-tabs/index.html b/src/components/pannel-tabs/index.html
new file mode 100644
index 0000000..8bdc0ef
--- /dev/null
+++ b/src/components/pannel-tabs/index.html
@@ -0,0 +1,3 @@
+<div class="pannel_tabs row">
+  <div v-for="(item) in data" class="tab hover_pointer" :class="[item.id === currentClick ? 'active' : '']" @click="tabClick(item)">{{item.name}}</div>
+</div>
\ No newline at end of file
diff --git a/src/components/pannel-tabs/index.js b/src/components/pannel-tabs/index.js
new file mode 100644
index 0000000..f88e5a3
--- /dev/null
+++ b/src/components/pannel-tabs/index.js
@@ -0,0 +1,34 @@
+
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: function () {
+        return [
+          {
+            id: '1',
+            name: '趋势'
+          },
+          {
+            id: '2',
+            name: '类型'
+          }
+        ]
+      }
+    },
+
+  },
+  data () {
+    return {
+      currentClick: '1'
+    };
+  },
+  created () {
+  },
+  methods: {
+    tabClick (info) {
+      this.currentClick = info.id
+      this.$emit('change', info)
+    }
+  }
+};
diff --git a/src/components/pannel-tabs/index.scss b/src/components/pannel-tabs/index.scss
new file mode 100644
index 0000000..5cf4c24
--- /dev/null
+++ b/src/components/pannel-tabs/index.scss
@@ -0,0 +1,26 @@
+.tab {
+  margin-right: 4px;
+  font-size: 12px;
+  line-height: 23px;
+  text-align: center;
+  border-radius: 10px;
+  width: 55px;
+  height: 23px;
+  background: RGBA(0, 0, 0, 0);
+  border: 1px solid rgba(43, 108, 206, 0.66);
+}
+
+.pannel_tabs {
+  height: 23px !important;
+  width: auto;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.active {
+  background: linear-gradient(-90deg, #1c4ca5 0%, #215AC3 98%);
+  font-size: 12px;
+  width: 55px;
+  height: 23px;
+  text-align: center;
+}
\ No newline at end of file
diff --git a/src/components/pannel-tabs/index.vue b/src/components/pannel-tabs/index.vue
new file mode 100644
index 0000000..5ca257a
--- /dev/null
+++ b/src/components/pannel-tabs/index.vue
@@ -0,0 +1,3 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped></style>
diff --git a/src/components/pannel/index.scss b/src/components/pannel/index.scss
index 69217ee..3e26408 100644
--- a/src/components/pannel/index.scss
+++ b/src/components/pannel/index.scss
@@ -76,6 +76,7 @@
     position: relative;
     flex: 1;
     background-color: rgba(11, 28, 58, 1);
+    overflow: hidden;
 
     .bottom_line {
       position: absolute;
diff --git a/src/components/scroll-table/data.js b/src/components/scroll-table/data.js
new file mode 100644
index 0000000..29f9375
--- /dev/null
+++ b/src/components/scroll-table/data.js
@@ -0,0 +1,65 @@
+export default [
+  {
+    area: '长春',
+    count: 233,
+    money: 534534,
+    dealCount: 564,
+    dealMoney: 31
+  },
+  {
+    area: '松原',
+    count: 233,
+    money: 534534,
+    dealCount: 564,
+    dealMoney: 31
+  },
+  {
+    area: '通化',
+    count: 233,
+    money: 534534,
+    dealCount: 564,
+    dealMoney: 31
+  },
+  {
+    area: '四平',
+    count: 233,
+    money: 534534,
+    dealCount: 564,
+    dealMoney: 31
+  },
+  {
+    area: '吉林',
+    count: 233,
+    money: 534534,
+    dealCount: 564,
+    dealMoney: 31
+  },
+  {
+    area: '辽源',
+    count: 233,
+    money: 534534,
+    dealCount: 564,
+    dealMoney: 31
+  },
+  {
+    area: '通化',
+    count: 233,
+    money: 534534,
+    dealCount: 564,
+    dealMoney: 31
+  },
+  {
+    area: '白山',
+    count: 233,
+    money: 534534,
+    dealCount: 564,
+    dealMoney: 31
+  },
+  {
+    area: '延边',
+    count: 233,
+    money: 534534,
+    dealCount: 564,
+    dealMoney: 31
+  }
+];
diff --git a/src/components/scroll-table/index.html b/src/components/scroll-table/index.html
new file mode 100644
index 0000000..bdbcad4
--- /dev/null
+++ b/src/components/scroll-table/index.html
@@ -0,0 +1,14 @@
+<div :style="[style]">
+  <div class="table_show">
+      <div class="table_header table_one clearfix">
+        <div v-for="header in headers" :key="header" class="item test_center">{{header}}</div>
+      </div>
+      <div class="table_bodyer">
+        <scroll :data="data" class="seamless-warp" :class-option="swiperOption">
+          <div v-for="(line, index) in data" class="table_one clearfix item_height">
+            <div v-for="(item, index) in line" class="item test_center ellipsis_1" >{{item }}</div>
+          </div>
+        </scroll>
+      </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/components/scroll-table/index.js b/src/components/scroll-table/index.js
new file mode 100644
index 0000000..9a2a8aa
--- /dev/null
+++ b/src/components/scroll-table/index.js
@@ -0,0 +1,69 @@
+import scroll from 'vue-seamless-scroll'
+export default {
+  components: {
+    scroll
+  },
+  data () {
+    return {
+    };
+  },
+  props: {
+    width: {
+      type: [String, Number],
+      default: '100%'
+    },
+    height: {
+      type: [String, Number],
+      default: '100'
+    },
+    headers: {
+      type: Array,
+      default: function () {
+        return ['表头1', '表头2', '表头3']
+      }
+    },
+    data: {
+      type: Array,
+      default: function () {
+        return [
+          ['表头1', '表头2', '表头3'],
+          ['表头1', '表头2', '表头3'],
+          ['表头1', '表头2', '表头3'],
+          ['表头1', '表头2', '表头3'],
+          ['表头1', '表头2', '表头3'],
+          ['表头1', '表头2', '表头3'],
+          ['表头1', '表头2', '表头3'],
+          ['表头11', '表头22', '表头33']
+        ]
+      }
+    }
+  },
+  computed: {
+    dataLength: function () {
+      return this.dataList.length;
+    },
+    style: function () {
+      return {
+        height: this.height,
+        width: this.width
+      };
+    },
+    // 如果数据不足5条则不滚动
+    swiperOption: function () {
+      return {
+        step: 0.4,
+        limitMoveNum: 1,
+        hoverStop: true,
+        direction: 1,
+        openWatch: true,
+        singleHeight: 0,
+        singleHeight: 0,
+        waitTime: 1000
+      }
+    }
+  },
+  created () {
+  },
+  methods: {
+  }
+};
diff --git a/src/components/scroll-table/index.scss b/src/components/scroll-table/index.scss
new file mode 100644
index 0000000..82ee69e
--- /dev/null
+++ b/src/components/scroll-table/index.scss
@@ -0,0 +1,132 @@
+.table_show {
+  box-sizing: border-box;
+  padding: 0 10px;
+  margin-top: 10px;
+
+  .table_header {
+    width: 100%;
+    background: rgba(44, 117, 223, 0.5);
+    border-radius: 4px;
+    height: 40px;
+    font-size: 12px;
+    font-family: MicrosoftYaHeiUI, MicrosoftYaHeiUI-Bold;
+    font-weight: 700;
+    text-align: center;
+    color: rgba(185, 211, 235, 1);
+  }
+
+  .table_bodyer {
+    margin-top: 20px;
+    overflow: hidden;
+    height: 200px;
+    line-height: 40px;
+
+    .table_one {
+      height: 40px;
+      display: flex;
+      justify-content: space-around;
+    }
+  }
+
+  .table_one {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+  }
+}
+
+.swiper-container {
+  height: 100%;
+}
+
+.table_bodyer {
+  height: 100%;
+
+}
+
+.margin {
+  margin-right: 5px;
+}
+
+.item_height {
+  color: rgba(214, 234, 252, 1);
+  font-size: 10px;
+  line-height: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  border-bottom: 1px solid #183053;
+
+  &:nth-child(odd) {
+    background-color: rgba(49, 129, 246, 0.1);
+  }
+
+  &:hover {
+    color: rgba(49, 129, 246, 1);
+  }
+}
+
+.item {
+  font-size: 14px;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.item1 {
+  flex: 1.8;
+}
+
+.item:nth-child(1) {
+  text-align: left;
+  flex: 1.8;
+  padding-left: 5px;
+}
+
+.item:nth-child(2) {
+  flex: 1.3;
+}
+
+.item:nth-child(3) {
+  flex: 1.8;
+}
+
+.item:nth-child(4) {
+  flex: 1.4;
+}
+
+.item:nth-child(5) {
+  flex: 1.3;
+}
+
+.item:nth-child(6) {
+  flex: 1.3;
+}
+
+.item:nth-child(7) {
+  flex: 2;
+}
+
+.text_overflow {
+  text-overflow: ellipsis;
+}
+
+.test_center {
+  text-align: center;
+}
+
+.pop {
+  padding: 4px;
+  position: fixed;
+  z-index: 20;
+  color: white;
+  background: rgba($color: #000000, $alpha: 0.3);
+  border-radius: 6px;
+}
+
+.margin_top {
+  margin-top: 5px;
+}
\ No newline at end of file
diff --git a/src/components/scroll-table/index.vue b/src/components/scroll-table/index.vue
new file mode 100644
index 0000000..5ca257a
--- /dev/null
+++ b/src/components/scroll-table/index.vue
@@ -0,0 +1,3 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped></style>
diff --git a/src/views/capital/comps/left/middle/1/index.html b/src/views/capital/comps/left/middle/1/index.html
index 4603cfa..f15faf2 100644
--- a/src/views/capital/comps/left/middle/1/index.html
+++ b/src/views/capital/comps/left/middle/1/index.html
@@ -1,3 +1,11 @@
 <Pannel title="资金收入分析" height="340">
-  
+    <div class="full">
+      <div class="top">
+        <PannelTabs @change="tabChange"></PannelTabs>
+      </div>
+      <div class="buttom">
+        <LineCharts v-if="tabIndex === '1'"></LineCharts>
+        <PieCharts v-if="tabIndex === '2'"></PieCharts>
+      </div>
+    </div>
 </Pannel>
\ No newline at end of file
diff --git a/src/views/capital/comps/left/middle/1/index.js b/src/views/capital/comps/left/middle/1/index.js
index d3863a7..f436a1c 100644
--- a/src/views/capital/comps/left/middle/1/index.js
+++ b/src/views/capital/comps/left/middle/1/index.js
@@ -1,11 +1,18 @@
 import Pannel from '@/components/pannel/index.vue';
+import PannelTabs from '@/components/pannel-tabs/index.vue';
+import LineCharts from '@/components/charts/line/index.vue';
+import PieCharts from '@/components/charts/pie/index.vue';
 
 export default {
   components: {
+    LineCharts,
+    PieCharts,
+    PannelTabs,
     Pannel
   },
   data () {
     return {
+      tabIndex: '1'
     };
   },
   created () {
@@ -13,5 +20,9 @@ export default {
   mounted () {
   },
   methods: {
+    tabChange (info) {
+      console.log(info);
+      this.tabIndex = info.id
+    }
   }
 };
diff --git a/src/views/capital/comps/left/middle/1/index.scss b/src/views/capital/comps/left/middle/1/index.scss
index e69de29..938adcd 100644
--- a/src/views/capital/comps/left/middle/1/index.scss
+++ b/src/views/capital/comps/left/middle/1/index.scss
@@ -0,0 +1,17 @@
+.full {
+  display: flex;
+  flex-direction: column;
+
+  .top {
+    height: 50px !important;
+    width: 100%;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end;
+  }
+
+  .buttom {
+    flex: 1;
+    width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/src/views/capital/comps/right/bottom/1/index.html b/src/views/capital/comps/right/bottom/1/index.html
index f7922b7..95bb6de 100644
--- a/src/views/capital/comps/right/bottom/1/index.html
+++ b/src/views/capital/comps/right/bottom/1/index.html
@@ -1,3 +1,3 @@
 <Pannel title="资金支出排名" height="340">
-  
+  <ScrollTable></ScrollTable>
 </Pannel>
\ No newline at end of file
diff --git a/src/views/capital/comps/right/bottom/1/index.js b/src/views/capital/comps/right/bottom/1/index.js
index d3863a7..bcaba7d 100644
--- a/src/views/capital/comps/right/bottom/1/index.js
+++ b/src/views/capital/comps/right/bottom/1/index.js
@@ -1,7 +1,9 @@
 import Pannel from '@/components/pannel/index.vue';
+import ScrollTable from '@/components/scroll-table/index.vue';
 
 export default {
   components: {
+    ScrollTable,
     Pannel
   },
   data () {
diff --git a/src/views/capital/comps/right/middle/1/index.html b/src/views/capital/comps/right/middle/1/index.html
index f461965..2063689 100644
--- a/src/views/capital/comps/right/middle/1/index.html
+++ b/src/views/capital/comps/right/middle/1/index.html
@@ -1,3 +1,3 @@
 <Pannel title="资金收入排名" height="340">
-  
+  <ScrollTable></ScrollTable>
 </Pannel>
\ No newline at end of file
diff --git a/src/views/capital/comps/right/middle/1/index.js b/src/views/capital/comps/right/middle/1/index.js
index d3863a7..bcaba7d 100644
--- a/src/views/capital/comps/right/middle/1/index.js
+++ b/src/views/capital/comps/right/middle/1/index.js
@@ -1,7 +1,9 @@
 import Pannel from '@/components/pannel/index.vue';
+import ScrollTable from '@/components/scroll-table/index.vue';
 
 export default {
   components: {
+    ScrollTable,
     Pannel
   },
   data () {
diff --git a/src/views/capital/comps/right/top/1/1.png b/src/views/capital/comps/right/top/1/1.png
new file mode 100644
index 0000000000000000000000000000000000000000..bf8ed4a435ada2d7529b7e8d4de98c616e317cd6
GIT binary patch
literal 2934
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

literal 0
HcmV?d00001

diff --git a/src/views/capital/comps/right/top/1/2.png b/src/views/capital/comps/right/top/1/2.png
new file mode 100644
index 0000000000000000000000000000000000000000..b86d43c03afe6ae85c876584ac93668f7ec2c27c
GIT binary patch
literal 2890
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

literal 0
HcmV?d00001

diff --git a/src/views/capital/comps/right/top/1/3.png b/src/views/capital/comps/right/top/1/3.png
new file mode 100644
index 0000000000000000000000000000000000000000..1a99eb80230b53694db4051ff33835bc98d94da3
GIT binary patch
literal 2848
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

literal 0
HcmV?d00001

diff --git a/src/views/capital/comps/right/top/1/data.js b/src/views/capital/comps/right/top/1/data.js
new file mode 100644
index 0000000..408b061
--- /dev/null
+++ b/src/views/capital/comps/right/top/1/data.js
@@ -0,0 +1,26 @@
+export default [
+  [
+    {
+      name: '总资产（万元）',
+      icon: require('./1.png'),
+      value: '8000'
+    },
+    {
+      name: '总负债（万元）',
+      icon: require('./2.png'),
+      value: '257'
+    }
+  ],
+  [
+    {
+      name: '总收入（万元）',
+      icon: require('./3.png'),
+      value: '1460'
+    },
+    {
+      name: '总支出（万元）',
+      icon: require('./2.png'),
+      value: '1011'
+    }
+  ]
+]
\ No newline at end of file
diff --git a/src/views/capital/comps/right/top/1/index.html b/src/views/capital/comps/right/top/1/index.html
index 3237490..558d141 100644
--- a/src/views/capital/comps/right/top/1/index.html
+++ b/src/views/capital/comps/right/top/1/index.html
@@ -1,3 +1,9 @@
 <Pannel title="资产负债分析" height="232">
-  
+  <table>
+    <tr v-for="line in data">
+      <td v-for="item in line">
+        <Block :data="item"></Block>
+      </td>
+    </tr>
+  </table>
 </Pannel>
\ No newline at end of file
diff --git a/src/views/capital/comps/right/top/1/index.js b/src/views/capital/comps/right/top/1/index.js
index d3863a7..dd153d1 100644
--- a/src/views/capital/comps/right/top/1/index.js
+++ b/src/views/capital/comps/right/top/1/index.js
@@ -1,17 +1,14 @@
 import Pannel from '@/components/pannel/index.vue';
-
+import Block from '@/components/block/index.vue';
+import data from './data.js';
 export default {
   components: {
+    Block,
     Pannel
   },
   data () {
     return {
+      data
     };
-  },
-  created () {
-  },
-  mounted () {
-  },
-  methods: {
   }
 };
diff --git a/src/views/capital/comps/right/top/1/index.scss b/src/views/capital/comps/right/top/1/index.scss
index e69de29..f157533 100644
--- a/src/views/capital/comps/right/top/1/index.scss
+++ b/src/views/capital/comps/right/top/1/index.scss
@@ -0,0 +1,12 @@
+table {
+  width: 100%;
+  height: 100%;
+
+  tr {
+    width: 100%;
+
+    td {
+      width: 50%;
+    }
+  }
+}
\ No newline at end of file