Home Explore Help
Sign In
kingdee_large_screen
/
pc_kingdee_large_screen
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

zhb

zhbyyy 2 years ago
parent
78087723ff
commit
7852588420
9 changed files with 465 additions and 146 deletions
Split View Show Diff Stats
  1. BIN
      investment/images/left-arrow.png
  2. BIN
      investment/images/page-bg2.png
  3. BIN
      investment/images/title-left2.png
  4. BIN
      investment/images/title-right2.png
  5. 100 47
      investment/investHome2.html
  6. 1 1
      investment/investHome2compound.html
  7. 16 16
      investment/js/investHome.js
  8. 269 57
      investment/js/investHome2.js
  9. 79 25
      investment/styles/investHome2.css

BIN
investment/images/left-arrow.png
View File


BIN
investment/images/page-bg2.png
View File


BIN
investment/images/title-left2.png
View File


BIN
investment/images/title-right2.png
View File


+ 100 - 47
investment/investHome2.html
View File 

@@ -18,69 +18,122 @@
 
   <script src="./js/request.js"></script>
 
   <script src="./libs/echarts-liquidfill.min.js"></script>
 
   <script src="./libs/echarts-tooltip-carousel.js"></script>
 
+  <!-- 轮播 -->
 
+  <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.css" />
 
+  <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
 
+  <script src="https://unpkg.com/swiper@8/swiper-bundle.js"></script>
 
+  <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
 
+  <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js.map"></script>
 
 </head>
 
 
 <body>
 
   <div id="app">
 
     <dv-full-screen-container>
 
       <header class="my-header">
 
-        <span>数智化投资管理驾驶舱</span>
 
+        <span>数智化投前管理驾驶舱</span>
 
         <span class="right">{{time}}</span>
 
       </header>
 
       <div class="main">
 
         <div class="left">
 
           <dv-border-box-8 :dur="10" style="flex: 1; margin-bottom: 10px;">
 
-            <div class="title">
 
-              <span class="text">投资额度分析</span>
 
-              <span class="tip-window">2023年</span>
 
-            </div>
 
-            <div class="content">
 
-              <div class="content-left" style="flex-wrap: wrap;">
 
-                <div class="topChange0">
 
-                  <div>山西焦煤</div>
 
-                  <img src="./images/foot-back.png" style="width:100%;height:auto" alt="">
 
-                </div>
 
-                <div class="topChange1">
 
-                  <div class="item2">
 
-                    <div class="item2-title" style="color: #15FFA2;">574.12<span>亿</span></div>
 
-                    <div class="item2-img">
 
-                      <img style="width: 100%; height: 100%;" src="./images/icon-4-home2.png" alt="">
 
-                    </div>
 
-                    <div class="item2-text">上一年度经营业绩</div>
 
-                  </div>
 
-                  <div class="item2">
 
-                    <div class="item2-title" style="color: #DD9CFF;">212.21<span>亿</span></div>
 
-                    <div class="item2-img">
 
-                      <img style="width: 100%; height: 100%;" src="./images/icon-5-home2.png" alt="">
 
-                    </div>
 
-                    <div class="item2-text">上一年度经营业绩</div>
 
-                  </div>
 
-                  <div class="item2">
 
-                    <div class="item2-title" style="color: #EBC805;">222.31<span>亿</span></div>
 
-                    <div class="item2-img">
 
-                      <img style="width: 100%; height: 100%;" src="./images/icon-6-home2.png" alt="">
 
-                    </div>
 
-                    <div class="item2-text">上一年度经营业绩</div>
 
-                  </div>
 
-                  <div class="item2">
 
-                    <div class="item2-title" style="color: #08E4FA;">523.32<span>亿</span></div>
 
-                    <div class="item2-img">
 
-                      <img style="width: 100%; height: 100%;" src="./images/icon-7-home2.png" alt="">
 
+            <div style="height:100%">
 
+              <div class="title">
 
+                <!-- <span class="title-left">山西焦煤</span> -->
 
+                <span class="text">投资额度分析</span>
 
+                <!-- <span class="tip-window">2023年</span> -->
 
+              </div>
 
+              <div class="content">
 
+                <div class="content-left" style="flex-wrap: wrap;">
 
+                  <div id="swiper" class="swiper" style="height:100%">
 
+                    <div class="swiper-wrapper">
 
+                      <div class="swiper-slide">
 
+                        <div class="swiperChange">
 
+                          <div class="topChange0">
 
+                            <div>山西焦煤</div>
 
+                          </div>
 
+                          <div class="topChange1">
 
+                            <div class="item2">
 
+                              <div class="item2-title" style="color: #15FFA2;">574.12<span>亿</span></div>
 
