修改人力图表悬浮窗问题

investment/investHomeGroup.html

@@ -17,6 +17,7 @@
   <script src="./libs/axios.min.js"></script>
   <script src="./js/request.js"></script>
   <script src="./js/data.js"></script>
+  <script src="./js/data5.js"></script>
   <script src="./libs/echarts-liquidfill.min.js"></script>
   <script src="./libs/echarts-tooltip-carousel.js"></script>
   <script src="./js/data2.js"></script>
@@ -318,7 +319,85 @@
         <span class="right">{{time}}</span>
       </header>
       <div class="main">
-        
+        <div class="right-t">
+          <div class="commonBack">
+            <div class="title">
+              <span class="text">固定资产</span>
+            </div>
+            <div class="content top-lb">
+              <div v-for="(item,index) in titleList" :key="index"
+                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: 30px;">{{( index
+                    % 2 ) ==
+                    0?item.name:''}}</span>
+                </div>
+                <span style="color:#1998FF;" v-if="( index % 2 ) == 0"><span
+                    style="font-size:40px;font-weight: bold;">{{item.number}}</span>个</span>
+              </div>
+            </div>
+          </div>
+          <div class="commonBack">
+            <div class="title">
+              <span class="text">股权类</span>
+            </div>
+            <div class="content top-rb">
+              <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: 30px;">前期准备</span>
+                </div>
+                <span style="color:#1998FF;"><span style="font-size:40px;font-weight: bold;">17</span>个</span>
+              </div>
+              <div class="topCard flex items-center justify-center flex-col ">
+                <div class="flex items-center justify-center shrink-0 titleBackBlue">
+                </div>
+              </div>
+              <div class="topCard flex items-center justify-center flex-col ">
+                <div class="flex items-center justify-center shrink-0 titleBackBlue"><span
+                    class="flex items-center justify-center" style="height:40%;width:33%;font-size: 30px;">工商变更登记</span>
+                </div>
+                <span style="color:#1998FF;"><span style="font-size:40px;font-weight: bold;">43</span>个</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="right-c">
+          <div class="centerBack center-l ">
+            <div v-for="(item,index) in centerLeftList" :key="index" class="w-full h-full">
+              <div class="center-l-title flex items-center justify-center"><span
+                  style="margin-right: 10px;color: #0FA9E2;">·</span>{{item.name}}<span
+                  style="margin-left: 10px;color: #0FA9E2;">·</span></div>
+              <div class="center-l-list flex items-center justify-center flex-col" style="padding-left: 30%;">
+                <span style="color:#1998FF;"><span
+                    style="font-size:26px;font-weight: bold;">{{item.value}}</span>个</span>
+                <span>项目数量</span>
+              </div>
+              <div class="center-l-list2 flex items-center justify-center flex-col" style="padding-left: 30%;">
+                <span style="color:#1998FF;"><span
+                    style="font-size:26px;font-weight: bold;">{{item.value2}}</span>个</span>
+                <span>总投资额</span>
+              </div>
+            </div>
+          </div>
+          <div ref="echartR1" class="w-full h-full" @mouseover="echartR1Fd = false" @mouseout="echartR1Fd = true"></div>
+        </div>
+        <div class="right-b">
+          <div>
+            <div class="title">
+              <span class="text">重点项目两线指标</span>
+            </div>
+            <div class="content">
+            </div>
+          </div>
+          <div>
+            <div class="title">
+              <span class="text">项目阶段分析</span>
+            </div>
+            <div class="content">
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>

investment/js/investHomeGroup.js

