Browse Source

Merge branch 'main' of https://git.sxidc.com/kingdee_large_screen/pc_kingdee_large_screen

unknown 1 year ago
parent
commit
1488374759
3 changed files with 197 additions and 195 deletions
  1. 11 8
      investment/investHome2.html
  2. 185 186
      investment/js/investHome2.js
  3. 1 1
      investment/styles/investHome2.css

+ 11 - 8
investment/investHome2.html

@@ -82,7 +82,7 @@
               <!-- <span class="tip-window">2023年</span> -->
             </div>
             <div class="content">
-              <div id="echartL1" style="width: 100%; height: 100%"></div>
+              <div id="echartL1" style="width: 100%; height: 100%; background-color: #05183c;"></div>
             </div>
           </dv-border-box-8>
           <dv-border-box-8 :dur="10" style="flex: 1;">
@@ -109,7 +109,7 @@
               <div class="content-left">
                 <div class="content-left-l">
                   <div class="item3">
-                    <div class="item3-title">450.12<span>亿</span></div>
+                    <div class="item3-title">954.52<span>亿</span></div>
                     <div class="item3-img">
                       <img style="width: 100%; height: 100%;" src="./images/icon-8-home2.png" alt="">
                     </div>
@@ -124,11 +124,11 @@
                       <div class="item4-title">列入省级项目重点项目</div>
                       <div class="item4-con">
                         <div class="item">
-                          <div class="title">200<span>亿</span></div>
+                          <div class="title">322.95<span>亿</span></div>
                           <div class="text">投资金额</div>
                         </div>
                         <div class="item">
-                          <div class="title">20<span>个</span></div>
+                          <div class="title">73<span>个</span></div>
                           <div class="text">项目数量</div>
                         </div>
                       </div>
@@ -139,11 +139,11 @@
                       <div class="item4-title">国家或省政府决定的重大项目</div>
                       <div class="item4-con">
                         <div class="item">
-                          <div class="title">200<span>亿</span></div>
+                          <div class="title">208.15<span>亿</span></div>
                           <div class="text">投资金额</div>
                         </div>
                         <div class="item">
-                          <div class="title">20<span>个</span></div>
+                          <div class="title">109<span>个</span></div>
                           <div class="text">项目数量</div>
                         </div>
                       </div>
@@ -187,8 +187,11 @@
               <span class="text">投前项目阶段分析</span>
               <!-- <span class="tip-window">省重点项目</span> -->
             </div>
-            <div class="content" style="flex-direction: column;">
-              <div class="content-top" style="margin-bottom: 0;">
+            <div class="content">
+              <div class="content-top" style="margin-bottom: 0; margin-right: 10px;">
+                <div ref="echartR6" style="width: 100%; height: 100%;"></div>
+              </div>
+              <div class="content-right" style="margin-bottom: 0;">
                 <div ref="echartR3" style="width: 100%; height: 100%;"></div>
               </div>
             </div>

+ 185 - 186
investment/js/investHome2.js

