feat: 完成重庆市设备维保排行榜

src/views/main/components/SortIndex.js

@@ -0,0 +1,31 @@
+import './SortIndex.less';
+
+export const SortIndex = {
+  props: {
+    idx: {
+      type: Number,
+      default: 0
+    }
+  },
+  render(h) {
+    if (this.idx <= 3) {
+      return h('div', {
+        class: `sort-index-${this.idx}`
+      })
+    } else {
+      return h('div', {
+        style: {
+          width: '.9vw',
+          height: '.9vw',
+          borderRadius: '50%',
+          backgroundColor: '#13919C',
+          display: 'flex',
+          justifyContent: "center",
+          alignItems: "center"
+        }
+      }, this.idx)
+    }
+  }
+}
+
+export default SortIndex;

src/views/main/components/SortIndex.less

@@ -0,0 +1,18 @@
+.sort-index-1 {
+  width: 1.1vw;
+  height: 1.1vw;
+  background: url("@/assets/images/main-1-bg.png") no-repeat center;
+  background-size: 100% 100%;
+}
+.sort-index-2 {
+  width: 1.3vw;
+  height: 1.3vw;
+  background: url("@/assets/images/main-2-bg.png") no-repeat center;
+  background-size: 100% 100%;
+}
+.sort-index-3 {
+  width: 1.3vw;
+  height: 1.3vw;
+  background: url("@/assets/images/main-3-bg.png") no-repeat center;
+  background-size: 100% 100%;
+}

src/views/main/modules/bottom/EquipmentMaintenanceList.vue

@@ -0,0 +1,143 @@
+<template >
+  <div>
+    <!-- 隐患处理排行榜 -->
+    <div class="row header">
+      <span class="idx">排名</span>
+      <span class="address">地区</span>
+      <span class="all_count">全部设备</span>
+      <span class="normal_count">正常设备</span>
+      <span class="abnormal_count">异常设备</span>
+      <span class="percent">设备完好率</span>
+    </div>
+    <div>
+      <vue-seamless-scroll
+        :data="list"
+        :class-option="classOption"
+        class="warp"
+      >
+        <ul class="item">
+          <li   v-for="(item, index) in list" :key="index">
+            <div class="row">
+              <span class="idx">
+              <SortIndex :idx="reverse ? list.length - index :  index + 1"/>
+              </span>
+              <span class="address" v-text="item.address"></span>
+              <span class="all_count" v-text="item.allCount"></span>
+              <span class="normal_count" v-text="item.normalCount"></span>
+              <span class="abnormal_count" v-text="item.abnormalCount"></span>
+              <span class="percent" >{{item.percent}}%</span>
+            </div>
+            <div>
+              <ProgressBar :value="item.percent"/>
+            </div>
+          </li>
+        </ul>
+      </vue-seamless-scroll>
+    </div>
+  </div>
+</template>
+
+<script>
+import VueSeamlessScroll from 'vue-seamless-scroll'
+import SortIndex from '../../components/SortIndex'
+
+const ProgressBar = {
+  props: {
+    value: {
+      type: Number,
+      default: 0
+    }
+  },
+  render(h) {
+    return h('div', { class: 'progress-bar' }, [
+      h('div', { class: 'progress-bar-inner' }, [
+        h('div', { class: 'progress-bar-inner-inner', style: `width: ${this.value}%` })
+      ])
+    ])
+  }
+}
+
+export default {
+  name: 'EquipmentMaintenanceList',
+  components: {
+    VueSeamlessScroll,
+    ProgressBar,
+    SortIndex
+  },
+  props: {
+    reverse: {
+      type: Boolean,
+      default: false
+    },
+    list: {
+      type: Array,
+      default: () => []
+    }
+  },  
+  data() {
+    return {
+      classOption: {
+        singleHeight: 48.55
+      }
+    }
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang='less'>
+
+.header {
+  color: #73CCE2;
+}
+
+.row {
+  margin-top: 10px;
+  display: block;
+  height: 30px;
+  line-height: 30px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 15px;
+  span {
+    text-align: center;
+    font-size: 12px;
+    flex: 1;
+  }
+  .idx {
+    flex: .5;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.warp {
+  height: 210px;
+  margin: 0 auto;
+  overflow: hidden;
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0 auto;
+  }
+}
+
+/deep/ .progress-bar {
+  border: 1px solid #027F9B;
+  padding: 1px;
+  width: 100%;
+  background-color: #07133D;
+  .progress-bar-inner {
+    height: 100%;
+    background-color: #07133D;
+    .progress-bar-inner-inner {
+      height: 100%;
+      background-color: #00EAFF;
+      height: 4px;
+      width: 0%;
+    }
+  }
+}
+</style>

src/views/main/modules/bottom/EquipmentMaintenanceRanking.vue

@@ -1,7 +1,14 @@
 <template >
   <div class="EquipmentMaintenanceRanking">
     <ContainerBorder title="重庆市设备维保排行榜">
-      11
+      <div class="content-list">
+        <div class="list-1">
+          <EquipmentMaintenanceList :list="listData"/>
+        </div>
+        <div class="list-2">
+          <EquipmentMaintenanceList reverse :list="listData"/>
+        </div>
+      </div>
     </ContainerBorder>
     <ButtonGroup 
       class="custom-btn-group"
@@ -13,12 +20,14 @@
 <script>
 import { ContainerBorder } from '@/components'
 import ButtonGroup from '../../components/ButtonGroup.vue'
+import EquipmentMaintenanceList from './EquipmentMaintenanceList.vue'
 
 export default {
   name: 'EquipmentMaintenanceRanking',
   components: {
     ContainerBorder,
-    ButtonGroup
+    ButtonGroup,
+    EquipmentMaintenanceList
   },
   data() {
     return {
@@ -35,7 +44,59 @@ export default {
           name: '近一月',
           key: 'mouth'
         }
-      ]}
+      ],
+      listData: [
+        {
+          address: '渝北区',
+          allCount: 4568,
+          normalCount: 3456,
+          abnormalCount: 1234,
+          percent: 80
+        },
+        {
+          address: '渝北区',
+          allCount: 4568,
+          normalCount: 3456,
+          abnormalCount: 1234,
+          percent: 80
+        },
+        {
+          address: '渝北区',
+          allCount: 4568,
+          normalCount: 3456,
+          abnormalCount: 1234,
+          percent: 80
+        },
+        {
+          address: '渝北区',
+          allCount: 4568,
+          normalCount: 3456,
+          abnormalCount: 1234,
+          percent: 80
+        },
+        {
+          address: '渝北区',
+          allCount: 4568,
+          normalCount: 3456,
+          abnormalCount: 1234,
+          percent: 80
+        },
+        {
+          address: '渝北区',
+          allCount: 4568,
+          normalCount: 3456,
+          abnormalCount: 1234,
+          percent: 80
+        },
+        {
+          address: '渝北区',
+          allCount: 4568,
+          normalCount: 3456,
+          abnormalCount: 1234,
+          percent: 80
+        }
+      ]
+    }
   },
   methods: {}
 }
