投资首页优化

investment/investHome.html

@@ -29,6 +29,18 @@
               <div class="my-panel">
                 <div class="panel-title">
                   <span class="text">投资关键指标</span>
+                  <span class="right-date">
+                    <el-date-picker
+                      v-model="year"
+                      prefix-icon="el-icon-date"
+                      size="small"
+                      type="year"
+                      popper-class="date-popper"
+                      :clearable="false"
+                      :editable="false"
+                      placeholder="选择年">
+                    </el-date-picker>
+                  </span>
                 </div>
                 <div class="content">
                   <div class="boxs">
@@ -38,8 +50,8 @@
                         <i class="el-icon-more"></i>
                       </p>
                       <p>
-                        <i><span class="num">825.60</span>亿</i>
-                        <span class="change"><img src="./images/down.png" /> 12.1%</span>
+                        <i><span class="num">1324.08</span>亿</i>
+                        <!-- <span class="change"><img src="./images/down.png" /> 12.1%</span> -->
                       </p>
                     </div>
                     <div>
@@ -48,8 +60,8 @@
                         <i class="el-icon-more"></i>
                       </p>
                       <p>
-                        <i><span class="num">654</span>个</i>
-                        <span class="change"><img src="./images/down.png" /> 12.1%</span>
+                        <i><span class="num">442</span>个</i>
+                        <!-- <span class="change"><img src="./images/down.png" /> 12.1%</span> -->
                       </p>
                     </div>
                     <div>
@@ -58,8 +70,8 @@
                         <i class="el-icon-more"></i>
                       </p>
                       <p>
-                        <i><span class="num">825.60</span>亿</i>
-                        <span class="change up"><img src="./images/up.png" /> 12.1%</span>
+                        <i><span class="num">1169.91</span>亿</i>
+                        <!-- <span class="change up"><img src="./images/up.png" /> 12.1%</span> -->
                       </p>
                     </div>
                     <div>
@@ -68,8 +80,8 @@
                         <i class="el-icon-more"></i>
                       </p>
                       <p>
-                        <i><span class="num">325.00</span>亿</i>
-                        <span class="change"><img src="./images/down.png" /> 12.1%</span>
+                        <i><span class="num">154.17</span>亿</i>
+                        <!-- <span class="change"><img src="./images/down.png" /> 12.1%</span> -->
                       </p>
                     </div>
                   </div>
@@ -79,7 +91,7 @@
             <dv-border-box-8 :dur="11">
               <div class="my-panel">
                 <div class="panel-title">
-                  <span class="text">五个一体化</span>
+                  <span class="text">投资阶段</span>
                 </div>
                 <div ref="echartL1" class="content"></div>
               </div>
@@ -94,7 +106,7 @@
             </dv-border-box-8>
           </div>
           <div class="center">
-            <div class="top">
+            <!-- <div class="top">
               <div class="box">
                 <div class="t">
                   <img src="./images/center1.png"/>
@@ -127,10 +139,12 @@
                   </div>
                 </div>
               </div>
-            </div>
+            </div> -->
             <div class="map-box">
               <div ref="echarts-map" style="height: 100%;"></div>
-              <div class="status">
+            <!-- 项目状态 -->
+
+              <!-- <div class="status">
                 <p>项目状态</p>
                 <ul style="padding-left: 30px;">
                   <li>完成决策： <i>15</i></li>
@@ -138,7 +152,7 @@
                   <li>退出： <i>15</i></li>
                   <li>终止： <i>15</i></li>
                 </ul>
-              </div>
+              </div> -->
             </div>
           </div>
           <div class="right">

investment/js/investHome.js

