init

2026-01-05 15:07:49 +08:00
parent 4ad393a9a1
commit 3bb5419386
138 changed files with 118289 additions and 0 deletions
--- a/src/views/indexs/right-bottom.vue
+++ b/src/views/indexs/right-bottom.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="table-container">
+    <table>
+      <thead>
+        <tr>
+          <th>交易所</th>
+          <th>项目</th>
+          <th>价格 (RMB)</th>
+          <th>地区</th>
+        </tr>
+      </thead>
+    </table>
+    <div class="scroll-wrapper">
+      <vue-seamless-scroll :data="tableData" :class-option="scrollOptions" class="scroll-container">
+        <table>
+          <tbody>
+            <tr v-for="(item, index) in tableData" :key="index">
+              <td :style="{ color: item.exchangeColor }">{{ item.name }}</td>
+              <td>{{ item.project }}</td>
+              <td :style="{ color: item.priceColor }">{{ item.price }}</td>
+              <td :style="{ color: item.regionColor }">{{ item.area }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </vue-seamless-scroll>
+    </div>
+  </div>
+</template>
+
+<script>
+import vueSeamlessScroll from "vue-seamless-scroll";
+import { currentGET } from 'api/modules'
+export default {
+  components: { vueSeamlessScroll },
+  data() {
+    return {
+      scrollOptions: {
+        step: 0.3, // 滚动速度
+        limitMoveNum: 2, // 限制单步滚动的条数
+        hoverStop: true, // 鼠标悬停是否暂停
+        direction: 1, // 方向（1：向上滚动）
+      },
+      tableData: [
+        // { exchange: "湖北碳排放权交易中心", project: "CER", price: "90", region: "中国-湖北", exchangeColor: "#00ffcc", priceColor: "#ffffff", regionColor: "#ffffff" },
+        // { exchange: "欧洲碳排放权交易体系", project: "EUA", price: "90", region: "欧盟", exchangeColor: "#00ffcc", priceColor: "#00ffcc", regionColor: "#ffffff" },
+        // { exchange: "洲际交易所", project: "CERs", price: "89", region: "美国", exchangeColor: "#00ffcc", priceColor: "#00ffcc", regionColor: "#00ffcc" },
+        // { exchange: "加州碳市场", project: "CER", price: "88", region: "美国-加州", exchangeColor: "#ffcc00", priceColor: "#ffcc00", regionColor: "#ffcc00" },
+        // { exchange: "英国碳市场", project: "CER", price: "87", region: "英国", exchangeColor: "#ffcc00", priceColor: "#ffcc00", regionColor: "#ffffff" },
+        // { exchange: "热田碳排放交易所", project: "CER", price: "86", region: "韩国", exchangeColor: "#00ffcc", priceColor: "#ffffff", regionColor: "#ffffff" },
+        // { exchange: "湖北碳排放权交易中心", project: "CER", price: "90", region: "中国-湖北", exchangeColor: "#00ffcc", priceColor: "#ffffff", regionColor: "#ffffff" },
+        // { exchange: "欧洲碳排放权交易体系", project: "EUA", price: "90", region: "欧盟", exchangeColor: "#00ffcc", priceColor: "#00ffcc", regionColor: "#ffffff" },
+        // { exchange: "洲际交易所", project: "CERs", price: "89", region: "美国", exchangeColor: "#00ffcc", priceColor: "#00ffcc", regionColor: "#00ffcc" },
+        // { exchange: "加州碳市场", project: "CER", price: "88", region: "美国-加州", exchangeColor: "#ffcc00", priceColor: "#ffcc00", regionColor: "#ffcc00" },
+        // { exchange: "英国碳市场", project: "CER", price: "87", region: "英国", exchangeColor: "#ffcc00", priceColor: "#ffcc00", regionColor: "#ffffff" },
+        // { exchange: "热田碳排放交易所", project: "CER", price: "86", region: "韩国", exchangeColor: "#00ffcc", priceColor: "#ffffff", regionColor: "#ffffff" },
+      ],
+            
+    };
+  },
+  mounted() {
+    this.getExchangeData(); 
+  },
+  methods: {    
+    getExchangeData() {
+      currentGET("big4").then(res => {
+
+        console.log("交易所数据：");
+        //console.log(this.tableData1);
+        console.log(res.data);
+        this.tableData = res.data;
+        this.tableData.forEach((item, index) => {
+
+          if(index % 2 !== 0)
+          {   
+                   
+            item.exchangeColor = "#1976d2";
+            item.priceColor = "#333333";
+            item.regionColor = "#333333";
+            this.$set(this.tableData, index, item); 
+          }
+          else         
+          {
+            //console.log("偶数index: " + index);
+            item.exchangeColor = "#ff9800";
+            item.priceColor = "#ff9800";
+            item.regionColor = "#ff9800";
+            this.$set(this.tableData, index, item);        
+            //this.$set(this.tableData, index, modifiedItem);
+          }
+        });
+
+      });
+//      console.log("转换后交易所数据：");
+//      console.log(this.tableData);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.table-container {
+  width: 100%;
+  border-radius: 5px;
+  overflow: hidden;
+  padding-top: 10px; /* 添加顶部内边距 */
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+}
+
+th, td {
+  padding: 12px;
+  color: #333333;
+  font-size: 14px;
+  width: 25%;
+}
+
+thead {
+  background: #f5f7fa;
+  padding: 10%;
+}
+
+.scroll-wrapper {
+  height: 250px; /* 适配大屏，数据较多可增加高度 */
+  overflow: hidden;
+}
+
+.scroll-container table {
+  width: 100%;
+}
+
+tr {
+  border-bottom: 1px solid #e0e0e0;
+}
+
+tr:nth-child(even) {
+  background: rgba(25, 118, 210, 0.05);
+}
+</style>