@@ -54,5 +115,21 @@ export default {
     top: 20px;
     right: 0;
   }
+
+  .content-list {
+    display: flex;
+    justify-content: space-between;
+    div {
+      flex: 1;
+    }
+    .list-1 {
+      border-right: 1px solid #192A66;
+      padding-right: 40px;
+    }
+    .list-2 {
+      padding-left: 40px;
+    }
+    
+  }
 }
 </style>

src/views/main/modules/bottom/FirePatrolList.vue

@@ -32,6 +32,7 @@
 
 <script>
 import VueSeamlessScroll from 'vue-seamless-scroll'
+import SortIndex from '../../components/SortIndex'
 
 const ProgressBar = {
   props: {
@@ -49,35 +50,6 @@ const ProgressBar = {
   }
 }
 
-const SortIndex = {
-  props: {
-    idx: {
-      type: Number,
-      default: 0
-    }
-  },
-  render(h) {
-    if (this.idx <= 3) {
-      return h('div', {
-        class: `sort-index-${this.idx}`
-      })
-    } else {
-      return h('div', {
-        style: {
-          width: '.9vw',
-          height: '.9vw',
-          borderRadius: '50%',
-          backgroundColor: '#13919C',
-          display: 'flex',
-          justifyContent: "center",
-          alignItems: "center"
-        }
-      }, this.idx)
-    }
-  }
-}
-
-
 export default {
   name: 'FirePatrolList',
   components: {
@@ -174,23 +146,4 @@ export default {
     }
   }
 }
-
-/deep/ .sort-index-1 {
-  width: 1.3vw;
-  height: 1.3vw;
-  background: url("@/assets/images/main-1-bg.png") no-repeat center;
-  background-size: 100% 100%;
-}
-/deep/ .sort-index-2 {
-  width: 1.3vw;
-  height: 1.3vw;
-  background: url("@/assets/images/main-2-bg.png") no-repeat center;
-  background-size: 100% 100%;
-}
-/deep/ .sort-index-3 {
-  width: 1.3vw;
-  height: 1.3vw;
-  background: url("@/assets/images/main-3-bg.png") no-repeat center;
-  background-size: 100% 100%;
-}
 </style>