@@ -1,6 +1,6 @@
 let app = new Vue({
   el: '#app',
-  data() {
+  data () {
     return {
       year: '2022',
       time: '',
@@ -12,19 +12,21 @@ let app = new Vue({
         content: '{nt}个',
       },
       storageRecordConfig: {
-        header: ['项目名称', '投资金额',  '项目进度'],
+        header: ['项目名称', '投资金额', '项目进度'],
         headerBGC: '#05507b33',
         oddRowBGC: '#05507b33',
         evenRowBGC: '',
         headerHeight: '40',
         rowNum: 4,
-        align: ['center'],
+        align: ['center', 'center', 'center'],
         data: [
-          ['工程建设项目', '21.2亿', '施工图设计'],
-          ['工程建设项目', '21.2亿', '施工图设计'],
-          ['工程建设项目', '21.2亿', '施工图设计'],
-          ['工程建设项目', '21.2亿', '施工图设计'],
-          ['工程建设项目', '21.2亿', '施工图设计'],
+          ['山煤河曲2×350MW低热值煤发电项目', '35.00亿', '决策审批中'],
+          ['泊里煤矿项目', '50.09亿', '决策完成'],
+          ['七元煤矿项目', '50.77亿', '决策完成'],
+          ['新源智慧建设运行总部', '9.83亿', '决策完成'],
+          ['潇河国际会展中心', '43.59亿', '决策完成'],
+          ['山西·潇河新城酒店', '40.30亿', '决策完成'],
+          ['平舒铁路专用线项目', '18.62亿', '决策完成'],
         ],
       },
       companyList: [
@@ -49,18 +51,18 @@ let app = new Vue({
       ],
     }
   },
-  created() {
+  created () {
     this.time = formatDate()
-    this.timer = setInterval(()=> {
+    this.timer = setInterval(() => {
       this.time = formatDate()
-    },1000)
+    }, 1000)
   },
-  beforeDestroy() {
+  beforeDestroy () {
     if (this.timer) {
       clearInterval(this.timer);
     }
   },
-  mounted() {
+  mounted () {
     // 左侧图表
     this.initChartL1()
     this.initChartL2()
@@ -68,7 +70,7 @@ let app = new Vue({
     this.initChinaChart()
   },
   methods: {
-    convertData(data) {
+    convertData (data) {
       var res = []
       for (var i = 0; i < data.length; i++) {
         var geoCoord = this.geoCoordMap[data[i].name]
@@ -81,7 +83,7 @@ let app = new Vue({
       }
       return res
     },
-    initChinaChart() {
+    initChinaChart () {
       var data = [
         { name: '吕梁市', value: 150 },
         { name: '大同市', value: 190 },
@@ -327,6 +329,8 @@ let app = new Vue({
         // 地区经纬度
         this.geoCoordMap[name] = v.properties.cp
       })
+      // <p>当前阶段：<span>可论证阶段</span></p>
+      // <p>时间节点：<span>2021.10-2022.10</span></p>
 
       myChart.setOption({
         tooltip: {
@@ -338,13 +342,13 @@ let app = new Vue({
               <div class="tooltip-cont">
                 <p>新开工：<span>工程建设项目</span></p>
                 <p>总投资额：<span>${params.data.value}亿</span></p>
-                <p>当前阶段：<span>可论证阶段</span></p>
-                <p>时间节点：<span>2021.10-2022.10</span></p>
             </div>`
+            callback(ticket, tipHtml)
             return tipHtml
           },
         },
         visualMap: {
+          show: false,
           min: 0,
           max: 300,
           right: 0,
@@ -354,7 +358,7 @@ let app = new Vue({
             color: '#f1f1f1'
           },
           realtime: false,
-          calculable: true,
+          calculable: false,
           inRange: {
             color: ['lightskyblue', '#2754b7']
           }
@@ -517,13 +521,13 @@ let app = new Vue({
         ],
       })
     },
-    initChartL1() {
+    initChartL1 () {
       let myChart = echarts.init(this.$refs['echartL1'])
       let option = {
         tooltip: {
           trigger: 'item',
         },
-        color: ['#6682f5','#8ba2ff','#69c0ff','#43ede3'],
+        color: ['#6682f5', '#8ba2ff', '#69c0ff', '#43ede3'],
         legend: {
           top: 'center',
           orient: 'vertical',
@@ -555,20 +559,20 @@ let app = new Vue({
       }
       myChart.setOption(option)
     },
-    initChartL2() {
+    initChartL2 () {
       let myChart = echarts.init(this.$refs['echartL2'])
       let option = {
         tooltip: {
           trigger: 'axis',
           axisPointer: {
-            type: 'shadow',
+            type: 'cross',
           },
         },
         grid: {
           top: '16%',
           right: '3%',
           left: '10%',
-          bottom: '10%',
+          bottom: '22%',
         },
         legend: {
           top: '1',
@@ -578,7 +582,27 @@ let app = new Vue({
           },
         },
         xAxis: {
-          data: ['山西焦煤', '山西文旅', '潞安化工', '晋能控股', '山西建投'],
+          data: [
+            '家寨水控',
+            '山西建设',
+            '华新燃气',
+            '国际能源',
+            '汾酒集团',
+            '大地控股',
+            '晋能控股',
+            '华远陆港',
+            '山西焦煤',
+            '潞安化工',
+            '华阳新材',
+            '太重集团',
+            '文旅集团',
+            '航产集团',
+            '华舰体育',
+            '神农科技',
+            '云时代',
+            '山西交控'
+
+          ],
           axisLine: {
             show: true, //隐藏X轴轴线
             lineStyle: {
@@ -591,6 +615,7 @@ let app = new Vue({
           },
           axisLabel: {
             show: true,
+            rotate: 50,
             textStyle: {
               color: 'rgba(255,255,255,0.6)', //X轴文字颜色
             },
@@ -627,7 +652,7 @@ let app = new Vue({
           {
             name: '计划投资',
             type: 'bar',
-            barWidth: 15,
+            barWidth: 10,
             itemStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -642,12 +667,31 @@ let app = new Vue({
                 ]),
               },
             },
-            data: [900, 600, 500, 450, 500],
+            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
+            ],
           },
           {
             name: '实际投资',
             type: 'bar',
-            barWidth: 15,
+            barWidth: 10,
             itemStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -662,26 +706,46 @@ let app = new Vue({
                 ]),
               },
             },
-            data: [500, 900, 600, 800, 450],
+            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
+            ],
           },
         ],
       }
       myChart.setOption(option)
     },
-    initChartR1() {
+    initChartR1 () {
       let myChart = echarts.init(this.$refs['echartR1'])
       let option = {
         tooltip: {
           trigger: 'axis',
+          formatter: '{a0}：{c0}' + '<br/>' + '{a1}：{c1}' + '%',
           axisPointer: {
-            type: 'shadow',
+            type: 'cross',
           },
         },
         grid: {
           top: '16%',
           right: '10%',
           left: '10%',
-          bottom: '10%',
+          bottom: '15%',
         },
         legend: {
           top: '1',
@@ -690,7 +754,7 @@ let app = new Vue({
           },
         },
         xAxis: {
-          data: ['煤炭', '火电', '焦化', '物流贸易', '文旅康养','水务','生物','冶金','建材'],
+          data: ['煤炭', '火电', '焦化', '物流贸易', '文旅康养', '水务', '生物', '冶金', '建材'],
           axisLine: {
             show: true, //隐藏X轴轴线
             lineStyle: {
@@ -703,6 +767,7 @@ let app = new Vue({
           },
           axisLabel: {
             show: true,
+            rotate: 20,
             textStyle: {
               color: 'rgba(255,255,255,0.6)', //X轴文字颜色
             },
@@ -737,18 +802,19 @@ let app = new Vue({
           },
           {
             type: 'value',
-            name: '%',
+            name: '',
             nameTextStyle: {
               color: 'rgba(255,255,255,0.6)',
             },
             axisLine: {
-              show: true,
+              show: false,
               lineStyle: {
                 color: '#3D7495',
               },
             },
             axisLabel: {
               show: true,
+              formatter: '{value} %',
               textStyle: {
                 color: 'rgba(250,250,250,0.6)',
               },
@@ -774,7 +840,7 @@ let app = new Vue({
                 ]),
               },
             },
-            data: [900, 600, 500, 450, 500,900, 600, 500, 450],
+            data: [900, 600, 500, 450, 500, 900, 600, 500, 450],
           },
           {
             type: 'line',
@@ -786,7 +852,7 @@ let app = new Vue({
                 color: '#FBE139',
               },
             },
-            data: [60, 50, 45, 50,100,45,60,45,20],
+            data: [60, 50, 45, 50, 100, 45, 60, 45, 20],
           },
         ],
       }

investment/styles/investHome.css

@@ -46,7 +46,7 @@ body {
   font-size: 12px;
 }
 .main-color {
-  color: #0bf1ff;
+  color: #40A9FF;
 }
 .danger-color {
   color: #f15450 !important;
@@ -103,7 +103,7 @@ a {
   display: flex;
   height: calc(100vh - 25px);
   background: url('../images/content-bg.png') no-repeat center bottom;
-  background-size: 80%;
+  background-size: 100% 100%;
   display: flex;
   padding-bottom: 65px;
 }
@@ -252,7 +252,7 @@ a {
   display: flex;
   flex-wrap: wrap;
   padding: 10px;
-  color: #05fbfe;
+  color: #40A9FF;
 }
 .boxs > div {
   flex: 0 0 50%;
@@ -310,18 +310,81 @@ a {
 .el-progress-bar__outer {
   background-color: #005094;
 }
+.tooltip-cont {
+  margin: -15px;
+  border: 1px solid #3699FF;
+  border-radius: 8px;
+  padding: 15px;
+  background-color: rgb(39 122 145 / 0.36);
+}
 .tooltip-cont p {
   line-height: 1.8;
   color: #f3f3f3;
+  position: relative;
+  padding-left: 12px;
+}
+.tooltip-cont p::before {
+  position: absolute;
+  display: inline-block;
+  content: '';
+  left: 0px;
+  top: 10px;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background-color: #40A9FF;
 }
 .tooltip-cont span{
-  color: #15F7FF;
+  color: #69C0FF;
+}
+.right-date {
+ position: absolute;
+  right: 15px;
+  width: 85px;
+}
+.date-popper {
+  background-color: #20414b;
+  border: 1px solid #3699FF;
+  border-radius: 8px;
+}
+.el-popper[x-placement^=bottom] .popper__arrow {
+  border-bottom-color: #3699FF;
+}
+.el-popper[x-placement^="bottom"] .popper__arrow::after {
+  border-bottom-color: #20414b;
+}
+.date-popper .el-date-picker__header-label {
+  color: #d6cfcf;
+}
+.el-picker-panel__icon-btn {
+  color: #fff;
+}
+.date-popper .el-year-table td {
+  padding: 10px 3px;
+}
+.date-popper .el-year-table td .cell {
+  color: #d6cfcf;
+}
+.right-date .el-date-editor--year {
+  width: 100%;
+}
+.right-date .el-date-editor--year .el-input__inner{
+  background: rgba(0,80,148,0.3);
+  border: 1px solid #21C1FF;
+  border-radius: 4px 12px 4px 4px;
+  color: #fff;
+  padding: 0 15px;
+}
+.right-date .el-date-editor--year .el-input__prefix {
+  left: auto;
+  right: 5px;
+  color: #40A9FF;
 }
 .el-progress__text {
   color: #fff;
 }
 .map-box {
-  height: calc(100% - 150px);
+  height: 100%;
   position: relative;
   padding: 30px 0;
 }
@@ -348,3 +411,7 @@ a {
   font-weight: 600;
   color: #40A9FF;
 }
+.dv-scroll-board .header {
+  font-weight: 600 !important;
+  color: #2ABBFF;
+}

manpower/js/index.js

@@ -57,10 +57,6 @@ let app = new Vue({
           ['<span class="lightOut"><span class="	light yellow	"></span></span>', '	2022.12.07	 ', '	华舰体育	 ', '	六定相关文件未按要求备案	 '],
           ['<span class="lightOut"><span class="	light yellow	"></span></span>', '	2022.12.07	 ', '	文旅集团	 ', '	六定相关文件未按要求备案	 '],
           ['<span class="lightOut"><span class="	light yellow	"></span></span>', '	2022.12.07	 ', '	水控集团	 ', '	六定相关文件未按要求备案	 '],
-
-
-
-
         ],
         // data: [
         //   ['<span style-"display:inline-block; width:15px;height:15px;border-radius:50%;background-color:green;"></span>', '2022年1月', '山西焦煤', '已经开展高层次人才引进工作'],
@@ -92,7 +88,6 @@ let app = new Vue({
           ['<span class="lightOut"><span class="	light yellow	"></span></span>', '	航产集团	 ', '	经营业绩考核12月数据未获取	 ', '	2022.12.01-12.31	 ', '	15	 '],
           ['<span class="lightOut"><span class="	light yellow	"></span></span>', '	华舰体育	 ', '	经营业绩考核12月数据未获取	 ', '	2022.12.01-12.31	 ', '	15	 '],
           ['<span class="lightOut"><span class="	light yellow	"></span></span>', '	文旅集团	 ', '	六定长效机制情况数据更新错误	 ', '	2022.12.01-12.31	 ', '	-	 '],
-
         ],
       },
       companyList: companyList,
@@ -1407,21 +1402,19 @@ let app = new Vue({
       option.title.text = '各省属企业年利润与当年累计招聘人数'
       option.legend.data = ['2022年利润(万）', '2022年累计招聘数']
       option.legend.show = true
-      option.yAxis[0].max = 
-      option.yAxis[0].min = 
       option.yAxis[0] = {
         max: function (value) {
           if (Math.abs(value.max) > Math.abs(value.min)) {
-            return (Math.abs(value.max) * 1.2).toFixed(2);
+            return (Math.abs(value.max) * 1.2).toFixed(2)
           } else {
-            return (Math.abs(value.min) * 1.2).toFixed(2);
+            return (Math.abs(value.min) * 1.2).toFixed(2)
           }
         },
         min: function (value) {
           if (Math.abs(value.max) > Math.abs(value.min)) {
-            return (-Math.abs(value.max) * 1.2).toFixed(2);
+            return (-Math.abs(value.max) * 1.2).toFixed(2)
           } else {
-            return (-Math.abs(value.min) * 1.2).toFixed(2);
+            return (-Math.abs(value.min) * 1.2).toFixed(2)
           }
         },
         type: 'value',
@@ -1461,19 +1454,18 @@ let app = new Vue({
         },
         max: function (value) {
           if (Math.abs(value.max) > Math.abs(value.min)) {
-            return (Math.abs(value.max) * 1.2).toFixed(2);
+            return (Math.abs(value.max) * 1.2).toFixed(2)
           } else {
-            return (Math.abs(value.min) * 1.2).toFixed(2);
+            return (Math.abs(value.min) * 1.2).toFixed(2)
           }
         },
         min: function (value) {
           if (Math.abs(value.max) > Math.abs(value.min)) {
-            return (-Math.abs(value.max) * 1.2).toFixed(2);
+            return (-Math.abs(value.max) * 1.2).toFixed(2)
           } else {
-            return (-Math.abs(value.min) * 1.2).toFixed(2);
+            return (-Math.abs(value.min) * 1.2).toFixed(2)
           }
-        }
-
+        },
       })
       myChart.setOption(option)
     },