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

投资首页第2版完成

liyongyong 1 year ago
parent
f3367395e7
commit
f99748f2e8
7 changed files with 324 additions and 174 deletions
Unified View Show Diff Stats
  1. BIN
      investment/images/center1.png
  2. BIN
      investment/images/center2.png
  3. 54 28
      investment/investHome.html
  4. 158 129
      investment/js/investHome.js
  5. 17 5
      investment/js/request.js
  6. 0 0
      investment/libs/datav.min.js
  7. 95 12
      investment/styles/investHome.css

BIN
investment/images/center1.png
View File


BIN
investment/images/center2.png
View File


+ 54 - 28
investment/investHome.html
View File 

@@ -10,7 +10,7 @@
 
     <link rel="stylesheet" href="./styles/investHome.css" />
 
     <link rel="stylesheet" href="./styles/investHome.css" />
 
     <!-- 引入js -->
 
     <!-- 引入js -->
 
     <script src="./libs/vue@2.7.10.js"></script>
 
     <script src="./libs/vue@2.7.10.js"></script>
 
-    <script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.min.vue.js"></script>
 
+    <script src="./libs/datav.min.js"></script>
 
     <script src="./libs/echarts.min.js"></script>
 
     <script src="./libs/echarts.min.js"></script>
 
     <script src="./libs/element-ui@2.15.9.js"></script>
 
     <script src="./libs/element-ui@2.15.9.js"></script>
 
     <script src="./libs/axios.min.js"></script>
 
     <script src="./libs/axios.min.js"></script>
 
@@ -19,14 +19,16 @@
 
   <body>
 
   <body>
 
     <div id="app">
 
     <div id="app">
 
       <!-- <dv-full-screen-container> -->
 
       <!-- <dv-full-screen-container> -->
 
-        <header class="my-header">投资管理数智中心</header>
 
+        <header class="my-header">
 
+          <span>投资管理数智中心</span>
 
+          <span class="right">{{time}}</span>
 
+        </header>
 
         <div class="main">
 
         <div class="main">
 
           <div class="left">
 
           <div class="left">
 
             <dv-border-box-8 :dur="10">
 
             <dv-border-box-8 :dur="10">
 
               <div class="my-panel">
 
               <div class="my-panel">
 
                 <div class="panel-title">
 
                 <div class="panel-title">
 
                   <span class="text">投资关键指标</span>
 
                   <span class="text">投资关键指标</span>
 
-                  <el-date-picker v-model="year" size="small" type="year" class="right-opr"></el-date-picker>
 
                 </div>
 
                 </div>
 
                 <div class="content">
 
                 <div class="content">
 
                   <div class="boxs">
 
                   <div class="boxs">
 
@@ -77,7 +79,7 @@
 
             <dv-border-box-8 :dur="11">
 
             <dv-border-box-8 :dur="11">
 
               <div class="my-panel">
 
               <div class="my-panel">
 
                 <div class="panel-title">
 
                 <div class="panel-title">
 
-                  <span class="text">投资收益情况</span>
 
+                  <span class="text">五个一体化</span>
 
                 </div>
 
                 </div>
 
                 <div ref="echartL1" class="content"></div>
 
                 <div ref="echartL1" class="content"></div>
 
               </div>
 
               </div>
 
@@ -94,29 +96,49 @@
 
           <div class="center">
 
           <div class="center">
 
             <div class="top">
 
             <div class="top">
 
               <div class="box">
 
               <div class="box">
 
-                <img src="./images/center-icon1.png"/>
 
-                <div>
 
-                  <p>总投资额：</p>
 
-                  <p><span style="color: #2efff3">25.12</span>亿</p>
 
+                <div class="t">
 
+                  <img src="./images/center1.png"/>
 
+                  产业转型
 
                 </div>
 
                 </div>
 
-              </div>
 
-              <div class="box">
 
-                <img src="./images/center-icon2.png"/>
 
-                <div>
 
-                  <p>固定资产项目数：</p>
 
-                  <p><span style="color: #efe102">100</span>个</p>
 
+                <div class="flex b">
 
+                  <div>
 
+                    <p>总投资额</p>
 
+                    <p><span>25.12</span>亿</p>
 
+                  </div>
 
+                  <div>
 
+                    <p>项目数量</p>
 
+                    <p><span>15</span>个</p>
 
+                  </div>
 
                 </div>
 
                 </div>
 
               </div>
 
               </div>
 
               <div class="box">
 
               <div class="box">
 
-                <img src="./images/center-icon3.png"/>
 
