页面优化初版

investment/investHome.html

@@ -34,7 +34,7 @@
       </header>
       <div class="main">
         <div class="left">
-          <dv-border-box-8 :dur="10">
+          <dv-border-box-8 :dur="10" style="flex:2">
             <div class="my-panel">
               <div class="panel-title">
                 <span class="text">投资关键指标</span>
@@ -52,7 +52,7 @@
                       <i class="el-icon-more"></i>
                     </p>
                     <p>
-                      <i><span class="num">{{numFormat(1324.08)}}</span>亿</i>
+                      <i style="width:100%;text-align: center;"><span class="num">{{numFormat(1324.08)}}</span>亿</i>
                       <!-- <span class="change"><img src="./images/down.png" /> 12.1%</span> -->
                     </p>
                   </div>
@@ -62,7 +62,7 @@
                       <i class="el-icon-more"></i>
                     </p>
                     <p>
-                      <i><span class="num">{{numFormat(442)}}</span>个</i>
+                      <i style="width:100%;text-align: center;"><span class="num">{{numFormat(442)}}</span>个</i>
                       <!-- <span class="change"><img src="./images/down.png" /> 12.1%</span> -->
                     </p>
                   </div>
@@ -72,7 +72,7 @@
                       <i class="el-icon-more"></i>
                     </p>
                     <p>
-                      <i><span class="num">1,169.91</span>亿</i>
+                      <i style="width:100%;text-align: center;"><span class="num">1,169.91</span>亿</i>
                       <!-- <span class="change up"><img src="./images/up.png" /> 12.1%</span> -->
                     </p>
                   </div>
@@ -82,7 +82,7 @@
                       <i class="el-icon-more"></i>
                     </p>
                     <p>
-                      <i><span class="num">{{numFormat(154.17)}}</span>亿</i>
+                      <i style="width:100%;text-align: center;"><span class="num">{{numFormat(154.17)}}</span>亿</i>
                       <!-- <span class="change"><img src="./images/down.png" /> 12.1%</span> -->
                     </p>
                   </div>
@@ -90,7 +90,7 @@
               </div>
             </div>
           </dv-border-box-8>
-          <dv-border-box-8 :dur="11">
+          <dv-border-box-8 :dur="11" style="flex:3">
             <div class="my-panel">
               <div class="panel-title">
                 <span class="text">投资产业分布</span>
@@ -98,7 +98,7 @@
               <div id="echartR1" ref="echartR1" class="content"></div>
             </div>
           </dv-border-box-8>
-          <dv-border-box-8 :dur="12" style="margin-bottom: 0;">
+          <dv-border-box-8 :dur="12" style="margin-bottom: 0;flex:5">
             <div class="my-panel">
               <div class="panel-title">
                 <span class="text">投资执行情况</span>
@@ -160,7 +160,7 @@
           </div>
         </div>
         <div class="right">
-          <dv-border-box-8 :dur="10">
+          <dv-border-box-8 :dur="10" style="flex:2">
             <div class="my-panel">
               <div class="panel-title">
                 <span class="text">五个一体化</span>
@@ -168,7 +168,7 @@
               <div ref="echartL1" class="content"></div>
             </div>
           </dv-border-box-8>
-          <dv-border-box-8 :dur="11">
+          <dv-border-box-8 :dur="11" style="flex:3">
             <div class="my-panel">
               <div class="panel-title">
                 <span class="text">投资阶段分析</span>
@@ -191,7 +191,7 @@
               </div>-->
             </div>
           </dv-border-box-8>
-          <dv-border-box-8 :dur="12" style="margin-bottom: 0;">
+          <dv-border-box-8 :dur="12" style="margin-bottom: 0;flex:5">
             <div class="my-panel">
               <div class="panel-title">
                 <span class="text">重点项目监控</span>

investment/investHome2.html

@@ -40,7 +40,7 @@
       </header>
       <div class="main">
         <div class="left">
-          <dv-border-box-8 :dur="10" style="flex: 1; margin-bottom: 10px;">
+          <dv-border-box-8 :dur="10" style="flex: 2; margin-bottom: 10px;">
             <div class="title">
               <span class="text">投资额度分析</span>
               <!-- <span class="tip-window">2023年</span> -->
@@ -93,7 +93,7 @@
               </div>
             </div>
           </dv-border-box-8>
-          <dv-border-box-8 :dur="10" style="flex: 1; margin-bottom: 10px;">
+          <dv-border-box-8 :dur="10" style="flex: 3; margin-bottom: 10px;">
             <div class="title">
               <span class="text">企业额度分析</span>
               <!-- <span class="tip-window">2023年</span> -->
@@ -102,7 +102,7 @@
               <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;">
