优化驾驶舱

src/views/menu/cockpit/components/comprehensiveData.vue

@@ -26,15 +26,15 @@
             </van-col>
             <van-col :span="8" class="boxmain">
               <div>应完成</div>
-              <div class="wj-title-blue">{{ infoByType[item].shouldCompleteCount }}</div>
+              <div class="wj-title-blue font5vw">{{ infoByType[item].shouldCompleteCount }}</div>
             </van-col>
             <van-col :span="8" class="boxmain centerBox">
               <div>已完成</div>
-              <div class="wj-title-blue">{{ infoByType[item].completedCount }}</div>
+              <div class="wj-title-blue font5vw">{{ infoByType[item].completedCount }}</div>
             </van-col>
             <van-col :span="8" class="boxmain">
               <div>完成率</div>
-              <div class="wj-title-blue">{{ parseInt(infoByType[item].completedRate * 100) }}%</div>
+              <div class="wj-title-blue font5vw">{{ parseInt(infoByType[item].completedRate * 100) }}%</div>
             </van-col>
           </van-row>
         </div>
@@ -64,16 +64,16 @@
             </van-col>
             <van-col :span="8" class="boxmain">
               <div>隐患数</div>
-              <div class="wj-title-blue">{{ resumptionList['隐患数'] }}</div>
+              <div class="wj-title-blue font5vw">{{ resumptionList['隐患数'] }}</div>
             </van-col>
             <van-col :span="8" class="boxmain centerBox">
               <div>已整改</div>
-              <div class="wj-title-blue">{{ resumptionList['已整改'] }}</div>
+              <div class="wj-title-blue font5vw">{{ resumptionList['已整改'] }}</div>
             </van-col>
 
             <van-col :span="8" class="boxmain">
               <div>整改率</div>
-              <div class="wj-title-blue">{{ parseInt(resumptionList['整改率'] * 100) }}%</div>
+              <div class="wj-title-blue font5vw">{{ parseInt(resumptionList['整改率'] * 100) }}%</div>
             </van-col>
           </van-row>
           <van-row class="boxCard" v-if="offATMCheckList">
@@ -82,16 +82,16 @@
             </van-col>
             <van-col :span="8" class="boxmain">
               <div>隐患数</div>
-              <div class="wj-title-blue">{{ offATMCheckList['隐患数'] }}</div>
+              <div class="wj-title-blue font5vw">{{ offATMCheckList['隐患数'] }}</div>
             </van-col>
             <van-col :span="8" class="boxmain centerBox">
               <div>已整改</div>
-              <div class="wj-title-blue">{{ offATMCheckList['已整改'] }}</div>
+              <div class="wj-title-blue font5vw">{{ offATMCheckList['已整改'] }}</div>
             </van-col>
 
             <van-col :span="8" class="boxmain">
               <div>整改率</div>
-              <div class="wj-title-blue">{{ parseInt(offATMCheckList['整改率'] * 100) }}%</div>
+              <div class="wj-title-blue font5vw">{{ parseInt(offATMCheckList['整改率'] * 100) }}%</div>
             </van-col>
           </van-row>
           <van-row class="boxCard" v-if="safetyCheck">
@@ -100,15 +100,15 @@
             </van-col>
             <van-col :span="8" class="boxmain">
               <div>隐患数</div>
-              <div class="wj-title-blue">{{ safetyCheck['隐患数'] }}</div>
+              <div class="wj-title-blue font5vw">{{ safetyCheck['隐患数'] }}</div>
             </van-col>
             <van-col :span="8" class="boxmain centerBox">
               <div>有异议</div>
-              <div class="wj-title-blue">{{ safetyCheck['有异议'] }}</div>
+              <div class="wj-title-blue font5vw">{{ safetyCheck['有异议'] }}</div>
             </van-col>
             <van-col :span="8" class="boxmain">
               <div>已取消</div>
-              <div class="wj-title-blue">{{ safetyCheck['已取消'] }}</div>
+              <div class="wj-title-blue font5vw">{{ safetyCheck['已取消'] }}</div>
             </van-col>
           </van-row>
           <van-row class="boxCard" v-if="safetyCheck">
@@ -117,15 +117,15 @@
             </van-col>
             <van-col :span="8" class="boxmain">
               <div>已确认</div>
-              <div class="wj-title-blue">{{ safetyCheck['已确认'] }}</div>
+              <div class="wj-title-blue font5vw">{{ safetyCheck['已确认'] }}</div>
             </van-col>
             <van-col :span="8" class="boxmain centerBox">
               <div>已整改</div>
-              <div class="wj-title-blue">{{ safetyCheck['已整改'] }}</div>
+              <div class="wj-title-blue font5vw">{{ safetyCheck['已整改'] }}</div>
             </van-col>
             <van-col :span="8" class="boxmain">
               <div>整改率</div>
-              <div class="wj-title-blue">{{ parseInt(safetyCheck['整改率'] * 100) }}%</div>
+              <div class="wj-title-blue font5vw">{{ parseInt(safetyCheck['整改率'] * 100) }}%</div>
             </van-col>
           </van-row>
         </div>
@@ -155,19 +155,19 @@
             </van-col>
             <van-col :span="6" class="boxmain">
               <div>隐患数</div>
-              <div class="wj-title-blue">{{ taskInfoByTypeList[item].questionCount }}</div>
+              <div class="wj-title-blue font5vw">{{ taskInfoByTypeList[item].questionCount }}</div>
             </van-col>
             <van-col :span="6" class="boxmain centerBox">
               <div>应检查</div>
