#优化Detail数据查看和地图查看的图标按钮

src/assets/icon/demo_index.html

@@ -30,6 +30,18 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe683;</span>
+                <div class="name">map</div>
+                <div class="code-name">&amp;#xe683;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe620;</span>
+                <div class="name">detail</div>
+                <div class="code-name">&amp;#xe620;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe857;</span>
                 <div class="name">signal-2</div>
@@ -176,6 +188,24 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont el-icon-alimap"></span>
+            <div class="name">
+              map
+            </div>
+            <div class="code-name">.el-icon-alimap
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont el-icon-alixiangqing"></span>
+            <div class="name">
+              detail
+            </div>
+            <div class="code-name">.el-icon-alixiangqing
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont el-icon-alisignal-2"></span>
             <div class="name">
@@ -349,6 +379,22 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#el-icon-alimap"></use>
+                </svg>
+                <div class="name">map</div>
+                <div class="code-name">#el-icon-alimap</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#el-icon-alixiangqing"></use>
+                </svg>
+                <div class="name">detail</div>
+                <div class="code-name">#el-icon-alixiangqing</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#el-icon-alisignal-2"></use>

src/assets/icon/iconfont.css

@@ -1,10 +1,10 @@
 @font-face {font-family: "iconfont";
-  src: url('iconfont.eot?t=1599730308106'); /* IE9 */
-  src: url('iconfont.eot?t=1599730308106#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
-  url('iconfont.woff?t=1599730308106') format('woff'),
-  url('iconfont.ttf?t=1599730308106') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
-  url('iconfont.svg?t=1599730308106#iconfont') format('svg'); /* iOS 4.1- */
+  src: url('iconfont.eot?t=1599789900097'); /* IE9 */
+  src: url('iconfont.eot?t=1599789900097#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+  url('iconfont.woff?t=1599789900097') format('woff'),
+  url('iconfont.ttf?t=1599789900097') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1599789900097#iconfont') format('svg'); /* iOS 4.1- */
 }
 
 .iconfont {
@@ -25,6 +25,14 @@
   -moz-osx-font-smoothing: grayscale; 
 }
 
+.el-icon-alimap:before {
+  content: "\e683";
+}
+
+.el-icon-alixiangqing:before {
+  content: "\e620";
+}
+
 .el-icon-alisignal-2:before {
   content: "\e857";
 }

src/assets/icon/iconfont.json

@@ -5,6 +5,20 @@
   "css_prefix_text": "el-icon-ali",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "691221",
+      "name": "map",
+      "font_class": "map",
+      "unicode": "e683",
+      "unicode_decimal": 59011
+    },
+    {
+      "icon_id": "13738103",
+      "name": "detail",
+      "font_class": "xiangqing",
+      "unicode": "e620",
+      "unicode_decimal": 58912
+    },
     {
       "icon_id": "10023646",
       "name": "signal-2",

src/assets/icon/iconfont.svg

@@ -20,6 +20,12 @@ Created by iconfont
   />
     <missing-glyph />
     
+    <glyph glyph-name="map" unicode="&#59011;" d="M590.385244 868.220491c-99.849476 0-180.759546-80.948617-180.759546-180.746697 0-99.836627 157.618521-277.833641 157.618521-412.118401l46.294899 0c0 133.809348 157.605672 320.415183 157.605672 412.118401C771.131941 787.271874 690.221871 868.220491 590.385244 868.220491zM590.385244 608.028509c-43.866441 0-79.458134 35.578844-79.458134 79.445285 0 43.866441 35.591693 79.445285 79.458134 79.445285 43.866441 0 79.445285-35.578844 79.445285-79.445285C669.830529 643.607353 634.251685 608.028509 590.385244 608.028509zM810.269954 775.643541c9.495401-23.616438 15.200351-49.108827 16.575193-75.744777l101.558391 50.804894 0-695.862576-152.645963-76.322981-230.896292 98.924349c-9.456854 4.073129-19.543309 6.09042-29.604065 6.09042-11.525541 0-23.038233-2.634042-33.587251-7.927825l-194.173888-97.086944-185.372332 79.406738L102.123747 758.335956l158.183876-67.778405c9.456854-4.073129 19.543309-6.09042 29.604065-6.09042 11.512692 0 23.025384 2.634042 33.587251 7.927825l30.799021 15.405935c3.122304 36.349784 14.493657 70.232562 32.21241 100.093607l-96.611531-48.299341L27.00857 872.255072l0-863.850229 262.915967-112.672765 225.34553 112.672765 262.915967-112.672765 225.34553 112.672765L1003.531564 872.255072 810.269954 775.643541zM515.270067 8.404843l224.369007-96.161817C729.53977 163.235134 608.283882 204.339043 515.270067 204.339043c-20.391342 0-36.349784-23.693532-75.128026-1.875952-65.465588 36.863743-44.444645 138.062363-150.217504 143.960048-93.913244 93.900395-225.358379 75.128026-225.358379 75.128026L27.00857 421.551164l0-413.14632 262.915967-112.672765L515.270067 8.404843z"  horiz-adv-x="1031" />
+
+    
+    <glyph glyph-name="xiangqing" unicode="&#58912;" d="M818.176 815.104c30.72 0 59.392-12.288 81.92-33.792 21.504-21.504 33.792-51.2 33.792-81.92v-628.736c0-30.72-12.288-59.392-33.792-81.92-21.504-21.504-51.2-33.792-81.92-33.792H205.824c-30.72 0-59.392 12.288-81.92 33.792-21.504 21.504-33.792 51.2-33.792 81.92V699.392c0 30.72 12.288 59.392 33.792 81.92 21.504 21.504 51.2 33.792 81.92 33.792h612.352m0 69.632H205.824c-102.4 0-185.344-83.968-185.344-185.344v-628.736c0-101.376 82.944-185.344 185.344-185.344h612.352c101.376 0 185.344 82.944 185.344 185.344V699.392c0 101.376-83.968 185.344-185.344 185.344z m0 0M191.488 416.768c-10.24 0-20.48 4.096-27.648 13.312-11.264 15.36-9.216 36.864 6.144 48.128L404.48 660.48c14.336 11.264 33.792 9.216 46.08-3.072l143.36-148.48L809.984 691.2c14.336 12.288 36.864 10.24 49.152-4.096 12.288-14.336 10.24-36.864-4.096-49.152L614.4 435.2c-14.336-11.264-34.816-10.24-47.104 2.048L421.888 587.776 212.992 424.96c-7.168-5.12-14.336-8.192-21.504-8.192zM727.04 251.904H295.936c-19.456 0-34.816 15.36-34.816 34.816s15.36 34.816 34.816 34.816H727.04c19.456 0 34.816-15.36 34.816-34.816 0-18.432-15.36-34.816-34.816-34.816z m0-161.792H295.936c-19.456 0-34.816 15.36-34.816 34.816s15.36 34.816 34.816 34.816H727.04c19.456 0 34.816-15.36 34.816-34.816s-15.36-34.816-34.816-34.816z m0 0"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="signal-2" unicode="&#59479;" d="M432 320h-96c-17.68 0-32-14.32-32-32v-384c0-17.68 14.32-32 32-32h96c17.68 0 32 14.32 32 32V288c0 17.68-14.32 32-32 32zM176 128H80c-17.68 0-32-14.32-32-32v-192c0-17.68 14.32-32 32-32h96c17.68 0 32 14.32 32 32v192c0 17.68-14.32 32-32 32z"  horiz-adv-x="1280" />
 
     

src/views/counter/detail.vue

@@ -345,8 +345,9 @@ export default {
     .filter-container {
     display: block;
       .filter-item {
-        margin-bottom: 10px;
         display: block;
+        float: left;
+        margin: 0 0 15px 10px;
       }
       .date-selector {
         margin-left: 0;

src/views/counter/device.vue

@@ -82,10 +82,10 @@
       <el-table-column
         prop="energy"
         :label="$t('counter.energy')"
-        min-width="80">
+        min-width="100">
         <template slot-scope="scope">
           <span v-if="scope.row.energy.replace('%','') >= 90" style="color: #67C23A" ><i class="el-icon-alipower_9"></i> {{scope.row.energy}}</span>
-          <span v-if="scope.row.energy.replace('%','') >= 80 && scope.row.energy.replace('%','') < 90" style="color: #67C23A" ><i class="el-icon-alipower_8"></i> {{scope.row.energy}}</span>
+          <span v-if="scope.row.energy.replace('%','') >= 80 && scope.row.energy.replace('%','') < 90" style="color: #67C23A" ><i class="el-icon-alipower_8" size="small"></i> {{scope.row.energy}}</span>
           <span v-if="scope.row.energy.replace('%','') >= 70 && scope.row.energy.replace('%','') < 80" style="color: #67C23A" ><i class="el-icon-alipower_7"></i> {{scope.row.energy}}</span>
           <span v-if="scope.row.energy.replace('%','') >= 60 && scope.row.energy.replace('%','') < 70" style="color: #67C23A" ><i class="el-icon-alipower_6"></i> {{scope.row.energy}}</span>
           <span v-if="scope.row.energy.replace('%','') >= 50 && scope.row.energy.replace('%','') < 60" style="color: #67C23A" ><i class="el-icon-alipower_5"></i> {{scope.row.energy}}</span>
@@ -106,11 +106,11 @@
         :label="$t('counter.action')"
         min-width="100">
         <template slot-scope="scope">
-          <el-button type="text"
-            @click="handleDetailClick(scope.row.device_id)" size="small">{{$t('counter.detail')}}
+          <el-button type="text" title="Detail"
+            @click="handleDetailClick(scope.row.device_id)" ><i class="el-icon-alixiangqing"></i>
           </el-button>
-          <el-button type="text"
-            @click="handleMapClick(scope.row.device_id)" size="small">{{$t('counter.map')}}
+          <el-button type="text" title="Map"
+            @click="handleMapClick(scope.row.device_id)" ><i class="el-icon-alimap"></i>
           </el-button>
         </template>
       </el-table-column>

src/views/counter/logs.vue

@@ -224,8 +224,9 @@ export default {
     .filter-container {
     display: block;
       .filter-item {
-        margin-bottom: 10px;
         display: block;
+        float: left;
+        margin: 0 0 15px 10px;
       }
       .date-selector {
         margin-left: 0;