调整角色面板圣遗物评分部分展示

apps/profile/ProfileDetail.js

@@ -187,6 +187,14 @@ let ProfileDetail = {
     }
 
     let artisDetail = profile.getArtisMark()
+    // 处理一下allAttr，确保都有9个内容，以获得比较好展示效果
+    let allAttr = profile.artis.getAllAttr() || []
+    allAttr = lodash.slice(allAttr, 0, 9)
+    for (let idx = allAttr.length; idx < 9; idx++) {
+      allAttr[idx] = {}
+    }
+    artisDetail.allAttr = allAttr
+
     let artisKeyTitle = Artifact.getArtisKeyTitle(game)
     let data = profile.getData('name,abbr,cons,level,talent,dataSource,updateTime,imgs,costumeSplash')
     if (isSr) {

models/artis/Artis.js

@@ -248,4 +248,36 @@ export default class Artis extends Base {
     })
     return ret
   }
+
+  getAllAttr () {
+    let ret = {}
+    let add = (ds) => {
+      if (!ds) {
+        return
+      }
+      let key = ds.key
+      if (!ret[key]) {
+        ret[key] = {
+          key,
+          value: 0,
+          upNum: 0,
+          eff: 0
+        }
+      }
+      let tmp = ret[key]
+      tmp.value += ds.value
+      if (ds.eff && ds.upNum) {
+        tmp.eff += ds.eff
+        tmp.upNum += ds.upNum
+      }
+    }
+    this.forEach((arti) => {
+      // add(arti.main)
+      lodash.forEach(arti.attrs, (attr) => {
+        add(attr)
+      })
+    })
+    ret = lodash.sortBy(lodash.values(ret), ['eff']).reverse()
+    return ArtisMark.formatArti(ret, false, false, this.game)
+  }
 }

resources/character/profile-detail.css

@@ -540,7 +540,8 @@ body {
   position: initial;
   display: table;
 }