+          <dv-border-box-8 :dur="10" style="flex: 5;">
             <div class="title">
               <span class="text">重点项目两线指标</span>
             </div>
@@ -117,7 +117,7 @@
           </dv-border-box-8>
         </div>
         <div class="right">
-          <dv-border-box-8 :dur="10" style="flex: 1; margin-bottom: 10px;">
+          <dv-border-box-8 :dur="10" style="flex: 2; margin-bottom: 10px;">
             <div class="title">
               <span class="text">投资计划分析</span>
               <!-- <span class="tip-window">2023年</span> -->
@@ -179,7 +179,7 @@
               </div>
             </div>
           </dv-border-box-8>
-          <dv-border-box-8 :dur="10" style="flex: 1;margin-bottom: 10px;">
+          <dv-border-box-8 :dur="10" style="flex: 3;margin-bottom: 10px;">
             <div class="title">
               <span class="text">产业布局分析</span>
             </div>
@@ -200,7 +200,7 @@
               </div>
             </div>
           </dv-border-box-8>
-          <dv-border-box-8 :dur="10" style="flex: 1;">
+          <dv-border-box-8 :dur="10" style="flex: 5;">
             <div class="title">
               <span class="text">项目阶段分析</span>
               <!-- <span class="tip-window">省重点项目</span> -->

investment/investHome5.html

@@ -37,7 +37,7 @@
                 class="topCard flex items-center justify-center flex-col  overflow-hidden">
                 <div class="flex items-center justify-center shrink-0"
                   :class="(item.type==1&&item.name)?'titleBackBlue':(item.type==2&&item.name)?'titleBackYellow':''">