@@ -2,6 +2,10 @@ let app = new Vue({
   el: '#app',
   data () {
     return {
+      echartR1Fd: true,
+      echartR2Fd: true,
+      echartR3Fd: true,
+      echarts1Time: 16000,
       time: '',
       timer: '',
       totleLimit: '1363.88',
@@ -13,6 +17,24 @@ let app = new Vue({
       mapName: 'shanxi',
       geoCoordMap: {},
       storageRecordConfig2:[],
+      titleList: [
+        { name: '初步设计', type: 1, number: '106' },
+        { name: '', type: 1, number: '' },
+        { name: '详细设计', type: 1, number: '103' },
+        { name: '', type: 1, number: '' },
+        { name: '施工', type: 1, number: '62' },
+        { name: '', type: 1, number: '' },
+        { name: '完工', type: 1, number: '35' },
+        { name: '', type: 1, number: '' },
+        { name: '验收', type: 2, number: '42' },
+        { name: '', type: 1, number: '' },
+        { name: '结算', type: 1, number: '33' }
+      ],
+      centerLeftList: [
+        { name: '正偏差', value: '160', value2: '500' },
+        { name: '容差内', value: '28', value2: '264' },
+        { name: '负偏差', value: '103', value2: '182' }
+      ],
       storageRecordConfig: {
         // waitTime: '30000',
         hoverPause: false,

investment/styles/investHomeGroup.css

@@ -88,6 +88,7 @@ div {
   width: 100%;
   height: calc(100% - 70px);
   display: grid;
+  grid-template-rows: 5fr 8fr 11fr;  
   gap: 10px;
 }
 .LeftBox .card {
@@ -198,7 +199,7 @@ div {
   color: #2cb7e0;
   font-size: 20px;
 }
-.LeftBox .commonBack {
+.LeftBox .commonBack,.RightBox .commonBack {
   background-color: #062c4d;
   border-radius: 15px;
 }
@@ -497,6 +498,107 @@ div {
 .CenterBox .tooltip-cont span{
   color: #69C0FF;
 }
+.RightBox .right-t{
+  display: grid;
+  gap: 10px;
+  grid-template-columns: 3fr 1fr;
+  background: url('../groupImg/langBack.png') no-repeat center;
+  background-size: 100% 100%;
+  padding: 10px;
+}
+.RightBox .right-c,.RightBox .right-b{
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(2, 1fr); 
+}
+.RightBox .right-c >div,.RightBox .right-b >div{
+  background: url('../groupImg/cBack.png') no-repeat center;
+  background-size: 100% 100%;
+  padding: 10px; 
+}
+.RightBox .top-lb {
+  padding: 0px 30px;
+  display: grid;
+  /* grid-template-columns: repeat(11, 1fr); */
+  grid-template-columns: 2.5fr 1fr 2.5fr 1fr 2.5fr 1fr 2.5fr 1fr 2.5fr 1fr 2.5fr;
+  gap: 10px;
+  padding-bottom: 20px;
+}
+.RightBox .top-lb > .topCard:nth-child(odd) > div:first-child,.RightBox .top-rb > .topCard:nth-child(odd) > div:first-child {
+  width: 190px;
+  height: 190px;
+  background-size: 100% 100%;
+}
+.RightBox .top-lb > .topCard:nth-child(even) > div:first-child,.RightBox .top-rb > .topCard:nth-child(even) > div:first-child {
+  width: 100px;
+  height: 100px;
+  background-size: 100% 100%;
+}
+.RightBox .titleBackBlue{
+  background: url('../images5/completed.png') no-repeat center;
+  background-size: 95% 95%;
+}
+.RightBox .titleBackYellow{
+  background: url('../images5/completed2.png') no-repeat center;
+  background-size: 95% 95%;
+}
+.RightBox .top-rb{
+  padding: 0px 30px;
+  display: grid;
+  grid-template-columns: 2.5fr 1fr 2.5fr;
+  gap: 10px;
+  padding-bottom: 20px;
+}
+.RightBox .top-rb > .topCard:nth-child(odd) > div:first-child {
+  background: url('../images5/completed.png') no-repeat center;
+  background-size: 95% 95%;
+}
+.RightBox .top-lb > .topCard:nth-child(even) > div:first-child {
+  background: url('../images5/completedDot.png') no-repeat center;
+  background-size: 100% auto;
+  background-position: 0 25%;
+}
+.RightBox .top-rb > .topCard:nth-child(even) > div:first-child {
+  background: url('../images5/completedDot.png') no-repeat;
+  background-size: 100% auto;
+  background-position: 0 35%;
+}
+.RightBox .centerBack {
+  background: url('../images5/back2.png') no-repeat;
+  background-size: 100% 100%;
+}
+.RightBox .center-l {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  padding: 20px !important;
+}
+.RightBox .center-l > div {
+  background: url('../images5/center-left-list-back.png') no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+  padding: 10%;
+}
+.RightBox .center-l-title {
+  width: 100%;
+  height: 10%;
+  margin-top: 15%;
+  font-size: 30px;
+  font-weight: bold;
+}
+.RightBox .center-l-list{
+  height: 30%;
+  margin: 15% 0;
+  background: url('../images5/project.png') no-repeat center;
+  background-size: 100% auto;
+  font-size: 26px;
+}
+.RightBox .center-l-list2{
+  height: 30%;
+  background: url('../images5/pin.png') no-repeat center;
+  background-size: 100% auto;
+  font-size: 26px;
+}
 /* 公共css */
 /* 宽高纵横比 */
 .aspect-auto {

manpowerPort/js/index.js

@@ -2108,9 +2108,9 @@ let app = new Vue({
       option.title.text = '各省属企业招聘需求公示人次'
       option.legend.data = ['招聘需求公告次数', '招聘需求公告累计公开招聘人数']
       option.legend.show = true
-      option.tooltip.formatter = function (value) {
-        return value[0].axisValue + '：' + (value[0].value - 1) + '<br>' + value[1].axisValue + '：' + (value[1].value - 1)
-      }
+      // option.tooltip.formatter = function (value) {
+      //   return value[0].axisValue + '：' + (value[0].value - 1) + '<br>' + value[1].axisValue + '：' + (value[1].value - 1)
+      // }
       option.yAxis[0] = {
         type: 'log',
         min: 1,
@@ -2197,9 +2197,9 @@ let app = new Vue({
       option.title.text = '各省属企业录用结果公示人次'
       option.legend.data = ['录用结果公示次数', '录用结果公示累计公示人数']
       option.legend.show = true
-      option.tooltip.formatter = function (value) {
-        return value[0].axisValue + '：' + (value[0].value - 1) + '<br>' + value[1].axisValue + '：' + (value[1].value - 1)
-      }
+      // option.tooltip.formatter = function (value) {
+      //   return value[0].axisValue + '：' + (value[0].value - 1) + '<br>' + value[1].axisValue + '：' + (value[1].value - 1)
+      // }
       option.yAxis[0] = {
         type: 'log',
         min: 1,