-                <div>
 
-                  <p>股权项目数：</p>
 
-                  <p><span style="color: #37ec66">16</span>个</p>
 
+                <div class="t">
 
+                  <img src="./images/center1.png"/>
 
+                  数字转型
 
+                </div>
 
+                <div class="flex b">
 
+                  <div>
 
+                    <p>投资金额</p>
 
+                    <p><span>25.12</span>亿</p>
 
+                  </div>
 
+                  <div>
 
+                    <p>项目数量</p>
 
+                    <p><span>15</span>个</p>
 
+                  </div>
 
                 </div>
 
                 </div>
 
               </div>
 
               </div>
 
             </div>
 
             </div>
 
-            <div class="map-box" style="height: 86%;padding-top: 5%;">
 
+            <div class="map-box">
 
               <div ref="echarts-map" style="height: 100%;"></div>
 
               <div ref="echarts-map" style="height: 100%;"></div>
 
+              <div class="status">
 
+                <p>项目状态</p>
 
+                <ul style="padding-left: 30px;">
 
+                  <li>完成决策： <i>15</i></li>
 
+                  <li>进行中： <i>15</i></li>
 
+                  <li>退出： <i>15</i></li>
 
+                  <li>终止： <i>15</i></li>
 
+                </ul>
 
+              </div>
 
             </div>
 
             </div>
 
           </div>
 
           </div>
 
           <div class="right">
 
           <div class="right">
 
@@ -138,29 +160,33 @@
 
                     <i>NO.1</i>
 
                     <i>NO.1</i>
 
                     <div class="flex1">
 
                     <div class="flex1">
 
                       <p>山西焦煤</p>
 
                       <p>山西焦煤</p>
 
-                      <el-progress percentage="80" stroke-width="10" define-back-color="#005094" text-color="#43FF6B"></el-progress>
 
+                      <el-progress percentage="80" stroke-width="10" :show-text="false"></el-progress>
 
                     </div>
 
                     </div>
 
+                    <span class="value">234亿</span>
 
                   </li>
 
                   </li>
 
                   <li class="list-item">
 
                   <li class="list-item">
 
-                    <i>NO.1</i>
 
+                    <i>NO.2</i>
 
                     <div class="flex1">
 
                     <div class="flex1">
 
                       <p>晋能控股</p>
 
                       <p>晋能控股</p>
 
-                      <el-progress percentage="70" stroke-width="10"></el-progress>
 
+                      <el-progress percentage="70" stroke-width="10" :show-text="false"></el-progress>
 
                     </div>
 
                     </div>
 
+                    <span class="value">234亿</span>
 
                   </li>
 
                   </li>
 
                   <li class="list-item">
 
                   <li class="list-item">
 
-                    <i>NO.1</i>
 
+                    <i>NO.3</i>
 
                     <div class="flex1">
 
                     <div class="flex1">
 
                       <p>华阳新材</p>
 
                       <p>华阳新材</p>
 
-                      <el-progress percentage="60" stroke-width="10"></el-progress>
 
+                      <el-progress percentage="60" stroke-width="10" :show-text="false"></el-progress>
 
                     </div>
 
                     </div>
 
+                    <span class="value">234亿</span>
 
                   </li>
 
                   </li>
 
                   <li class="list-item">
 
                   <li class="list-item">
 
-                    <i>NO.1</i>
 
+                    <i>NO.4</i>
 
                     <div class="flex1">
 
                     <div class="flex1">
 
                       <p>陆港国际</p>
 
                       <p>陆港国际</p>
 
-                      <el-progress percentage="50" stroke-width="10"></el-progress>
 
+                      <el-progress percentage="50" stroke-width="10" :show-text="false"></el-progress>
 
                     </div>
 
                     </div>
 
+                    <span class="value">234亿</span>
 
                   </li>
 
                   </li>
 
                 </ul>
 
                 </ul>
 
               </div>
 
               </div>
 
@@ -174,9 +200,9 @@
 
             ></dv-border-box-8>
 
             ></dv-border-box-8>
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
-        <div class="footer">
 
+        <!-- <div class="footer">
 
           <a class="item" v-for="(item,index) in companyList" :key="index">{{item.name}}</a>
 
           <a class="item" v-for="(item,index) in companyList" :key="index">{{item.name}}</a>
 
-        </div>
 
+        </div> -->
 
       <!-- </dv-full-screen-container> -->
 
       <!-- </dv-full-screen-container> -->
 
     </div>
 
     </div>
 
     <script src="./js/investHome.js"></script>
 
     <script src="./js/investHome.js"></script>