+                              <div class="item2-img">
 
+                                <img style="width: 100%; height: 100%;" src="./images/icon-4-home2.png" alt="">
 
+                              </div>
 
+                              <div class="item2-text">上年度经营利润</div>
 
+                            </div>
 
+                            <div class="item2">
 
+                              <div class="item2-title" style="color: #DD9CFF;">212.21<span>亿</span></div>
 
+                              <div class="item2-img">
 
+                                <img style="width: 100%; height: 100%;" src="./images/icon-5-home2.png" alt="">
 
+                              </div>
 
+                              <div class="item2-text">固定资产折旧</div>
 
+                            </div>
 
+                            <div class="item2">
 
+                              <div class="item2-title" style="color: #EBC805;">222.31<span>亿</span></div>
 
+                              <div class="item2-img">
 
+                                <img style="width: 100%; height: 100%;" src="./images/icon-6-home2.png" alt="">
 
+                              </div>
 
+                              <div class="item2-text">无形资产摊销</div>
 
+                            </div>
 
+                            <div class="item2">
 
+                              <div class="item2-title" style="color: #08E4FA;">523.32<span>亿</span></div>
 
+                              <div class="item2-img">
 
+                                <img style="width: 100%; height: 100%;" src="./images/icon-7-home2.png" alt="">
 
+                              </div>
 
+                              <div class="item2-text">带息负债压降指标</div>
 
+                            </div>
 
+                          </div>
 
+                        </div>
 
+                      </div>
 
+                      <div class="swiper-slide">
 
+                        <div class="swiperChange">
 
+                          <div class="topChange0">
 
+                            <div>山西焦煤</div>
 
+                          </div>
 
+                          <div class="topChange1">
 
+                            <div class="item2">
 
+                              <div class="item2-title" style="color: #15FFA2;">574.12<span>亿</span></div>
 
+                              <div class="item2-img">
 
+                                <img style="width: 100%; height: 100%;" src="./images/icon-4-home2.png" alt="">
 
+                              </div>
 
+                              <div class="item2-text">上年度经营利润</div>
 
+                            </div>
 
+                            <div class="item2">
 
+                              <div class="item2-title" style="color: #DD9CFF;">212.21<span>亿</span></div>
 
+                              <div class="item2-img">
 
+                                <img style="width: 100%; height: 100%;" src="./images/icon-5-home2.png" alt="">
 
+                              </div>
 
+                              <div class="item2-text">固定资产折旧</div>
 
+                            </div>
 
+                            <div class="item2">
 
+                              <div class="item2-title" style="color: #EBC805;">222.31<span>亿</span></div>
 
+                              <div class="item2-img">
 
+                                <img style="width: 100%; height: 100%;" src="./images/icon-6-home2.png" alt="">
 
+                              </div>
 
+                              <div class="item2-text">无形资产摊销</div>
 
+                            </div>
 
+                            <div class="item2">
 
+                              <div class="item2-title" style="color: #08E4FA;">523.32<span>亿</span></div>
 
+                              <div class="item2-img">
 
+                                <img style="width: 100%; height: 100%;" src="./images/icon-7-home2.png" alt="">
 
+                              </div>
 
+                              <div class="item2-text">带息负债压降指标</div>
 
+                            </div>
 
+                          </div>
 
+                        </div>
 
+                      </div>
 
                     </div>
 
-                    <div class="item2-text">上一年度经营业绩</div>
 
                   </div>
 
                 </div>
 
-              </div>
 
-              <div class="content-right">
 
-                <div ref="echartL2" class="topChange2" style="width: 100%; height: 100%;"></div>
 
-                <div class="jt"></div>
 
+                <div class="content-right">
 
+                  <div ref="echartL2" class="topChange2" style="width: 100%; height: 100%;"></div>
 
+                  <img src="./images/left-arrow.png" alt="" class="jt">
 
+                </div>
 
               </div>
 
             </div>
 
           </dv-border-box-8>
 
           <dv-border-box-8 :dur="10" style="flex: 1; margin-bottom: 10px;">
 
             <div class="title">
 
               <span class="text">企业额度分析</span>
 
-              <span class="tip-window">2023年</span>
 
+              <!-- <span class="tip-window">2023年</span> -->
 
             </div>
 
             <div class="content">
 
               <div id="echartL1" style="width: 100%; height: 100%"></div>
 
@@ -104,7 +157,7 @@
 
           <dv-border-box-8 :dur="10" style="flex: 1; margin-bottom: 10px;">
 
             <div class="title">
 
               <span class="text">投资计划分析</span>
 
-              <span class="tip-window">2023年</span>
 
+              <!-- <span class="tip-window">2023年</span> -->
 
             </div>
 
             <div class="content">
 
               <div class="content-left">
 
