feat(数据可视化): top排名开发

完成可视化top栏开发。

admin.ui.plus-master/src/views/admin/statement/moreOilEngineDetails/index.vue

@@ -14,10 +14,10 @@
             <div class="top-con" id="top-conId" v-loading="oilListData.loading">
               <el-scrollbar>
                 <div class="scrollbar-flex-content" >
-                  <div :class="{'card':true,'active-card':index === 0} " name="card" @click="onCardChange($event,item)"  v-for="(item,index) in oilListData.list" v-bind:key="index"  >
+                  <div class="card"  :style="{backgroundColor: item.oilEngineStatus === '在线' ? '#67C23A': '#F56C6C'}" name="card"   v-for="(item,index) in oilListData.list" v-bind:key="index"  >
                     <div class="info-con">
                       <span>{{item.oilEngineName}}&nbsp;&nbsp;
-                        <span :style="{color:item.oilEngineStatus === '在线' ? '#67C23A' : '#F56C6C'}">
+                        <span >
                           {{item.oilEngineStatus}}
                         </span>
                       </span>
@@ -26,7 +26,7 @@
                     <div class="info-con">
                       <span>油品:&nbsp;{{item.oils}}</span>
                       <span>自锁状态:&nbsp;
-                        <span :style="{color:item.selfLockingState === '已启动' ? '#67C23A' : '#F56C6C'}">{{item.selfLockingState}}</span>
+                        <span >{{item.selfLockingState}}</span>
                       </span>
                     </div>
                     <div class="info-con">
@@ -135,33 +135,33 @@ const initID = ref()
 
 /*******************************方法**************************************/
 
-/**
- * 变换时改样式
- * @param event
- * @param item
- */
-const onCardChange = (event, item) => {
-  // console.log(event)
-  // console.log(item);
-  let ele = event.target
-
-  if( ele.getAttribute('name') !== 'card') {
-    ele = ele.closest('.card')
-  }
-
-  if(ele.classList.contains("active-card")) return
-
-  initID.value = item.oilEngineName
-
-  const parentElement = document.getElementById('top-conId')
-  const myElement = parentElement.querySelector('.active-card')
-
-  if(myElement){
-    myElement.classList.remove('active-card')
-  }
-
-  ele.classList.add("active-card")
-}
+// /**
+//  * 变换时改样式
+//  * @param event
+//  * @param item
+//  */
+// const onCardChange = (event, item) => {
+//   // console.log(event)
+//   // console.log(item);
+//   let ele = event.target
+//
+//   if( ele.getAttribute('name') !== 'card') {
+//     ele = ele.closest('.card')
+//   }
+//
+//   if(ele.classList.contains("active-card")) return
+//
+//   initID.value = item.oilEngineName
+//
+//   const parentElement = document.getElementById('top-conId')
+//   const myElement = parentElement.querySelector('.active-card')
+//
+//   if(myElement){
+//     myElement.classList.remove('active-card')
+//   }
+//
+//   ele.classList.add("active-card")
+// }
 
 watch(() => initID.value, ()=>{
   initTableData()
@@ -249,9 +249,9 @@ onMounted(() => {
           }
         }
 
-        .active-card {
-          background-color: #9fcaf3;
-        }
+        //.active-card {
+        //  background-color: #9fcaf3;
+        //}
       }
       .bom-con {
         display: flex;

admin.ui.plus-master/src/views/admin/visualization/cityLevelMap/index.vue

@@ -2,7 +2,9 @@
   <div class="layout-padding">
     <div class="layout-padding-auto layout-padding-view to-flex">
       <div ref="echartsMapRef" style="height: 100%;width: 80%;"></div>
-      <div style="width: 20%;background-color: #3eaadc">1</div>
+      <div class="to-right">
+        <h3>国内销售排名Top&nbsp;&nbsp;10</h3>
+      </div>
     </div>
   </div>
 </template>
@@ -104,8 +106,29 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .to-flex {
-  display: flex;
-  flex-direction: row;
-  z-index: 999;
+  position: relative;
+  //display: flex;
+  //flex-direction: row;
+  //z-index: 999;
+  .to-right {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    top: 0;
+    right: 0;
+    width: 20%;
+    max-width: 300px;
+    height: 100%;
+    background-color: rgba(0, 234, 255, 0.5);
+    color: #000; /* 文本颜色为黑色 */
+    h3 {
+      text-align: center;
+      font-size: 18px;
+    }
+    .item {
+      margin-left: 50px;
+    }
+  }
 }
 </style>

admin.ui.plus-master/src/views/admin/visualization/digitalMap/index.vue

@@ -1,8 +1,13 @@
 <template>
   <div class="layout-padding">
     <div class="layout-padding-auto layout-padding-view to-flex">
-      <div ref="echartsMapRef" style="height: 100%;width: 80%;"></div>
-      <div style="width: 20%;background-color: #3eaadc">1</div>
+      <div ref="echartsMapRef" style="height: 100%;width: 100%;"></div>
+      <div class="to-right">
+        <h3>国内销售排名Top&nbsp;&nbsp;10</h3>
+        <div class="item" v-for="(item,index) in topData" :key="index">
+          {{item.name}}:&nbsp;&nbsp;{{item.value}}
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -19,7 +24,12 @@ import router from "/@/router";
 const echartsMapRef = ref<RefType>('')
 
 
-const mapData = allCity
+const mapData = allCity.sort((a, b) => {
+  return b.value - a.value
+})
+
+const topData= mapData.slice(0, 10)
+
 
 // 注册中国地图
 echarts.registerMap('echartsMapList', echartsMapList)
@@ -119,8 +129,27 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .to-flex {
-  display: flex;
-  flex-direction: row;
-  z-index: 999;
+  position: relative;
+  .to-right {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    z-index: 999;
+    top: 0;
+    right: 0;
+    width: 20%;
+    max-width: 300px;
+    height: 100%;
+    background-color: rgba(0, 234, 255, 0.5);
+    color: #000; /* 文本颜色为黑色 */
+    h3 {
+      text-align: center;
+      font-size: 18px;
+    }
+    .item {
+      margin-left: 50px;
+    }
+  }
 }
 </style>