feat: 累计销量客户/吨

config/webpack.common.js

@@ -81,6 +81,21 @@ module.exports = {
         ],
       },
       {
+        test: /* 匹配文件 */ /\.gif/,
+        include: [path.resolve(__dirname, "../node_modules")],
+        use: /* 使用loader */[{
+          loader: "url-loader",
+          options: /* 加载器相关的配置项 */ {
+            name: 'static/[name].[ext]',
+            limit: /* <=limit的图片转换成base64 */ 8196,
+            mimetype: "gif",
+            fallback: 'file-loader',
+            publicPath: '../../' //采用根路径
+          },
+        },
+        ],
+      },
+      {
         test: /* 匹配文件 */ /\.svg/,
         include: [path.resolve(__dirname, "../src")],
         use: /* 使用loader */[{

package.json

@@ -56,12 +56,14 @@
     "echarts-wordcloud": "2.0.0",
     "es6-symbol": "^3.1.3",
     "eslint": "^7.25.0",
+    "slick-carousel": "^1.8.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "^7.23.2",
     "express-mock-server": "^3.2.0",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^6.2.0",
     "happypack": "^5.0.1",
+    "react-slick": "^0.29.0",
     "html-webpack-plugin": "^4.2.2",
     "http-server": "^0.12.3",
     "husky": "^6.0.0",

src/App/index.less

@@ -1101,6 +1101,7 @@ li[role="menuitem"] {
 
           .item_c {
             width: 90px;
+            //溢出隐藏
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;

src/assets/css/styleTemplate.less

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm 茶百道主题样式
  * @Date: 2022-10-27 10:56:37 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2023-11-08 17:15:55
+ * @Last Modified time: 2023-11-13 14:58:13
  */
 
 @import url("../../themes/themes.less");
@@ -1145,7 +1145,7 @@
   .cbRightBottomView {
     flex-wrap: wrap;
     position: relative;
-
+    
     .right_b_tip2 {
       width: 46%;
       display: block;
@@ -1166,7 +1166,13 @@
       text-align: right;
     }
   }
-
+.slider_item_box{
+  justify-content: left;
+  .slick-slider{
+    width: 90%;
+    color: #fff;
+  }
+}
   .testDiv {
     width: 4em;
     display: flex;

src/components/SimpleSlider/index.js

@@ -0,0 +1,98 @@
+/*
+ * @Author: dayan_hjm 轮播图滑动组件
+    settings：{
+        title:true,//是否开启移上title展示
+        clickUrl:true,//是否开启点击转跳功能
+        type 1=茶百道  2=雅居乐
+        dots: true,//是否显示小圆点索引
+        autoplay: true,//是否自动播放
+        infinite: true,//是否无限循环
+        autoplaySpeed: 2000,//自动播放的时间
+        fade: true,//是否采用淡入淡出的效果
+        slidesToShow: 2,一行显示多少个
+        slidesPerRow:1,//行显示多少个
+          slidesToScroll: 5 //每次滚动多少个元素
+    }
+    //dataArr 轮播的数据
+ * @Date: 2023-03-24 15:32:00 
+ * @Last Modified by: dayan_hjm
+ * @Last Modified time: 2023-08-17 14:19:43
+ */
+import utils from "@utils/index";
+import { crossMenuClick } from "@utils/util";
+import $store from "@store/";
+import React, { useState, useEffect, Component } from "react";
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css"; 
+import "slick-carousel/slick/slick-theme.css";
+// import "./slick.css";
+// import "./slick-theme.css";
+import { Tooltip } from "antd";
+
+function SimpleSlider(props) {
+    const settings = props.settings
+    const data_ = props.dataArr && props.dataArr instanceof Array ? props.dataArr : [
+        // {
+        //     backGroupPicUrl:"http://14.29.205.92:9081/static/bg_sChaBaiDao@2x.png"
+        // },
+        // {
+        //     backGroupPicUrl:"http://14.29.205.92:9081/static/bg2.png"
+        // },
+    ];
+    return (
+        <div className='swiper-content'>
+            <Slider {...settings} className="swiper-container">
+                {
+                    settings.type == 1 ? data_.map(url => {
+                        return <div className="swiper-div" style={{ cursor: settings.clickUrl && url.redirectUrl ? "pointer" : "auto" }} onClick={() => {
+                            // url.redirectUrl = "http://localhost:9003/transfer.html#/home/menu"
+                            if (!settings.clickUrl) { return }
+                            if (url.redirectUrl) {
+                                let newUrl = url.redirectUrl.replace(window.location.origin + window.location.pathname, "");
+                                newUrl = newUrl.replace("?ticket=&ssoEmpId=", "");
+                                newUrl = newUrl.replace("#", "");
+                                props.sliceClick(newUrl);
+                            }
+                        }}>
+                            <Tooltip title={settings.title ? url.alias : ""} placement="right">
+                            <img src={url.backGroupPicUrl || require("@assets/imgs/login/yunXiBg.png").default} style={{ width: "90%" }} />
+                            </Tooltip>
+                        </div> 
+                    }) : data_.map((card,index) => {
+                        let activeTree = utils.findNodeTree([...$store.sysMenu.norList, ...$store.sysMenu.menuList], card.positive, "resourceUrl");
+                        if(activeTree){card.has_positive = card.positive}else{card.has_positive = ''};
+                        console.log('dy-------',card.has_positive)
+                        return (
+                            <div className={`nor_card ${card.has_positive ? 'cur' : ''}` } onClick={()=>{
+                                if(!card.has_positive){return}
+                                let activeTree = utils.findNodeTree([...$store.sysMenu.norList, ...$store.sysMenu.menuList], card.has_positive, "resourceUrl");
+                                if(activeTree){
+                                    let activeTreeF = utils.findNodeTree([...$store.sysMenu.norList, ...$store.sysMenu.menuList], activeTree.parentId, "resourceId");
+                                    crossMenuClick(activeTreeF.resourceUrl, activeTree.resourceUrl, ((res) => {
+                                        props.history.push(res);
+                                      }))
+                                }
+                            }}>
+                                {/* <Tooltipplacement="right" defaultVisible="true"> */}
+                                    <img src={card.moveDownPicUrl || require(`@assets/imgs/home/agileHome${index + 1}.png`).default} width="95%" className="showImg" />
+                                    <img
+                                        className="tips_img hideimg"
+                                        src={card.has_positive ?card.moveDownPicUrl :(card.moveUpPicUrl || require(`@assets/imgs/home/agileHome6.png`).default)}
+                                        width="95%"
+                                    />
+                                    {
+                                        settings.title && card.alias ? <span class="tipsBox">{card.alias}</span> : null
+                                    }
+                                {/* </Tooltip> */}
+                            </div>
+                        )
+                    })
+                }
+            </Slider>
+            <img src={require("@assets/imgs/login/bg1.png").default} style={{ display: "none" }} />
+            <img src={require("@assets/imgs/login/bg2.png").default} style={{ display: "none" }} />
+            <img src={require("@assets/imgs/login/bg3.png").default} style={{ display: "none" }} />
+        </div>
+    )
+}
+export default SimpleSlider;

src/components/SimpleSlider/slick-theme.css

@@ -0,0 +1,165 @@
+@charset 'UTF-8';
+
+.slick-dots,
+.slick-next,
+.slick-prev {
+    position: absolute;
+    display: block;
+    padding: 0
+}
+
+.slick-dots li button:before,
+.slick-next:before,
+.slick-prev:before {
+    font-family: slick;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale
+}
+
+.slick-loading .slick-list {
+    background: yellow
+}
+
+.slick-next,
+.slick-prev {
+    font-size: 0;
+    line-height: 0;
+    top: 50%;
+    width: 20px;
+    height: 20px;
+    -webkit-transform: translate(0, -50%);
+    -ms-transform: translate(0, -50%);
+    transform: translate(0, -50%);
+    cursor: pointer;
+    color: transparent;
+    border: none;
+    outline: 0;
+    background: 0 0
+}
+
+.slick-next:focus,
+.slick-next:hover,
+.slick-prev:focus,
+.slick-prev:hover {
+    color: transparent;
+    outline: 0;
+    background: 0 0
+}
+
+.slick-next:focus:before,
+.slick-next:hover:before,
+.slick-prev:focus:before,
+.slick-prev:hover:before {
+    opacity: 1
+}
+
+.slick-next.slick-disabled:before,
+.slick-prev.slick-disabled:before {
+    opacity: .25
+}
+
+.slick-next:before,
+.slick-prev:before {
+    font-size: 20px;
+    line-height: 1;
+    opacity: .75;
+    color: #fff
+}
+
+.slick-prev {
+    left: -25px
+}
+
+[dir=rtl] .slick-prev {
+    right: -25px;
+    left: auto
+}
+
+.slick-prev:before {
+    content: '←'
+}
+
+.slick-next:before,
+[dir=rtl] .slick-prev:before {
+    content: '→'
+}
+
+.slick-next {
+    right: -25px
+}
+
+[dir=rtl] .slick-next {
+    right: auto;
+    left: -25px
+}
+
+[dir=rtl] .slick-next:before {
+    content: '←'
+}
+
+.slick-dotted.slick-slider {
+    margin-bottom: 30px
+}
+
+.slick-dots {
+    bottom:-18px;
+    width: 100%;
+    margin: 0;
+    list-style: none;
+    text-align: center
+}
+
+.slick-dots li {
+    position: relative;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    margin: 0 5px;
+    padding: 0;
+    cursor: pointer
+}
+
+.slick-dots li button {
+    font-size: 0;
+    line-height: 0;
+    display: block;
+    width: 20px;
+    height: 20px;
+    padding: 5px;
+    cursor: pointer;
+    color: transparent;
+    border: 0;
+    outline: 0;
+    background: 0 0
+}
+
+.slick-dots li button:focus,
+.slick-dots li button:hover {
+    outline: 0
+}
+
+.slick-dots li button:focus:before,
+.slick-dots li button:hover:before {
+    opacity: 1
+}
+
+.slick-dots li button:before {
+    font-size: 13px;
+    line-height: 20px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 20px;
+    height: 20px;
+    content: '•';
+    text-align: center;
+    opacity: .25;
+    color: #000
+}
+
+.slick-dots li.slick-active button:before {
+    opacity: .75;
+    color: #000
+}
+
+/*# sourceMappingURL=slick-theme.min.css.map */

src/components/SimpleSlider/slick.css

@@ -0,0 +1,112 @@
+.swiper-content{
+    width:100%;
+    height: calc(100% - 56px);
+}
+.swiper-div{
+    height: 100%;
+    overflow: hidden; 
+}
+.slick-list,
+.slick-slider,
+.slick-track {
+    position: relative;
+    display: block
+}
+
+.slick-loading .slick-slide,
+.slick-loading .slick-track {
+    visibility: hidden
+}
+
+.slick-slider {
+    height: 100%;
+    box-sizing: border-box;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-touch-callout: none;
+    -khtml-user-select: none;
+    -ms-touch-action: pan-y;
+    touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent
+}
+
+.slick-list {
+    height: 100%;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+}
+
+.slick-list:focus {
+    outline: 0
+}
+
+.slick-list.dragging {
+    cursor: pointer;
+    cursor: hand
+}
+
+.slick-slider .slick-list,
+.slick-slider .slick-track {
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    -o-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0)
+}
+
+.slick-track {
+    top: 0;
+    left: 0
+}
+
+.slick-track:after,
+.slick-track:before {
+    display: table;
+    content: ''
+}
+
+.slick-track:after {
+    clear: both
+}
+
+.slick-slide {
+    display: none;
+    float: left;
+    height: 100%;
+    min-height: 1px
+}
+
+[dir=rtl] .slick-slide {
+    float: right
+}
+
+.slick-slide img {
+    display: block
+}
+
+.slick-slide.slick-loading img {
+    display: none
+}
+
+.slick-slide.dragging img {
+    pointer-events: none
+}
+
+.slick-initialized .slick-slide {
+    display: block
+}
+
+.slick-vertical .slick-slide {
+    display: block;
+    height: auto;
+    border: 1px solid transparent
+}
+
+.slick-arrow.slick-hidden {
+    display: none
+}
+
+/*# sourceMappingURL=slick.min.css.map */

src/pages/gvc/component/rightBottomView.jsx

@@ -1,16 +1,18 @@
 /*
- * @Author: dayan_hjm 碳排放
+ * @Author: dayan_hjm 累计销量客户
  * @Date: 2023-10-23 09:32:12 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2023-11-08 16:05:47
+ * @Last Modified time: 2023-11-13 16:14:33
  */
 
-
 import React, { useState, useEffect, Component } from "react";
 import styles from "../style.less";
 import { useHistory, useLocation, withRouter } from "react-router-dom";
 import mod from '../mod';
-
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import { Progress } from 'antd';
 import { getArrMax } from "@utils/util";
 import {
   dataengineCenterOneservice,
@@ -25,283 +27,152 @@ class RightBottomView extends Component {
     super(props, context);
     this.store = mod;
     this.state = {
-      missionsTotal_arr:[],
-      year:[],
-      missionsIntensity_arr:[],
-      max1:0,
-      max2:0,
-    };
-  }
-
-  componentDidMount() {
-    this.getUrl()
-  }
-
-  async getUrl(){
-    await dataengineCenterOneservice().then(({ data=[], resultCode }) => {
-      if (+resultCode === 0) {
-        let year = [],missionsIntensity_arr = [],missionsTotal_arr = [],max1=[],max2=[];
-        data.map((x,i)=>{
-          year.unshift(x.byear)
-          missionsIntensity_arr.unshift(x.missionsIntensity)
-          missionsTotal_arr.unshift(x.missionsTotal)
-        });
-        const max_1 = getArrMax(missionsIntensity_arr);
-        const max_2 = getArrMax(missionsTotal_arr);
-        for (let index = 0; index < data.length; index++) {
-          max1.unshift(max_1/0.8)
-          max2.unshift(max_2/0.8)
-        }
-        this.setState({year,missionsIntensity_arr,missionsTotal_arr,max1,max2});
-          this.setData();
-          this.setData2();    
-      }
-    });
-
-  }
-
-  setData() {
-    setTimeout(() => {
-      // 基于准备好的dom，初始化echarts实例
-      var myChart = echarts.init(document.getElementById('echarts8'));
-      var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3'];
-      var option = {
-
-        grid: {
-          left: '3%',
-          top: '15%',
-          right: '5%',
-          bottom: '0%',
-          containLabel: true
+      data_item: [
+        {
+          name: '很长的很长的很长的很长的很长的很长的很长的布置岛实业有限公司',
+          num: 666969988666969988666969988666969988,
+          percent:99.5
         },
-        xAxis: [{
-          show: false,
-        }],
-        yAxis: [{
-          axisTick: 'none',
-          axisLine: 'none',
-          axisLabel: {
-            padding:[0,22,0,0],
-            textStyle: {
-              color: '#69FFDE',
-              fontSize: '16',
-              fontWeight: 700,
-              fontFamily: 'DingTalkJinBuTi',
-            }
-          },
-          data: this.state.year
+        {
+          name: '布置岛实业有限公司',
+          num: 966,
+          percent:95.5
 
         },
         {
-          name: '单位：件',
-          nameGap: '50',
-          nameTextStyle: {
-            color: 'rgba(255,255,255,.6)',
-            fontSize: '16',
-          },
-          axisLine: {
-            lineStyle: {
-              color: 'rgba(0,0,0,0)'
-            }
-          },
-          data: [],
-        }],
-        legend: {
-          data: '碳排放强度',
-          // right: 'center',
-          // top: 0,
-          textStyle: {
-            color: "#fff",
-            fontSize: 12
-          },
-          itemWidth: 12,
-          itemHeight: 10,
+          name: '布置岛实业有限公司',
+          num: 666969988,
+          percent:85.5
         },
-        series: [{
-          name: '条',
-          type: 'bar',
-          yAxisIndex: 0,
-          data: this.state.missionsTotal_arr,
-          label: {
-            normal: {
-              show: true,
-              position: 'insideLeft',
-              formatter: function (param) {
-                return param.value;
-              },
-              textStyle: {
-                color: 'rgba(255,255,255,1)',
-                fontSize: '15',
-                padding:[5,5,0,5]
-              }
-            }
-          },
-          barWidth: 24,
-          itemStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-                { offset: 0, color: 'rgb(255 242 72)' },
-                { offset: 0.7, color: '#ffe06a99' },
-                { offset: 1, color: '#ffe06a99' },
-              ]),
-              barBorderRadius: 15,
-              borderColor: "rgb(255 242 72)",
-              borderWidth: 1
-
-            },
-          },
-          z: 2
-        }, {
-          name: '白框',
-          type: 'bar',
-          yAxisIndex: 1,
-          barGap: '-100%',
-          data: this.state.max2,
-          barWidth: 24,
-          itemStyle: {
-            normal: {
-              color: '#ffffff24',
-              barBorderRadius: 15,
-
-            }
-          },
-          z: 1
-        }]
-      };
-
+        {
+          name: '布置岛实业有限公司',
+          num: 666969988,
+          percent:59.5
 
-      // 使用刚指定的配置项和数据显示图表。
-      myChart.setOption(option);
-      window.addEventListener("resize", function () {
-        myChart.resize();
-      });
-    }, 3000)
-  }
+        },
+        {
+          name: '布置岛实业有限公司',
+          num: 666969988,
+          percent:48.5
 
-  setData2() {
-    setTimeout(() => {
-      // 基于准备好的dom，初始化echarts实例
-      var myChart = echarts.init(document.getElementById('echarts9'));
-      var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3'];
-      var option = {
-        grid: {
-          left: '0%',
-          top: '15%',
-          right: '5%',
-          bottom: '0%',
-          containLabel: true
         },
-        xAxis: [{
-          show: false,
-          inverse: true,
-        }],
-        yAxis: [{
-          axisTick: 'none',
-          axisLine: 'none',
-          offset: '15',
-          axisLine: {
-            onZero: false
-          },
-          axisLabel: {
-            textStyle: {
-              color: 'rgba(255,255,255,.6)',
-              fontSize: '0',
-            }
-          },
-          data: ['字段1', '字段2', '字段3']
+        {
+          name: '布置岛实业有限公司',
+          num: 36,
+          percent:6
 
         },
         {
-          name: '单位：件',
-          nameGap: '50',
-          nameTextStyle: {
-            color: 'rgba(255,255,255,.6)',
-            fontSize: '16',
-          },
-          axisLine: {
-            lineStyle: {
-              color: 'rgba(0,0,0,0)'
-            }
-          },
-          data: [],
-        }],
-        series: [{
-          name: '条',
-          type: 'bar',
-          yAxisIndex: 0,
-          data: this.state.missionsIntensity_arr,
-          animation:true,
-          animationDuration:3000,
-          smooth: true,
-          label: {
-            normal: {
-              show: true,
-              position: 'insideRight',
-              formatter: function (param) {
-                return param.value;
-              },
-              textStyle: {
-                color: 'rgba(255,255,255,1)',
-                fontSize: '15',
-                padding:[5,5,0,5]
-              }
-            }
-          },
-          barWidth: 23,
-          itemStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-                { offset: 1, color: '#69FFDE' },
-                { offset: 0.75, color: '#69FFDE' },
-                { offset: 0, color: 'rgb(83 211 183 / 15%)' },
-              ]),
-              barBorderRadius: 15,
-              borderColor: "#69FFDE",
-              borderWidth: 1
-            }
-          },
-          z: 2
-        }, {
-          name: '白框',
-          type: 'bar',
-          yAxisIndex: 1,
-          barGap: '-100%',
-          data: this.state.max1,
-          animation:true,
-          animationDuration:3000,
-          smooth: true,
-          barWidth: 23,
-          itemStyle: {
-            normal: {
-              color: '#ffffff24',
-              barBorderRadius: 15,
-            }
-          },
-          z: 1
-        }]
-      };
+          name: '布置岛实业有限公司',
+          num: 666969988,
+          percent:78
+        },
+        {
+          name: '布置岛实业有限公司',
+          num: 666969988,
+          percent:45
+        },
+        {
+          name: '布置岛实业有限公司',
+          num: 666969988,
+          percent:36
+        },
+        {
+          name: '布置岛实业有限公司',
+          num: 666969988,
+          percent:36
+        },
+        {
+          name: '布置岛实业有限公司',
+          num: 666969988,
+          percent:98
+        },
+        {
+          name: '布置岛实业有限公司',
+          num: 666969988,
+          percent:65
+        },
+        {
+          name: '布置岛实业有限公司',
+          num: 666969988,
+          percent:36
+        },
+      ],
+    };
+  }
 
+  componentDidMount() {
+  }
 
-      // 使用刚指定的配置项和数据显示图表。
-      myChart.setOption(option);
-      window.addEventListener("resize", function () {
-        myChart.resize();
-      });
+  async getUrl() {
+    // await dataengineCenterOneservice().then(({ data=[], resultCode }) => {
+    //   if (+resultCode === 0) {
+    //     let year = [],missionsIntensity_arr = [],missionsTotal_arr = [],max1=[],max2=[];
+    //     data.map((x,i)=>{
+    //       year.unshift(x.byear)
+    //       missionsIntensity_arr.unshift(x.missionsIntensity)
+    //       missionsTotal_arr.unshift(x.missionsTotal)
+    //     });
+    //     const max_1 = getArrMax(missionsIntensity_arr);
+    //     const max_2 = getArrMax(missionsTotal_arr);
+    //     for (let index = 0; index < data.length; index++) {
+    //       max1.unshift(max_1/0.8)
+    //       max2.unshift(max_2/0.8)
+    //     }
+    //     this.setState({year,missionsIntensity_arr,missionsTotal_arr,max1,max2});
+    //       this.setData();
+    //       this.setData2();    
+    //   }
+    // });
 
-    }, 3000)
   }
 
   render() {
-
+    const settings = {
+      dots: false,
+      arrows:false,
+      infinite: true,
+      autoplay: true,
+      autoplaySpeed: 2500,//自动播放的时间
+      // fade: true,//是否采用淡入淡出的效果  竖着的滚动方式不能添加此动效
+      slidesToShow: 8,
+      slidesToScroll: 1,
+      vertical: true,
+      verticalSwiping: true,
+      beforeChange: function (currentSlide, nextSlide) {
+        console.log("before change", currentSlide, nextSlide);
+      },
+      afterChange: function (currentSlide) {
+        console.log("after change", currentSlide);
+      }
+    };
+    const { data_item } = this.state;
     return (
-      <div className={["eacharView cbRightBottomView"]}>
-        <span className="right_b_tip1">碳排放强度</span>
-        <div id="echarts9"></div>
-        {/* <div className="fonts">
-
-        </div> */}
-        <span className="right_b_tip2">碳排放总量/万吨</span>
-        <div id="echarts8"></div>
+      <div className={["eacharView cbRightBottomView slider_item_box"]}>
+        <p className="title_">累计销量客户/吨</p>
+        <Slider {...settings}>
+          {
+            data_item.map((x, i) => {
+              return (
+                <div className="slider_box">
+                  <div className="slider_top">
+                    <p>{i + 1}.<span>{x.name}</span></p>
+                    <p className="p2">{x.num}</p>
+                  </div>
+                  <Progress
+                    strokeColor={{
+                      from: '#a98911cf',
+                      to: 'rgb(248,204,41,0.9)',
+                    }}
+                    percent={x.percent}
+                    status="active"
+                  />
+                </div>
+              )
+            })
+          }
+
+        </Slider>
       </div>
     )
   }