+ 158 - 129
investment/js/investHome.js
View File 

@@ -3,6 +3,8 @@ let app = new Vue({
 
   data() {
 
   data() {
 
     return {
 
     return {
 
       year: '2022',
 
       year: '2022',
 
+      time: '',
 
+      timer: '',
 
       mapName: 'shanxi',
 
       mapName: 'shanxi',
 
       geoCoordMap: {},
 
       geoCoordMap: {},
 
       config1: {
 
       config1: {
 
@@ -10,24 +12,7 @@ let app = new Vue({
 
         content: '{nt}个',
 
         content: '{nt}个',
 
       },
 
       },
 
       storageRecordConfig: {
 
       storageRecordConfig: {
 
-        header: ['项目名称', '投资金额', '所属产业', '项目进度', '完成比例'],
 
-        headerBGC: '#05507b33',
 
-        oddRowBGC: '#69c0ff0f',
 
-        evenRowBGC: '',
 
-        headerHeight: '40',
 
-        rowNum: 4,
 
-        align: ['center'],
 
-        data: [
 
-          ['工程建设项目', '21.2亿', '煤炭', '终止', '2.3%'],
 
-          ['工程建设项目', '21.2亿', '煤炭', '退出', '2.3%'],
 
-          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
 
-          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
 
-          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
 
-          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
 
-        ],
 
-      },
 
-      storageRecordConfig2: {
 
-        header: ['项目名称', '投资金额', '所属产业', '项目进度', '完成比例'],
 
+        header: ['项目名称', '投资金额',  '项目进度'],
 
         headerBGC: '#05507b33',
 
         headerBGC: '#05507b33',
 
         oddRowBGC: '#05507b33',
 
         oddRowBGC: '#05507b33',
 
         evenRowBGC: '',
 
         evenRowBGC: '',
 
@@ -35,12 +20,11 @@ let app = new Vue({
 
         rowNum: 4,
 
         rowNum: 4,
 
         align: ['center'],
 
         align: ['center'],
 
         data: [
 
         data: [
 
-          ['工程建设项目', '21.2亿', '煤炭', '终止', '2.3%'],
 
-          ['工程建设项目', '21.2亿', '煤炭', '退出', '2.3%'],
 
-          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
 
-          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
 
-          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
 
-          ['工程建设项目', '21.2亿', '煤炭', '进行中', '2.3%'],
 
+          ['工程建设项目', '21.2亿', '施工图设计'],
 
+          ['工程建设项目', '21.2亿', '施工图设计'],
 
+          ['工程建设项目', '21.2亿', '施工图设计'],
 
+          ['工程建设项目', '21.2亿', '施工图设计'],
 
+          ['工程建设项目', '21.2亿', '施工图设计'],
 
         ],
 
         ],
 
       },
 
       },
 
       companyList: [
 
       companyList: [
 
@@ -65,6 +49,17 @@ let app = new Vue({
 
       ],
 
       ],
 
     }
 
     }
 
   },
 
   },
 
+  created() {
 
+    this.time = formatDate()
 
+    this.timer = setInterval(()=> {
 
+      this.time = formatDate()
 
+    },1000)
 
+  },
 
+  beforeDestroy() {
 
+    if (this.timer) {
 
+      clearInterval(this.timer);
 
+    }
 
+  },
 
   mounted() {
 
   mounted() {
 
     // 左侧图表
 
     // 左侧图表
 
     this.initChartL1()
 
     this.initChartL1()
 
@@ -342,13 +337,28 @@ let app = new Vue({
 
             let tipHtml = `
 
             let tipHtml = `
 
               <div class="tooltip-cont">
 
               <div class="tooltip-cont">
 
                 <p>新开工：<span>工程建设项目</span></p>
 
                 <p>新开工：<span>工程建设项目</span></p>
 
-                <p>总投资额：<span>21.455亿</span></p>
 
+                <p>总投资额：<span>${params.data.value}亿</span></p>
 
                 <p>当前阶段：<span>可论证阶段</span></p>
 
                 <p>当前阶段：<span>可论证阶段</span></p>
 
                 <p>时间节点：<span>2021.10-2022.10</span></p>
 
                 <p>时间节点：<span>2021.10-2022.10</span></p>
 
             </div>`
 
             </div>`
 
             return tipHtml
 
             return tipHtml
 
           },
 
           },
 
         },
 
         },
 
+        visualMap: {
 
+          min: 0,
 
+          max: 300,
 
+          right: 0,
 
+          bottom: 0,
 
+          text: ['高', '低'],
 
+          textStyle: {
 
+            color: '#f1f1f1'
 
+          },
 
+          realtime: false,
 
+          calculable: true,
 
+          inRange: {
 
+            color: ['lightskyblue', '#2754b7']
 
+          }
 
+        },
 
         geo: {
 
         geo: {
 
           show: true,
 
           show: true,
 
           map: 'shanxi',
 
           map: 'shanxi',
 
@@ -368,13 +378,13 @@ let app = new Vue({
 
               areaColor: '#1946a8',
 
               areaColor: '#1946a8',
 
               shadowColor: '#1946a8',
 
               shadowColor: '#1946a8',
 
               borderWidth: 1, //设置外层边框
 
               borderWidth: 1, //设置外层边框
 
-              borderColor: '#54c5e0',
 
+              borderColor: '#1946a8',
 
               shadowOffsetX: 10,
 
               shadowOffsetX: 10,
 
               shadowOffsetY: 5,
 
               shadowOffsetY: 5,
 
-              shadowBlur: 3,
 
+              shadowBlur: 2,
 
             },
 
             },
 
             emphasis: {
 
             emphasis: {
 
-              areaColor: '#0b0098',
 
+              areaColor: '#1946a8',
 
               borderColor: '#d4bc1d',
 
               borderColor: '#d4bc1d',
 
               borderWidth: 2, //设置外层边框
 
               borderWidth: 2, //设置外层边框
 
             },
 
             },
 
@@ -416,7 +426,7 @@ let app = new Vue({
 
             map: this.mapName,
 
             map: this.mapName,
 
             geoIndex: 0,
 
             geoIndex: 0,
 
             aspectScale: 0.75, //长宽比
 
             aspectScale: 0.75, //长宽比
 
-            showLegendSymbol: false, // 存在legend时显示
 
+            showLegendSymbol: true, // 存在legend时显示
 
             label: {
 
             label: {
 
               normal: {
 
               normal: {
 
                 show: true,
 
                 show: true,
 
@@ -480,7 +490,7 @@ let app = new Vue({
 
                 shadowColor: 'yellow',
 
                 shadowColor: 'yellow',
 
               },
 
               },
 
             },
 
             },
 
-            zlevel: 1,
 
+            zlevel: 1000,
 
           },
 
           },
 
           {
 
           {
 
             name: '线路',
 
             name: '线路',
 
@@ -510,24 +520,69 @@ let app = new Vue({
 
     initChartL1() {
 
     initChartL1() {
 
       let myChart = echarts.init(this.$refs['echartL1'])
 
       let myChart = echarts.init(this.$refs['echartL1'])
 
       let option = {
 
       let option = {
 
-        grid: {
 
-          left: '10%',
 
-          top: '18%',
 
-          bottom: '12%',
 
-          right: '8%',
 
+        tooltip: {
 
+          trigger: 'item',
 
         },
 
         },
 
+        color: ['#6682f5','#8ba2ff','#69c0ff','#43ede3'],
 
+        legend: {
 
+          top: 'center',
 
+          orient: 'vertical',
 
+          right: '2%',
 
+          textStyle: {
 
+            color: '#9DB9EB',
 
+          },
 
+        },
 
+        series: [
 
+          {
 
+            name: '',
 
+            type: 'pie',
 
+            radius: ['55%', '80%'],
 
+            labelLine: {
 
+              normal: {
 
+                lineStyle: {
 
+                  width: 1,
 
+                },
 
+              },
 
+            },
 
+            data: [
 
+              { value: 1048, name: '煤炭' },
 
+              { value: 735, name: '火电' },
 
+              { value: 580, name: '焦化' },
 
+              { value: 484, name: '风电' },
 
+            ],
 
+          },
 
+        ],
 
+      }
 
+      myChart.setOption(option)
 
+    },
 
+    initChartL2() {
 
+      let myChart = echarts.init(this.$refs['echartL2'])
 
+      let option = {
 
         tooltip: {
 
         tooltip: {
 
           trigger: 'axis',
 
           trigger: 'axis',
 
           axisPointer: {
 
           axisPointer: {
 
             type: 'shadow',
 
             type: 'shadow',
 
           },
 
           },
 
         },
 
         },
 
+        grid: {
 
+          top: '16%',
 
+          right: '3%',
 
+          left: '10%',
 
+          bottom: '10%',
 
+        },
 
+        legend: {
 
+          top: '1',
 
+          right: '10',
 
+          textStyle: {
 
+            color: 'rgba(250,250,250,0.6)',
 
+          },
 
+        },
 
         xAxis: {
 
         xAxis: {
 
-          data: ['2018年', '2019年', '2020年', '2021年', '2022年', '2023年'],
 
+          data: ['山西焦煤', '山西文旅', '潞安化工', '晋能控股', '山西建投'],
 
           axisLine: {
 
           axisLine: {
 
             show: true, //隐藏X轴轴线
 
             show: true, //隐藏X轴轴线
 
             lineStyle: {
 
             lineStyle: {
 
-              color: '#3D7495',
 
+              color: '#005094',
 
               width: 1,
 
               width: 1,
 
             },
 
             },
 
           },
 
           },
 
@@ -544,9 +599,8 @@ let app = new Vue({
 
         yAxis: [
 
         yAxis: [
 
           {
 
           {
 
             type: 'value',
 
             type: 'value',
 
-            name: '亿元',
 
             nameTextStyle: {
 
             nameTextStyle: {
 
-              color: '#FFF',
 
+              color: '#ebf8ac',
 
             },
 
             },
 
             splitLine: {
 
             splitLine: {
 
               show: true,
 
               show: true,
 
@@ -571,50 +625,51 @@ let app = new Vue({
 
         ],
 
         ],
 
         series: [
 
         series: [
 
           {
 
           {
 
-            type: 'pictorialBar',
 
-            barCategoryGap: '0%',
 
-            symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
 
-            label: {
 
-              show: true,
 
-              position: 'top',
 
-              distance: 5,
 
-              color: '#08DFFE',
 
-              fontSize: 12,
 
-            },
 
+            name: '计划投资',
 
+            type: 'bar',
 
+            barWidth: 15,
 
             itemStyle: {
 
             itemStyle: {
 
               normal: {
 
               normal: {
 
-                color: {
 
-                  type: 'linear',
 
-                  x: 0,
 
-                  y: 0,
 
-                  x2: 0,
 
-                  y2: 1,
 
-                  colorStops: [
 
-                    {
 
-                      offset: 0,
 
-                      color: '#9A11FF',
 
-                    },
 
-                    {
 
-                      offset: 1,
 
-                      color: '#08DFFE',
 
-                    },
 
-                  ],
 
-                  global: false, //  缺省为  false
 
-                },
 
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 
+                  {
 
+                    offset: 0,
 
+                    color: '#69c0ff',
 
+                  },
 
+                  {
 
+                    offset: 1,
 
+                    color: '#082550',
 
+                  },
 
+                ]),
 
               },
 
               },
 
-              emphasis: {
 
-                opacity: 1,
 
+            },
 
+            data: [900, 600, 500, 450, 500],
 
+          },
 
+          {
 
+            name: '实际投资',
 
+            type: 'bar',
 
+            barWidth: 15,
 
+            itemStyle: {
 
+              normal: {
 
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 
+                  {
 
+                    offset: 0,
 
+                    color: '#957DFF',
 
+                  },
 
+                  {
 
+                    offset: 1,
 
+                    color: '#082550',
 
+                  },
 
+                ]),
 
               },
 
               },
 
             },
 
             },
 
-            data: [123, 60, 25, 18, 12, 9],
 
+            data: [500, 900, 600, 800, 450],
 
           },
 
           },
 
         ],
 
         ],
 
       }
 
       }
 
-
 
       myChart.setOption(option)
 
       myChart.setOption(option)
 
     },
 
     },
 
-    initChartL2() {
 
-      let myChart = echarts.init(this.$refs['echartL2'])
 
+    initChartR1() {
 
+      let myChart = echarts.init(this.$refs['echartR1'])
 
       let option = {
 
       let option = {
 
         tooltip: {
 
         tooltip: {
 
           trigger: 'axis',
 
           trigger: 'axis',
 
@@ -624,19 +679,18 @@ let app = new Vue({
 
         },
 
         },
 
         grid: {
 
         grid: {
 
           top: '16%',
 
           top: '16%',
 
-          right: '3%',
 
+          right: '10%',
 
           left: '10%',
 
           left: '10%',
 
           bottom: '10%',
 
           bottom: '10%',
 
         },
 
         },
 
         legend: {
 
         legend: {
 
           top: '1',
 
           top: '1',
 
-          right: '10',
 
           textStyle: {
 
           textStyle: {
 
             color: 'rgba(250,250,250,0.6)',
 
             color: 'rgba(250,250,250,0.6)',
 
           },
 
           },
 
         },
 
         },
 
         xAxis: {
 
         xAxis: {
 
-          data: ['山西焦煤', '山西文旅', '潞安化工', '晋能控股', '山西建投'],
 
+          data: ['煤炭', '火电', '焦化', '物流贸易', '文旅康养','水务','生物','冶金','建材'],
 
           axisLine: {
 
           axisLine: {
 
             show: true, //隐藏X轴轴线
 
             show: true, //隐藏X轴轴线
 
             lineStyle: {
 
             lineStyle: {
 
@@ -657,8 +711,9 @@ let app = new Vue({
 
         yAxis: [
 
         yAxis: [
 
           {
 
           {
 
             type: 'value',
 
             type: 'value',
 
+            name: '亿元',
 
             nameTextStyle: {
 
             nameTextStyle: {
 
-              color: '#ebf8ac',
 
+              color: 'rgba(255,255,255,0.6)',
 
             },
 
             },
 
             splitLine: {
 
             splitLine: {
 
               show: true,
 
               show: true,
 
@@ -680,11 +735,30 @@ let app = new Vue({
 
               },
 
               },
 
             },
 
             },
 
           },
 
           },
 
+          {
 
+            type: 'value',
 
+            name: '%',
 
+            nameTextStyle: {
 
+              color: 'rgba(255,255,255,0.6)',
 
+            },
 
+            axisLine: {
 
+              show: true,
 
+              lineStyle: {
 
+                color: '#3D7495',
 
+              },
 
+            },
 
+            axisLabel: {
 
+              show: true,
 
+              textStyle: {
 
+                color: 'rgba(250,250,250,0.6)',
 
+              },
 
+            },
 
+          },
 
         ],
 
         ],
 
         series: [
 
         series: [
 
           {
 
           {
 
-            name: '计划投资',
 
             type: 'bar',
 
             type: 'bar',
 
+            name: '柱形数据',
 
             barWidth: 15,
 
             barWidth: 15,
 
             itemStyle: {
 
             itemStyle: {
 
               normal: {
 
               normal: {
 
@@ -700,64 +774,19 @@ let app = new Vue({
 
                 ]),
 
                 ]),
 
               },
 
               },
 
             },
 
             },
 
-            data: [900, 600, 500, 450, 500],
 
+            data: [900, 600, 500, 450, 500,900, 600, 500, 450],
 
           },
 
           },
 
           {
 
           {
 
-            name: '实际投资',
 
-            type: 'bar',
 
+            type: 'line',
 
+            name: '折线数据',
 
             barWidth: 15,
 
             barWidth: 15,
 
+            yAxisIndex: 1,
 
             itemStyle: {
 
             itemStyle: {
 
               normal: {
 
               normal: {
 
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 
-                  {
 
-                    offset: 0,
 
-                    color: '#957DFF',
 
-                  },
 
-                  {
 
-                    offset: 1,
 
-                    color: '#082550',
 
-                  },
 
-                ]),
 
-              },
 
-            },
 
-            data: [500, 900, 600, 800, 450],
 
-          },
 
-        ],
 
-      }
 
-      myChart.setOption(option)
 
-    },
 
-    initChartR1() {
 
-      let myChart = echarts.init(this.$refs['echartR1'])
 
-      let option = {
 
-        tooltip: {
 
-          trigger: 'item',
 
-        },
 
-        legend: {
 
-          top: 'center',
 
-          orient: 'vertical',
 
-          right: '2%',
 
-          textStyle: {
 
-            color: '#9DB9EB',
 
-          },
 
-        },
 
-        series: [
 
-          {
 
-            name: '',
 
-            type: 'pie',
 
-            radius: ['55%', '80%'],
 
-            labelLine: {
 
-              normal: {
 
-                lineStyle: {
 
-                  width: 1,
 
-                },
 
+                color: '#FBE139',
 
               },
 
               },
 
             },
 
             },
 
-            data: [
 
-              { value: 1048, name: '煤炭' },
 
-              { value: 735, name: '火电' },
 
-              { value: 580, name: '焦化' },
 
-              { value: 484, name: '风电' },
 
-            ],
 
+            data: [60, 50, 45, 50,100,45,60,45,20],
 
           },
 
           },
 
         ],
 
         ],
 
       }
 
       }

+ 17 - 5
investment/js/request.js
View File 

@@ -27,7 +27,7 @@ function getApiUrl() {
 
     // return 'http://10.0.0.22:8080'     // 闫敏的环境
 
     // return 'http://10.0.0.22:8080'     // 闫敏的环境
 
     // return 'http://10.0.0.8:8080' // 祥慧的环境
 
     // return 'http://10.0.0.8:8080' // 祥慧的环境
 
     // return 'http://10.0.0.115:8080'    // 王蒙的环境
 
     // return 'http://10.0.0.115:8080'    // 王蒙的环境
 
-	return 'http://10.0.0.82:8080'
 
+    return 'http://10.0.0.82:8080'
 
   }
 
   }
 
 }
 
 }
 
 // websocket 前缀
 
 // websocket 前缀
 
@@ -58,7 +58,7 @@ function getMinioUrl() {
 
 const httpRequest = axios.create({
 
 const httpRequest = axios.create({
 
   baseURL: 'http://10.0.0.82:8080', // 测试环境
 
   baseURL: 'http://10.0.0.82:8080', // 测试环境
 
   timeout: 3 * 60 * 1000, // 3分钟等待
 
   timeout: 3 * 60 * 1000, // 3分钟等待
 
-  withCredentials: true // 携带cookie
 
+  withCredentials: true, // 携带cookie
 
 })
 
 })
 
 
 
 // 请求拦截器
 
 // 请求拦截器
 
@@ -152,7 +152,7 @@ function localEnvLogin() {
 
     '/apiSys/login',
 
     '/apiSys/login',
 
     {
 
     {
 
       username: 'admin',
 
       username: 'admin',
 
-      password: '1q2w3e4r5t'
 
+      password: '1q2w3e4r5t',
 
     },
 
     },
 
     {
 
     {
 
       transformRequest: [
 
       transformRequest: [
 
@@ -160,8 +160,8 @@ function localEnvLogin() {
 
           // 将请求数据转换成功 formdata 接收格式
 
           // 将请求数据转换成功 formdata 接收格式
 
           headers['Content-Type'] = 'application/x-www-form-urlencoded'
 
           headers['Content-Type'] = 'application/x-www-form-urlencoded'
 
           return stringify(data)
 
           return stringify(data)
 
-        }
 
-      ]
 
+        },
 
+      ],
 
     }
 
     }
 
   ).then(res => {
 
   ).then(res => {
 
     localStorage.setItem('token', res.data.token || getQueryVariable('token'))
 
     localStorage.setItem('token', res.data.token || getQueryVariable('token'))
 
@@ -177,3 +177,15 @@ function stringify(data) {
 
   ret = ret.substring(0, ret.lastIndexOf('&'))
 
   ret = ret.substring(0, ret.lastIndexOf('&'))
 
   return ret
 
   return ret
 
 }
 
 }
 
+
 
+// 格式化日期
 
+function formatDate(time) {
 
+  let date = time ? new Date(Number(time)) : new Date();
 
+  let Y = date.getFullYear() + '-';
 
+  let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
 
+  let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
 
+  let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
 
+  let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
 
+  let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
 
+  return Y + M + D + h + m + s;
 
+}

File diff suppressed because it is too large
+ 0 - 0
investment/libs/datav.min.js


+ 95 - 12
investment/styles/investHome.css
View File 

@@ -77,19 +77,31 @@ a {
 
   color: #fff;
 
   color: #fff;
 
 }
 
 }
 
 .my-header {
 
 .my-header {
 
+  position: relative;
 
   height: 70px;
 
   height: 70px;
 
   line-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%;
 
   background-size: 100% 100%;
 
-  color: #0bf1ff;
 
   text-align: center;
 
   text-align: center;
 
-  font-size: 25px;
 
+  font-weight: bold;
 
+  font-size: 32px;
 
   font-weight: 600;
 
   font-weight: 600;
 
 }
 
 }
 
+.my-header span {
 
+  background: linear-gradient(-3deg, #99EEFF 0%, #99EEFF 30%, #FFFFFF 91%);
 
+  -webkit-background-clip: text;
 
+  -webkit-text-fill-color: transparent;
 
+}
 
+.my-header span.right {
 
+  position: absolute;
 
+  right: 60px;
 
+  top: 0px;
 
+  font-size: 16px;
 
+}
 
 .main {
 
 .main {
 
   padding: 15px;
 
   padding: 15px;
 
   display: flex;
 
   display: flex;
 
-  height: calc(100% - 70px);
 
+  height: calc(100vh - 25px);
 
   background: url('../images/content-bg.png') no-repeat center bottom;
 
   background: url('../images/content-bg.png') no-repeat center bottom;
 
   background-size: 80%;
 
   background-size: 80%;
 
   display: flex;
 
   display: flex;
 
@@ -114,23 +126,53 @@ a {
 
   flex: 4;
 
   flex: 4;
 
 }
 
 }
 
 .center .top {
 
 .center .top {
 
-  height: 90px;
 
   display: flex;
 
   display: flex;
 
   justify-content: space-between;
 
   justify-content: space-between;
 
 }
 
 }
 
 .center .top .box {
 
 .center .top .box {
 
   flex: 1;
 
   flex: 1;
 
   margin: 0 10px;
 
   margin: 0 10px;
 
-  background-color: #0050943f;
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  color: #40A9FF;
 
+}
 
+.t {
 
+  padding: 15px 0;
 
+  display: flex;
 
+  align-items: center;
 
+  font-size: 20px;
 
+  font-weight: 600;
 
+  background-color: rgba(59,211,255,0.05);
 
+}
 
+.t {
 
+  padding: 15px 0;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  background-color: rgba(59,211,255,0.26);
 
+}
 
+.b {
 
+  padding: 15px 0;
 
   display: flex;
 
   display: flex;
 
   align-items: center;
 
   align-items: center;
 
-  padding-left: 15px;
 
+  justify-content: space-around;
 
+  background-color: rgba(59,211,255,0.16);
 
+  padding: 15px 0;
 
+}
 
+.b span {
 
+  color: #40A9FF;
 
+  font-size: 34px;
 
+  font-weight: 900;
 
+}
 
+.t img {
 
+  margin-right: 10px;
 
 }
 
 }
 
 .box > div {
 
 .box > div {
 
-  margin-left: 10px;
 
+  width: 100%;
 
 }
 
 }
 
 .box > img {
 
 .box > img {
 
-  width: 70px;
 
+  width: 40px;
 
 }
 
 }
 
 .box > div p {
 
 .box > div p {
 
   font-size: 16px;
 
   font-size: 16px;
 
@@ -236,7 +278,7 @@ a {
 
   color: #ED3248;
 
   color: #ED3248;
 
 }
 
 }
 
 .boxs .num {
 
 .boxs .num {
 
-  font-size: 30px;
 
+  font-size: 24px;
 
   font-weight: 600;
 
   font-weight: 600;
 
   margin-right: 5px;
 
   margin-right: 5px;
 
 }
 
 }
 
@@ -252,12 +294,22 @@ a {
 
   margin-bottom: 15px;
 
   margin-bottom: 15px;
 
 }
 
 }
 
 .list .list-item i {
 
 .list .list-item i {
 
-  padding: 5px 10px;
 
-  color: #ffc704;
 
-  border: 1px solid #ffc704;
 
+  padding: 8px 10px;
 
+  color: #40A9FF;
 
+  border: 1px solid #40A9FF;
 
   border-radius: 8px;
 
   border-radius: 8px;
 
   margin-right: 15px;
 
   margin-right: 15px;
 
 }
 
 }
 
+.list-item .value {
 
+  align-self: end;
 
+  margin-left: 10px;
 
+}
 
+.list-item  .flex1 p {
 
+  margin-bottom: 10px;
 
+}
 
+.el-progress-bar__outer {
 
+  background-color: #005094;
 
+}
 
 .tooltip-cont p {
 
 .tooltip-cont p {
 
   line-height: 1.8;
 
   line-height: 1.8;
 
   color: #f3f3f3;
 
   color: #f3f3f3;
 
@@ -265,3 +317,34 @@ a {
 
 .tooltip-cont span{
 
 .tooltip-cont span{
 
   color: #15F7FF;
 
   color: #15F7FF;
 
 }
 
 }
 
+.el-progress__text {
 
+  color: #fff;
 
+}
 
+.map-box {
 
+  height: calc(100% - 150px);
 
+  position: relative;
 
+  padding: 30px 0;
 
+}
 
+.status {
 
+  position: absolute;
 
+  bottom: 20px;
 
+  left: 15px;
 
+  background-color: rgba(3,10,12,0.46);
 
+  border: 1px solid #afadad;
 
+}
 
+.status p {
 
+  background-color: rgb(39 122 145 / 0.56);
 
+  line-height: 35px;
 
+  text-align: center;
 
+  font-size: 16px;
 
+  color: #40A9FF;
 
+}
 
+.status li {
 
+  line-height: 25px;
 
+  padding-right: 15px;
 
+}
 
+.status i {
 
+  font-size: 16px;
 
+  font-weight: 600;
 
+  color: #40A9FF;
 
+}

Some files were not shown because too many files changed in this diff