Przeglądaj źródła

投资首页替换真数据

liyongyong 1 rok temu
rodzic
commit
414f0c9fca

+ 3 - 2
investment/investHome.html

@@ -15,12 +15,13 @@
     <script src="./libs/element-ui@2.15.9.js"></script>
     <script src="./libs/axios.min.js"></script>
     <script src="./js/request.js"></script>
+    <script src="./js/data.js"></script>
     <script src="./libs/vue-seamless-scroll.min.js"></script>
     <script src="./libs/echarts-tooltip-carousel.js"></script>
   </head>
   <body>
     <div id="app">
-      <!-- <dv-full-screen-container> -->
+      <dv-full-screen-container>
         <header class="my-header">
           <span>投资管理数智中心</span>
           <span class="right">{{time}}</span>
@@ -199,7 +200,7 @@
         <!-- <div class="footer">
           <a class="item" v-for="(item,index) in companyList" :key="index">{{item.name}}</a>
         </div> -->
-      <!-- </dv-full-screen-container> -->
+      </dv-full-screen-container>
     </div>
     <script src="./js/investHome.js"></script>
   </body>

+ 103 - 0
investment/js/data.js

@@ -0,0 +1,103 @@
+let info = [
+  { name: '投资总额', value: 1324.08 },
+  { name: '项目总数', value: 442 },
+  { name: '固定资产', value: 1169.91 },
+  { name: '股权投资', value: 154.17 },
+]
+let statusList = [
+  { name: '新建项目', value: 345.53 },
+  { name: '续建项目', value: 978.55 }
+]
+let executeList = [
+  { name: '万家寨水控', value: 46.99, value2: 50.89 },
+  { name: '山西建设', value: 218.35, value2: 143.84 },
+  { name: '华新燃气', value: 31.83, value2: 25.20 },
+  { name: '国际能源', value: 64.20, value2: 12.19 },
+  { name: '汾酒集团', value: 14.03, value2: 7.69 },
+  { name: '大地控股', value: 47.05, value2: 23.93 },
+  { name: '晋能控股', value: 385.25, value2: 224.89 },
+  { name: '华远陆港', value: 97.57, value2: 112.67 },
+  { name: '山西焦煤', value: 189.07, value2: 121.59 },
+  { name: '潞安化工', value: 106.84, value2: 59.93 },
+  { name: '华阳新材', value: 82.95, value2: 71.34 },
+  { name: '太重集团', value: 80.01, value2: 42.46 },
+  { name: '文旅集团', value: 26.79, value2: 9.64 },
+  { name: '航产集团', value: 41.09, value2: 42.67 },
+  { name: '华舰体育', value: 5.33, value2: 0.80 },
+  { name: '神农科技', value: 14.76, value2: 5.84 },
+  { name: '云时代', value: 63.45, value2: 32.60 },
+  { name: '山西交控', value: 346.36, value2: 335.91 }
+]
+
+let industryList = [
+  { name: '传统产业投资', value: 405.29, value2: '0.30' },
+  { name: '战略新兴产业投资', value: 196.44, value2: '0.15' },
+  { name: '基础产业投资', value: 722.34, value2: '0.55' }
+
+]
+let amountList = [
+  { value: 283.42, name: '山西焦煤' },
+  { value: 622.16, name: '晋能控股' },
+  { value: 251.91, name: '华阳新材' },
+  { value: 163.19, name: '潞安化工' },
+  { value: 46.44, name: '华新燃气' },
+  { value: 32.07, name: '华远陆港' },
+  { value: 49.99, name: '汾酒集团' }
+
+]
+let projectList = [
+  { value: 35, name: '山煤河曲2×350MW低热值煤发电项目', status: '决策审批中' },
+  { value: 50.09, name: '泊里煤矿项目', status: '决策完成' },
+  { value: 50.77, name: '七元煤矿项目', status: '决策完成' },
+  { value: 9.83, name: '新源智慧建设运行总部', status: '决策完成' },
+  { value: 43.59, name: '潇河国际会展中心', status: '决策完成' },
+  { value: 40.3, name: '山西·潇河新城酒店', status: '决策完成' },
+  { value: 18.62, name: '平舒铁路专用线项目', status: '决策完成' },
+  { value: 9.34, name: '清凉湾温泉康养小镇项目', status: '决策完成' },
+  { value: 0.46, name: '山西省马铃薯工程技术研究中心', status: '决策完成' },
+  { value: 45, name: '山西省文化产业园(历史遗留)', status: '决策完成' },
+  { value: 60.21, name: '吴家峁矿井及选煤厂项目中泰煤业(历史遗留项目)', status: '决策完成' },
+  { value: 20.55, name: '孟母养生健康城(历史遗留)', status: '决策完成' },
+  { value: 22.07, name: '潇河国际会议中心', status: '决策完成' },
+  { value: 8.67, name: '大地控股忻州新店矿业有限公司年产800万吨精品砂石骨料项目', status: '决策完成' },
+  { value: 4.01, name: '晋城市万鑫顺达100MW光伏二期项目', status: '决策审批中' },
+  { value: 72.67, name: '同热三期2×100万千万项目', status: '已立项' },
+  { value: 47.98, name: '山西乡宁矿区谭坪煤矿一期工程项目(历史遗留项目)', status: '决策完成' },
+  { value: 15.25, name: '山西焦煤汾西荣欣矿区铁路专用线(一期)工程', status: '决策完成' },
+  { value: 39.3, name: '山西(太重)智能液压挖掘机产业园区生产线建设项目', status: '决策完成' },
+  { value: 35, name: '山煤河曲2×350MW低热值煤发电项目', status: '决策完成' },
+  { value: 60.21, name: '吴家峁矿井及选煤厂项目(历史遗留项目)', status: '决策完成' },
+  { value: 0.74, name: '有机旱作农业国家重点实验室仪器设备采购项目', status: '决策完成' },
+  { value: 1.72, name: '中国北方林果苗木繁育基地项目', status: '决策完成' },
+  { value: 1.53, name: '智慧农机装备园项目', status: '决策完成' },
+  { value: 9.34, name: '中部引黄交口县域供水工程', status: '决策完成' },
+  { value: 7.88, name: '西范灌区东扩工程', status: '决策完成' },
+  { value: 62.27, name: '灵北煤矿矿井及选煤厂项目(历史遗留项目)', status: '决策完成' },
+  { value: 16.73, name: '山西北方铜业有限公司铜矿峪矿园子沟尾矿库项目(历史遗留项目)', status: '决策完成' },
+  { value: 26.14, name: '山西北铜新材料科技有限公司新建高性能压延铜带箔和覆铜板项目(历史遗留项目)', status: '决策完成' },
+  { value: 34.92, name: '侯马北铜铜业有限公司年处理铜精矿150(优化变更 80)万吨综合回收项目(历史遗留项目)', status: '决策完成' },
+  { value: 2.03, name: '娘子关景区创建国家AAAA旅游景区建设项目', status: '决策完成' },
+  { value: 7.84, name: '平朔矿区150MW农光储氢一体化项目', status: '决策完成' },
+  { value: 10.45, name: '山西国际能源和顺综合清洁能源供应(风光储)一体化项目', status: '已立项' },
+  { value: 4.99, name: '应县100MW农光储氢一体化项目', status: '决策完成' },
+  { value: 4.99, name: '山阴100MW农光储氢一体化项目', status: '决策完成' },
+  { value: 5, name: '山西兆光发电有限责任公司100MW农光储一体化项目', status: '决策完成' },
+  { value: 13.56, name: '马家岩煤业', status: '决策完成' },
+  { value: 3.19, name: '山西省滹沱河重点段河道治理工程', status: '决策完成' },
+  { value: 12.39, name: '山西省泽城西安水电站(二期)工程', status: '决策完成' },
+  { value: 2.58, name: '万家寨引黄南干线滤沱河连通工程', status: '决策完成' },
+  { value: 15, name: '山西省万家寨引黄入晋工程总干线南干线泵站二期扩机工程', status: '决策完成' },
+  { value: 40.32, name: '晋中东山供水工程', status: '决策完成' },
+  { value: 27.3, name: '山西省小浪底引黄工程(灌区、工业及城镇生活供水部分)', status: '决策完成' },
+  { value: 20.21, name: '铂龙煤业', status: '决策完成' },
+  { value: 6.34, name: '世行项目煤层气滚动开发续建工程', status: '决策完成' },
+  { value: 5.52, name: '山西潇河国际会议中心有限公司', status: '决策完成' },
+  { value: 10.08, name: '设立山西潇河新城酒店有限公司', status: '决策完成' },
+  { value: 4.98, name: '保健酒园区新增原酒产能项目', status: '决策完成' },
+  { value: 80.53, name: '三交一号矿井及选煤厂', status: '决策完成' },
+  { value: 2.64, name: '山西省智慧旅游云平台项目(二期)', status: '决策完成' },
+  { value: 3.54, name: '吉县-延长输气管道项目', status: '决策完成' },
+  { value: 226.21, name: '太原武宿国际机场三期改扩建工程机场工程', status: '决策完成' },
+  { value: 60, name: '山西省(太重)智能高端装备产业园区项目', status: '决策完成' },
+  { value: 11.68, name: '太忻一体化经济区滹沱河供水工程', status: '决策完成' }
+]

