修改

src/views/report/hydraulicCount/index.vue

@@ -33,7 +33,7 @@
     <div class="charts">
       <normal-card  shadow="always" :bodyStyle="{height:'360px'}">
         <template slot="content">
-            <div class="content-item-head">共有19台设备 <span class="triangle"></span> </div>
+            <div class="content-item1-head">共有19台设备 <span class="triangle"></span> </div>
             <div class="pie-left-content">
                 <base-pie-chart 
                 :options="pieOptions"
@@ -181,14 +181,14 @@ export default {
           tooltip: {
             formatter: '设备数量<br/>{b0}：{c0}'
           },
-           toolbox: {
-            show: true,
-            feature: {
-              mark: { show: true },
-              saveAsImage: { show: true }
-            },
-            right:200,
-          },
+          //  toolbox: {
+          //   show: true,
+          //   feature: {
+          //     mark: { show: true },
+          //     saveAsImage: { show: true }
+          //   },
+          //   right:200,
+          // },
           legend: {
             show: false
           },
@@ -246,12 +246,15 @@ export default {
   margin-bottom: 30px;
 }
 .pie-left-content{
-  width:45%;
+  width:25%;
   height:100%;
   float: left;
+  margin-bottom: 20px;
+  // border:1px solid #1d5d99;
+  border-right:0px;
 }
 .pie-right-content{
-  width:50%;
+  width:20%;
   height:100%;
   float: left;
 }
@@ -265,6 +268,17 @@ export default {
   padding-left:10px;
   line-height:30px;
 }
+.content-item1-head{
+  width:90%;
+  max-width:260px;
+  min-width:200px;
+  margin-top:5px;
+  background-color:#1d5d99;
+  color: #FFF;
+  height:30px;
+  padding-left:10px;
+  line-height:30px;
+}
 .triangle{
       float: right;
       margin-right:-30px;

src/views/screen/index.vue

@@ -587,14 +587,14 @@ export default {
     },
     getBarOptions() {
       return {
-        title: {
-          text: "已服务统计",
-          textStyle: {
-            fontWeight: "600",
-            fontSize: "18",
-            color: "#3fd5f1"
-          }
-        },
+        // title: {
+        //   text: "已服务统计",
+        //   textStyle: {
+        //     fontWeight: "600",
+        //     fontSize: "18",
+        //     color: "#3fd5f1"
+        //   }
+        // },
         color: ["#3398DB"],
         tooltip: {
           trigger: "axis"
@@ -602,8 +602,8 @@ export default {
 
         grid: {
           left: "1%",
-         
-          bottom: "5%",
+          top:"10%",
+          bottom: "2%",
           containLabel: true
         },
         xAxis: [
@@ -1021,6 +1021,65 @@ export default {
       };
     },
     getMapOptions() {
+      var datejson= [
+            //409eff
+
+            
+            //江苏大区
+            {  name: '江苏', color: '#70b9eb' },
+            //内蒙大区
+            {  name: '山西', color: '#4f8eb9' },
+            {  name: '内蒙古', color: '#4f8eb9' },
+            //中部大区
+            {  name: '安徽', color: '#46c37b' },
+            {  name: '河南', color: '#46c37b' },
+            {  name: '湖北', color: '#46c37b' },
+            {  name: '湖南', color: '#46c37b' },
+            {  name: '浙江', color: '#46c37b' },
+            {  name: '江西', color: '#46c37b' },
+            {  name: '上海', color: '#46c37b' },
+            //华北大区
+            {  name: '天津', color: '#67c23a' },
+            {  name: '河北', color: '#67c23a' },
+            {  name: '山东', color: '#67c23a' },
+            //东北大区
+            {  name: '辽宁', color: '#3fb06f' },
+            {  name: '黑龙江', color: '#3fb06f' },
+            {  name: '吉林', color: '#3fb06f' },
+            //南部大区
+            {  name: '福建', color: '#5382bd' },
+            {  name: '贵州', color: '#5382bd' },
+            {  name: '广东', color: '#5382bd' },
+            {  name: '云南', color: '#5382bd' },
+            {  name: '广西', color: '#5382bd' },
+            //西北大区
+            {  name: '青海', color: '#5c90d2' },
+            {  name: '甘肃', color: '#5c90d2' },
+            {  name: '陕西', color: '#5c90d2' },
+            {  name: '宁夏', color: '#5c90d2' },
+            {  name: '新疆', color: '#5c90d2' },
+
+
+            {  name: '北京', color: '#409eff' },
+            {  name: '重庆', color: '#409eff' },
+            {  name: '西藏', color: '#409eff' },
+            {  name: '四川', color: '#409eff' },
+            {  name: '海南', color: '#409eff' },
+            {  name: '台湾', color: '#409eff' },
+            {  name: '香港', color: '#409eff' },
+            {  name: '澳门', color: '#409eff' },
+        ]
+        var customSettings = [];
+        datejson.forEach(function (item, index) {
+            customSettings.push({
+                name: item.name,
+                itemStyle: {
+                    areaColor: item.color,
+                    color: item.color
+                }
+            })
+        })
+
       return {
         //  title: {
         //   text: "风场位置地图",
@@ -1040,6 +1099,7 @@ export default {
             }
           },
           roam: false,
+          regions: customSettings,//设置省市县的样式颜色
           itemStyle: {
             normal: {
               areaColor: "#245baf",
@@ -1081,10 +1141,13 @@ export default {
 
 				    var res = '';
             // res+=params['data'].name+'</br>';
-            res+='风场名称' +' : '+params['name']+'</br>';			
+            res+='风场名称' +' : '+params['data']['name']+'</br>';			
+            res+='所属大区' +' : '+params['data']['depart']+'</br>';			
+            res+='风机数量' +' : '+params['data']['number']+'</br>';			
             res+='风场位置' +' : '+params['data']['address']+'</br>';			
-            res+='液压泵数量' +' : '+params['data']['number']+'</br>';			
-            res+='液压扳手数量' +' : '+params['data']['number']+'</br>';			
+            res+='设备数量' +' : '+params['data']['number']+'</br>';			
+            res+='最近使用时间' +' : 2022-07-29 14:50:56</br>';			
+           
             return res;
 				  }
         },

src/views/screen/index_v1.scss

@@ -21,7 +21,7 @@
 }
 .icon_shdq{
   width:100px;
-
+  margin-top: 23px;
   margin-left:0px;
 }
 .icon_lb{
@@ -120,29 +120,76 @@
   background-color: #111d41;
   margin:5px;
 }
+.left-chart1-header{
+  width:100%;
+  height:20%;
+  float: left;
+  display: inline-block;
+  font-weight: 600;
+  font-size: 18px;
+  color: #3fd5f1;
+  padding-left: 8px;
+  padding-top: 5px;
+}
+.left-chart1-total-box{
+  width:50%;
+  height:80%;
+  float: left;
+  padding-top:5%;
+  display: inline-block;
+}
 .left-chart1-box{
   width:50%;
-  height:100%;
+  height:80%;
   float: left;
   display: inline-block;
 }
+.left-chart1-header-year{
+  width:30%;
+  height: 100%;
+  font-size: 0.9vw;
+  float: right;
+  margin-right: 5px;
+  text-align: center;
+  display: inline-block;
+}
 
 .left-chart1-box-contnet{
   width:100%;
-  height: 20%;
-  font-size: 1.2vw;
+  height: 28%;
+
+  font-size: 0.9vw;
   text-align: center;
   display: inline-block;
 
 }
 .box-number{
- 
+  position: absolute;
+  left:10px;
   color: #ffeb7b;
+  z-index:20;
   padding: 0.05rem 0;
   font-size:3.4vh;
   font-family: electronicFont;
   font-weight: bold;
 }
+.box-number-bg{
+  position: relative;
+  left:0px;
+  z-index:10;
+  color: #505462;
+  padding: 0.05rem 0;
+  font-size:3.4vh;
+  font-family: electronicFont;
+  font-weight: bold;
+}
+.number-content{
+  position: relative;
+  display: inline-block;
+//  background-image:linear-gradient(120deg,#AAA 0%, #CCC 100%);
+  background:#323b58;
+  padding:0px 10px;
+}
 .task-header{
   font-weight: 600;
   font-size: 18px;
@@ -301,24 +348,31 @@
   font-weight: bold;
   position : absolute;
   top:20px;
-  left : 21%; 
+  left : 25%; 
   margin:0 auto;
   z-index: 999;
 }
 .map-left-bottom{
   width: 5vw;
   min-width: 100px;
-  height: 5vh;
+  height: 7vh;
   font-size: 0.6vw;
   position : absolute;
-  bottom:20px;
-  left : 20px; 
+  bottom:43%;
+  right : 20px; 
+  background:#245baf;
+  padding-left:5px;
+  padding-top:1px;
+  border:1px solid #fff;
   z-index: 999;
 }
 .map-left-bottom-head{
   margin-bottom: 5px;
   font-weight: bold;
 }
+.map-left-bottom-line{
+  height:1.5vh;
+}
 .map-left-bottom-title{
   display: inline-block;
   width:60%;
@@ -351,7 +405,7 @@
   position : absolute;
   border:1px solid #fff;
   bottom:10px;
-  right : 10px; 
+  left : 10px; 
   z-index: 999;
  
 }

src/views/screen/preview_v1.vue

@@ -12,7 +12,7 @@
         </div>
       </el-col>
       <el-col :span="8">
-        <div class="grid-content title">工服鲁班® 智能装备管理平台</div>
+        <div class="grid-content title">工服鲁班° 智能装备管理平台</div>
       </el-col>
       <el-col :span="7">
         <!-- <div class="grid-content title_r">
@@ -58,8 +58,9 @@
           <i class="topR"></i>
           <i class="bottomL"></i>
           <i class="bottomR"></i>
-          <div class="left-chart1-box">
-            <div class="left-chart1-box-contnet">
+          <div class="left-chart1-header">已服务统计
+
+              <div class="left-chart1-header-year">
               <el-date-picker
                 v-model="value3"
                 type="year"
@@ -67,10 +68,14 @@
                 placeholder="选择年">
               </el-date-picker>
             </div>
-            <div class="left-chart1-box-contnet">服务螺栓:<i class="box-number">501</i>根</div>
-            <div class="left-chart1-box-contnet">服务风机:<i class="box-number">1545</i>台</div>
-            <div class="left-chart1-box-contnet">服务风场:<i class="box-number">501</i>个</div>
-            <div class="left-chart1-box-contnet"></div>
+          </div>
+        
+          <div class="left-chart1-total-box">
+            
+            <div class="left-chart1-box-contnet">服务螺栓<div class="number-content"><span class="box-number-bg">8888</span> <span class="box-number">0999</span></div>根</div>
+            <div class="left-chart1-box-contnet">服务风机<div class="number-content"><span class="box-number-bg">8888</span> <span class="box-number">0999</span></div>台</div>
+            <div class="left-chart1-box-contnet">服务风场<div class="number-content"><span class="box-number-bg">8888</span> <span class="box-number">0999</span></div>个</div>
+        
 
           </div>
           <div class="left-chart1-box">
@@ -132,7 +137,7 @@
             <i class="bottomL"></i>
             <i class="bottomR"></i>
             <!--地图右下统计-->
-            <div class="map-center-top">设备总数：<i class="box-number">999</i>件</div>
+            <div class="map-center-top">设备总数：<div class="number-content"><span class="box-number-bg">88888</span> <span class="box-number">00999</span></div> 件</div>
             <div class="map-right-bottom">
               <div class="center-alarm-label1" style="font-family:bold;margin-bottom:3px;padding-top:2px;">
                 <div class="alarm-label-title">区域</div>
@@ -168,10 +173,10 @@
               </div>
             </div>
              <div class="map-left-bottom">
-               <div class="map-left-bottom-head">设备状态颜色</div>
-               <div>  <span class="map-left-bottom-title">当天使用</span> <span class="map-left-bottom-color0"></span></div>
-               <div> <span class="map-left-bottom-title">3天内使用</span> <span class="map-left-bottom-color1"></span></div>
-               <div> <span class="map-left-bottom-title">静止状态</span> <span class="map-left-bottom-color2"></span></div>
+               <div class="map-left-bottom-head map-left-bottom-line">设备状态</div>
+               <div class="map-left-bottom-line"> <span class="map-left-bottom-title">当天使用</span> <span class="map-left-bottom-color2"></span></div>
+               <div class="map-left-bottom-line"> <span class="map-left-bottom-title">3天内使用</span> <span class="map-left-bottom-color1"></span></div>
+               <div class="map-left-bottom-line"> <span class="map-left-bottom-title">静止状态</span> <span class="map-left-bottom-color0"></span></div>
             </div>
              <base-map width="100%"   :options="mapOptions" />
           </div>