@@ -114,7 +167,7 @@
 
                     <div class="item3-img">
 
                       <img style="width: 100%; height: 100%;" src="./images/icon-8-home2.png" alt="">
 
                     </div>
 
-                    <div class="item4-text">
 
+                    <div class="item4-text" style="color:#ffffff99">
 
                       年度投资计划总额
 
                     </div>
 
                   </div>
 
@@ -164,7 +217,7 @@
 
           </dv-border-box-8>
 
           <dv-border-box-8 :dur="10" style="flex: 1;margin-bottom: 10px;">
 
             <div class="title">
 
-              <span class="text">企业后评价分析</span>
 
+              <span class="text">产业类别分析</span>
 
             </div>
 
             <div class="content">
 
               <div class="fourPie">
 
@@ -185,7 +238,7 @@
 
           </dv-border-box-8>
 
           <dv-border-box-8 :dur="10" style="flex: 1;">
 
             <div class="title">
 
-              <span class="text">投前项目阶段分析</span>
 
+              <span class="text">项目阶段分析</span>
 
               <!-- <span class="tip-window">省重点项目</span> -->
 
             </div>
 
             <div class="content" style="flex-direction: column;">

+ 1 - 1
investment/investHome2compound.html
View File 

@@ -12,7 +12,7 @@
 
   <!-- 引入js -->
 
   <script src="./libs/vue@2.7.10.js"></script>
 
   <script src="./libs/datav.min.js"></script>
 
-  <script src="./libs/echarts.min.js"></script>
 
+  <script src="./libs/echarts.min2.js"></script>
 
   <script src="./libs/element-ui@2.15.9.js"></script>
 
   <script src="./libs/axios.min.js"></script>
 
   <script src="./js/request.js"></script>

+ 16 - 16
investment/js/investHome.js
View File 