-.artis ul.detail li {
+.artis ul.detail li,
+.arti-info ul.detail li {
   padding: 0 3px;
   font-size: 14px;
   position: relative;
@@ -550,17 +551,20 @@ body {
   height: 26px;
   white-space: nowrap;
 }
-.artis ul.detail li span {
+.artis ul.detail li span,
+.arti-info ul.detail li span {
   position: initial;
   display: table-cell;
   color: #fff;
 }
-.artis ul.detail li span.title {
+.artis ul.detail li span.title,
+.arti-info ul.detail li span.title {
   text-align: left;
   padding-left: 30px;
   font-size: 14px;
 }
-.artis ul.detail li span.title i.eff {
+.artis ul.detail li span.title i.eff,
+.arti-info ul.detail li span.title i.eff {
   position: absolute;
   display: block;
   left: 3px;
@@ -574,7 +578,8 @@ body {
   width: 23px;
   text-align: center;
 }
-.artis ul.detail li span.title i.up-num {
+.artis ul.detail li span.title i.up-num,
+.arti-info ul.detail li span.title i.up-num {
   position: absolute;
   display: block;
   left: 91px;
@@ -586,41 +591,52 @@ body {
   background-repeat: no-repeat;
   background-size: auto 500%;
 }
-.artis ul.detail li span.title i.up-num.up-5 {
+.artis ul.detail li span.title i.up-num.up-5,
+.arti-info ul.detail li span.title i.up-num.up-5 {
   background-position: 0 -8px;
 }
-.artis ul.detail li span.title i.up-num.up-4 {
+.artis ul.detail li span.title i.up-num.up-4,
+.arti-info ul.detail li span.title i.up-num.up-4 {
   background-position: 0 -16px;
 }
-.artis ul.detail li span.title i.up-num.up-3 {
+.artis ul.detail li span.title i.up-num.up-3,
+.arti-info ul.detail li span.title i.up-num.up-3 {
   background-position: 0 -24px;
 }
-.artis ul.detail li span.title i.up-num.up-2 {
+.artis ul.detail li span.title i.up-num.up-2,
+.arti-info ul.detail li span.title i.up-num.up-2 {
   background-position: 0 -32px;
 }
-.artis ul.detail li span.title i.up-num.up-1 {
+.artis ul.detail li span.title i.up-num.up-1,
+.arti-info ul.detail li span.title i.up-num.up-1 {
   background: none !important;
 }
-.artis ul.detail li span.val {
+.artis ul.detail li span.val,
+.arti-info ul.detail li span.val {
   text-align: right;
   padding-right: 10px;
   font-size: 14px;
 }
-.artis ul.detail li.great span.title {
+.artis ul.detail li.great span.title,
+.arti-info ul.detail li.great span.title {
   color: #ffe699;
 }
-.artis ul.detail li.great span.title i.up-num {
+.artis ul.detail li.great span.title i.up-num,
+.arti-info ul.detail li.great span.title i.up-num {
   background-image: url("./imgs/up-num-icon2.png");
   background-size: auto 500%;
 }
-.artis ul.detail li.nouse span {
+.artis ul.detail li.nouse span,
+.arti-info ul.detail li.nouse span {
   color: #888;
 }
-.artis ul.detail li.nouse span i.up-num {
+.artis ul.detail li.nouse span i.up-num,
+.arti-info ul.detail li.nouse span i.up-num {
   background-image: url("./imgs/up-num-icon0.png");
   background-size: auto 500%;
 }
-.artis ul.detail li.arti-main {
+.artis ul.detail li.arti-main,
+.arti-info ul.detail li.arti-main {
   font-size: 16px;
   padding: 3px 3px;
   font-weight: bold;
@@ -783,9 +799,39 @@ body {
 .arti-info {
   width: 390px;
 }
-.arti-info .arti-attr {
+.arti-info .arti-all-attr {
   height: 64px;
 }
+.arti-info .arti-all-attr .arti-attr {
+  position: relative;
+  right: 0;
+  top: 0;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  height: 90px;
+  width: 100%;
+}
+.arti-info .arti-all-attr .arti-attr li {
+  width: 33.33%;
+  display: flex;
+  height: 30px;
+  line-height: 30px;
+}
+.arti-info .arti-all-attr .arti-attr li i.eff {
+  width: 28px !important;
+  top: 6px !important;
+  left: 5px !important;
+}
+.arti-info .arti-all-attr .arti-attr li span.title {
+  padding-left: 36px;
+  width: 60%;
+}
+.arti-info .arti-all-attr .arti-attr li span.val {
+  padding-right: 5px;
+  font-size: 13px;
+  width: 40%;
+}
 .arti-info .arti-notice {
   height: 25px;
   line-height: 25px;

resources/character/profile-detail.html

@@ -186,9 +186,22 @@
         <div class="arti-class-title">评分规则：{{ad.classTitle}}</div>
       </div>
       <div class="arti-info">
-        <div class="arti-attr"></div>
+        <div class="arti-all-attr">
-        <div class="arti-notice dmg-desc">
+          <ul class="detail attr arti-attr">
-          评分仅供参考与娱乐。可使用<strong>{{gameHash}}{{data.abbr}}圣遗物</strong>来查看评分详情
+            {{set sTitle = {暴击率:'暴击',暴击伤害:'爆伤',充能效率:'充能',元素精通:'精通',效果命中:'命中',效果抵抗:'抵抗',击破特攻:'击破',
+            大生命:'生命',大攻击:'攻击',大防御:'防御',小生命:'生命',小攻击:'攻击',小防御:'防御'}
+            }}
+            {{each ad.allAttr attr}}
+            {{if attr && attr.key}}
+            <li class="{{ad.charWeight[attr.key]*1 > 79.9 ?`great`:(ad.charWeight[attr.key]*1>0 ? `useful`:`nouse`)}}">
+              <span class="title">{{if attr.eff}}<i class="eff">{{attr.eff || ''}}</i>{{/if}} {{sTitle[artisKeyTitle[attr.key]] || artisKeyTitle[attr.key]}}</span>
+              <span class="val">+{{attr.value}}</span>
+            </li>
+            {{else}}
+            <li></li>
+            {{/if}}
+            {{/each}}
+          </ul>
         </div>
       </div>
     </div>

resources/character/profile-detail.less

@@ -667,7 +667,8 @@ body {
   display: table;
 }
 
-.artis ul.detail li {
+.artis ul.detail li,
+.arti-info ul.detail li {
   padding: 0 3px;
   font-size: 14px;
   position: relative;
@@ -960,8 +961,47 @@ body {
 .arti-info {
   width: 390px;
 
-  .arti-attr {
+  .arti-all-attr {
     height: 64px;
+
+    .arti-attr {
+      position: relative;
+      right: 0;
+      top: 0;
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: column;
+      height: 90px;
+      width: 100%;
+
+      li {
+        width: 33.33%;
+        display: flex;
+        height: 30px;
+        line-height: 30px;
+
+        i.eff {
+          width: 28px !important;
+          top: 6px !important;
+          left: 5px !important;
+        }
+
+        span {
+
+        }
+
+        span.title {
+          padding-left: 36px;
+          width: 60%;
+        }
+
+        span.val {
+          padding-right: 5px;
+          font-size: 13px;
+          width: 40%;
+        }
+      }
+    }
   }
 
   .arti-notice {