看板样式

src/views/hzcxbb/szkb/index.vue

@@ -50,6 +50,16 @@
           <i class="i2"></i>
           <i class="i3"></i>
           <i class="i4"></i>
+          <!-- 排行数据-->
+          <div style="color: #61d2f7;float: left;font-size: .9vw;margin-top: 2vh;margin-left: 2vh;">
+            总体排名:1
+            <br>
+            资本排名:2
+            <br>
+            成本项目:2
+            <br>
+            标准成本:2
+          </div>
           <div class="full" ref="szkbmap" v-echartResize="()=>{
              szkbmapCharts.resize()
            }">
@@ -101,9 +111,9 @@
           <i class="i4"></i>
           <div class="full itembg ">
             <!-- 轮播图-->
-            <el-carousel    :indicator-position='"none"' style="overflow: hidden;" :interval='10000' class="full"
+            <el-carousel :indicator-position='"none"' style="overflow: hidden;" :interval='10000' class="full"
               :autoplay="true">
-              <el-carousel-item  style="height: 45vh;" >
+              <el-carousel-item style="height: 45vh;">
                 <span class="com-count-title">
                   预算执行分析-标准成本(单位)
                 </span>
@@ -115,16 +125,16 @@
            }" class="com-count-body">
                 </div>
               </el-carousel-item>
-              <el-carousel-item style="height: 45vh;" >
+              <el-carousel-item style="height: 45vh;">
                 <span class="com-count-title">
                   预算执行分析-标准成本(科目)
                 </span>
-                <div ref="slt2"    v-echartResize="()=>{
+                <div ref="slt2" v-echartResize="()=>{
               if(slt2){
                 slt2.resize()
               }
 
-           }"  class="com-count-body">
+           }" class="com-count-body">
                 </div>
               </el-carousel-item>
             </el-carousel>
@@ -149,17 +159,17 @@
                   项目类别
                 </div>
                 <div class="flex1 text-center ">
-                  省完成率
+                  年初预算目标值
                 </div>
                 <div class="flex1 text-center ">
-                  公司完成率
+                  发生值
                 </div>
                 <div class="flex1 text-center ">
-                  单位完成率
+                  省均完成率
                 </div>
 
                 <div class="flex1 text-center ">
-                  完成率
+                  淮安完成率
                 </div>
                 <div class="flex1 text-center ">
                   排名
@@ -191,32 +201,32 @@
           <i class="i3"></i>
           <i class="i4"></i>
           <el-carousel :indicator-position='"none"' style="overflow: hidden;" :interval='10000' class="full"
-             :autoplay="true">
-             <el-carousel-item style="height: 45vh;"  >
-               <span class="com-count-title">
-                 预算执行分析-成本性项目(单位)
-               </span>
-               <div ref="slt3"  v-echartResize="()=>{
+            :autoplay="true">
+            <el-carousel-item style="height: 45vh;">
+              <span class="com-count-title">
+                预算执行分析-成本性项目(单位)
+              </span>
+              <div ref="slt3" v-echartResize="()=>{
               if(slt3){
                 slt3.resize()
               }
 
-           }"  class="com-count-body">
-               </div>
-             </el-carousel-item>
-             <el-carousel-item style="height: 45vh;"  >
-               <span class="com-count-title">
-                 预算执行分析-成本性项目(专业)
-               </span>
-               <div ref="slt4"  v-echartResize="()=>{
+           }" class="com-count-body">
+              </div>
+            </el-carousel-item>
+            <el-carousel-item style="height: 45vh;">
+              <span class="com-count-title">
+                预算执行分析-成本性项目(专业)
+              </span>
+              <div ref="slt4" v-echartResize="()=>{
               if(slt4){
                 slt4.resize()
               }
 
-           }"  class="com-count-body">
-               </div>
-             </el-carousel-item>
-           </el-carousel>
+           }" class="com-count-body">
+              </div>
+            </el-carousel-item>
+          </el-carousel>
         </div>
       </div>
     </div>
@@ -594,22 +604,22 @@
           lx: 'CBKM'
         }).then(res => {
           if (res.success && res.data.records) {
-           const {
-             records
-           } = res.data
-           if (records.length != 0) {
-             records.sort(function(a, b) {
-               return b.wcl - a.wcl;
-             });
-             let apidata = records.filter((item, index) => {
-               if (index < 6) {
-                 return true
-               } else {
-                 return false
-               }
-             })
-             this.slt4 = this.initsltdo4(apidata)
-           }
+            const {
+              records
+            } = res.data
+            if (records.length != 0) {
+              records.sort(function(a, b) {
+                return b.wcl - a.wcl;
+              });
+              let apidata = records.filter((item, index) => {
+                if (index < 6) {
+                  return true
+                } else {
+                  return false
+                }
+              })
+              this.slt4 = this.initsltdo4(apidata)
+            }
           }
         })
       },
@@ -914,7 +924,7 @@
         })
       },
       initsltdo4(apidata) {
-        let colorList = ['#f18c6e', '#d5f69b', '#22f2e5', '#2ca4fb','#9adc6f']
+        let colorList = ['#f18c6e', '#d5f69b', '#22f2e5', '#2ca4fb', '#9adc6f']
         const charts = this.$echarts.init(this.$refs["slt4"]);
         let XAXIS = apidata.map(item => item.xmflname || 'xmflname')
         var option = {
@@ -1094,7 +1104,7 @@
 
       },
       initsltdo2(apidata) {
-        let colorList = ['#f18c6e', '#d5f69b', '#22f2e5', '#2ca4fb','#9adc6f']
+        let colorList = ['#f18c6e', '#d5f69b', '#22f2e5', '#2ca4fb', '#9adc6f']
         const charts = this.$echarts.init(this.$refs["slt2"]);
         let XAXIS = apidata.map(item => item.xmflname || 'xmflname')
         var option = {
@@ -2093,6 +2103,7 @@
         padding: 0.5vh;
 
       }
+
       .third {
         height: 100%;
         width: 30%;
@@ -2257,4 +2268,4 @@
 
 
   // @import url("szkb.scss");
-</style>
+</style>
\ No newline at end of file