zhb

investment/investHome2.html

@@ -71,7 +71,8 @@
                   <div class="item2-text">带息负债压降指标</div>
                 </div>
               </div>
-              <div class="content-right">
+              <div class="content-right" style="position:relative">
+                <div class="total">总额度<span style="font-size: 25px;">285.48亿</span></div>
                 <div ref="echartL2" style="width: 100%; height: 100%;"></div>
               </div>
             </div>
@@ -109,7 +110,7 @@
               <div class="content-left">
                 <div class="content-left-l">
                   <div class="item3">
-                    <div class="item3-title">954.52<span>亿</span></div>
+                    <div class="item3-title">1163.88<span>亿</span></div>
                     <div class="item3-img">
                       <img style="width: 100%; height: 100%;" src="./images/icon-8-home2.png" alt="">
                     </div>
@@ -125,11 +126,11 @@
                       <div class="item4-con">
                         <div class="item">
                           <div class="text" style="margin-top: 10px;">投资金额</div>
-                          <div class="title">322.95<span>亿</span></div>
+                          <div class="title">644.83<span>亿</span></div>
                         </div>
                         <div class="item">
                           <div class="text" style="margin-top: 10px;">项目数量</div>
-                          <div class="title">73<span>个</span></div>
+                          <div class="title">372<span>个</span></div>
                         </div>
                       </div>
                     </div>
@@ -140,11 +141,11 @@
                       <div class="item4-con">
                         <div class="item">
                           <div class="text" style="margin-top: 10px;">投资金额</div>
-                          <div class="title">208.15<span>亿</span></div>
+                          <div class="title">95.69<span>亿</span></div>
                         </div>
                         <div class="item">
                           <div class="text" style="margin-top: 10px;">项目数量</div>
-                          <div class="title">109<span>个</span></div>
+                          <div class="title">261<span>个</span></div>
                         </div>
                       </div>
                     </div>
@@ -198,13 +199,13 @@
           </dv-border-box-8>
         </div>
       </div>
-      <div class="tip" v-show="showTip2">
+      <div class="tipb" v-show="showTip2">
         <!-- <div class="tip"> -->
         <div class="tip-down" @click="showTip2 = false">×</div>
         <div class="tip1">晋能控股</div>
         <div class="tip2">
-          <div>
-            <div class="tip2-title">二 零 二 二 年 度</div>
+          <!-- <div>
+            <div class="tip2-title">2 0 2 2年 度</div>
             <div class="tip2-list">
               <div>
                 <span>合并报表净利润</span>
@@ -219,10 +220,10 @@
                 <span style="color:#4C96CB"><span style="font-size: 20px;font-weight: bold;">9.81</span>亿元</span>
               </div>
             </div>
-          </div>
-          <div class="pie" ref="echartR4" style="width: 100%; height: 100%;"></div>
+          </div> -->
+          <!-- <div class="pie" ref="echartR4" style="width: 100%; height: 100%;"></div> -->
           <div>
-            <div class="tip2-title">二 零 二 三 年 度</div>
+            <!-- <div class="tip2-title">2 0 2 3 年 度</div> -->
             <div class="tip2-list">
               <div>
                 <span>合并报表净利润</span>
@@ -238,7 +239,11 @@
               </div>
             </div>
           </div>
-          <div class="pie" ref="echartR5" style="width: 100%; height: 100%;"></div>
+          <div class="" style="position:relative;width: 100%;height: 100%;">
+            <div class="total">总额度<span style="font-size: 25px;">285.48亿</span></div>
+            <div ref="echartL2b" style="width: 100%; height: 100%;background-color: #04224c;"></div>
+          </div>
+          <!-- <div class="pie" ref="echartR5" style="width: 100%; height: 100%;"></div> -->
         </div>
       </div>
     </dv-full-screen-container>

investment/js/investHome2.js

@@ -705,13 +705,86 @@ let app = new Vue({
         if (param.name == '晋能控股') {
           that.showTip2 = true
           setTimeout(() => {
-            that.initChartR4()
-            that.initChartR5()
+            // that.initChartR4()
+            // that.initChartR5()
+            that.initChartL2b()
           })
         }
       })
       myChart.setOption(option);
     },
