Explorar o código

投资首页完成

liyongyong hai 1 ano
pai
achega
53fdd17994

+ 20 - 38
investment/investHome.html

@@ -15,6 +15,8 @@
     <script src="./libs/element-ui@2.15.9.js"></script>
     <script src="./libs/axios.min.js"></script>
     <script src="./js/request.js"></script>
+    <script src="./libs/vue-seamless-scroll.min.js"></script>
+    <script src="./libs/echarts-tooltip-carousel.js"></script>
   </head>
   <body>
     <div id="app">
@@ -50,7 +52,7 @@
                         <i class="el-icon-more"></i>
                       </p>
                       <p>
-                        <i><span class="num">1324.08</span>亿</i>
+                        <i><span class="num">{{numFormat(1324.08)}}</span>亿</i>
                         <!-- <span class="change"><img src="./images/down.png" /> 12.1%</span> -->
                       </p>
                     </div>
@@ -60,7 +62,7 @@
                         <i class="el-icon-more"></i>
                       </p>
                       <p>
-                        <i><span class="num">442</span>个</i>
+                        <i><span class="num">{{numFormat(442)}}</span>个</i>
                         <!-- <span class="change"><img src="./images/down.png" /> 12.1%</span> -->
                       </p>
                     </div>
@@ -70,7 +72,7 @@
                         <i class="el-icon-more"></i>
                       </p>
                       <p>
-                        <i><span class="num">1169.91</span>亿</i>
+                        <i><span class="num">{{numFormat(1169.91)}}</span>亿</i>
                         <!-- <span class="change up"><img src="./images/up.png" /> 12.1%</span> -->
                       </p>
                     </div>
@@ -80,7 +82,7 @@
                         <i class="el-icon-more"></i>
                       </p>
                       <p>
-                        <i><span class="num">154.17</span>亿</i>
+                        <i><span class="num">{{numFormat(154.17)}}</span>亿</i>
                         <!-- <span class="change"><img src="./images/down.png" /> 12.1%</span> -->
                       </p>
                     </div>
@@ -169,40 +171,20 @@
                 <div class="panel-title">
                   <span class="text">投资额度分析</span>
                 </div>
-                <ul class="list content">
-                  <li class="list-item">
-                    <i>NO.1</i>
-                    <div class="flex1">
-                      <p>山西焦煤</p>
-                      <el-progress percentage="80" stroke-width="10" :show-text="false"></el-progress>
-                    </div>
-                    <span class="value">234亿</span>
-                  </li>
-                  <li class="list-item">
-                    <i>NO.2</i>
-                    <div class="flex1">
-                      <p>晋能控股</p>
-                      <el-progress percentage="70" stroke-width="10" :show-text="false"></el-progress>
-                    </div>
-                    <span class="value">234亿</span>
-                  </li>
-                  <li class="list-item">
-                    <i>NO.3</i>
-                    <div class="flex1">
-                      <p>华阳新材</p>
-                      <el-progress percentage="60" stroke-width="10" :show-text="false"></el-progress>
-                    </div>
-                    <span class="value">234亿</span>
-                  </li>
-                  <li class="list-item">
-                    <i>NO.4</i>
-                    <div class="flex1">
-                      <p>陆港国际</p>
-                      <el-progress percentage="50" stroke-width="10" :show-text="false"></el-progress>
-                    </div>
-                    <span class="value">234亿</span>
-                  </li>
-                </ul>
+                <div class="content">
+                  <vue-seamless-scroll :data="amountList" :class-option="classOption" class="warp">
+                    <ul class="list">
+                      <li class="list-item" v-for="(item,index) in amountList" ::key="index">
+                        <i>NO.{{index+1}}</i>
+                        <div class="flex1">
+                          <p>{{item.name}}</p>
+                          <el-progress :percentage="item.value / amountTotal * 100" stroke-width="10" :show-text="false"></el-progress>
+                        </div>
+                        <span class="value">{{item.value}}亿</span>
+                      </li>
+                    </ul>
+                  </vue-seamless-scroll>
+                </div>
               </div>
             </dv-border-box-8>
             <dv-border-box-8 :dur="12"