@@ -82,6 +82,7 @@ let app = new Vue({
       this.initChartR1()
       this.initChartR2()
       this.initChartR3()
+      this.initChartR6()
     },)
     setTimeout(() => {
       var swiper = new Swiper(".mySwiper", {
@@ -567,7 +568,7 @@ let app = new Vue({
           },
         },
         xAxis: {
-          data: ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团", "国际能源", "华远陆港", "水控集团", "文旅集团", "交控集团", '航产集团', '山西建设', '汾酒集团', '大地控股'],
+          data: ["山西焦煤", "晋能控股", "华阳新材", "潞安化工", "华新燃气", "太重集团", "国际能源", "华远陆港", "水控集团", "文旅集团", "交控集团", '航产集团', '山西建投', '汾酒集团', '大地控股', '云时代', '华舰体育', '神农科技'],
           axisTick: {
             show: false,
           },
@@ -626,7 +627,7 @@ let app = new Vue({
           {
             name: "2022年额度",
             type: "bar",
-            data: [1200, 680, 562, 268, 717, 843, 987, 126, 723, 569, 534, 753, 864, , 834, 764, 978],
+            data: [1200, 680, 562, 268, 717, 843, 987, 126, 723, 569, 534, 753, 864, , 834, 764, 978, 843, 987, 126],
             showBackground: false,
             backgroundStyle: {
               color: "#18416F",
@@ -649,7 +650,7 @@ let app = new Vue({
           {
             name: "2023年额度",
             type: "bar",
-            data: [658, 1125, 658, 999, 643, 675, 743, 724, 733, 725, 652, 865, 749, 359, 241],
+            data: [658, 1125, 658, 999, 643, 675, 743, 724, 733, 725, 652, 865, 749, 359, 241, 643, 675, 743],
             showBackground: false,
             backgroundStyle: {
               color: "#18416F",
@@ -966,6 +967,8 @@ let app = new Vue({
             color: '#9DB9EB',
             fontSize: '10px'
           },
+          itemWidth: 10,
+          itemHeight: 10
         },
         series: [
           {
@@ -1029,6 +1032,8 @@ let app = new Vue({
             color: '#9DB9EB',
             fontSize: '10px'
           },
+          itemWidth: 10,
+          itemHeight: 10
         },
         series: [
           {
@@ -1091,6 +1096,8 @@ let app = new Vue({
             color: '#9DB9EB',
             fontSize: '10px'
           },
+          itemWidth: 10,
+          itemHeight: 10
         },
         series: [
           {
@@ -1153,6 +1160,8 @@ let app = new Vue({
             color: '#9DB9EB',
             fontSize: '10px'
           },
+          itemWidth: 10,
+          itemHeight: 10
         },
         series: [
           {
@@ -1373,6 +1382,8 @@ let app = new Vue({
             color: '#9DB9EB',
             fontSize: '10px'
           },
+          itemWidth: 10,
+          itemHeight: 10
         },
         series: [
           {
@@ -1393,10 +1404,9 @@ let app = new Vue({
               show: false,
             },
             data: [
-              { value: 1048, name: '煤炭' },
-              { value: 735, name: '火电' },
-              { value: 580, name: '焦化' },
-              { value: 484, name: '风电' },
+              { value: 665.81, name: '主业' },
+              { value: 735, name: '辅业' },
+              { value: 735, name: '技改' }
             ],
           },
         ],
@@ -1435,6 +1445,8 @@ let app = new Vue({
             color: '#9DB9EB',
             fontSize: '10px'
           },
+          itemWidth: 10,
+          itemHeight: 10
         },
         series: [
           {
@@ -1471,161 +1483,13 @@ 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',
+            fontSize: 16,
+            fontWeight: 500
           },
           top: '10',
           left: '10'
@@ -1635,6 +1499,10 @@ let app = new Vue({
         },
         tooltip: {
           trigger: "axis",
+          formatter: function(params) {
+            var tip = params[0].axisValue + '<br/>' + params[0].marker + params[0].data[1]+ ':'+ params[0].data[2]+ '个,'+ params[0].data[3] + '亿元' + '<br/>'+ params[1].marker +  params[1].data[1]+ ':'+ params[1].data[2]+ '个,'+ params[0].data[3] + '亿元';
+            return tip
+          },
           axisPointer: {
             lineStyle: {
               type: 'dashed',
@@ -1650,23 +1518,8 @@ let app = new Vue({
           left: '10%',
           bottom: '15%',
         },
-        visualMap: {
-          type: 'piecewise',
-          top: 'top',
-          min: 0,
-          right: 100,
-          textStyle: {
-            color: 'white',
-          },
-          pieces: [{
-            label: '股权及其他类',
-            color: 'red'
-          }, {
-            label: '固定资产类',
-          }]
-        },
         yAxis: {
-          data: ['批量备案', '特别监管'],
+          data: ['备案', '特别监管'],
           splitLine: {
             show: true,
             lineStyle: {
@@ -1690,7 +1543,7 @@ let app = new Vue({
           },
         },
         xAxis: {
-          data: ['项目储备', '项目立项', '项目可研', '可研论证', '投资决策'],
+          data: ['项目储备', '项目立项','可研论证', '投资决策'],
           axisLine: {
             show: true, //隐藏X轴轴线
             lineStyle: {
@@ -1711,9 +1564,37 @@ let app = new Vue({
         },
         series: [
           {
-            name: '批量备案',
+            name: '',
             type: 'scatter',
-            symbol: 'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+            symbol: 'circle',
+            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, 100],
+              ['项目立项', '特别监管', 1500, 90],
+              ['可研论证', '特别监管', 500, 80],
+              ['投资决策', '特别监管', 3000, 70],
+            ]
+          },
+          {
+            name: '',
+            type: 'scatter',
+            symbol: 'circle',
             symbolSize: function (data) {
               return Math.sqrt(data[2]) * 0.5;
             },
@@ -1732,12 +1613,102 @@ let app = new Vue({
               }
             },
             data: [
-              [1400, 123],
-              [1500, 532],
-              [5500, 435],
-              [500, 534],
+              ['项目储备', '备案', 1400, 100],
+              ['项目立项', '备案', 1500, 90],
+              ['可研论证', '备案', 500, 80],
+              ['投资决策', '备案', 3000, 70],
             ]
           },
+        ]
+      }
+      myChart.setOption(option)
+      tools.loopShowTooltip(myChart, option, {
+        nterval: 2000,
+        loopSeries: true,
+      })
+    },
+    initChartR6 () {
+      let myChart = echarts.init(this.$refs['echartR6'])
+      let option = {
+        title: {
+          text: '固定资产',
+          textStyle: {
+            color: '#69C0FF',
+            fontSize: 16,
+            fontWeight: 500
+          },
+          top: '10',
+          left: '10'
+        },
+        textStyle: {
+          color: '#fff',
+        },
+        tooltip: {
+          trigger: "axis",
+          formatter: function(params) {
+            var tip = params[0].axisValue + '<br/>' + params[0].marker +  params[0].data[1]+ ':'+ params[0].data[2]+ '个,'+ params[0].data[3] + '亿元' + '<br/>'+ params[1].marker +  params[1].data[1]+ ':'+ params[1].data[2]+ '个,'+ params[0].data[3] + '亿元';
+            return tip
+          },
+          axisPointer: {
+            lineStyle: {
+              type: 'dashed',
+              width: 2,
+              color: 'rgba(255,255,255,0.6)'
+            },
+            animation: true
+          }
+        },
+        grid: {
+          top: '25%',
+          right: '5%',
+          left: '15%',
+          bottom: '15%',
+        },
+        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',
@@ -1760,12 +1731,40 @@ let app = new Vue({
               }
             },
             data: [
-              [1400, 123],
-              [1500, 532],
-              [5500, 435],
-              [500, 534],
+              ['项目储备', '特别监管', 200, 100],
+              ['项目立项', '特别监管', 1500, 90],
+              ['可研论证', '特别监管', 2500, 80],
+              ['投资决策', '特别监管', 3000, 70],
             ]
-          }
+          },
+          {
+            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, 100],
+              ['项目立项', '备案', 1500, 90],
+              ['可研论证', '备案', 2500, 80],
+              ['投资决策', '备案', 3000, 70],
+            ]
+          },
         ]
       }
       myChart.setOption(option)

+ 1 - 1
investment/styles/investHome2.css

@@ -380,7 +380,7 @@ a {
   margin-bottom: 10px;
 }
 .right .content .content-top,
-.right .content .content-bot {
+.right .content .content-bot, .right .content .content-right {
   /* background-color: rgb(18 81 128 / 22%); */
   background-color: #05183c;
   flex: 1;