-                  <span class="flex items-center justify-center" style="height:40%;width:33%;font-size: 16px;">{{( index
+                  <span class="flex items-center justify-center" style="height:40%;width:33%;font-size: 20px;">{{( index
                     % 2 ) ==
                     0?item.name:''}}</span>
                 </div>
@@ -53,7 +53,7 @@
             <div class="top-rb w-full overflow-hidden">
               <div class="topCard flex items-center justify-center flex-col  overflow-hidden">
                 <div class="flex items-center justify-center shrink-0 titleBackBlue"><span
-                    class="flex items-center justify-center" style="height:40%;width:33%;font-size: 16px;">前期准备</span>
+                    class="flex items-center justify-center" style="height:40%;width:33%;font-size: 20px;">前期准备</span>
                 </div>
                 <span style="color:#1998FF;"><span style="font-size:24px;font-weight: bold;">17</span>个</span>
               </div>
@@ -63,7 +63,7 @@
               </div>
               <div class="topCard flex items-center justify-center flex-col  overflow-hidden">
                 <div class="flex items-center justify-center shrink-0 titleBackBlue"><span
-                    class="flex items-center justify-center" style="height:40%;width:33%;font-size: 16px;">工商变更登记</span>
+                    class="flex items-center justify-center" style="height:40%;width:33%;font-size: 20px;">工商变更登记</span>
                 </div>
                 <span style="color:#1998FF;"><span style="font-size:24px;font-weight: bold;">43</span>个</span>
               </div>
@@ -104,10 +104,10 @@
           <dv-border-box-8 class="overflow-hidden centerBack" :dur="12">
             <div class="foot-b w-full h-full overflow-hidden">
               <div class="foot-bt overflow-hidden">
-                <div class="w-full h-full" style="padding:10px;background-color: #1C355B;">
+                <div class="w-full h-full" style="padding:10px;">
                   <div class="w-full h-full" ref="echart3"></div>
                 </div>
-                <div class="ldMap w-full h-full" style="padding:10px;background-color: #1C355B;">
+                <div class="ldMap w-full h-full" style="padding:10px;">
                   <div class="w-full h-full" ref="echart4"></div>
                   <!-- <div class="flex justify-center items-center">
                     <div class="center-left-bottom-list flex justify-center items-center flex-col">
@@ -121,7 +121,7 @@
                   </div> -->
                 </div>
               </div>
-              <div class=" w-full h-full" style="padding:10px;background-color: #1C355B;">
+              <div class=" w-full h-full" style="padding:10px;">
                 <div class="w-full h-full" ref="echart5"></div>
               </div>
             </div>

investment/js/investHome.js

@@ -1627,8 +1627,8 @@ let app = new Vue({
           allowPointSelect: true,
           showInLegend:  true, // 图例
           cursor: 'pointer',
-          size: 180,
-          innerSize : 110, //环形图中间空白，0为饼图
+          size: 400,
+          innerSize : 250, //环形图中间空白，0为饼图
           depth: 28, //立体高度
           slicedOffset: 23, //动画距离
           dataLabels: {
@@ -1858,10 +1858,10 @@ let app = new Vue({
          }
         ],
         grid: {
-          top: '16%',
+          top: '10%',
           right: '3%',
-          left: '10%',
-          bottom: '23%',
+          left: '7%',
+          bottom: '7%',
         },
         legend: {
           top: '1',
@@ -2004,10 +2004,10 @@ let app = new Vue({
           },
         },
         grid: {
-          top: '16%',
-          right: '10%',
-          left: '10%',
-          bottom: '22%',
+          top: '5%',
+          right: '4%',
+          left: '7%',
+          bottom: '17%',
         },
         // legend: {
         //   top: '1',
@@ -2238,8 +2238,8 @@ let app = new Vue({
           allowPointSelect: true,
           showInLegend:  true, // 图例
           cursor: 'pointer',
-          size: 180,
-          innerSize : 110, //环形图中间空白，0为饼图
+          size: 400,
+          innerSize : 250, //环形图中间空白，0为饼图
           depth: 28, //立体高度
           slicedOffset: 23, //动画距离
           dataLabels: {
@@ -2251,7 +2251,7 @@ let app = new Vue({
       series: [{
         type: 'pie',
         name: '占比',
-        center: ['35%','50%'],
+        center: ['45%','50%'],
         point: {
             events:{
                 click:function(e){ //点击事件
@@ -2410,8 +2410,8 @@ let app = new Vue({
         oddRowBGC: '#05507b33',
         evenRowBGC: '',
         headerHeight: '40',
-        rowNum: 5,
-        columnWidth: [100, 350],
+        rowNum: 8,
+        columnWidth: [100, 550,100],
         align: ['center', 'center', 'center'],
         data: dataList,
       }

investment/js/investHome5.js

@@ -119,7 +119,7 @@ let app = new Vue({
           }
         ],
         grid: {
-          top: '16%',
+          top: '10%',
           right: '3%',
           left: '5%',
           bottom: '10%',
@@ -396,9 +396,9 @@ let app = new Vue({
           // }
         },
         grid: {
-          top: '15%',
-          right: '5%',
-          left: '6%',
+          top: '10%',
+          right: '4%',
+          left: '5%',
           bottom: '10%',
         },
         yAxis: {
@@ -563,15 +563,15 @@ let app = new Vue({
           }
         ],
         grid: {
-          top: '20%',
+          top: '10%',
           right: '3%',
           left: '10%',
-          bottom: '28%',
+          bottom: '10%',
         },
         legend: {
           data: ["高风险", "中风险", '低风险'],
           x: 'center',
-          y: '0px',
+          y: '5px',
           textStyle: {
             color: 'rgba(250,250,250,0.6)',
           },
@@ -714,7 +714,7 @@ let app = new Vue({
         radar: {
           // shape: 'circle',
           center: ['50%', '50%'],
-          radius: 55,
+          radius: 175,
           indicator: [
             { name: '安全风险', max: 100000 },
             { name: '付款风险', max: 100000 },
@@ -817,10 +817,10 @@ let app = new Vue({
           }
         },
         grid: {
-          top: '20%',
+          top: '10%',
           right: '3%',
           left: '5%',
-          bottom: '11%',
+          bottom: '20',
         },
         legend: {
           data: ["预算额", "合同额", "结算额", "支付额"],

investment/styles/investHome.css

@@ -101,7 +101,7 @@ a {
 .main {
   padding: 15px;
   display: flex;
-  height: calc(100vh - 25px);
+  height: calc(100vh - 65px);
   background: url('../images/content-bg.png') no-repeat center bottom;
   background-size: 100% 100%;
   display: flex;
@@ -207,13 +207,13 @@ a {
   background-size: 100% 100%;
 }
 .my-panel .content {
-  height: calc(28vh - 60px);
+  height: calc(100% - 100px);
 }
 .panel-title {
   position: relative;
   text-align: center;
-  height: 50px;
-  line-height: 50px;
+  height: 100px;
+  line-height: 100px;
 }
 .panel-title .text {
   font-size: 20px;
@@ -249,10 +249,14 @@ a {
   width: 80px;
 }
 .boxs {
-  display: flex;
-  flex-wrap: wrap;
+  /* display: flex;
+  flex-wrap: wrap; */
+  display: grid;
+  grid-template-columns: repeat(2, 1fr); 
+  grid-template-rows: repeat(2, 1fr);  
   padding: 10px;
   color: #40A9FF;
+  height: 100%;
 }
 .boxs > div {
   flex: 0 0 50%;
@@ -270,6 +274,7 @@ a {
 }
 .boxs .name {
   color: #f3f3f3;
+  font-size: 18px;
 }
 .boxs .change {
   color: #32EDAA;
@@ -278,7 +283,7 @@ a {
   color: #ED3248;
 }
 .boxs .num {
-  font-size: 24px;
+  font-size: 30px;
   font-weight: 600;
   margin-right: 5px;
 }

investment/styles/investHome2.css

@@ -101,7 +101,7 @@ a {
 }
 .main {
   padding: 15px;
-  height: calc(100vh - 25px);
+  height: calc(100vh - 65px);
   width: 100%;
   overflow: hidden;
   background: url('../images/page-bg.png') no-repeat center bottom;
@@ -124,8 +124,8 @@ a {
 .left .title {
   position: relative;
   text-align: center;
-  height: 50px;
-  line-height: 50px;
+  height: 100px;
+  line-height: 100px;
 }
 .left .title .text {
   font-size: 20px;
@@ -159,7 +159,7 @@ a {
   background: url('../images/title-right2.png') no-repeat;
 }
 .left .content {
-  height: calc(100% - 60px);
+  height: calc(100% - 100px);
   padding: 0 17px 14px;
   display: flex;
 }
@@ -208,8 +208,8 @@ a {
   font-size: 12px;
 }
 .item2 .item2-img {
-  width: 67px;
-  height: 66px;
+  width: 100px;
+  height: 100px;
   /* margin-top: -20px; */
 }
 .item2 .item2-text {
@@ -272,6 +272,7 @@ a {
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  margin: 0 30px;
 }
 .item4 .item4-con .item .title {
   color: #69c0ff;
@@ -339,8 +340,8 @@ a {
 .right .title {
   position: relative;
   text-align: center;
-  height: 50px;
-  line-height: 50px;
+  height: 100px;
+  line-height: 100px;
 }
 .right .title .text {
   font-size: 20px;
@@ -371,7 +372,7 @@ a {
   background: url('../images/title-right2.png') no-repeat;
 }
 .right .content {
-  height: calc(100% - 60px);
+  height: calc(100% - 100px);
   padding: 0 17px 14px;
   display: flex;
 }
@@ -410,6 +411,11 @@ a {
   display: flex;
   flex-direction: column;
 }
+.content-left-r-t,.content-left-r-b{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 .right .content .content-left .content-left-r .content-left-r-t {
   margin-bottom: 10px;
 }
@@ -630,7 +636,7 @@ a {
   width: 200px;
   height: 30px;
   position: absolute;
-  left: calc(50% - 100px);
+  left: calc(50% - 150px);
   bottom: 7%;
   font-weight: bold;
   color: #2cb7e0;
@@ -658,9 +664,11 @@ a {
   width: 100%;
   display: flex;
   align-items: center;
+  height: 45%;
 }
 .content-left-bottom{
   width: 100%;
+  height: 45%;
 }
 .content-left-bottom>.item2{
   margin: 0 auto;

investment/styles/investHome5.css

@@ -125,7 +125,7 @@ a {
   line-height: 100px;
 }
 .panel-title .text {
-  font-size: 40px;
+  font-size: 24px;
   font-weight: 600;
   color: #05fbfe;
   text-shadow: 0px 2px 10px rgba(10, 30, 52, 0.48);
@@ -176,6 +176,7 @@ a {
   display: grid;
   grid-template-columns: repeat(11, 1fr);
   gap: 10px;
+  padding-bottom: 20px;
 }
 .top-rb {
   height: calc(100% - 100px);
@@ -183,10 +184,11 @@ a {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
+  padding-bottom: 20px;
 }
 .topCard > div:first-child {
-  width: 120px;
-  height: 120px;
+  width: 130px;
+  height: 130px;
   background-size: 100% 100%;
 }
 /* .top-lb > .topCard:nth-child(odd) > div:first-child {
@@ -234,12 +236,12 @@ a {
   width: 100%;
   height: 10%;
   margin-top: 5%;
-  font-size: 25px;
+  font-size: 24px;
   font-weight: bold;
 }
 .center-l-list{
   height: 30%;
-  margin: 10% 0;
+  margin: 15% 0;
   background: url('../images5/project.png') no-repeat center;
   background-size: 100% auto;
 }

manpowerPort/js/index2.js

@@ -184,6 +184,7 @@ let app = new Vue({
         ]
       }
       this.commonOption = a
+      this.getData()
     },
     // 生成图表
     generateEcharts () {
@@ -488,7 +489,6 @@ let app = new Vue({
           this.companyList = res.data.map(item => {
             return { name: item.orgName, id: item.orgNumber }
           })
-          this.getData()
           this.judgeCarousel()
           resolve(1);
         })