滚动图标封装

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": {

src/components/block/index.scss

@@ -7,7 +7,7 @@
 
   .icon {
     width: 80px;
-    height: 90px;
+    height: 100px;
   }
 
   .right {

src/components/charts/line/index.html

@@ -0,0 +1 @@
+<div :id="id" class="chart"></div>

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();
+
+    }
+  }
+};

src/components/charts/line/index.scss

@@ -0,0 +1,6 @@
+.chart {
+  overflow: visible;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}

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>

src/components/charts/pie/index.html

@@ -0,0 +1 @@
+<div :id="id" class="chart"></div>

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();
+
+    }
+  }
+};

src/components/charts/pie/index.scss

@@ -0,0 +1,6 @@
+.chart {
+  overflow: visible;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}

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>

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>

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)
+    }
+  }
+};

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;
+}

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>

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;

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
+  }
+];

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>

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: {
+  }
+};

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;
+}

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>

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>

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
+    }
   }
 };

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%;
+  }
+}

src/views/capital/comps/right/bottom/1/index.html

@@ -1,3 +1,3 @@
 <Pannel title="资金支出排名" height="340">
-  
+  <ScrollTable></ScrollTable>
 </Pannel>

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 () {

src/views/capital/comps/right/middle/1/index.html

@@ -1,3 +1,3 @@
 <Pannel title="资金收入排名" height="340">
-  
+  <ScrollTable></ScrollTable>
 </Pannel>

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 () {

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'
+    }
+  ]
+]

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>

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: {
   }
 };

src/views/capital/comps/right/top/1/index.scss

@@ -0,0 +1,12 @@
+table {
+  width: 100%;
+  height: 100%;
+
+  tr {
+    width: 100%;
+
+    td {
+      width: 50%;
+    }
+  }
+}