@@ -1,6 +1,6 @@
 
 let app = new Vue({
 
   el: '#app',
 
-  data() {
 
+  data () {
 
     return {
 
       showTip: false,
 
       showTip2: false,
 
@@ -43,7 +43,7 @@ let app = new Vue({
 
       }
 
     }
 
   },
 
-  created() {
 
+  created () {
 
     this.amountList.map(item => {
 
       this.amountTotal += Number(item.value)
 
     })
 
@@ -52,12 +52,12 @@ let app = new Vue({
 
       this.time = formatDate()
 
     }, 1000)
 
   },
 
-  beforeDestroy() {
 
+  beforeDestroy () {
 
     if (this.timer) {
 
       clearInterval(this.timer);
 
     }
 
   },
 
-  mounted() {
 
+  mounted () {
 
     setTimeout(() => {
 
       // 左侧图表
 
       //this.initChartTip()
 
@@ -72,7 +72,7 @@ let app = new Vue({
 
     }, 0)
 
   },
 
   methods: {
 
-    numFormat(value) {
 
+    numFormat (value) {
 
       if (!value) return '0'
 
       var intPart = Number(value).toFixed(0) // 获取整数部分
 
       var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
 
@@ -91,7 +91,7 @@ let app = new Vue({
 
         return intPartFormat
 
       }
 
     },
 
-    convertData(data) {
 
+    convertData (data) {
 
       var res = []
 
       for (var i = 0; i < data.length; i++) {
 
         var geoCoord = this.geoCoordMap[data[i].name]
 
@@ -104,7 +104,7 @@ let app = new Vue({
 
       }
 
       return res
 
     },
 
-    initChinaChart() {
 
+    initChinaChart () {
 
       var data = [
 
         { name: '大同市', value: 60.35 },
 
         { name: '朔州市', value: 33.61 },
 
@@ -625,7 +625,7 @@ let app = new Vue({
 
     //     window.open('https://www.baidu.com')
 
     //   })
 
     // },
 
-    initChartTip2() {
 
+    initChartTip2 () {
 
       let myChart = echarts.init(this.$refs['echartTip2'])
 
       let option = {
 
         tooltip: {
 
@@ -779,7 +779,7 @@ let app = new Vue({
 
       myChart.setOption(option)
 
     },
 
 
-    initChartTip3() {
 
+    initChartTip3 () {
 
       let myChart = echarts.init(this.$refs['echartTip3'])
 
       let option = {
 
         title: {
 
@@ -906,7 +906,7 @@ let app = new Vue({
 
       })
 
     },
 
 
-    initChartTip4() {
 
+    initChartTip4 () {
 
       let myChart = echarts.init(this.$refs['echartTip4'])
 
       let option = {
 
         title: {
 
@@ -1046,9 +1046,9 @@ let app = new Vue({
 
         loopSeries: true,
 
       })
 
     },
 
-    initChartL1() {
 
+    initChartL1 () {
 
       let myChart = echarts.init(this.$refs['echartR1'])
 
-      function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
 
+      function getParametricEquation (startRatio, endRatio, isSelected, isHovered, k, h) {
 
 
         // 计算
 
         let midRatio = (startRatio + endRatio) / 2;
 
@@ -1120,7 +1120,7 @@ let app = new Vue({
 
       }
 
 
       // 生成模拟 3D 饼图的配置项
 
-      function getPie3D(pieData, internalDiameterRatio) {
 
+      function getPie3D (pieData, internalDiameterRatio) {
 
 
         let series = [];
 
         let sumValue = 0;
 
@@ -1538,7 +1538,7 @@ let app = new Vue({
 
     //     loopSeries: true,
 
     //   })
 
     // },
 
-    initChartL2() {
 
+    initChartL2 () {
 
       let myChart = echarts.init(this.$refs['echartL2'])
 
       let option = {
 
         tooltip: {
 
@@ -1656,7 +1656,7 @@ let app = new Vue({
 
         loopSeries: true,
 
       })
 
     },
 
-    initChartR1() {
 
+    initChartR1 () {
 
       let myChart = echarts.init(this.$refs['echartL1'])
 
       let option = {
 
         tooltip: {
 
@@ -1771,7 +1771,7 @@ let app = new Vue({
 
         loopSeries: true,
 
       })
 
     },
 
-    initProjectList() {
 
+    initProjectList () {
 
       let dataList = []
 
       projectList.map(item => {
 
         dataList.push([item.name, item.office, item.value + '亿', item.status])

+ 269 - 57
investment/js/investHome2.js
View File 

@@ -13,10 +13,15 @@ let app = new Vue({
 
         content: '{nt}个',
 
       },
 
       storageRecordConfig: {
 
-        header: ['项目名称', '所属企业', '总投资额'],
 
+        // waitTime: '2000000',
 
+        header: ['企业集团', '项目名称 ', '投资总额'],
 
+        // headerBGC: '#05507b33',
 
+        // oddRowBGC: '#05507b33',
 
+        // evenRowBGC: '#05507b33',
 
+        headerBGC: '#05183c',
 
         headerBGC: '#05507b33',
 
-        oddRowBGC: '#05507b33',
 
-        evenRowBGC: '',
 
+        oddRowBGC: '#05183c',
 
+        evenRowBGC: '#05183c',
 
         rowNum: 4,
 
         align: ['center'],
 
         data: [
 
@@ -78,6 +83,21 @@ let app = new Vue({
 
       this.initChartR2()
 
       this.initChartR3()
 
     },)
 
+    setTimeout(() => {
 
+      var swiper = new Swiper(".mySwiper", {
 
+        pagination: {
 
+          el: ".swiper-pagination",
 
+          type: "progressbar",
 
+        },
 
+        navigation: {
 
+          nextEl: ".swiper-button-next",
 
+          prevEl: ".swiper-button-prev",
 
+        },
 
+      });
 
+      swiper.el.onmouseout = function () {
 
+        swiper.autoplay.start();
 
+      }
 
+    }, 500)
 
   },
 
   methods: {
 
     convertData (data) {
 
@@ -689,7 +709,7 @@ let app = new Vue({
 
         title: [
 
           {
 
             text: '450.12亿',
 
-            x: '38%',
 
+            x: '33%',
 
             y: '80%',
 
             textStyle: {
 
               fontSize: 24,
 
@@ -756,15 +776,16 @@ let app = new Vue({
 
       let option = {
 
         tooltip: {
 
           trigger: 'axis',
 
+          formatter: '指标：' + '{c0}' + '<br/>' + '发展线：' + '{c1}' + '<br/>' + '生存线：' + '{c2}',  //+ '<br/>'+ '{a1}：{c1}' + '%',
 
           axisPointer: {
 
             type: 'shadow',
 
           },
 
         },
 
         grid: {
 
-          top: '22%',
 
+          top: '10%',
 
           right: '5%',
 
           left: '10%',
 
-          bottom: '25%',
 
+          bottom: '15%',
 
         },
 
         xAxis: {
 
           data: ['总投资收益率', '销售利润率', '成本费用利润率', '总资产周转率', '财务内部收益率'],
 
@@ -833,40 +854,80 @@ let app = new Vue({
 
               },
 
             },
 
             data: [10, 20, 30, 40, 50],
 
-            markLine: {
 
-              symbol: ['none', 'none'],
 
-              data: [
 
-                {
 
-                  name: '生存线',
 
-                  yAxis: 10,
 
-                  lineStyle: {
 
-                    color: '#FF8F0A',
 
+            // markLine: {
 
+            //   symbol: ['none', 'none'],
 
+            //   data: [
 
+            //     {
 
+            //       name: '生存线',
 
+            //       yAxis: 10,
 
+            //       lineStyle: {
 
+            //         color: '#FF8F0A',
 
+            //       },
 
+            //       label: {
 
+            //         formatter: '{b}',
 
+            //         position: 'middle',
 
+            //         color: '#FF8F0A',
 
+            //         fontSize: 12,
 
+            //       },
 
+            //     },
 
+            //     {
 
+            //       name: '发展线',
 
+            //       yAxis: 15,
 
+            //       lineStyle: {
 
+            //         color: '#00EEA2',
 
+            //       },
 
+            //       label: {
 
+            //         formatter: '{b}',
 
+            //         position: 'middle',
 
+            //         color: '#00EEA2',
 
+            //         fontSize: 12,
 
+            //       },
 
+            //     },
 
+            //   ],
 
+            //   label: {
 
+            //     distance: [50, 0],
 
+            //   },
 
+            // },
 
+          },
 
+          {
 
+            name: '',
 
+            type: 'line',
 
+            barWidth: 15,
 
+            itemStyle: {
 
+              normal: {
 
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 
+                  {
 
+                    offset: 0,
 
+                    color: '#69c0ff',
 
                   },
 
-                  label: {
 
-                    formatter: '{b}',
 
-                    position: 'middle',
 
-                    color: '#FF8F0A',
 
-                    fontSize: 12,
 
+                  {
 
+                    offset: 1,
 
+                    color: 'green',
 
                   },
 
-                },
 
-                {
 
-                  name: '发展线',
 
-                  yAxis: 15,
 
-                  lineStyle: {
 
-                    color: '#00EEA2',
 
+                ]),
 
+              },
 
+            },
 
+            data: [20, 30, 15, 28, 36],
 
+          },
 
+          {
 
+            name: '',
 
+            type: 'line',
 
+            barWidth: 15,
 
+            itemStyle: {
 
+              normal: {
 
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 
+                  {
 
+                    offset: 0,
 
+                    color: '#69c0ff',
 
                   },
 
-                  label: {
 
-                    formatter: '{b}',
 
-                    position: 'middle',
 
-                    color: '#00EEA2',
 
-                    fontSize: 12,
 
+                  {
 
+                    offset: 1,
 
+                    color: 'yellow',
 
                   },
 
-                },
 
-              ],
 
-              label: {
 
-                distance: [50, 0],
 
+                ]),
 
               },
 
             },
 
+            data: [15, 22, 17, 33, 14],
 
           },
 
         ],
 
       }
 
@@ -906,7 +967,8 @@ let app = new Vue({
 
           {
 
             name: '',
 
             type: 'pie',
 
-            radius: ['0%', '70%'],
 
+            // radius: ['0%', '70%'],
 
+            radius: ['50%', '75%'],
 
             center: ['50%', '60%'],
 
             itemStyle: {
 
               normal: {
 
@@ -963,7 +1025,8 @@ let app = new Vue({
 
           {
 
             name: '',
 
             type: 'pie',
 
-            radius: ['0%', '70%'],
 
+            // radius: ['0%', '70%'],
 
+            radius: ['50%', '75%'],
 
             center: ['50%', '60%'],
 
             itemStyle: {
 
               normal: {
 
@@ -1019,7 +1082,8 @@ let app = new Vue({
 
           {
 
             name: '',
 
             type: 'pie',
 
-            radius: ['0%', '70%'],
 
+            // radius: ['0%', '70%'],
 
+            radius: ['50%', '75%'],
 
             center: ['50%', '60%'],
 
             itemStyle: {
 
               normal: {
 
@@ -1075,7 +1139,8 @@ let app = new Vue({
 
           {
 
             name: '',
 
             type: 'pie',
 
-            radius: ['0%', '70%'],
 
+            // radius: ['0%', '70%'],
 
+            radius: ['50%', '75%'],
 
             center: ['50%', '60%'],
 
             itemStyle: {
 
               normal: {
 
@@ -1263,7 +1328,7 @@ let app = new Vue({
 
       let myChart = echarts.init(this.$refs['echartR1'])
 
       let option = {
 
         title: {
 
-          text: '储备项目产业分布',
 
+          text: '产业类别分析',
 
           x: 'center',
 
           y: '87%',
 
           textStyle: {
 
@@ -1320,7 +1385,7 @@ let app = new Vue({
 
       let myChart = echarts.init(this.$refs['echartR2'])
 
       let option = {
 
         title: {
 
-          text: '储备项目产业分布',
 
+          text: '项目阶段分析',
 
           x: 'center',
 
           y: '87%',
 
           textStyle: {
 
@@ -1375,9 +1440,159 @@ let app = new Vue({
 
     },
 
     initChartR3 () {
 
       let myChart = echarts.init(this.$refs['echartR3'])
 
+      // let option = {
 
+      //   title: {
 
+      //     text: '固定资产项目',
 
+      //     textStyle: {
 
+      //       color: '#69C0FF',
 
+      //     },
 
+      //     top: '10',
 
+      //     left: '10'
 
+      //   },
 
+      //   textStyle: {
 
+      //     color: '#fff',
 
+      //   },
 
+      //   tooltip: {
 
+      //     trigger: "axis",
 
+      //     axisPointer: {
 
+      //       lineStyle: {
 
+      //         type: 'dashed',
 
+      //         width: 2,
 
+      //         color: 'rgba(255,255,255,0.6)'
 
+      //       },
 
+      //       animation: true
 
+      //     }
 
+      //   },
 
+      //   grid: {
 
+      //     top: '25%',
 
+      //     right: '5%',
 
+      //     left: '10%',
 
+      //     bottom: '0',
 
+      //   },
 
+      //   visualMap: {
 
+      //     type: 'piecewise',
 
+      //     top: 'top',
 
+      //     min: 0,
 
+      //     right: 100,
 
+      //     textStyle: {
 
+      //       color: 'white',
 
+      //     },
 
+      //     // pieces: ['固定投资累类', '股权及其他类']
 
+      //     pieces: [{
 
+      //       label: '固定资产类',
 
+      //       color: 'orange'
 
+      //     }, {
 
+      //       label: '股权及其他类',
 
+      //       color: '#6b61a8'
 
+      //     }]
 
+      //   },
 
+      //   yAxis: {
 
+      //     data: ['批量备案', '特别监管'],
 
+      //     splitLine: {
 
+      //       show: true,
 
+      //       lineStyle: {
 
+      //         color: '#68b4dd66',
 
+      //         type: 'dashed',
 
+      //       },
 
+      //     },
 
+      //     axisLine: {
 
+      //       show: false
 
+      //     },
 
+      //     axisLabel: {
 
+      //       show: true,
 
+      //       formatter: '{value}',
 
+      //       textStyle: {
 
+      //         color: 'rgba(250,250,250,0.6)',
 
+      //       },
 
+      //     },
 
+      //     nameTextStyle: {
 
+      //       color: '#ebf8ac',
 
+      //       fontSize: 16,
 
+      //     },
 
+      //   },
 
+      //   xAxis: {
 
+      //     data: ['项目储备', '项目立项', '项目可研', '可研论证', '投资决策'],
 
+      //     axisLine: {
 
+      //       show: true, //隐藏X轴轴线
 
+      //       lineStyle: {
 
+      //         color: '#005094',
 
+      //         width: 1,
 
+      //       },
 
+      //     },
 
+      //     axisTick: {
 
+      //       show: false, //隐藏X轴刻度
 
+      //     },
 
+      //     axisLabel: {
 
+      //       show: true,
 
+      //       textStyle: {
 
+      //         color: 'rgba(255,255,255,0.6)', //X轴文字颜色
 
+      //         fontSize: 12,
 
+      //       },
 
+      //     },
 
+      //   },
 
+      //   series: [
 
+      //     {
 
+      //       name: '批量备案',
 
+      //       type: 'scatter',
 
+      //       symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
 
+      //       symbolSize: function (data) {
 
+      //         return Math.sqrt(data[2]) * 0.5;
 
+      //       },
 
+      //       label: {
 
+      //         emphasis: {
 
+      //           show: true,
 
+      //           formatter: function (param) {
 
+      //             return param.data[2];
 
+      //           },
 
+      //           position: 'top'
 
+      //         }
 
+      //       },
 
+      //       itemStyle: {
 
+      //         normal: {
 
+      //           color: '#45DAD1'
 
+      //         }
 
+      //       },
 
+      //       data: [
 
+      //         ['项目储备', '批量备案', 200],
 
+      //         ['项目立项', '批量备案', 1500],
 
+      //         ['项目可研', '批量备案', 2000],
 
+      //         ['可研论证', '批量备案', 2500],
 
+      //         ['投资决策', '批量备案', 3000],
 
+      //       ]
 
+      //     },
 
+      //     {
 
+      //       name: '特别监管',
 
+      //       type: 'scatter',
 
+      //       symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
 
+      //       symbolSize: function (data) {
 
+      //         return Math.sqrt(data[2]) * 0.5;
 
+      //       },
 
+      //       label: {
 
+      //         emphasis: {
 
+      //           show: true,
 
+      //           formatter: function (param) {
 
+      //             return param.data[2];
 
+      //           },
 
+      //           position: 'top'
 
+      //         }
 
+      //       },
 
+      //       itemStyle: {
 
+      //         normal: {
 
+      //           color: '#40A9FF'
 
+      //         }
 
+      //       },
 
+      //       data: [
 
+      //         ['项目储备', '特别监管', 1400],
 
+      //         ['项目立项', '特别监管', 1500],
 
+      //         ['项目可研', '特别监管', 5500],
 
+      //         ['可研论证', '特别监管', 500],
 
+      //       ]
 
+      //     }
 
+      //   ]
 
+      // }
 
       let option = {
 
         title: {
 
-          text: '固定资产项目',
 
+          text: '',
 
           textStyle: {
 
             color: '#69C0FF',
 
           },
 
@@ -1399,10 +1614,10 @@ let app = new Vue({
 
           }
 
         },
 
         grid: {
 
-          top: '25%',
 
+          top: '22%',
 
           right: '5%',
 
           left: '10%',
 
-          bottom: '0',
 
+          bottom: '15%',
 
         },
 
         visualMap: {
 
           type: 'piecewise',
 
@@ -1412,13 +1627,11 @@ let app = new Vue({
 
           textStyle: {
 
             color: 'white',
 
           },
 
-          // pieces: ['固定投资累类', '股权及其他类']
 
           pieces: [{
 
-            label: '固定资产类',
 
-            color: 'orange'
 
-          }, {
 
             label: '股权及其他类',
 
-            color: '#6b61a8'
 
+            color: 'red'
 
+          }, {
 
+            label: '固定资产类',
 
           }]
 
         },
 
         yAxis: {
 
@@ -1488,11 +1701,10 @@ let app = new Vue({
 
               }
 
             },
 
             data: [
 
-              ['项目储备', '批量备案', 200],
 
-              ['项目立项', '批量备案', 1500],
 
-              ['项目可研', '批量备案', 2000],
 
-              ['可研论证', '批量备案', 2500],
 
-              ['投资决策', '批量备案', 3000],
 
+              [1400, 123],
 
+              [1500, 532],
 
+              [5500, 435],
 
+              [500, 534],
 
             ]
 
           },
 
           {
 
@@ -1517,10 +1729,10 @@ let app = new Vue({
 
               }
 
             },
 
             data: [
 
-              ['项目储备', '特别监管', 1400],
 
-              ['项目立项', '特别监管', 1500],
 
-              ['项目可研', '特别监管', 5500],
 
-              ['可研论证', '特别监管', 500],
 
+              [1400, 123],
 
+              [1500, 532],
 
+              [5500, 435],
 
+              [500, 534],
 
             ]
 
           }
 
         ]

+ 79 - 25
investment/styles/investHome2.css
View File 

@@ -103,7 +103,7 @@ a {
 
   padding: 15px;
 
   display: flex;
 
   height: calc(100vh - 25px);
 
-  background: url('../images/content-bg2.png') no-repeat center bottom;
 
+  background: url('../images/page-bg.png') no-repeat center bottom;
 
   display: flex;
 
   padding-bottom: 65px;
 
 }
 
@@ -143,7 +143,7 @@ a {
 
   left: -40px;
 
   width: 30px;
 
   height: 10px;
 
-  background: url('../images/title-left.png') no-repeat;
 
+  background: url('../images/title-left2.png') no-repeat;
 
 }
 
 .left .title .text::after {
 
   position: absolute;
 
@@ -152,7 +152,7 @@ a {
 
   right: -40px;
 
   width: 30px;
 
   height: 10px;
 
-  background: url('../images/title-right.png') no-repeat;
 
+  background: url('../images/title-right2.png') no-repeat;
 
 }
 
 .left .content {
 
   height: calc(100% - 60px);
 
@@ -206,7 +206,7 @@ a {
 
 .item2 .item2-img {
 
   width: 67px;
 
   height: 66px;
 
-  margin-top: -20px;
 
+  /* margin-top: -20px; */
 
 }
 
 .item2 .item2-text {
 
   color: rgba(255, 255, 255, 0.6);
 
@@ -296,19 +296,33 @@ a {
 
   justify-content: end;
 
   padding: 0 6px;
 
 }
 
-
 
+.content {
 
+  /* display: flex;
 
+  align-items: center; */
 
+}
 
 .left .content .content-con {
 
   margin-right: 10px;
 
 }
 
-.left .content .content-left,
 
+/* .left .content .content-left, */
 
 /* .left .content .content-right, */
 
 .topChange2,
 
 .left .content .content-con {
 
-  background-color: rgb(18 81 128 / 22%);
 
+  /* background-color: rgb(18 81 128 / 22%); */
 
+  background-color: #05183c;
 
   flex: 1;
 
 }
 
-.left .content .content-right {
 
+.topChange1 {
 
+  background-color: #05183c;
 
+}
 
+/* .left .content .content-right,
 
+.left .content .content-left {
 
   flex: 1;
 
+} */
 
+.left .content .content-right {
 
+  width: 40%;
 
+}
 
+.left .content .content-left {
 
+  width: 60%;
 
 }
 
 .right .title {
 
   position: relative;
 
@@ -333,7 +347,7 @@ a {
 
   left: -40px;
 
   width: 30px;
 
   height: 10px;
 
-  background: url('../images/title-left.png') no-repeat;
 
+  background: url('../images/title-left2.png') no-repeat;
 
 }
 
 .right .title .text::after {
 
   position: absolute;
 
@@ -342,7 +356,7 @@ a {
 
   right: -40px;
 
   width: 30px;
 
   height: 10px;
 
-  background: url('../images/title-right.png') no-repeat;
 
+  background: url('../images/title-right2.png') no-repeat;
 
 }
 
 .right .content {
 
   height: calc(100% - 60px);
 
@@ -362,11 +376,13 @@ a {
 
 }
 
 .right .content .content-top,
 
 .right .content .content-bot {
 
-  background-color: rgb(18 81 128 / 22%);
 
+  /* background-color: rgb(18 81 128 / 22%); */
 
+  background-color: #05183c;
 
   flex: 1;
 
 }
 
 .right .content .content-left .content-left-l {
 
-  background-color: rgb(18 81 128 / 22%);
 
+  /* background-color: rgb(18 81 128 / 22%); */
 
+  background-color: #05183c;
 
   flex: 1;
 
   margin-right: 10px;
 
   display: flex;
 
@@ -383,7 +399,8 @@ a {
 
 }
 
 .right .content .content-left .content-left-r .content-left-r-t,
 
 .right .content .content-left .content-left-r .content-left-r-b {
 
-  background-color: rgb(18 81 128 / 22%);
 
+  /* background-color: rgb(18 81 128 / 22%); */
 
+  background-color: #05183c;
 
   flex: 1;
 
 }
 
 .right .content .content-right .content-right-l {
 
@@ -391,7 +408,8 @@ a {
 
 }
 
 .right .content .content-right .content-right-l,
 
 .right .content .content-right .content-right-r {
 
-  background-color: rgb(18 81 128 / 22%);
 
+  /* background-color: rgb(18 81 128 / 22%); */
 
+  background-color: #05183c;
 
   flex: 1;
 
 }
 
 
@@ -437,20 +455,19 @@ a {
 
   width: 100%;
 
 }
 
 .topChange0 {
 
-  width: 20%;
 
+  width: 16%;
 
   height: 100%;
 
   text-align: center;
 
-  padding-top: 20px;
 
-  color: #a0ead9;
 
-  font-size: 16px;
 
+  color: #ffffff99;
 
+  font-size: 22px;
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+  background-color: #05183c;
 
+  margin-right: 10px;
 
 }
 
-.jt {
 
-  border-top: 50px solid transparent;
 
-  border-bottom: 50px solid transparent;
 
-  border-left: 30px solid #81c14f;
 
-  width: 0;
 
-  height: 0;
 
-  margin: 0 20px;
 
+.topChange0 > div {
 
+  writing-mode: tb-rl;
 
 }
 
 .content-right {
 
   display: flex;
 
@@ -542,3 +559,40 @@ a {
 
   cursor: pointer;
 
   font-size: 44px;
 
 }
 
+.title-left {
 
+  position: absolute;
 
+  top: 0px;
 
+  left: 20px;
 
+  color: #447ed2;
 
+  font-weight: bold;
 
+  font-size: 22px;
 
+}
 
+.topChange2 {
 
+  margin-right: 15px;
 
+}
 
+.rows > .row-item:nth-child(2) {
 
+  background-color: #79a4db6c !important;
 
+}
 
+.header {
 
+  color: #2abbff;
 
+  font-weight: bold;
 
+}
 
+.row-item {
 
+  color: #ffffff99;
 
+}
 
+.swiper {
 
+  width: 600px;
 
+  height: 300px;
 
+  --swiper-theme-color: #ff004c;
 
+  /* 设置Swiper风格 */
 
+  --swiper-navigation-color: #008cff;
 
+  /* 单独设置按钮颜色 */
 
+  --swiper-navigation-size: 40px;
 
+  /* 设置按钮大小 */
 
+}
 
+.swiperChange {
 
+  display: flex;
 
+  width: 100%;
 
+  height: 100%;
 
+  align-items: center;
 
+}