src/pages/gvc/style.less

@@ -78,7 +78,7 @@
                 justify-content: space-between;
                 margin-top: 0.5em;
                 font-weight: normal;
-                font-size: 0.8em;
+                font-size: 0.9em;
                 color: #CDF1FF;
                 padding: 0.8em 0.9em 0.2em;
                 background: linear-gradient(0deg, #ffffff26 0%, #ffffff00 100%);
@@ -94,6 +94,79 @@
             }
           }
         }
+
+        .rightContent {
+          width: 15%;
+          position: absolute;
+          right: 0;
+          bottom: 9%;
+          z-index: 9;
+          height: 46%;
+
+          .title_ {
+            text-align: left;
+            color: #fff;
+            width: 90%;
+            height: 2em;
+            border-radius: 0 8px 0 0;
+            opacity: 1;
+            background: linear-gradient(45deg, #ffdf5800 0%, #ffdf584d 100%);
+            line-height: 2em;
+            color: #F1E9E0;
+            margin-bottom: 0.6em;
+          }
+
+          .slider_box {
+            padding: 0 0.5em;
+            box-sizing: border-box;
+          }
+
+          .slider_top {
+            width: 100%;
+            font-size: 0.9em;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            color: #d4d4d4;
+            font-weight: normal;
+
+            >p {
+              width: 59%;
+              display: flex;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+
+              >span {
+                display: inline-block;
+                width: 99%;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+            }
+
+            .p2 {
+              width: 30%;
+              display: inline-block;
+              text-align: right;
+            }
+          }
+
+          .ant-progress {
+            height: 10px;
+
+            .ant-progress-inner {
+              top: -5px;
+              background-color: #57575759;
+
+              .ant-progress-bg {
+                height: 5px !important;
+              }
+            }
+          }
+
+        }
       }
     }
   }

