Browse Source

修改饼图

fanjiaxin 1 year ago
parent
commit
1e287f7c5c
4 changed files with 354 additions and 66 deletions
  1. BIN
      investment/images/popup.png
  2. 62 28
      investment/investHome2.html
  3. 195 23
      investment/js/investHome2.js
  4. 97 15
      investment/styles/investHome2.css

BIN
investment/images/popup.png


+ 62 - 28
investment/investHome2.html

@@ -24,7 +24,7 @@
   <div id="app">
     <dv-full-screen-container>
       <header class="my-header">
-        <span>投资管理数智中心</span>
+        <span>数智化投资管理驾驶舱</span>
         <span class="right">{{time}}</span>
       </header>
       <div class="main">
@@ -92,33 +92,7 @@
             </div>
             <div class="content">
               <div class="content-right" style="margin-right: 10px;">
-                <table cellpadding="0" cellspacing="0" border="1">
-                  <tr>
-                    <td>项目名称</td>
-                    <td>所属企业</td>
-                    <td>投资总额</td>
-                  </tr>
-                  <tr>
-                    <td>建设工程项目</td>
-                    <td>山西建投</td>
-                    <td>60.32亿</td>
-                  </tr>
-                  <tr>
-                    <td>建设工程项目</td>
-                    <td>山西建投</td>
-                    <td>60.32亿</td>
-                  </tr>
-                  <tr>
-                    <td>建设工程项目</td>
-                    <td>山西建投</td>
-                    <td>60.32亿</td>
-                  </tr>
-                  <tr>
-                    <td>建设工程项目</td>
-                    <td>山西建投</td>
-                    <td>60.32亿</td>
-                  </tr>
-                </table>
+                <dv-scroll-board :config="storageRecordConfig" class="" />
               </div>
               <div class="content-left">
                 <div ref="echartL3" style="width: 100%; height: 100%;"></div>
@@ -206,6 +180,12 @@
                 <div class="content-con">
                   <div ref="echartL7" style="width: 100%; height: 100%;"></div>
                 </div>
+                <div class="content-con">
+                  <div ref="echartL6" style="width: 100%; height: 100%;"></div>
+                </div>
+                <div class="content-con">
+                  <div ref="echartL7" style="width: 100%; height: 100%;"></div>
+                </div>
               </div>
             </div>
           </dv-border-box-8>
@@ -220,6 +200,60 @@
               </div>
             </div>
           </dv-border-box-8>
+          <dv-border-box-8 :dur="10" style="flex: 1;">
+            <div class="title">
+              <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 ref="echartR3" style="width: 100%; height: 100%;"></div>
+              </div>
+            </div>
+          </dv-border-box-8>
+        </div>
+      </div>
+      <div class="tip" 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 class="tip2-list">
+              <div>
+                <span>合并报表净利润</span>
+                <span style="color:#4C96CB"><span style="font-size: 20px;font-weight: bold;">135.26</span>亿元</span>
+              </div>
+              <div>
+                <span>提取固定资产折旧和无形资产摊销</span>
+                <span style="color:#4C96CB"><span style="font-size: 20px;font-weight: bold;">317.76</span>亿元</span>
+              </div>
+              <div>
+                <span>预计压降带息负债</span>
+                <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="tip2-title">二 零 二 三 年 度</div>
+            <div class="tip2-list">
+              <div>
+                <span>合并报表净利润</span>
+                <span style="color:#4C96CB"><span style="font-size: 20px;font-weight: bold;">135.26</span>亿元</span>
+              </div>
+              <div>
+                <span>提取固定资产折旧和无形资产摊销</span>
+                <span style="color:#4C96CB"><span style="font-size: 20px;font-weight: bold;">317.76</span>亿元</span>
+              </div>
+              <div>
+                <span>预计压降带息负债</span>
+                <span style="color:#4C96CB"><span style="font-size: 20px;font-weight: bold;">9.81</span>亿元</span>
+              </div>
+            </div>
+          </div>
+          <div class="pie" ref="echartR5" style="width: 100%; height: 100%;"></div>
         </div>
       </div>
     </dv-full-screen-container>

+ 195 - 23
investment/js/investHome2.js