+ 72 - 4
investment/js/investHome.js

@@ -49,9 +49,46 @@ let app = new Vue({
         { name: '水控集团' },
         { name: '太重集团' },
       ],
+      amountList: [
+        {
+          name: '山西焦煤',
+          value: '283.42'
+        },
+        {
+          name: '晋能控股',
+          value: '622.15'
+        },
+        {
+          name: '华阳新材',
+          value: '251.91'
+        },
+        {
+          name: '潞安化工',
+          value: '163.19'
+        },
+        {
+          name: '华新燃气',
+          value: '46.44'
+        },
+        {
+          name: '华远陆港',
+          value: '32.07'
+        },
+        {
+          name: '汾酒集团',
+          value: '49.99'
+        },
+      ],
+      amountTotal: 0,
+      classOption: {
+        step: 0.5
+      }
     }
   },
   created () {
+    this.amountList.map(item=> {
+      this.amountTotal += Number(item.value)
+    })
     this.time = formatDate()
     this.timer = setInterval(() => {
       this.time = formatDate()
@@ -70,6 +107,25 @@ let app = new Vue({
     this.initChinaChart()
   },
   methods: {
+    numFormat (value) {
+      if (!value) return '0'
+      var intPart = Number(value).toFixed(0) // 获取整数部分
+      var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
+      var floatPart = '.00' // 预定义小数部分
+      var value2Array = value.toString().split('.')
+      // =2表示数据有小数位
+      if (value2Array.length === 2) {
+        floatPart = value2Array[1].toString() // 拿到小数部分
+        if (floatPart.length === 1) {
+          // 补0
+          return intPartFormat + '.' + floatPart + '0'
+        } else {
+          return intPartFormat + '.' + floatPart
+        }
+      } else {
+        return intPartFormat
+      }
+    },
     convertData (data) {
       var res = []
       for (var i = 0; i < data.length; i++) {
@@ -331,8 +387,7 @@ let app = new Vue({
       })
       // <p>当前阶段:<span>可论证阶段</span></p>
       // <p>时间节点:<span>2021.10-2022.10</span></p>
-
-      myChart.setOption({
+      let option = {
         tooltip: {
           padding: 15,
           enterable: true,
@@ -429,7 +484,7 @@ let app = new Vue({
             type: 'map',
             map: this.mapName,
             geoIndex: 0,
-            aspectScale: 0.75, //长宽比
+            aspectScale: 1.5, //长宽比
             showLegendSymbol: true, // 存在legend时显示
             label: {
               normal: {
@@ -519,7 +574,8 @@ let app = new Vue({
             data: moveLine.normal,
           },
         ],
-      })
+      }
+      myChart.setOption(option)
     },
     initChartL1 () {
       let myChart = echarts.init(this.$refs['echartL1'])
@@ -558,6 +614,10 @@ let app = new Vue({
         ],
       }
       myChart.setOption(option)
+      tools.loopShowTooltip(myChart, option, {
+        nterval: 2000,
+        loopSeries: true,
+      })
     },
     initChartL2 () {
       let myChart = echarts.init(this.$refs['echartL2'])
@@ -730,6 +790,10 @@ let app = new Vue({
         ],
       }
       myChart.setOption(option)
+      tools.loopShowTooltip(myChart, option, {
+        nterval: 2000,
+        loopSeries: true,
+      })
     },
     initChartR1 () {
       let myChart = echarts.init(this.$refs['echartR1'])
@@ -857,6 +921,10 @@ let app = new Vue({
         ],
       }
       myChart.setOption(option)
+      tools.loopShowTooltip(myChart, option, {
+        nterval: 2000,
+        loopSeries: true,
+      })
     },
   },
 })

A diferenza do arquivo foi suprimida porque é demasiado grande
+ 0 - 0
investment/libs/vue-seamless-scroll.min.js


+ 4 - 0
investment/styles/investHome.css

@@ -415,3 +415,7 @@ a {
   font-weight: 600 !important;
   color: #2ABBFF;
 }
+.warp {
+  height: 190px;
+  overflow: hidden;
+}

Algúns arquivos non se mostraron porque demasiados arquivos cambiaron neste cambio