+    initChartL2b () {
+      let myChart = echarts.init(this.$refs['echartL2b'])
+      var value = 0.37;
+      var data = [value];
+      let option = {
+        backgroundColor: 'transparent',
+        title: [
+          {
+            // text: '总额度285.48亿',
+            // formatter: `<span>总额度</span>285.48亿`,
+            x: '37%',
+            y: '80%',
+            textStyle: {
+              fontSize: 24,
+              fontWeight: 'bold',
+              color: '#2CB7E0',
+              lineHeight: 16,
+              textAlign: 'center',
+            },
+          }
+        ],
+        series: [
+          {
+            type: 'liquidFill',
+            radius: '70%',
+            center: ['50%', '40%'],
+            color: [
+              {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: '#446bf5',
+                  },
+                  {
+                    offset: 1,
+                    color: '#2ca3e2',
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            data: [value, value], // data个数代表波浪数
+            backgroundStyle: {
+              borderWidth: 1,
+              color: 'RGBA(51, 66, 127, 0.7)',
+            },
+            label: {
+              normal: {
+                textStyle: {
+                  fontSize: 30,
+                  color: '#fff',
+                },
+              },
+            },
+            outline: {
+              // show: false
+              borderDistance: 0,
+              itemStyle: {
+                borderWidth: 2,
+                borderColor: 'transparent',
+              },
+            },
+          },
+        ],
+      }
+      myChart.setOption(option)
+    },
     initChartL2 () {
       let myChart = echarts.init(this.$refs['echartL2'])
       var value = 0.37;
@@ -720,7 +793,8 @@ let app = new Vue({
         backgroundColor: 'transparent',
         title: [
           {
-            text: '285.48亿',
+            // text: '总额度285.48亿',
+            // formatter: `<span>总额度</span>285.48亿`,
             x: '37%',
             y: '80%',
             textStyle: {
@@ -1405,7 +1479,7 @@ let app = new Vue({
       let data = [
         { value: [665.81, 549], name: '主业' },
         { value: [65.17, 84], name: '辅业' },
-        { value: [80.94, 164], name: '技改' }
+        { value: [423.36, 164], name: '技改' }
       ]
       let count = 0
       data.forEach(item => {
@@ -1414,7 +1488,7 @@ let app = new Vue({
       let myChart = echarts.init(this.$refs['echartR1'])
       let option = {
         title: {
-          text: '产业类别分析',
+          text: '主辅业计划占比',
           x: 'center',
           y: '87%',
           textStyle: {
@@ -1427,7 +1501,7 @@ let app = new Vue({
           // formatter: '{b}' + '：' + '{c}' + '<br/>' + '占比：' + '{d}%',
           // position: ['-5%', '95%'],
           formatter: function (params) {
-            return '名称：' + params.name + '</br >' + '项目数量：' + params.value[1] + '个' + '</br >' + '投资金额：' + params.value[0] + '亿' + '</br >' + '占比：' + (params.value[0] / count * 100).toFixed(2) + '%'
+            return params.name + '，' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + '，' + params.value[0] + '亿'
           }
         },
         color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
@@ -1484,7 +1558,7 @@ let app = new Vue({
       let myChart = echarts.init(this.$refs['echartR2'])
       let option = {
         title: {
-          text: '项目阶段分析',
+          text: '项目管理类型',
           x: 'center',
           y: '87%',
           textStyle: {
@@ -1495,7 +1569,7 @@ let app = new Vue({
         tooltip: {
           trigger: 'item',
           formatter: function (params) {
-            return '名称：' + params.name + '</br >' + '项目数量：' + params.value[1] + '个' + '</br >' + '投资金额：' + params.value[0] + '亿' + '</br >' + '占比：' + (params.value[0] / count * 100).toFixed(2) + '%'
+            return params.name + '，' + (params.value[0] / count * 100).toFixed(2) + '%' + '</br >' + params.value[1] + '个' + '，' + params.value[0] + '亿'
           }
           // position: ['-5%', '95%'],
         },

investment/styles/investHome2.css

@@ -483,7 +483,7 @@ a {
   height: 100%;
 }
 .tip {
-  z-index: 999;
+  z-index: 9999999999;
   position: fixed;
   /* top: 35%;
   left: 32.5%; */
@@ -517,16 +517,17 @@ a {
   height: 100%;
   display: grid;
   grid-template-columns: 60% 40%;
-  grid-template-rows: 1fr 1fr;
+  /* grid-template-rows: 1fr 1fr; */
   grid-gap: 10px;
 }
-.tip2 > div {
+/* .tip2 > div {
   width: 100%;
   height: 100%;
   display: grid;
   grid-template-columns: 10% 90%;
-}
+} */
 .tip2-list {
+  height: 100%;
   display: grid;
   grid-template-rows: repeat(3, minmax(0, 1fr));
   background-color: #04224c;
@@ -608,3 +609,29 @@ a {
 .text {
   width: 100%;
 }
+.total {
+  text-align: center;
+  width: 200px;
+  height: 30px;
+  position: absolute;
+  left: calc(50% - 100px);
+  bottom: 5%;
+  font-weight: bold;
+  color: #2cb7e0;
+}
+.tipb {
+  z-index: 9999999999;
+  position: fixed;
+  /* top: 35%;
+  left: 32.5%; */
+  /* width: 35%;
+  height: 30%; */
+  width: 700px;
+  height: 45vh;
+  top: calc(50% - 20vh);
+  left: calc(50% - 350px);
+  background: url('../images/popup.png') no-repeat center;
+  background-color: #133b65;
+  background-size: 100% 100%;
+  padding: 100px 60px 50px;
+}