@@ -1,7 +1,8 @@
 let app = new Vue({
   el: '#app',
-  data () {
+  data() {
     return {
+      showTip2: false,
       year: '2022',
       time: '',
       timer: '',
@@ -12,19 +13,22 @@ let app = new Vue({
         content: '{nt}个',
       },
       storageRecordConfig: {
-        header: [],
+        header: ['项目名称', '所属企业', '总投资额'],
         headerBGC: '#05507b33',
         oddRowBGC: '#05507b33',
         evenRowBGC: '',
-        headerHeight: '40',
         rowNum: 4,
         align: ['center'],
         data: [
-          ['工程建设项目'],
-          ['施工图设计'],
-          ['工程建设项目'],
-          ['施工图设计'],
-          ['工程建设项目'],
+          ['建设工程项目', '山西建投', "60.32亿"],
+          ['建设工程项目', '山西建投', "60.32亿"],
+          ['建设工程项目', '山西建投', "60.32亿"],
+          ['建设工程项目', '山西建投', "60.32亿"],
+          ['建设工程项目', '山西建投', "60.32亿"],
+          ['建设工程项目', '山西建投', "60.32亿"],
+          ['建设工程项目', '山西建投', "60.32亿"],
+          ['建设工程项目', '山西建投', "60.32亿"],
+          ['建设工程项目', '山西建投', "60.32亿"]
         ],
       },
       companyList: [
@@ -49,18 +53,18 @@ let app = new Vue({
       ],
     }
   },
-  created () {
+  created() {
     this.time = formatDate()
     this.timer = setInterval(() => {
       this.time = formatDate()
     }, 1000)
   },
-  beforeDestroy () {
+  beforeDestroy() {
     if (this.timer) {
       clearInterval(this.timer);
     }
   },
-  mounted () {
+  mounted() {
     // 左侧图表
     setTimeout(() => {
       this.initChartL1()
@@ -76,7 +80,7 @@ let app = new Vue({
     },)
   },
   methods: {
-    convertData (data) {
+    convertData(data) {
       var res = []
       for (var i = 0; i < data.length; i++) {
         var geoCoord = this.geoCoordMap[data[i].name]
@@ -89,7 +93,7 @@ let app = new Vue({
       }
       return res
     },
-    initChinaChart () {
+    initChinaChart() {
       var data = [
         { name: '吕梁市', value: 150 },
         { name: '大同市', value: 190 },
@@ -525,7 +529,7 @@ let app = new Vue({
         ],
       })
     },
-    initChartL1 () {
+    initChartL1() {
       let myChart = echarts.init(document.getElementById("echartL1"));
       let option = {
         grid: {
@@ -663,9 +667,20 @@ let app = new Vue({
         nterval: 2000,
         loopSeries: true,
       })
+      let that = this
+      myChart.on('click', function (param) {
+        console.log(param)
+        if (param.name == '晋能控股') {
+          that.showTip2 = true
+          setTimeout(() => {
+            that.initChartR4()
+            that.initChartR5()
+          })
+        }
+      })
       myChart.setOption(option);
     },
-    initChartL2 () {
+    initChartL2() {
       let myChart = echarts.init(this.$refs['echartL2'])
       var value = 0.45;
       var data = [value];
@@ -736,7 +751,7 @@ let app = new Vue({
       }
       myChart.setOption(option)
     },
-    initChartL3 () {
+    initChartL3() {
       let myChart = echarts.init(this.$refs['echartL3'])
       let option = {
         tooltip: {
@@ -861,7 +876,7 @@ let app = new Vue({
         loopSeries: true,
       })
     },
-    initChartL4 () {
+    initChartL4() {
       let myChart = echarts.init(this.$refs['echartL4'])
       let option = {
         title: {
@@ -918,7 +933,7 @@ let app = new Vue({
         loopSeries: true,
       })
     },
-    initChartL5 () {
+    initChartL5() {
       let myChart = echarts.init(this.$refs['echartL5'])
       let option = {
         title: {
@@ -974,7 +989,7 @@ let app = new Vue({
         nterval: 2000,
         loopSeries: true,
       })
-    }, initChartL6 () {
+    }, initChartL6() {
       let myChart = echarts.init(this.$refs['echartL6'])
       let option = {
         title: {
@@ -1030,7 +1045,7 @@ let app = new Vue({
         nterval: 2000,
         loopSeries: true,
       })
-    }, initChartL7 () {
+    }, initChartL7() {
       let myChart = echarts.init(this.$refs['echartL7'])
       let option = {
         title: {
@@ -1087,7 +1102,164 @@ let app = new Vue({
         loopSeries: true,
       })
     },
-    initChartR1 () {
+    initChartR4() {
+      let myChart = echarts.init(this.$refs['echartR4'])
+      let option = {
+        title: {
+          text: '2022年的可投资总额',
+          x: 'center',
+          y: '87%',
+          textStyle: {
+            color: 'rgba(255,255,255,0.6)',
+            fontSize: 12,
+          },
+        },
+        tooltip: {
+          trigger: 'item',
+        },
+        color: ['#69C1FF', '#4B97CC',],
+        legend: {
+          icon: 'circle',
+          top: 'bottom',
+          orient: 'vertical',
+          right: '1%',
+          textStyle: {
+            color: '#9DB9EB',
+          },
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            label: {
+              normal: {
+                show: true,
+                position: 'center',
+                color: '#4c4a4a',
+                formatter: '{total|' + '462.83' + '}' + '\n\r' + '{active|亿元}',
+                rich: {
+                  total: {
+                    fontSize: 20,
+                    fontFamily: "微软雅黑",
+                    color: '#fff'
+                  },
+                  active: {
+                    fontFamily: "微软雅黑",
+                    fontSize: 15,
+                    color: '#fff'
+                  },
+                }
+              },
+              emphasis: {//中间文字显示
+                show: true,
+              }
+            },
+            radius: ['40%', '60%'],
+            center: ['50%', '45%'],
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: [
+              { value: 1048, name: '已使用额度' },
+              { value: 735, name: '可使用额度' }
+            ],
+
+          },
+        ],
+      }
+      myChart.setOption(option)
+      tools.loopShowTooltip(myChart, option, {
+        nterval: 2000,
+        loopSeries: true,
+      })
+    },
+    initChartR5() {
+      let myChart = echarts.init(this.$refs['echartR5'])
+      let option = {
+        title: {
+          text: '2023年的可投资总额',
+          x: 'center',
+          y: '87%',
+          textStyle: {
+            color: 'rgba(255,255,255,0.6)',
+            fontSize: 12,
+          },
+        },
+        tooltip: {
+          trigger: 'item',
+        },
+        color: ['#69C1FF', '#4B97CC',],
+        legend: {
+          icon: 'circle',
+          top: 'bottom',
+          orient: 'vertical',
+          right: '1%',
+          textStyle: {
+            color: '#9DB9EB',
+          },
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            label: {
+              normal: {
+                show: true,
+                position: 'center',
+                top: '50',
+                color: '#4c4a4a',
+                formatter: '{total|' + '462.83' + '}' + '\n\r' + '{active|亿元}',
+                rich: {
+                  total: {
+                    fontSize: 20,
+                    fontFamily: "微软雅黑",
+                    color: '#fff'
+                  },
+                  active: {
+                    fontFamily: "微软雅黑",
+                    fontSize: 15,
+                    color: '#fff'
+                  },
+                }
+              },
+              emphasis: {//中间文字显示
+                show: true,
+              }
+            },
+            radius: ['40%', '60%'],
+            center: ['50%', '45%'],
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: [
+              { value: 1048, name: '已使用额度' },
+              { value: 735, name: '可使用额度' }
+            ],
+
+          },
+        ],
+      }
+      myChart.setOption(option)
+      tools.loopShowTooltip(myChart, option, {
+        nterval: 2000,
+        loopSeries: true,
+      })
+    },
+    initChartR1() {
       let myChart = echarts.init(this.$refs['echartR1'])
       let option = {
         title: {
@@ -1144,7 +1316,7 @@ let app = new Vue({
         loopSeries: true,
       })
     },
-    initChartR2 () {
+    initChartR2() {
       let myChart = echarts.init(this.$refs['echartR2'])
       let option = {
         title: {
@@ -1201,7 +1373,7 @@ let app = new Vue({
         loopSeries: true,
       })
     },
-    initChartR3 () {
+    initChartR3() {
       let myChart = echarts.init(this.$refs['echartR3'])
       let option = {
         title: {

+ 97 - 15
investment/styles/investHome2.css

@@ -10,8 +10,8 @@ body {
   height: 100%;
   font-size: 14px;
   background-color: #ecffff;
-  font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, 'PingFang SC',
-    'Hiragino Sans GB', Arial, sans-serif;
+  font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, "PingFang SC",
+    "Hiragino Sans GB", Arial, sans-serif;
 }
 
 .flex {
@@ -70,7 +70,7 @@ a {
   display: none;
 }
 #app {
-  background: url('../images/page-bg.png') center center no-repeat;
+  background: url("../images/page-bg.png") center center no-repeat;
   background-size: 100% 100%;
   padding-top: 10px;
   height: 100vh;
@@ -81,7 +81,7 @@ a {
   position: relative;
   height: 70px;
   line-height: 70px;
-  background: url('../images/header-bg.png') center center no-repeat;
+  background: url("../images/header-bg.png") center center no-repeat;
   background-size: 100% 100%;
   text-align: center;
   font-weight: bold;
@@ -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/content-bg2.png") no-repeat center bottom;
   display: flex;
   padding-bottom: 65px;
 }
@@ -117,7 +117,7 @@ a {
   flex-direction: column;
 }
 .dv-border-box-8 {
-  background: url('../images/left-border2.png') no-repeat;
+  background: url("../images/left-border2.png") no-repeat;
   background-size: 100% 100%;
 }
 .left .title {
@@ -138,21 +138,21 @@ a {
 }
 .left .title .text::before {
   position: absolute;
-  content: ' ';
+  content: " ";
   top: 10px;
   left: -40px;
   width: 30px;
   height: 10px;
-  background: url('../images/title-left.png') no-repeat;
+  background: url("../images/title-left.png") no-repeat;
 }
 .left .title .text::after {
   position: absolute;
-  content: ' ';
+  content: " ";
   top: 10px;
   right: -40px;
   width: 30px;
   height: 10px;
-  background: url('../images/title-right.png') no-repeat;
+  background: url("../images/title-right.png") no-repeat;
 }
 .left .content {
   height: calc(100% - 60px);
@@ -245,7 +245,7 @@ a {
   margin-top: 10px;
 }
 .item4 .item4-title::before {
-  content: '';
+  content: "";
   position: absolute;
   left: 0;
   top: 50%;
@@ -328,21 +328,21 @@ a {
 }
 .right .title .text::before {
   position: absolute;
-  content: ' ';
+  content: " ";
   top: 10px;
   left: -40px;
   width: 30px;
   height: 10px;
-  background: url('../images/title-left.png') no-repeat;
+  background: url("../images/title-left.png") no-repeat;
 }
 .right .title .text::after {
   position: absolute;
-  content: ' ';
+  content: " ";
   top: 10px;
   right: -40px;
   width: 30px;
   height: 10px;
-  background: url('../images/title-right.png') no-repeat;
+  background: url("../images/title-right.png") no-repeat;
 }
 .right .content {
   height: calc(100% - 60px);
@@ -460,3 +460,85 @@ a {
 .content-right-r {
   height: 100%;
 }
+.tip {
+  z-index: 999;
+  position: fixed;
+  /* top: 35%;
+  left: 32.5%; */
+  /* width: 35%;
+  height: 30%; */
+  width: 900px;
+  height: 56vh;
+  top: calc(50% - 26vh);
+  left: calc(50% - 450px);
+  background: url("../images/popup.png") no-repeat center;
+  background-color: #133b65;
+  background-size: 100% 100%;
+  padding: 100px 60px 50px;
+}
+.tip1 {
+  position: absolute;
+  font-weight: bold;
+  width: 100px;
+  top: 17px;
+  height: 30px;
+  line-height: 30px;
+  font-size: 20px;
+  text-align: center;
+  left: calc(50% - 50px);
+  background: linear-gradient(-3deg, #99eeff 0%, #99eeff 30%, #ffffff 91%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.tip2 {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-columns: 60% 40%;
+  grid-template-rows: 1fr 1fr;
+  grid-gap: 10px;
+}
+.tip2 > div {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-columns: 10% 90%;
+}
+.tip2-list {
+  display: grid;
+  grid-template-rows: repeat(3, minmax(0, 1fr));
+  background-color: #04224c;
+  padding: 0 10px;
+}
+.tip2-list > div {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.tip2-list > div:nth-child(2) {
+  border-top: 1px solid #69c0ff;
+  border-bottom: 1px solid #69c0ff;
+}
+.tip2-title {
+  writing-mode: vertical-rl;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #133156;
+}
+.pie {
+  background-color: #04224c;
+}
+.tip-down {
+  position: absolute;
+  top: 10px;
+  right: 30px;
+  width: 50px;
+  text-align: center;
+  height: 50px;
+  line-height: 50px;
+  cursor: pointer;
+  font-size: 44px;
+}