-              <div class="wj-title-blue">{{ taskInfoByTypeList[item].shouldCheckCount }}</div>
+              <div class="wj-title-blue font5vw">{{ taskInfoByTypeList[item].shouldCheckCount }}</div>
             </van-col>
             <van-col :span="6" class="boxmain centerTwoBox">
               <div>已检查</div>
-              <div class="wj-title-blue">{{ taskInfoByTypeList[item].checkedCount }}%</div>
+              <div class="wj-title-blue font5vw">{{ taskInfoByTypeList[item].checkedCount }}%</div>
             </van-col>
             <van-col :span="6" class="boxmain">
               <div>完成率</div>
-              <div class="wj-title-blue">{{ parseInt(taskInfoByTypeList[item].completedRate * 100) }}%</div>
+              <div class="wj-title-blue font5vw">{{ parseInt(taskInfoByTypeList[item].completedRate * 100) }}%</div>
             </van-col>
           </van-row>
         </div>
@@ -195,15 +195,15 @@
             </van-col>
             <van-col :span="8" class="boxmain">
               <div>应演练</div>
-              <div class="wj-title-blue">{{ otherDrill.shouldCompleteCount }}</div>
+              <div class="wj-title-blue font5vw">{{ otherDrill.shouldCompleteCount }}</div>
             </van-col>
             <van-col :span="8" class="boxmain centerBox">
               <div>已演练</div>
-              <div class="wj-title-blue">{{ otherDrill.completedCount }}</div>
+              <div class="wj-title-blue font5vw">{{ otherDrill.completedCount }}</div>
             </van-col>
             <van-col :span="8" class="boxmain">
               <div>完成率</div>
-              <div class="wj-title-blue">{{ parseInt(otherDrill['completedRate'] * 100) }}%</div>
+              <div class="wj-title-blue font5vw">{{ parseInt(otherDrill['completedRate'] * 100) }}%</div>
             </van-col>
           </van-row>
           <van-row class="boxCard" v-if="otherEdu">
@@ -212,15 +212,15 @@
             </van-col>
             <van-col :span="8" class="boxmain">
               <div>应培训</div>
-              <div class="wj-title-blue">{{ otherEdu['shouldCompleteCount'] }}</div>
+              <div class="wj-title-blue font5vw">{{ otherEdu['shouldCompleteCount'] }}</div>
             </van-col>
             <van-col :span="8" class="boxmain centerBox">
               <div>已培训</div>
-              <div class="wj-title-blue">{{ otherEdu['completedCount'] }}</div>
+              <div class="wj-title-blue font5vw">{{ otherEdu['completedCount'] }}</div>
             </van-col>
             <van-col :span="8" class="boxmain">
               <div>完成率</div>
-              <div class="wj-title-blue">{{ parseInt(otherEdu['completedRate'] * 100) }}%</div>
+              <div class="wj-title-blue font5vw">{{ parseInt(otherEdu['completedRate'] * 100) }}%</div>
             </van-col>
           </van-row>
           <van-row class="boxCard" v-if="otherMonitor">
@@ -229,15 +229,15 @@
             </van-col>
             <van-col :span="8" class="boxmain">
               <div>应调阅</div>
-              <div class="wj-title-blue">{{ otherMonitor['shouldCompleteCount'] }}</div>
+              <div class="wj-title-blue font5vw">{{ otherMonitor['shouldCompleteCount'] }}</div>
             </van-col>
             <van-col :span="8" class="boxmain centerBox">
               <div>已调阅</div>
-              <div class="wj-title-blue">{{ otherMonitor['completedCount'] }}</div>
+              <div class="wj-title-blue font5vw">{{ otherMonitor['completedCount'] }}</div>
             </van-col>
             <van-col :span="8" class="boxmain">
               <div>完成率</div>
-              <div class="wj-title-blue">{{ parseInt(otherMonitor['completedRate'] * 100) }}%</div>
+              <div class="wj-title-blue font5vw">{{ parseInt(otherMonitor['completedRate'] * 100) }}%</div>
             </van-col>
           </van-row>
           <van-row class="boxCard" v-if="otherInout">
@@ -246,19 +246,19 @@
             </van-col>
             <van-col :span="6" class="boxmain">
               <div>总数</div>
-              <div class="wj-title-blue">{{ otherInout['total'] }}</div>
+              <div class="wj-title-blue font5vw">{{ otherInout['total'] }}</div>
             </van-col>
             <van-col :span="6" class="boxmain centerBox">
               <div>紧急出入</div>
-              <div class="wj-title-blue">{{ otherInout['emergency'] }}</div>
+              <div class="wj-title-blue font5vw">{{ otherInout['emergency'] }}</div>
             </van-col>
             <van-col :span="6" class="boxmain centerTwoBox">
               <div>临时出入</div>
-              <div class="wj-title-blue">{{ otherInout['temporary'] }}</div>
+              <div class="wj-title-blue font5vw">{{ otherInout['temporary'] }}</div>
             </van-col>
             <van-col :span="6" class="boxmain">
               <div>职能部门出入</div>
-              <div class="wj-title-blue">{{ otherInout['department'] }}</div>
+              <div class="wj-title-blue font5vw">{{ otherInout['department'] }}</div>
             </van-col>
           </van-row>
         </div>
@@ -424,13 +424,14 @@ export default {
   display: inline-block;
   width: 10px;
   height: 5vw;
-  vertical-align: middle;
+  vertical-align: text-top;
   margin-right: 10px;
   margin-left: 10px;
   background-color: #008cd6;
 }
 .titleSty {
   line-height: 5vw;
+  font-size: 5vw;
   margin: 10px;
   color: #008cd6;
 }
