全省top10

src/views/gis/business/clue/index.vue

@@ -8,6 +8,8 @@
             link="select"
             label="搜索类型:"
             v-model:param="clue.tempForm.type"
+            multiple
+            collapse-tags
             :options="[
               {dictLabel: '零关税自用进口生产设备', dictValue: 'lgszyjkscsb'},
               {dictLabel: '加工增值免关税', dictValue: 'jgzzmgs'},

src/views/gis/business/resources/index.vue

@@ -46,7 +46,30 @@
         </div>
       </FocusContentCom>
       <div class="__gis-business-main_title">全省TOP10</div>
-      <FocusContentCom class="two">2</FocusContentCom>
+      <FocusContentCom class="two">
+        <div class="two-main">
+          <div class="two-tab">
+            <template v-for="item in top10.tab">
+              <div class="two-tab-item __hover" :class="{active: item.value === top10.type}" @click="top10.type = item.value">{{item.label}}</div>
+            </template>
+          </div>
+          <div class="two-list">
+            <template v-for="(item, index) in top10[top10.type]">
+              <div class="top10-item">
+                <div class="top10-item-top">
+                  <div class="index">{{(index + 1) < 10 ? `0${index + 1}` : index + 1}}</div>
+                  <div class="name">{{item.name}}</div>
+                  <div class="value">{{item.value}}</div>
+                  <div class="unit">台</div>
+                </div>
+                <div class="top10-item-bottom">
+                  <div class="top10-item-bottom-bar" :style="`width: calc((100% - 16px) * ${item.value / top10[top10.type][0].value})`"/>
+                </div>
+              </div>
+            </template>
+          </div>
+        </div>
+      </FocusContentCom>
     </div>
   </BusinessMainCom>
 </template>
@@ -100,6 +123,37 @@ export default defineComponent({
         online: 27768,
         offline: 7832,
         cx: 50
+      },
+      top10: {
+        type: 'online',
+        tab: [
+          {label: '在线设备', value: 'online'},
+          {label: '离线设备', value: 'offline'},
+        ],
+        online: [
+          {name: '海口市1', value: 120},
+          {name: '海口市2', value: 119},
+          {name: '海口市3', value: 88},
+          {name: '海口市4', value: 77},
+          {name: '海口市5', value: 66},
+          {name: '海口市6', value: 55},
+          {name: '海口市7', value: 44},
+          {name: '海口市8', value: 33},
+          {name: '海口市9', value: 22},
+          {name: '海口市10', value: 11},
+        ],
+        offline: [
+          {name: '海口市1', value: 1220},
+          {name: '海口市2', value: 119},
+          {name: '海口市3', value: 88},
+          {name: '海口市4', value: 77},
+          {name: '海口市5', value: 66},
+          {name: '海口市6', value: 55},
+          {name: '海口市7', value: 44},
+          {name: '海口市8', value: 33},
+          {name: '海口市9', value: 22},
+          {name: '海口市10', value: 11},
+        ]
       }
     })
     onMounted(() => {
@@ -173,6 +227,145 @@ export default defineComponent({
   }
   .two {
     flex: 1;
+    .two-main {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      padding: 5px;
+      .two-tab {
+        width: 100%;
+        height: 20px;
+        display: flex;
+        .two-tab-item {
+          width: 50%;
+          height: 20px;
+          background-color: rgba(18, 128, 241, 0.2);
+          border-radius: 2px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 12px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #0096FF;
+          &.active {
+            background-color: rgba(18, 128, 241, 1);
+            color: #61FFFF;
+          }
+        }
+      }
+      .two-list {
+        padding: 0 4px;
+        flex: 1;
+        display: grid;
+        grid-template-rows: repeat(10, 1fr);
+        .top10-item {
+          .top10-item-top {
+            display: flex;
+            align-items: center;
+            .index {
+              width: 16px;
+              height: 16px;
+              background: #73C5FF;
+              font-size: 12px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #FFFFFF;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            }
+            .name {
+              font-size: 14px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #434343;
+              margin-left: 10px;
+            }
+            .value {
+              margin-left: auto;
+              font-size: 24px;
+              font-family: YouSheBiaoTiHei;
+              font-weight: 400;
+              color: #73C5FF;
+            }
+            .unit {
+              margin-left: 4px;
+              font-size: 12px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #B4C4C7;
+            }
+          }
+          .top10-item-bottom {
+            width: 100%;
+            height: 4px;
+            background: rgba(180, 215, 243, 0.25);
+            border-radius: 2px;
+            position: relative;
+            .top10-item-bottom-bar {
+              position: absolute;
+              height: 100%;
+              z-index: 2;
+              border-radius: 2px;
+              background: linear-gradient(90deg, #73C5FF 0%, #1E9FFB 100%);
+            }
+          }
+          &:nth-child(1) {
+            .top10-item-top {
+              .index {
+                background: linear-gradient(-90deg, #FD658C 0%, #FEDB67 100%);
+              }
+              .value {
+                background: linear-gradient(0deg, #FD658C 0%, #FEDB67 100%);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+              }
+            }
+            .top10-item-bottom {
+              .top10-item-bottom-bar {
+                background: linear-gradient(-90deg, #FD658C 0%, #FEDB67 100%);
+              }
+            }
+          }
+          &:nth-child(2) {
+            .top10-item-top {
+              .index {
+                background: linear-gradient(-90deg, #4FACFE 0%, #00F2FE 100%);
+              }
+              .value {
+                background: linear-gradient(-90deg, #4FACFE 0%, #00F2FE 100%);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+              }
+            }
+            .top10-item-bottom {
+              .top10-item-bottom-bar {
+                background: linear-gradient(-90deg, #4FACFE 0%, #00F2FE 100%);
+              }
+            }
+          }
+          &:nth-child(3) {
+            .top10-item-top {
+              .index {
+                background: linear-gradient(-90deg, #01B1A7 0%, #04F1DD 100%);
+              }
+              .value {
+                background: linear-gradient(-90deg, #01B1A7 0%, #04F1DD 100%);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+              }
+            }
+            .top10-item-bottom {
+              .top10-item-bottom-bar {
+                background: linear-gradient(-90deg, #01B1A7 0%, #04F1DD 100%);
+              }
+            }
+          }
+        }
+      }
+    }
   }
 }
 </style>