src/pages/gvc/view.jsx

@@ -288,9 +288,6 @@ class Gvc extends Component {
 
               <div class="bottomContent2 animate__animated animate__fadeInDown animate__slower  animate__delay-1s">
                 <div className="bottomContent bigDivPd">
-                  <Tooltip placement="bottom" title={' ● 近三年的碳排放强度、碳排放总量数据'}>
-                    <p className="topMsg_title">碳排放</p>
-                  </Tooltip>
                   <div className="topMsg_content">
                     <RightBottomView></RightBottomView>
                   </div>

yarn.lock

@@ -5662,6 +5662,11 @@ enhanced-resolve@^4.0.0, enhanced-resolve@^4.1.0, enhanced-resolve@^4.1.1, enhan
     memory-fs "^0.5.0"
     tapable "^1.0.0"
 
+enquire.js@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/enquire.js/-/enquire.js-2.1.6.tgz#3e8780c9b8b835084c3f60e166dbc3c2a3c89814"
+  integrity sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==
+
 enquirer@^2.3.5, enquirer@^2.3.6:
   version "2.3.6"
   resolved "https://registry.npmmirror.com/enquirer/-/enquirer-2.3.6.tgz"
@@ -12992,6 +12997,17 @@ react-simple-verify@^1.0.3, react-simple-verify@^1.0.9:
     webpack-manifest-plugin "^2.2.0"
     workbox-webpack-plugin "^4.3.1"
 
+react-slick@^0.29.0:
+  version "0.29.0"
+  resolved "https://registry.yarnpkg.com/react-slick/-/react-slick-0.29.0.tgz#0bed5ea42bf75a23d40c0259b828ed27627b51bb"
+  integrity sha512-TGdOKE+ZkJHHeC4aaoH85m8RnFyWqdqRfAGkhd6dirmATXMZWAxOpTLmw2Ll/jPTQ3eEG7ercFr/sbzdeYCJXA==
+  dependencies:
+    classnames "^2.2.5"
+    enquire.js "^2.1.6"
+    json2mq "^0.2.0"
+    lodash.debounce "^4.0.8"
+    resize-observer-polyfill "^1.5.0"
+
 react-sortable-hoc@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/react-sortable-hoc/-/react-sortable-hoc-2.0.0.tgz#f6780d8aa4b922a21f3e754af542f032677078b7"
@@ -14021,6 +14037,11 @@ slice-ansi@^4.0.0:
     astral-regex "^2.0.0"
     is-fullwidth-code-point "^3.0.0"
 
+slick-carousel@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/slick-carousel/-/slick-carousel-1.8.1.tgz#a4bfb29014887bb66ce528b90bd0cda262cc8f8d"
+  integrity sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.npmmirror.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz"