数字交通

src/views/resources.vue

@@ -6,29 +6,53 @@
     <!--主体-->
     <div class="visual-body">
       <!-- 左侧 -->
-      <div class="leftbar" ref="left">
+      <div class="leftbar w-10" ref="left">
         <div class="forthis">
-          <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
+          <dv-border-box-13    backgroundColor="#09140e" style="padding-bottom: 1rem;">
             <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>
-            <div class="i-list-con h-80" style="padding-left: 1rem;">
-              <el-collapse accordion>
-                <el-collapse-item v-for="(item,index) in resourcesCountList" :key="index">
-                  <template slot="title">
-                    <div class="d-l-con sj-collapse" v-on:click="selectResourcesByLabel(item.label)">
-                      <div class="d-l-l-text">
-                        <h4 class="collapse-title">{{ item.name }}</h4>
-                      </div>
-                      <div class="d-l-l-count">{{item.value}}</div>
-                    </div>
-                  </template>
-                </el-collapse-item>
-              </el-collapse>
-              <div class="i-list-con small-bottom-margin h-30">
+            <div class="i-list-con h-78">
+              <div class="d-l-con-icon">
+                <div class="icon-con" :class="{on:iconCurrentIndex==item.resourceTable}"
+                     v-for="(item,index) in resourcesCountList"
+                     v-on:click="indentleftSetMarkers(item.type)">
+                  <!--v-on:click="indentleftSetMarkers(item.resourceTable)">-->
+                  <div class="iconfont icon icon-normal" :class="item.icon"></div>
+                  <div class="icon-text">
+                    <h6>{{ item.num }}</h6>
+                    <!--<h6>{{ item.count }}</h6>-->
+                    <h5>{{ item.name }}</h5>
+                    <!--<h5>{{ item.resourceName }}</h5>-->
+                  </div>
+                </div>
               </div>
             </div>
           </dv-border-box-13>
         </div>
       </div>
+
+      <!--<div class="leftbar" ref="left">-->
+        <!--<div class="forthis">-->
+          <!--<dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">-->
+            <!--<img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;"/>-->
+            <!--<div class="i-list-con h-80" style="padding-left: 1rem;">-->
+              <!--<el-collapse accordion>-->
+                <!--<el-collapse-item v-for="(item,index) in resourcesCountList" :key="index">-->
+                  <!--<template slot="title">-->
+                    <!--<div class="d-l-con sj-collapse" v-on:click="selectResourcesByLabel(item.label)">-->
+                      <!--<div class="d-l-l-text">-->
+                        <!--<h4 class="collapse-title">{{ item.name }}</h4>-->
+                      <!--</div>-->
+                      <!--<div class="d-l-l-count">{{item.value}}</div>-->
+                    <!--</div>-->
+                  <!--</template>-->
+                <!--</el-collapse-item>-->
+              <!--</el-collapse>-->
+              <!--<div class="i-list-con small-bottom-margin h-30">-->
+              <!--</div>-->
+            <!--</div>-->
+          <!--</dv-border-box-13>-->
+        <!--</div>-->
+      <!--</div>-->
       <!-- 地图 -->
       <supermap ref="supermap" style="width: 100%;height: 100vh;" :mapDiv="'forestMap'" class="indexSupermapClass"
                 :mapSite="{doubleClickZoom:false}" :codes="['9fa5']" :isSideBySide="false" @preview="preview" @showResourcesDialog="showResourcesDialog">
@@ -88,6 +112,7 @@
     },
     data() {
       return {
+        iconCurrentIndex: '',
         /** ----------------------------------摄像头预览开始------------------------------------- */
         //海康
         cameraTitle: '',
@@ -106,8 +131,14 @@
     methods: {
       //查询各类资源的数量
       getResourcesCount(){
+        let that = this
         getResourcesCount().then(res => {
           this.resourcesCountList = res.data;
+          res.data.forEach(function(data, index) {
+            // that.$set(that.resourcesList[index], 'icon', 'sj' + '-' + 'icon' + '-' + data.resourceTable.split('_').slice(-1))
+            console.log("data.type.split('_').slice(-1)", data.type.split('_').slice(-1));
+            that.$set(that.resourcesList[index], 'icon', 'sj' + '-' + 'icon' + '-' + data.type.replaceAll("_", "-"));
+          })
         })
       },
       //初始化所有资源并落点