+ 61 - 142
investment/js/investHome.js

@@ -11,24 +11,7 @@ let app = new Vue({
         number: [100],
         content: '{nt}个',
       },
-      storageRecordConfig: {
-        header: ['项目名称', '投资金额', '项目进度'],
-        headerBGC: '#05507b33',
-        oddRowBGC: '#05507b33',
-        evenRowBGC: '',
-        headerHeight: '40',
-        rowNum: 4,
-        align: ['center', 'center', 'center'],
-        data: [
-          ['山煤河曲2×350MW低热值煤发电项目', '35.00亿', '决策审批中'],
-          ['泊里煤矿项目', '50.09亿', '决策完成'],
-          ['七元煤矿项目', '50.77亿', '决策完成'],
-          ['新源智慧建设运行总部', '9.83亿', '决策完成'],
-          ['潇河国际会展中心', '43.59亿', '决策完成'],
-          ['山西·潇河新城酒店', '40.30亿', '决策完成'],
-          ['平舒铁路专用线项目', '18.62亿', '决策完成'],
-        ],
-      },
+      storageRecordConfig: null,
       companyList: [
         { name: '山西焦煤' },
         { name: '晋能控股' },
@@ -49,36 +32,7 @@ let app = new Vue({
         { name: '水控集团' },
         { name: '太重集团' },
       ],
-      amountList: [
-        {
-          name: '山西焦煤',
-          value: '283.42'
-        },
-        {
-          name: '晋能控股',
-          value: '622.15'
-        },
-        {
-          name: '华阳新材',
-          value: '251.91'
-        },
-        {
-          name: '潞安化工',
-          value: '163.19'
-        },
-        {
-          name: '华新燃气',
-          value: '46.44'
-        },
-        {
-          name: '华远陆港',
-          value: '32.07'
-        },
-        {
-          name: '汾酒集团',
-          value: '49.99'
-        },
-      ],
+      amountList: amountList,
       amountTotal: 0,
       classOption: {
         step: 0.5
@@ -100,11 +54,14 @@ let app = new Vue({
     }
   },
   mounted () {
-    // 左侧图表
-    this.initChartL1()
-    this.initChartL2()
-    this.initChartR1()
-    this.initChinaChart()
+    setTimeout(() => {
+      // 左侧图表
+      this.initChartL1()
+      this.initChartL2()
+      this.initChartR1()
+      this.initChinaChart()
+      this.initProjectList()
+    },0)
   },
   methods: {
     numFormat (value) {
@@ -583,7 +540,7 @@ let app = new Vue({
         tooltip: {
           trigger: 'item',
         },
-        color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
+        color: ['#6682f5', '#69c0ff', '#43ede3','#8ba2ff'],
         legend: {
           top: 'center',
           orient: 'vertical',
@@ -604,12 +561,7 @@ let app = new Vue({
                 },
               },
             },
-            data: [
-              { value: 1048, name: '煤炭' },
-              { value: 735, name: '火电' },
-              { value: 580, name: '焦化' },
-              { value: 484, name: '风电' },
-            ],
+            data: statusList,
           },
         ],
       }
@@ -632,7 +584,7 @@ let app = new Vue({
           top: '16%',
           right: '3%',
           left: '10%',
-          bottom: '22%',
+          bottom: '23%',
         },
         legend: {
           top: '1',
@@ -642,27 +594,7 @@ let app = new Vue({
           },
         },
         xAxis: {
-          data: [
-            '家寨水控',
-            '山西建设',
-            '华新燃气',
-            '国际能源',
-            '汾酒集团',
-            '大地控股',
-            '晋能控股',
-            '华远陆港',
-            '山西焦煤',
-            '潞安化工',
-            '华阳新材',
-            '太重集团',
-            '文旅集团',
-            '航产集团',
-            '华舰体育',
-            '神农科技',
-            '云时代',
-            '山西交控'
-
-          ],
+          data: executeList.map(item=>item.name),
           axisLine: {
             show: true, //隐藏X轴轴线
             lineStyle: {
@@ -675,7 +607,7 @@ let app = new Vue({
           },
           axisLabel: {
             show: true,
-            rotate: 50,
+            rotate: 40,
             textStyle: {
               color: 'rgba(255,255,255,0.6)', //X轴文字颜色
             },
@@ -727,26 +659,7 @@ let app = new Vue({
                 ]),
               },
             },
-            data: [
-              46.99,
-              218.3,
-              31.83,
-              64.20,
-              14.03,
-              47.05,
-              385.2,
-              97.57,
-              189.0,
-              106.8,
-              82.95,
-              80.01,
-              26.79,
-              41.09,
-              5.33,
-              14.76,
-              63.45,
-              346.36
-            ],
+            data: executeList.map(item=>item.value),
           },
           {
             name: '实际投资',
@@ -766,26 +679,7 @@ let app = new Vue({
                 ]),
               },
             },
-            data: [
-              50.89,
-              143.84,
-              25.20,
-              12.19,
-              7.69,
-              23.93,
-              224.89,
-              112.67,
-              121.59,
-              59.93,
-              71.34,
-              42.46,
-              9.64,
-              42.67,
-              0.80,
-              5.84,
-              32.60,
-              335.91
-            ],
+            data: executeList.map(item=>item.value2),
           },
         ],
       }
@@ -800,7 +694,7 @@ let app = new Vue({
       let option = {
         tooltip: {
           trigger: 'axis',
-          formatter: '{a0}:{c0}' + '<br/>' + '{a1}:{c1}' + '%',
+          formatter: '{a0}:{c0}' + '亿元' + '<br/>' + '{a1}:{c1}' + '%',
           axisPointer: {
             type: 'cross',
           },
@@ -809,7 +703,7 @@ let app = new Vue({
           top: '16%',
           right: '10%',
           left: '10%',
-          bottom: '15%',
+          bottom: '10%',
         },
         legend: {
           top: '1',
@@ -818,7 +712,7 @@ let app = new Vue({
           },
         },
         xAxis: {
-          data: ['煤炭', '火电', '焦化', '物流贸易', '文旅康养', '水务', '生物', '冶金', '建材'],
+          data: industryList.map(item=> item.name),
           axisLine: {
             show: true, //隐藏X轴轴线
             lineStyle: {
@@ -831,7 +725,7 @@ let app = new Vue({
           },
           axisLabel: {
             show: true,
-            rotate: 20,
+            // rotate: 20,
             textStyle: {
               color: 'rgba(255,255,255,0.6)', //X轴文字颜色
             },
@@ -866,15 +760,11 @@ let app = new Vue({
           },
           {
             type: 'value',
-            name: '',
-            nameTextStyle: {
-              color: 'rgba(255,255,255,0.6)',
-            },
             axisLine: {
               show: false,
-              lineStyle: {
-                color: '#3D7495',
-              },
+            },
+            splitLine: {
+              show: false,
             },
             axisLabel: {
               show: true,
@@ -888,7 +778,7 @@ let app = new Vue({
         series: [
           {
             type: 'bar',
-            name: '柱形数据',
+            name: '投资金额',
             barWidth: 15,
             itemStyle: {
               normal: {
@@ -904,19 +794,31 @@ let app = new Vue({
                 ]),
               },
             },
-            data: [900, 600, 500, 450, 500, 900, 600, 500, 450],
+            data: industryList.map(item=> item.value),
           },
           {
             type: 'line',
-            name: '折线数据',
-            barWidth: 15,
+            name: '投资占比',
+            type: 'line',
             yAxisIndex: 1,
+            smooth: true, //平滑曲线显示
+            showAllSymbol: true, //显示所有图形。
+            symbol: 'circle', //标记的图形为实心圆
+            symbolSize: 4, //标记的大小
+            smooth: false,
             itemStyle: {
-              normal: {
-                color: '#FBE139',
-              },
+              //折线拐点标志的样式
+              color: '#fbe138',
+              borderColor: '#fbe138',
+              width: 1,
+              shadowColor: '#fbe138',
+              shadowBlur: 2,
             },
-            data: [60, 50, 45, 50, 100, 45, 60, 45, 20],
+            lineStyle: {
+              color: '#fbe138',
+              width: 1,
+            },
+            data: industryList.map(item=> item.value2),
           },
         ],
       }
@@ -926,5 +828,22 @@ let app = new Vue({
         loopSeries: true,
       })
     },
+    initProjectList() {
+      let dataList = []
+      projectList.map(item=> {
+        dataList.push([item.name,item.value+'亿',item.status])
+      })
+      this.storageRecordConfig = {
+        header: ['项目名称', '投资金额', '项目进度'],
+        headerBGC: '#05507b33',
+        oddRowBGC: '#05507b33',
+        evenRowBGC: '',
+        headerHeight: '40',
+        rowNum: 5,
+        columnWidth: [350,100],
+        align: ['center', 'center', 'center'],
+        data: dataList,
+      }
+    }
   },
 })

+ 1 - 1
investment/styles/investHome.css

@@ -207,7 +207,7 @@ a {
   background-size: 100% 100%;
 }
 .my-panel .content {
-  height: calc(100% - 60px);
+  height: calc(28vh - 60px);
 }
 .panel-title {
   position: relative;