@@ -460,4 +461,9 @@ export default {
 .tabsCard {
   margin-top: 20px;
 }
+.font5vw{
+  font-size: 6vw !important;
+  font-weight: bold;
+
+}
 </style>

src/views/menu/cockpit/components/overviewCom.vue

@@ -6,44 +6,43 @@
         <template #title>
           <span class="custom-title">{{ i.name }}</span>
         </template>
-       
-        <span class="itemNum" v-for="(item, index) in allData[i.key]" :key="index">{{ item }}</span>
+
+        <div class="itemNum">{{ allData[i.key] }}</div>
       </van-cell>
     </div>
     <!-- 设备 -->
     <div class="equipment">
       <van-cell>
         <template #title>
-          <span class="custom-title">大堂式设备数量</span>
+          <span class="custom-title">大堂式自助设备</span>
         </template>
-        <span class="itemNum" v-for="(item, index) in allData['lobbyDeviceCount']" :key="index">{{ item }}</span>
+        <span class="itemNum">{{ allData['lobbyDeviceCount'] }}</span>
       </van-cell>
       <van-cell>
         <template #title>
-          <span class="custom-title">穿墙式设备数量</span>
+          <span class="custom-title">穿墙式自助设备</span>
         </template>
-        <span class="itemNum" v-for="(item, index) in allData['throughwallDeviceCount']" :key="index">{{ item }}</span>
+        <span class="itemNum">{{ allData['throughwallDeviceCount'] }}</span>
       </van-cell>
     </div>
     <!-- 模块数据展示 -->
     <div class="businessModule">
       <div class="moduleCom">
-        <div><span class="leftSty"></span><span>GA38-2021</span></div>
-        <div class="moduleItem">
-          <div>
-            <div class="numCls wj-title-blue">
-              {{ parseInt(allData.ga38['GA382021'].currentCompletedRate || 0 * 100) }}%
-            </div>
-            <div class="fontCls">当月完成率</div>
+        <div class="titleText"><span class="leftSty"></span><span>GA38-2021</span></div>
+        <div class="complete">
+          <div class="numCls wj-title-blue">
+            {{ parseInt(allData.ga38['GA382021'].currentCompletedRate || 0 * 100) }}%
           </div>
+        </div>
+        <div class="moduleItem">
           <div>
             <div class="numCls wj-title-blue">{{ allData.ga38['GA382021'].currentCompletedCount }}</div>
             <div class="fontCls">当月完成数</div>
           </div>
           <div>
-            <div class="numCls wj-title-blue">
-              <van-icon v-if="allData.ga38['GA382021'].compare > 0" name="down" class="wj-title-red rate" />
-              <van-icon v-else name="down" class="wj-title-green" />
+            <div class="numCls wj-title-blue tal">
+              <van-icon v-if="allData.ga38['GA382021'].compare > 0" name="play" class="wj-title-red rate270" />
+              <van-icon v-else name="play" class="wj-title-green rate" />
               <span>{{ Math.abs(parseInt(allData.ga38['GA382021'].compare * 100)) }}%</span>
             </div>
             <div class="fontCls">较上月</div>
@@ -52,20 +51,19 @@
       </div>
 
       <div class="moduleCom">
-        <div><span class="leftSty"></span><span>GA38-2015</span></div>
+        <div class="titleText"><span class="leftSty"></span><span>GA38-2015</span></div>
+        <div class="complete">
+          <div class="numCls wj-title-blue">{{ parseInt(allData.ga38['GA382015'].currentCompletedRate * 100) }}%</div>
+        </div>
         <div class="moduleItem">
           <div>
-            <div class="numCls wj-title-blue">{{ parseInt(allData.ga38['GA382015'].currentCompletedRate * 100) }}%</div>
-            <div class="fontCls">当月完成率</div>
-          </div>
-          <div>
             <div class="numCls wj-title-blue">{{ allData.ga38['GA382015'].currentCompletedCount }}</div>
             <div class="fontCls">当月完成数</div>
           </div>
           <div>
-            <div class="numCls wj-title-blue">
-              <van-icon v-if="allData.ga38['GA382015'].compare > 0" name="down" class="wj-title-red rate" />
-              <van-icon v-else name="down" class="wj-title-green" />
+            <div class="numCls wj-title-blue tal">
+              <van-icon v-if="allData.ga38['GA382015'].compare > 0" name="play" class="wj-title-red rate270" />
+              <van-icon v-else name="play" class="wj-title-green rate" />
 
               <span>{{ Math.abs(parseInt(allData.ga38['GA382015'].compare * 100)) }}%</span>
             </div>
@@ -76,14 +74,16 @@
     </div>
     <div class="businessModule">
       <div class="moduleCom" v-for="(item, index) in Object.keys(allData.taskInfo)" :key="index">
-        <div><span class="leftSty"></span><span>{{ Object.keys(allData.taskInfo)[index] }}</span></div>
-        <div class="moduleItem">
-          <div>
-            <div class="numCls wj-title-blue">
-              {{ parseInt(allData.taskInfo[Object.keys(allData.taskInfo)[index]].currentCompletedRate * 100) }}%
-            </div>
-            <div class="fontCls">当月完成率</div>
+        <div class="titleText">
+          <span class="leftSty"></span><span>{{ Object.keys(allData.taskInfo)[index] }}</span>
+        </div>
+        <div class="complete">
+          <div class="numCls wj-title-blue">
+            {{ parseInt(allData.taskInfo[Object.keys(allData.taskInfo)[index]].currentCompletedRate * 100) }}%
           </div>
+         
+        </div>
+        <div class="moduleItem">
           <div>
             <div class="numCls wj-title-blue">
               {{ allData.taskInfo[Object.keys(allData.taskInfo)[index]].currentCompletedCount }}
@@ -91,8 +91,8 @@
             <div class="fontCls">当月完成数</div>
           </div>
           <div>
-            <div class="numCls wj-title-blue">
-              <van-icon name="down" class="wj-title-green" />
+            <div class="numCls wj-title-blue tal">
+              <van-icon name="play" class="wj-title-green rate " />
               <span
                 >{{ Math.abs(parseInt(allData.taskInfo[Object.keys(allData.taskInfo)[index]].compare * 100)) }}%</span
               >
@@ -101,7 +101,6 @@
           </div>
         </div>
       </div>
-
     </div>
   </div>
 </template>
@@ -110,8 +109,8 @@ import { getOverview } from '@/api/cockpit.js'
 export default {
   name: 'SocAppOverviewCom',
   components: {},
-  props:{
-    orgId:''
+  props: {
+    orgId: ''
   },
   data() {
     return {
@@ -170,31 +169,30 @@ export default {
     //获取基础信息
   },
   mounted() {},
-  watch:{
-    orgId(){
-        this.getAllList()
+  watch: {
+    orgId() {
+      this.getAllList()
     }
   },
   methods: {
-    
     // 获取总览数据
     getAllList() {
-      getOverview({orgId:this.orgId}).then(res => {
+      getOverview({ orgId: this.orgId }).then(res => {
         let { data } = res
         this.allData = data
-        this.allData.bankingCount = this.remedyZero(this.allData.bankingCount)
-        this.allData.bankingStoreCount = this.remedyZero(this.allData.bankingStoreCount)
-        this.allData.centerStoreCount = this.remedyZero(this.allData.centerStoreCount)
-        this.allData.hangsheCount = this.remedyZero(this.allData.hangsheCount)
-        this.allData.lobbyDeviceCount = this.remedyZero(this.allData.lobbyDeviceCount)
-        this.allData.offlineATMCount = this.remedyZero(this.allData.offlineATMCount)
-        this.allData.onlineATMCount = this.remedyZero(this.allData.onlineATMCount)
-        this.allData.throughwallDeviceCount = this.remedyZero(this.allData.throughwallDeviceCount)
+        // this.allData.bankingCount = this.remedyZero(this.allData.bankingCount)
+        // this.allData.bankingStoreCount = this.remedyZero(this.allData.bankingStoreCount)
+        // this.allData.centerStoreCount = this.remedyZero(this.allData.centerStoreCount)
+        // this.allData.hangsheCount = this.remedyZero(this.allData.hangsheCount)
+        // this.allData.lobbyDeviceCount = this.remedyZero(this.allData.lobbyDeviceCount)
+        // this.allData.offlineATMCount = this.remedyZero(this.allData.offlineATMCount)
+        // this.allData.onlineATMCount = this.remedyZero(this.allData.onlineATMCount)
+        // this.allData.throughwallDeviceCount = this.remedyZero(this.allData.throughwallDeviceCount)
       })
     },
     //自动补0
     remedyZero(val) {
-      let newVal=val||''
+      let newVal = val || ''
       // let newVal = val + ''
       let num = newVal.length
 
@@ -202,28 +200,34 @@ export default {
         newVal = newVal[index]
       }
       return ('' + newVal).split('')
-      
     }
   }
 }
 </script>
 <style lang="scss" scoped>
+::v-deep.van-cell::after {
+  border-bottom: 1px solid #e7f4fc;
+}
 .titleCom {
   // background-color: #f0f0f0;
   // margin: 10px;
   // box-shadow: 0 2px 10px #ccc;
-  .titleRow{
+  .titleRow {
     box-shadow: 0 2px 10px #ccc;
     margin-left: 12px;
     // margin-top: 10px;
-  margin-right: 14px;
+    margin-right: 14px;
   }
   .itemNum {
-    width: 40px;
+    width: 100%;
     height: 40px;
     margin-left: 10px;
+    font-size: 40px;
+    font-family: fantasy;
+    text-align: left;
+    // font-weight: bold;
     // border: 1px solid #ccc;
-    box-shadow: 0 2px 10px #ccc;
+    // box-shadow: 0 2px 10px #ccc;
     color: #008cd6;
     display: inline-block;
     text-align: center;
@@ -241,6 +245,10 @@ export default {
   flex-wrap: wrap;
   margin-bottom: 20px;
 }
+.tal {
+  text-align: right;
+  padding-right: 0px;
+}
 .moduleCom {
   width: 47%;
   height: 260px;
@@ -249,9 +257,10 @@ export default {
   padding: 10px;
   box-shadow: 0 2px 10px #ccc;
   // border-left: 1px solid #008cd6;
+  position: relative;
 
   .moduleItem {
-    margin-top: 90px;
+    margin-top: 30px;
     display: flex;
     text-align: center;
     align-content: center;
@@ -260,18 +269,22 @@ export default {
     .numCls {
       font-size: 30px;
       margin-bottom: 10px;
+
       .iconcls {
         font-size: 30px;
       }
     }
+    .textCCls {
+      text-align: right;
+    }
+    > div {
+      width: 40%;
+    }
     .fontCls {
       font-size: 20px;
     }
   }
 }
-// .moduleCom:not(.bigModule :has(+ .moduleCom), :has(+ .moduleCom)) {
-//   border-left: 1px solid #008cd6;
-// }
 
 .businessModule {
   display: flex;
@@ -284,15 +297,34 @@ export default {
 }
 
 .rate {
-  transform: rotate(180deg);
+  transform: rotate(90deg);
 }
-.leftSty {
-  display: inline-block;
-  width: 10px;
-  height: 5vw;
+.rate270 {
+  transform: rotate(270deg);
+}
+.titleText {
+  font-size: 4vw;
   vertical-align: middle;
-  margin-right: 10px;
-  margin-left: 10px;
-  background-color: #008cd6;
+  .leftSty {
+    display: inline-block;
+    width: 10px;
+    height: 4vw;
+    vertical-align: text-top;
+    margin-right: 10px;
+    margin-left: 10px;
+    background-color: #008cd6;
+  }
+}
+.complete {
+  text-align: center;
+  font-size: 7vw;
+  font-family: fantasy;
+  margin-top: 30px;
+}
+::v-deep.van-icon-play {
+  font-size: 40px;
+  position: absolute;
+  left: 62%;
+  top: 62%;
 }
 </style>

src/views/menu/cockpit/index.vue

@@ -15,33 +15,40 @@
         <van-tab title="基础信息">
           <!-- 安全防范改造情况 -->
           <div class="boxCard">
+            <van-row>
+              <van-col :span="24">
+                <div class="titleText">
+                  <span class="leftSty"></span>
+                  <span>安全防范改造情况</span>
+                  <div class="postionRightTop">
+                    <p>数字:现类型数量</p>
+                    <p>百分比:总数占比</p>
+                  </div>
+                </div>
+              </van-col>
+            </van-row>
             <chartsCom ref="charts" :id="'main'" :option="dataopntion"></chartsCom>
           </div>
           <!-- GA38-2021标准 -->
           <div class="GA38">
             <van-row>
               <van-col :span="24">
-                <div class="textTitle">GA38-2021标准</div>
+                <div class="titleText">
+                  <span class="leftSty"></span>
+                  <span>GA38-2021</span>
+                  <div class="postionRightTop">
+                    <p>数字:现类型数量</p>
+                    <p>百分比:总数占比</p>
+                  </div>
+                </div>
               </van-col>
             </van-row>
             <van-row>
               <van-col :span="11">
-                <chartsCom
-                  ref="chartsff"
-                  :chartsHeight="'150px'"
-                  :chartsWidth="'200px'"
-                  :id="'yewd'"
-                  :option="dataGA21"
-                ></chartsCom>
+                <chartsCom ref="chartsff" :chartsWidth="'200px'" :id="'yewd'" :option="dataGA21"></chartsCom>
               </van-col>
               <van-col :span="11">
-                <chartsCom
-                  ref="chartsff"
-                  :chartsHeight="'150px'"
-                  :chartsWidth="'200px'"
-                  :id="'zzyh'"
-                  :option="dataGAzz"
-                ></chartsCom>
+                <chartsCom ref="chartsff" :chartsWidth="'200px'" :id="'zzyh'" :option="dataGAzz"></chartsCom>
               </van-col>
             </van-row>
           </div>
@@ -49,35 +56,54 @@
           <div class="GA38">
             <van-row>
               <van-col :span="24">
-                <div class="textTitle">GA38-2015标准</div>
+                <div class="titleText">
+                  <span class="leftSty"></span>
+                  <span>GA38-2015</span>
+                  <div class="postionRightTop">
+                    <p>数字:现类型数量</p>
+                    <p>百分比:总数占比</p>
+                  </div>
+                </div>
               </van-col>
             </van-row>
             <van-row>
               <van-col :span="11">
-                <chartsCom
-                  ref="chartsff"
-                  :chartsHeight="'150px'"
-                  :chartsWidth="'200px'"
-                  :id="'15yewd'"
-                  :option="dataGA"
-                ></chartsCom>
+                <chartsCom ref="chartsff" :chartsWidth="'200px'" :id="'15yewd'" :option="dataGA"></chartsCom>
               </van-col>
               <van-col :span="11">
-                <chartsCom
-                  ref="chartsff"
-                  :chartsHeight="'150px'"
-                  :chartsWidth="'200px'"
-                  :id="'15zzyh'"
-                  :option="dataGAzz15"
-                ></chartsCom>
+                <chartsCom ref="chartsff" :chartsWidth="'200px'" :id="'15zzyh'" :option="dataGAzz15"></chartsCom>
               </van-col>
             </van-row>
           </div>
           <div class="boxCard">
+            <van-row>
+              <van-col :span="24">
+                <div class="titleText">
+                  <span class="leftSty"></span>
+                  <span>网点业务库总览</span>
+                  <div class="postionRightTop">
+                    <p>数字:现类型数量</p>
+                    <p>百分比:总数占比</p>
+                  </div>
+                </div>
+              </van-col>
+            </van-row>
             <!-- 网点业务库总览 -->
             <chartsCom ref="charts" :id="'wdyw'" :option="dotPieData"></chartsCom>
           </div>
           <div class="boxCard">
+            <van-row>
+              <van-col :span="24">
+                <div class="titleText">
+                  <span class="leftSty"></span>
+                  <span>保安配备情况</span>
+                  <div class="postionRightTop">
+                    <p>数字:现类型数量</p>
+                    <p>百分比:总数占比</p>
+                  </div>
+                </div>
+              </van-col>
+            </van-row>
             <!-- 保安配备情况 -->
             <chartsCom ref="charts" :id="'baqk'" :option="securityPieData"></chartsCom>
           </div>
@@ -85,27 +111,19 @@
           <div class="GA38">
             <van-row>
               <van-col :span="24">
-                <div class="textTitle">自助银行设备</div>
+                <div class="titleText">
+                  <span class="leftSty"></span>
+                  <span>自助银行设备</span>
+                
+                </div>
               </van-col>
             </van-row>
             <van-row>
               <van-col :span="11">
-                <chartsCom
-                  ref="chartsff"
-                  :chartsHeight="'200px'"
-                  :chartsWidth="'180px'"
-                  :id="'lhszz'"
-                  :option="LHSdata"
-                ></chartsCom>
+                <chartsCom ref="chartsff" :chartsWidth="'180px'" :id="'lhszz'" :option="LHSdata"></chartsCom>
               </van-col>
               <van-col :span="11">
-                <chartsCom
-                  ref="chartsff"
-                  :chartsHeight="'200px'"
-                  :chartsWidth="'180px'"
-                  :id="'zhszz'"
-                  :option="ZHSdata"
-                ></chartsCom>
+                <chartsCom ref="chartsff" :chartsWidth="'180px'" :id="'zhszz'" :option="ZHSdata"></chartsCom>
               </van-col>
             </van-row>
           </div>
@@ -129,7 +147,12 @@
                 </van-popup>
               </van-col>
             </van-row>
-            <chartsCom ref="chartsresumption" :option="resumptionData" :id="'lzqk'"></chartsCom></div
+            <chartsCom
+              ref="chartsresumption"
+              :chartsHeight="'700px'"
+              :option="resumptionData"
+              :id="'lzqk'"
+            ></chartsCom></div
         ></van-tab>
       </van-tabs>
     </div>
@@ -200,7 +223,7 @@ export default {
       // 网点业务库总览
       dotPieData: dotData('网点业务库总览'),
       // 保安情况
-      securityPieData: securityData('保安配备情况'),
+      securityPieData: securityData(''),
       LHSdata: ZHSData('离行式自助银行'),
       ZHSdata: ZHSData('在行式自助银行'),
       //履职情况
@@ -223,12 +246,9 @@ export default {
   },
   methods: {
     getDataList(data) {
-      
-      this.cascaderValue=data.id
+      this.cascaderValue = data.id
       this.getResumptionfoHandler({ desc: this.desc, month: this.month, orgId: this.cascaderValue })
       this.getBaseInfoHandler({ orgId: this.cascaderValue })
-
-      
     },
     onConfirm(val) {
       this.monthVal = val
@@ -237,7 +257,7 @@ export default {
       } else {
         this.month = newDateMonth(new Date(), 1)
       }
-      this.getResumptionfoHandler({ desc: this.desc, month: this.month ,orgId: this.cascaderValue})
+      this.getResumptionfoHandler({ desc: this.desc, month: this.month, orgId: this.cascaderValue })
 
       this.showEndDate = false
     },
@@ -248,7 +268,7 @@ export default {
       } else {
         this.desc = 1
       }
-      this.getResumptionfoHandler({ desc: this.desc, month: this.month ,orgId: this.cascaderValue})
+      this.getResumptionfoHandler({ desc: this.desc, month: this.month, orgId: this.cascaderValue })
       this.showlz = false
     },
     // 基础信息初始化
@@ -264,18 +284,15 @@ export default {
         offlineATM2015,
         banking2015
       } = this.baseData
-      let dataopntionList=[]
-      if(securityFacilities.ga382021){
-        
+      let dataopntionList = []
+      if (securityFacilities.ga382021) {
         dataopntionList.push({ value: securityFacilities.ga382021, name: 'GA38-2021' })
       }
-      if(securityFacilities.ga382015){
+      if (securityFacilities.ga382015) {
         dataopntionList.push({ value: securityFacilities.ga382015, name: 'GA38-2015' })
-        
       }
-      if(securityFacilities.ga38Unreached){
+      if (securityFacilities.ga38Unreached) {
         dataopntionList.push({ value: securityFacilities.ga38Unreached, name: '未达标' })
-
       }
       this.dataopntion = securityPrecautions(dataopntionList)
       // banking2015.total
@@ -328,28 +345,35 @@ export default {
           }
         }
       ])
-      this.securityPieData = securityData('保安配备情况', [
-        { value: securityPeopleInfo['未配备'], name: '未配备' },
-        { value: securityPeopleInfo['已配备'], name: '已配备' }
-      ])
+      // 保安配备情况
+      let baList = []
+      if (securityPeopleInfo['未配备']) {
+        baList.push({ value: securityPeopleInfo['未配备'], name: '未配备' })
+      }
+      if (securityPeopleInfo['已配备']) {
+        baList.push({ value: securityPeopleInfo['已配备'], name: '已配备' })
+      }
+
+      this.securityPieData = securityPrecautions(baList)
       this.ZHSdata = ZHSData('在行式自助银行', [
         { value: onlineATMPropertyRight['穿墙式设备'], name: '穿墙式设备' },
         { value: onlineATMPropertyRight['大堂式设备'], name: '大堂式设备' }
       ])
-      this.LHSdata = ZHSData('离行式自助银行', [
+      this.LHSdata = LHSData('离行式自助银行', [
         { value: offlineATMPropertyRight['穿墙式设备'], name: '穿墙式设备' },
         { value: offlineATMPropertyRight['大堂式设备'], name: '大堂式设备' }
       ])
       let list = []
       Object.keys(businessStoreInfo).map(item => {
         // if (businessStoreInfo[item]) {
-          list.push({ value: businessStoreInfo[item], name: item })
+        list.push({ value: businessStoreInfo[item], name: item })
         // }
       })
       this.dotPieData = dotData('网点业务库总览', list)
     },
     //履职情况
     resumptionInit() {
+      console.log(this.resumptionList, 'resumptionList')
       this.resumptionData = resumption(this.resumptionList)
       if (this.$refs.chartsresumption) {
         this.$nextTick(() => {
@@ -370,10 +394,35 @@ export default {
   margin: 20px;
   box-shadow: 0 2px 10px #ccc;
 }
-.textTitle {
-  text-align: left;
-  font-size: 30px;
+// .textTitle {
+//   text-align: left;
+//   font-size: 30px;
+//   font-weight: bold;
+// }
+.titleText {
+  font-size: 5vw;
+  vertical-align: middle;
+  margin: 10px;
   font-weight: bold;
+  position: relative;
+    .leftSty {
+    display: inline-block;
+    width: 10px;
+    height: 5vw;
+    vertical-align: text-bottom;
+    margin-right: 10px;
+    margin-left: 10px;
+    transform: translateY(-1px);
+    background-color: #008cd6;
+  }
+  .postionRightTop{
+    position: absolute;
+    font-size: 20px;
+    top: 0px;
+    right: 10px;
+    font-weight: 400;
+    color: #ccc;
+  }
 }
 .GA38 {
   margin: 20px;

src/views/menu/cockpit/indexEcharts.js

@@ -5,13 +5,11 @@
 //   { value: 735, name: 'GA38-2015' },
 //   { value: 580, name: '未达标' }
 // ]
-let securityPrecautions = (
-  data = []
-) => {
+let securityPrecautions = (data = []) => {
   var colors = ['#146de0', '#27ef5e', '#ffc140']
   let option = {
     title: {
-      text: '安全防范改造情况',
+      text: '',
 
       left: 'left'
     },
@@ -45,7 +43,7 @@ let securityPrecautions = (
         type: 'pie',
         radius: '50%',
         data: data,
-      
+
         itemStyle: {
           normal: {
             shadowColor: 'rgba(0, 0, 0, 0.8)',
@@ -54,8 +52,7 @@ let securityPrecautions = (
               // console.log(param.dataIndex)
               return colors[param.dataIndex]
             }
-          },
-          
+          }
         },
         label: {
           position: 'inner',
@@ -84,7 +81,7 @@ let securityPrecautions = (
         shadowColor: 'rgba(0, 0, 0, 0.8)',
         shadowBlur: 5
       }
-    },
+    }
   }
   return option
 }
@@ -109,10 +106,7 @@ let securityPrecautions = (
 //     }
 //   }
 // ]
-let pieGaData = (
-  title = '暂无设置标题',
-  data = []
-) => {
+let pieGaData = (title = '暂无设置标题', data = []) => {
   let option = {
     tooltip: {
       trigger: 'item',
@@ -120,7 +114,7 @@ let pieGaData = (
     },
     title: [
       {
-        bottom: 1,
+        bottom: '10%',
         width: '100%',
         left: 'center',
         text: title
@@ -168,109 +162,97 @@ let pieGaData = (
 //   { value: 100, name: '视频抓拍' }
 // ]
 let dotData = (
-  title = '网点业务库总览',
+  title = '',
 
   data = []
 ) => {
-  console.log(data, 'sss')
-  var color = ['#146de0', '#27ef5e', '#ffc140', '#d151d8', 'red']
+  var colors = ['#146de0', '#27ef5e', '#ffc140', '#d151d8', 'red']
   let option = {
-    color: color,
     title: {
-      text: title,
-
+      text: '',
       left: 'left'
     },
     tooltip: {
-      trigger: 'item',
-      backgroundColor: 'rgba(0,0,0,0.5)',
-      color: '#fff',
-      formatter: function (params) {
-        return (
-          params.name +
-          '<br/>' +
-          params.marker +
-          '<span style="color:' +
-          params.color +
-          '">' +
-          params.data['name'] +
-          '\n' +
-          params.data['value'] +
-          '</span>'
-        )
-      }
+      trigger: 'item'
     },
     legend: {
       orient: 'vertical',
-      icon: 'circle',
-      left: '2%',
-      top: '32%',
-      itemWidth: 14,
-      itemGap: 20,
-      textStyle: {
-        rich: {
-          a: {
-            color: '#1f1f1f',
-            fontSize: 16,
-            padding: [0, 10, 0, 0]
-          },
-          b: {
-            color: '#1f1f1f',
-            fontSize: 16,
-            padding: [0, 10, 0, 10]
-          }
-        }
-      },
+      top: 'center',
+      left: '50%',
+      data: data,
       formatter: function (name) {
-        var target, unit
-        for (var i = 0, l = data.length; i < l; i++) {
+        var data = option.series[0].data
+        var total = 0
+        var tarValue
+        for (var i = 0; i < data.length; i++) {
+          total += data[i].value
           if (data[i].name == name) {
-            target = data[i].value
-            unit = data[i].unit
+            tarValue = data[i].value
           }
         }
-        return `{a| ${name}}{b|${target}}`
+        var v = tarValue
+        var p =0
+        if(tarValue==0&&total==0){
+          p=0
+        }else{
+
+          p = Math.round((tarValue / total) * 100)
+        }
+        return `${name}  ${v}家  ${p}%`
       }
     },
     series: [
       {
-        name: '',
+        center: ['25%', '60%'],
+        name: '生命周期统计',
         type: 'pie',
-        radius: ['20%', '65%'],
-        center: ['65%', '50%'],
-        avoidLabelOverlap: true,
-        label: {
+        radius: '50%',
+        data: data,
+
+        itemStyle: {
           normal: {
-            show: true,
-            position: 'inside',
-            formatter: '{d}%',
-            textStyle: {
-              align: 'center',
-              baseline: 'middle',
-              fontSize: 16,
-              fontWeight: '100',
-              color: '#fff'
+            shadowColor: 'rgba(0, 0, 0, 0.8)',
+            shadowBlur: 5,
+            color: function (param) {
+              // console.log(param.dataIndex)
+              return colors[param.dataIndex]
             }
           }
         },
+        label: {
+          position: 'inner',
+          textStyle: {
+            fontSize: 14,
+            color: '#181818'
+          },
+          formatter: params => {
+            return `${params.value}`
+          }
+        },
         labelLine: {
           show: false
         },
-        itemStyle: {
-          normal: {
-            shadowColor: 'rgba(0, 0, 0, 0.8)',
-            shadowBlur: 5
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
           }
-        },
-        data: data
+        }
       }
-    ]
+    ],
+    itemStyle: {
+      normal: {
+        shadowColor: 'rgba(0, 0, 0, 0.8)',
+        shadowBlur: 5
+      }
+    }
   }
   return option
 }
 //保安情况
 let securityData = (
-  title = '保安配备情况',
+  title = '',
 
   data = [
     // { value: 666, name: '已配备' },
@@ -281,7 +263,7 @@ let securityData = (
   let option = {
     color: color,
     title: {
-      text: title,
+      text: '',
 
       left: 'left'
     },
@@ -381,100 +363,72 @@ let LHSData = (
     // { value: 193, name: '未配备' }
   ]
 ) => {
-  var color = ['#146de0', '#27ef5e', '#ffc140', '#d151d8', 'red']
+  let color = ['#146de0', '#27ef5e', '#ffc140', '#d151d8', 'red']
+  const handleData = {}
+  let sum = 0
+  // 求和
+  data.map(item => {
+    sum += item.value
+  })
+  // 数据处理
+  data.map(item => {
+    handleData[item.name] = item
+    handleData[item.name].percentage = ((item.value / sum) * 100).toFixed(1) + '%'
+  })
+
   let option = {
-    color: color,
     title: {
       text: title,
-
-      left: 'left'
-    },
-    tooltip: {
-      trigger: 'item',
-      backgroundColor: 'rgba(0,0,0,0.5)',
-      color: '#fff',
-      formatter: function (params) {
-        return (
-          params.name +
-          '<br/>' +
-          params.marker +
-          '<span style="color:' +
-          params.color +
-          '">' +
-          params.data['name'] +
-          '\n' +
-          params.data['value'] +
-          '</span>'
-        )
-      }
-    },
-    legend: {
-      orient: 'vertical',
-      icon: 'circle',
-      left: '2%',
-      top: '32%',
-      itemWidth: 14,
-      itemGap: 20,
-      textStyle: {
-        rich: {
-          a: {
-            color: '#1f1f1f',
-            fontSize: 16,
-            padding: [0, 10, 0, 0]
-          },
-          b: {
-            color: '#1f1f1f',
-            fontSize: 16,
-            padding: [0, 10, 0, 10]
-          }
-        }
-      },
-      formatter: function (name) {
-        var target, unit
-        for (var i = 0, l = data.length; i < l; i++) {
-          if (data[i].name == name) {
-            target = data[i].value
-            unit = data[i].unit
-          }
-        }
-        return `{a| ${name}}{b|${target}}`
-      }
+      left: 'center',
+      bottom:'0%'
     },
+   
+   
     series: [
       {
-        name: '',
         type: 'pie',
-        radius: ['20%', '65%'],
-        center: ['75%', '50%'],
-        avoidLabelOverlap: true,
+        color: ['#4D88FE', '#50CCCB', '#FFBF3C'],
+        radius: '130%',
+        left: 'center',
         label: {
           normal: {
+            position: 'inside', // 在内部显示，outseide 是在外部显示
             show: true,
-            position: 'inside',
-            formatter: '{d}%',
-            textStyle: {
-              align: 'center',
-              baseline: 'middle',
-              fontSize: 16,
-              fontWeight: '100',
-              color: '#fff'
-            }
+            formatter: '{c}'
+          }
+        },
+        data: data,
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)'
           }
         },
         labelLine: {
-          show: false
+          normal: {
+            show: false
+          }
         },
-
-        data: data
+        itemStyle: {
+          normal: {
+            shadowColor: 'rgba(0, 0, 0, 0.8)',
+            shadowBlur: 5,
+            borderColor: '#fff'
+          }
+        }
+        // itemStyle: {
+        //   borderColor: '#fff'
+        // }
       }
     ]
   }
   return option
+
 }
 //在行式自助银行
 let ZHSData = (
   title = '在行式自助银行',
-
   data = [
     // { value: 666, name: '穿墙式设备' },
     // { value: 193, name: '大堂式设备' }
@@ -496,14 +450,13 @@ let ZHSData = (
   let option = {
     title: {
       text: title,
-      left: 'center'
+      left: 'center',
+      bottom:'0%'
     },
     legend: {
       show: true,
       icon: 'circle',
-      right: '3%',
-      left: 'center',
-      bottom: '10%',
+      
       itemWidth: 10,
       itemStyle: {
         borderColor: 'none'
@@ -523,9 +476,7 @@ let ZHSData = (
         }
       }
     },
-    tooltip: {
-      trigger: 'item'
-    },
+   
     series: [
       {
         type: 'pie',
@@ -558,7 +509,7 @@ let ZHSData = (
             shadowBlur: 5,
             borderColor: '#fff'
           }
-        },
+        }
         // itemStyle: {
         //   borderColor: '#fff'
         // }
@@ -605,13 +556,13 @@ let resumption = (data, type = 0) => {
     }
     getzswclzd.push(100)
   }
-
+  var num = type == 0 ? '18%' : '25%'
+  var numleft = type == 0 ? '35%' : '25%'
   let option = {
     grid: {
-      right: '25%',
+      right: num,
       bottom: '3%',
-      left: '25%',
-      
+      left: numleft,
       top: '3%'
     },
     tooltip: {