Ana Sayfa Keşfet Yardım
Üye Ol Giriş Yap
seimin
/
zuel-itsm-3.0.2
İzle 1
Yıldızla 0
Çatalla 0
Files Sorunlar 0 Değişiklik İstekleri 0 Wiki
Kaynağa Gözat

资产展示，与新增

seimin 3 yıl önce
ebeveyn
29d553e703
işleme
5955f49d2b
22 değiştirilmiş dosya ile 18403 ekleme ve 1237 silme
Görünümü Böl Farklılık Durumunu Göster
  1. 1 0
      index.html
  2. 16599 540
      package-lock.json
  3. 2 1
      package.json
  4. 34 0
      src/http/http.js
  5. 93 76
      src/views/againAssign.vue
  6. 78 55
      src/views/closed.vue
  7. 72 47
      src/views/grabSheet.vue
  8. 0 1
      src/views/incidentList.vue
  9. 253 203
      src/views/newIncident.vue
  10. 72 47
      src/views/order.vue
  11. 210 194
      src/views/processing.vue
  12. 83 66
      src/views/solved.vue
  13. 6 0
      src/views/wxChartDetail.vue
  14. 12 7
      src/views/wxChartList.vue
  15. 539 0
      static/font/seimin/demo.css
  16. 280 0
      static/font/seimin/demo_index.html
  17. 31 0
      static/font/seimin/iconfont.css
  18. 1 0
      static/font/seimin/iconfont.js
  19. 37 0
      static/font/seimin/iconfont.json
  20. BIN
      static/font/seimin/iconfont.ttf
  21. BIN
      static/font/seimin/iconfont.woff
  22. BIN
      static/font/seimin/iconfont.woff2

+ 1 - 0
index.html
Dosyayı Görüntüle 

@@ -3,6 +3,7 @@
3 3 
   <head>
4 4 
     <meta charset="utf-8">
5 5 
     <link rel="stylesheet" href="./static/css/iconfont.css">
6 
+    <link rel="stylesheet" href="./static/font/seimin/iconfont.css">
6 7 
     <script src="./static/js/JQ-3.3.1.js"></script>
7 8 
     <meta name="viewport"
8 9 
         content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">

Dosya farkı çok büyük olduğundan ihmal edildi
+ 16599 - 540
package-lock.json


+ 2 - 1
package.json
Dosyayı Görüntüle 

@@ -19,7 +19,8 @@
19 19 
     "vue": "^2.5.2",
20 20 
     "vue-axios": "^2.1.4",
21 21 
     "vue-router": "^3.0.1",
22 
-    "vuex": "^3.1.1"
22 
+    "vuex": "^3.1.1",
23 
+    "weixin-jsapi": "^1.1.0"
23 24 
   },
24 25 
   "compileDependencies": [
25 26 
     "cube-ui"

+ 34 - 0
src/http/http.js
Dosyayı Görüntüle 

@@ -0,0 +1,34 @@
1 
+import wx from 'weixin-jsapi'
2 
+// 扫一扫
3 
+export function SM(Vue) {
4 
+  return new Promise((resolve, reject) => {
5 
+    let param = {
6 
+      requestUrl: location.href.split('#')[0]
7 
+    };
8 
+    Vue.$http.post("service/wechat/getJsConfig", param).then(res => {
9 
+      res = res.data;
10 
+      if (res) {
11 
+        wx.config({
12 
+          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
13 
+          appId: res.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
14 
+          timestamp: res.timestamp, // 必填，生成签名的时间戳
15 
+          nonceStr: res.nonceStr, // 必填，生成签名的随机串
16 
+          signature: res.signature, // 必填，签名，见附录1
17 
+          jsApiList: res.jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
18 
+        });
19 
+        wx.ready(function() {
20 
+          wx.scanQRCode({
21 
+            desc: "scanQRCode desc",
22 
+            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
23 
+            scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
24 
+            success: function(res) {
25 
+              // 当needResult 为 1 时，扫码返回的结果
26 
+              let str = res.resultStr.replace(/[\s\/]/g, '') || 'none';
27 
+              resolve(str);
28 
+            }
29 
+          });
30 
+        });
31 
+      }
32 
+    })
33 
+  });
34 
+}

+ 93 - 76
src/views/againAssign.vue
Dosyayı Görüntüle 

@@ -117,7 +117,12 @@
117 117 
             <p>
118 118 
               <span class="fl">处理人电话</span>
119 119 
               <span class="fr" v-if="!model.incident.handlerUser"></span>
120 
-              <span class="fr" v-if="model.incident.handlerUser"><a :href="'tel:' + model.incident.handlerUser.phone"><i class="iconfont dsit-shouji"></i>{{model.incident.handlerUser.phone}}</a></span>
120 
+              <span class="fr" v-if="model.incident.handlerUser"
121 
+                ><a :href="'tel:' + model.incident.handlerUser.phone"
122 
+                  ><i class="iconfont dsit-shouji"></i
123 
+                  >{{ model.incident.handlerUser.phone }}</a
124 
+                ></span
125 
+              >
121 126 
             </p>
122 127 
             <p>
123 128 
               <span class="fl">优先级</span>
 
@@ -134,34 +139,38 @@
134 139 
               <span class="fr">{{ model.incident.overdueTime }}</span>
135 140 
             </p>
136 141 
             <p>
137 
-                <span class="fl">区域</span>
138 
-                <span class="fr">{{
139 
-                  model.incident.place ? model.incident.place.area.area : "--"
140 
-                }}</span>
141 
-              </p>
142 
-              <p class="boeder_B">
143 
-                <span class="fl">地点</span>
144 
-                <span class="fr">{{
145 
-                  model.incident.place ? model.incident.place.place : "--"
146 
-                }}</span>
147 
-              </p>
148 
-              <div v-if="hcsjList.length">
149 
-                <p>耗材</p>
150 
-                <div class="hcTable">
151 
-                  <table>
152 
-                    <tr>
153 
-                      <td>耗材名称</td>
154 
-                      <td>价格</td>
155 
-                      <td>数量</td>
156 
-                    </tr>
157 
-                    <tr v-for="(item,i) in hcsjList" :key="i">
158 
-                      <td>{{item.consumable.name}}</td>
159 
-                      <td>{{item.extra1}}</td>
160 
-                      <td>{{item.consumablesSum}}</td>
161 
-                    </tr>
162 
-                  </table>
163 
-                </div>
142 
+              <span class="fl">区域</span>
143 
+              <span class="fr">{{
144 
+                model.incident.place ? model.incident.place.area.area : "--"
145 
+              }}</span>
146 
+            </p>
147 
+            <p class="boeder_B">
148 
+              <span class="fl">地点</span>
149 
+              <span class="fr">{{
150 
+                model.incident.place ? model.incident.place.place : "--"
151 
+              }}</span>
152 
+            </p>
153 
+            <div v-if="hcsjList.length">
154 
+              <p>耗材</p>
155 
+              <div class="hcTable">
156 
+                <table>
157 
+                  <tr>
158 
+                    <td>耗材名称</td>
159 
+                    <td>价格</td>
160 
+                    <td>数量</td>
161 
+                  </tr>
162 
+                  <tr v-for="(item, i) in hcsjList" :key="i">
163 
+                    <td>{{ item.consumable.name }}</td>
164 
+                    <td>{{ item.extra1 }}</td>
165 
+                    <td>{{ item.consumablesSum }}</td>
166 
+                  </tr>
167 
+                </table>
164 168 
               </div>
169 
+            </div>
170 
+            <p class="boeder_B" v-if="wxIncidentWithCmdb == 1">
171 
+              <span class="fl">资产</span>
172 
+              <span class="fr">{{ model.incident.assetId || '无' }}</span>
173 
+            </p>
165 174 
           </div>
166 175 
           <p class="info_hide">
167 176 
             <span class="fl hide" @click="hides()" v-if="!item_hides"
 
@@ -176,11 +185,11 @@
176 185 
               <img
177 186 
                 v-if="
178 187 
                   img.suffix == 'jpeg' ||
179 
-                    img.suffix == 'jpg' ||
180 
-                    img.suffix == 'gif' ||
181 
-                    img.suffix == 'png' ||
182 
-                    img.suffix == 'svg' ||
183 
-                    img.suffix == 'pdf'
188 
+                  img.suffix == 'jpg' ||
189 
+                  img.suffix == 'gif' ||
190 
+                  img.suffix == 'png' ||
191 
+                  img.suffix == 'svg' ||
192 
+                  img.suffix == 'pdf'
184 193 
                 "
185 194 
                 :src="img.previewUrl"
186 195 
                 v-for="(img, index) in imgs"
 
@@ -212,15 +221,15 @@
212 221 
                     :class="{
213 222 
                       iconfont: true,
214 223 
                       'dsit-icon_weizuo': item.endTime != '',
215 
-                      'dsit-icon_zhengzaijinx': item.endTime == ''
224 
+                      'dsit-icon_zhengzaijinx': item.endTime == '',
216 225 
                     }"
217 226 
                   ></i>
218 227 
                   <span class="text1">
219 
-                      {{item.startTime | timeFormat("MM-dd HH:mm:ss")}}
220 
-                      <template v-if="item.userName">
221 
-                        ，{{item.userName}}
222 
-                      </template>
223 
-                      </span>
228 
+                    {{ item.startTime | timeFormat("MM-dd HH:mm:ss") }}
229 
+                    <template v-if="item.userName">
230 
+                      ，{{ item.userName }}
231 
+                    </template>
232 
+                  </span>
224 233 
                 </div>
225 234 
                 <div :class="{ cont: true, blue: item.endTime != '' }">
226 235 
                   <p class="text2" v-if="item.desc" v-html="item.desc"></p>
 
@@ -292,7 +301,7 @@ export default {
292 301 
       valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
293 302 
       incidentWithConsumable: localStorage.getItem("incidentWithConsumable"), //是否绑定耗材
294 303 
       wxIncidentWithCmdb: localStorage.getItem("wxIncidentWithCmdb"), //是否绑定资产
295 
-      hcsjList:[],//绑定的耗材列表，展示
304 
+      hcsjList: [], //绑定的耗材列表，展示
296 305 
       promptingConent: "",
297 306 
       promptingStatus: "",
298 307 
       item_hides: false,
 
@@ -306,12 +315,12 @@ export default {
306 315 
       candidateGroupsArr: [], //处理组
307 316 
       handlerUser: "", //处理人
308 317 
       handlerGroup: "", //处理组
309 
-      pro_hides: false //展开/收起处理进度
318 
+      pro_hides: false, //展开/收起处理进度
310 319 
     };
311 320 
   },
312 321 
   components: {
313 322 
     LoadIng,
314 
-    PrompTing
323 
+    PrompTing,
315 324 
   },
316 325 
   methods: {
317 326 
     // 获取事件上绑定的耗材
 
@@ -321,7 +330,7 @@ export default {
321 330 
           data: { type: 2, source: "1627", sourceId: this.id },
322 331 
         })
323 332 
         .then((result) => {
324 
-          if(result.data.status == 200){
333 
+          if (result.data.status == 200) {
325 334 
             this.hcsjList = result.data.data;
326 335 
           }
327 336 
         });
 
@@ -339,9 +348,12 @@ export default {
339 348 
             that.id,
340 349 
           {}
341 350 
         )
342 
-        .then(function(res) {
351 
+        .then(function (res) {
343 352 
           console.log(res.data);
344 353 
           that.model = res.data.model;
354 
+          if(that.$route.params.data){
355 
+            that.model.incident.assetId = that.$route.params.data.assetId;
356 
+          }
345 357 
           that.getProgressInfo();
346 358 
         });
347 359 
     },
 
@@ -354,7 +366,7 @@ export default {
354 366 
             that.processInstanceId,
355 367 
           {}
356 368 
         )
357 
-        .then(function(res) {
369 
+        .then(function (res) {
358 370 
           console.log(res.data);
359 371 
           that.imgs = res.data.data.splice(0, 3);
360 372 
           console.log(that.imgs);
 
@@ -368,34 +380,39 @@ export default {
368 380 
           "/service/bpm/bpm/flowTracingCustom/" + that.processInstanceId,
369 381 
           {}
370 382 
         )
371 
-        .then(function(res) {
383 
+        .then(function (res) {
372 384 
           console.log(res.data);
373 385 
           that.progressInfo = res.data.data;
374 386 
           //处理日志startcaca
375 
-          if(that.model.incident.handlerLogs){
387 
+          if (that.model.incident.handlerLogs) {
376 388 
             //添加日志
377 
-            that.model.incident.handlerLogs.forEach(v=>{
378 
-              that.progressInfo.push({startTime:v.opTime,endTime:1,desc:v.opValue,userName:v.userName,activityName:'事件处理'});
379 
-            })
380 
-
389 
+            that.model.incident.handlerLogs.forEach((v) => {
390 
+              that.progressInfo.push({
391 
+                startTime: v.opTime,
392 
+                endTime: 1,
393 
+                desc: v.opValue,
394 
+                userName: v.userName,
395 
+                activityName: "事件处理",
396 
+              });
397 
+            });
381 398 
           }
382 399 
           //处理数据
383 
-          that.progressInfo.forEach((v)=>{
384 
-            if(!v.endTime){
400 
+          that.progressInfo.forEach((v) => {
401 
+            if (!v.endTime) {
385 402 
               v.endTime = 1;
386 403 
             }
387 404 
             v.startTime = new Date(v.startTime).getTime();
388 
-          })
405 
+          });
389 406 
           var kaishi = that.progressInfo.shift();
390 407 
           var jiedan = that.progressInfo.shift();
391 
-          that.progressInfo.sort(function(o,c){
408 
+          that.progressInfo.sort(function (o, c) {
392 409 
             return c.startTime - o.startTime;
393 410 
           });
394 
-          that.progressInfo.length && (that.progressInfo[0].endTime = '');
411 
+          that.progressInfo.length && (that.progressInfo[0].endTime = "");
395 412 
           that.progressInfo.push(jiedan);
396 413 
           that.progressInfo.push(kaishi);
397 
-          console.log(that.progressInfo)
398 
-        //处理日志end
414 
+          console.log(that.progressInfo);
415 
+          //处理日志end
399 416 
         });
400 417 
     },
401 418 
     //隐藏显示详情
 
@@ -407,7 +424,7 @@ export default {
407 424 
     proHides() {
408 425 
       if (!this.pro_hides) {
409 426 
         $("#progressBox").animate({
410 
-          height: $("#progressBox")[0].scrollHeight
427 
+          height: $("#progressBox")[0].scrollHeight,
411 428 
         });
412 429 
       } else {
413 430 
         $("#progressBox").animate({ height: "1.7rem" });
 
@@ -422,7 +439,7 @@ export default {
422 439 
           scrollTop:
423 440 
             $("#" + id).offset().top -
424 441 
             $(".header")[0].offsetHeight -
425 
-            $(".navBar")[0].offsetHeight
442 
+            $(".navBar")[0].offsetHeight,
426 443 
         },
427 444 
         260
428 445 
       );
 
@@ -436,14 +453,14 @@ export default {
436 453 
           sum: 1000,
437 454 
           user: {
438 455 
             roledata: { rolecode: "first-line support" },
439 
-            selectType: "1"
440 
-          }
456 
+            selectType: "1",
457 
+          },
441 458 
         })
442 
-        .then(function(res) {
443 
-          res.data.list.forEach(function(v, i) {
459 
+        .then(function (res) {
460 
+          res.data.list.forEach(function (v, i) {
444 461 
             that.handlerUserArr.push({
445 462 
               text: v.name,
446 
-              value: v.id
463 
+              value: v.id,
447 464 
             });
448 465 
           });
449 466 
         });
 
@@ -455,13 +472,13 @@ export default {
455 472 
         .post("/service/user/data/fetchDataList/group", {
456 473 
           idx: 0,
457 474 
           sum: 1000,
458 
-          group: { selectType: "nouser" }
475 
+          group: { selectType: "nouser" },
459 476 
         })
460 
-        .then(function(res) {
461 
-          res.data.list.forEach(function(v, i) {
477 
+        .then(function (res) {
478 
+          res.data.list.forEach(function (v, i) {
462 479 
             that.candidateGroupsArr.push({
463 480 
               text: v.groupName,
464 
-              value: v.id
481 
+              value: v.id,
465 482 
             });
466 483 
           });
467 484 
           console.log(that.candidateGroupsArr);
 
@@ -477,7 +494,7 @@ export default {
477 494 
         $("#fade").fadeIn();
478 495 
         that.promptingConent = "提交失败,请填写必填信息!";
479 496 
         that.promptingStatus = false;
480 
-        setTimeout(function() {
497 
+        setTimeout(function () {
481 498 
           $("#fade").fadeOut();
482 499 
         }, 2000);
483 500 
       }
 
@@ -500,7 +517,7 @@ export default {
500 517 
             that.loginUser.id,
501 518 
           that.model
502 519 
         )
503 
-        .then(function(res) {
520 
+        .then(function (res) {
504 521 
           if (res.data.status == 200) {
505 522 
             $("#fade").fadeIn();
506 523 
             that.promptingConent = "恭喜您,提交成功!";
 
@@ -513,27 +530,27 @@ export default {
513 530 
                 icon: "cubeic-right",
514 531 
                 onConfirm: (e, promptValue) => {
515 532 
                   that.$router.push({ path: "/main" });
516 
-                }
533 
+                },
517 534 
               })
518 535 
               .show();
519 
-            setTimeout(function() {
536 
+            setTimeout(function () {
520 537 
               $("#fade").fadeOut();
521 538 
             }, 2000);
522 539 
           }
523 540 
         });
524 
-    }
541 
+    },
525 542 
   },
526 543 
   created() {
527 544 
     this.processInstanceId = this.$route.params.data.processInstanceId;
528 545 
     this.id = this.$route.params.data.id;
529 546 
     this.getParamsData();
530 547 
     this.getImgs();
531 
-    if(this.incidentWithConsumable == 1){
548 
+    if (this.incidentWithConsumable == 1) {
532 549 
       this.getHcBySj();
533 550 
     }
534 551 
     this.getHandlerUser();
535 552 
     this.getCandidateGroups();
536 
-  }
553 
+  },
537 554 
 };
538 555 
 </script>
539 556 
 <style lang="less" scoped>

+ 78 - 55
src/views/closed.vue
Dosyayı Görüntüle 

@@ -118,16 +118,27 @@
118 118 
             </p> -->
119 119 
             <p>
120 120 
               <span class="fl">受理人</span>
121 
-              <span class="fr">{{model.incident.acceptUser?model.incident.acceptUser.name:''}}</span>
121 
+              <span class="fr">{{
122 
+                model.incident.acceptUser ? model.incident.acceptUser.name : ""
123 
+              }}</span>
122 124 
             </p>
123 125 
             <p>
124 126 
               <span class="fl">处理人</span>
125 
-              <span class="fr">{{model.incident.handlerUser?model.incident.handlerUser.name:''}}</span>
127 
+              <span class="fr">{{
128 
+                model.incident.handlerUser
129 
+                  ? model.incident.handlerUser.name
130 
+                  : ""
131 
+              }}</span>
126 132 
             </p>
127 133 
             <p>
128 134 
               <span class="fl">处理人电话</span>
129 135 
               <span class="fr" v-if="!model.incident.handlerUser"></span>
130 
-              <span class="fr" v-if="model.incident.handlerUser"><a :href="'tel:' + model.incident.handlerUser.phone"><i class="iconfont dsit-shouji"></i>{{model.incident.handlerUser.phone}}</a></span>
136 
+              <span class="fr" v-if="model.incident.handlerUser"
137 
+                ><a :href="'tel:' + model.incident.handlerUser.phone"
138 
+                  ><i class="iconfont dsit-shouji"></i
139 
+                  >{{ model.incident.handlerUser.phone }}</a
140 
+                ></span
141 
+              >
131 142 
             </p>
132 143 
             <p>
133 144 
               <span class="fl">优先级</span>
 
@@ -156,22 +167,26 @@
156 167 
               }}</span>
157 168 
             </p>
158 169 
             <div v-if="hcsjList.length">
159 
-                <p>耗材</p>
160 
-                <div class="hcTable">
161 
-                  <table>
162 
-                    <tr>
163 
-                      <td>耗材名称</td>
164 
-                      <td>价格</td>
165 
-                      <td>数量</td>
166 
-                    </tr>
167 
-                    <tr v-for="(item,i) in hcsjList" :key="i">
168 
-                      <td>{{item.consumable.name}}</td>
169 
-                      <td>{{item.extra1}}</td>
170 
-                      <td>{{item.consumablesSum}}</td>
171 
-                    </tr>
172 
-                  </table>
173 
-                </div>
170 
+              <p>耗材</p>
171 
+              <div class="hcTable">
172 
+                <table>
173 
+                  <tr>
174 
+                    <td>耗材名称</td>
175 
+                    <td>价格</td>
176 
+                    <td>数量</td>
177 
+                  </tr>
178 
+                  <tr v-for="(item, i) in hcsjList" :key="i">
179 
+                    <td>{{ item.consumable.name }}</td>
180 
+                    <td>{{ item.extra1 }}</td>
181 
+                    <td>{{ item.consumablesSum }}</td>
182 
+                  </tr>
183 
+                </table>
174 184 
               </div>
185 
+            </div>
186 
+            <p class="boeder_B" v-if="wxIncidentWithCmdb == 1">
187 
+              <span class="fl">资产</span>
188 
+              <span class="fr">{{ model.incident.assetId || '无' }}</span>
189 
+            </p>
175 190 
           </div>
176 191 
           <p class="info_hide">
177 192 
             <span class="fl hide" @click="hides()" v-if="!item_hides"
 
@@ -186,11 +201,11 @@
186 201 
               <img
187 202 
                 v-if="
188 203 
                   img.suffix == 'jpeg' ||
189 
-                    img.suffix == 'jpg' ||
190 
-                    img.suffix == 'gif' ||
191 
-                    img.suffix == 'png' ||
192 
-                    img.suffix == 'svg' ||
193 
-                    img.suffix == 'pdf'
204 
+                  img.suffix == 'jpg' ||
205 
+                  img.suffix == 'gif' ||
206 
+                  img.suffix == 'png' ||
207 
+                  img.suffix == 'svg' ||
208 
+                  img.suffix == 'pdf'
194 209 
                 "
195 210 
                 :src="img.previewUrl"
196 211 
                 v-for="(img, index) in imgs"
 
@@ -286,15 +301,15 @@
286 301 
                     :class="{
287 302 
                       iconfont: true,
288 303 
                       'dsit-icon_weizuo': item.endTime != '',
289 
-                      'dsit-icon_zhengzaijinx': item.endTime == ''
304 
+                      'dsit-icon_zhengzaijinx': item.endTime == '',
290 305 
                     }"
291 306 
                   ></i>
292 307 
                   <span class="text1">
293 
-                      {{item.startTime | timeFormat("MM-dd HH:mm:ss")}}
294 
-                      <template v-if="item.userName">
295 
-                        ，{{item.userName}}
296 
-                      </template>
297 
-                      </span>
308 
+                    {{ item.startTime | timeFormat("MM-dd HH:mm:ss") }}
309 
+                    <template v-if="item.userName">
310 
+                      ，{{ item.userName }}
311 
+                    </template>
312 
+                  </span>
298 313 
                 </div>
299 314 
                 <div :class="{ cont: true, blue: item.endTime != '' }">
300 315 
                   <p class="text2" v-if="item.desc" v-html="item.desc"></p>
 
@@ -324,17 +339,17 @@ export default {
324 339 
       valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
325 340 
       incidentWithConsumable: localStorage.getItem("incidentWithConsumable"), //是否绑定耗材
326 341 
       wxIncidentWithCmdb: localStorage.getItem("wxIncidentWithCmdb"), //是否绑定资产
327 
-      hcsjList:[],//绑定的耗材列表，展示
342 
+      hcsjList: [], //绑定的耗材列表，展示
328 343 
       selected: 1,
329 344 
       options: [
330 345 
         {
331 346 
           label: "接单",
332 
-          value: 1
347 
+          value: 1,
333 348 
         },
334 349 
         {
335 350 
           label: "关单信息",
336 
-          value: 2
337 
-        }
351 
+          value: 2,
352 
+        },
338 353 
       ],
339 354 
       resignComment: "", //重新指派原因
340 355 
       item_hides: false,
 
@@ -344,7 +359,7 @@ export default {
344 359 
       progressInfo: [], //处理进度
345 360 
       imgs: [], //图片
346 361 
       model: {}, //提交数据
347 
-      pro_hides: false //展开/收起处理进度
362 
+      pro_hides: false, //展开/收起处理进度
348 363 
     };
349 364 
   },
350 365 
   components: {
 
@@ -359,7 +374,7 @@ export default {
359 374 
           data: { type: 2, source: "1627", sourceId: this.id },
360 375 
         })
361 376 
         .then((result) => {
362 
-          if(result.data.status == 200){
377 
+          if (result.data.status == 200) {
363 378 
             this.hcsjList = result.data.data;
364 379 
           }
365 380 
         });
 
@@ -377,9 +392,12 @@ export default {
377 392 
             that.id,
378 393 
           {}
379 394 
         )
380 
-        .then(function(res) {
395 
+        .then(function (res) {
381 396 
           console.log(res.data);
382 397 
           that.model = res.data.model;
398 
+          if(that.$route.params.data){
399 
+            that.model.incident.assetId = that.$route.params.data.assetId;
400 
+          }
383 401 
           //seimin
384 402 
           localStorage.setItem("modelData", JSON.stringify(that.model));
385 403 
           that.getProgressInfo();
 
@@ -394,7 +412,7 @@ export default {
394 412 
             that.processInstanceId,
395 413 
           {}
396 414 
         )
397 
-        .then(function(res) {
415 
+        .then(function (res) {
398 416 
           console.log(res.data);
399 417 
           that.imgs = res.data.data.splice(0, 3);
400 418 
           console.log(that.imgs);
 
@@ -408,34 +426,39 @@ export default {
408 426 
           "/service/bpm/bpm/flowTracingCustom/" + that.processInstanceId,
409 427 
           {}
410 428 
         )
411 
-        .then(function(res) {
429 
+        .then(function (res) {
412 430 
           console.log(res.data);
413 431 
           that.progressInfo = res.data.data;
414 432 
           //处理日志startcaca
415 
-          if(that.model.incident.handlerLogs){
433 
+          if (that.model.incident.handlerLogs) {
416 434 
             //添加日志
417 
-            that.model.incident.handlerLogs.forEach(v=>{
418 
-              that.progressInfo.push({startTime:v.opTime,endTime:1,desc:v.opValue,userName:v.userName,activityName:'事件处理'});
419 
-            })
420 
-
435 
+            that.model.incident.handlerLogs.forEach((v) => {
436 
+              that.progressInfo.push({
437 
+                startTime: v.opTime,
438 
+                endTime: 1,
439 
+                desc: v.opValue,
440 
+                userName: v.userName,
441 
+                activityName: "事件处理",
442 
+              });
443 
+            });
421 444 
           }
422 445 
           //处理数据
423 
-          that.progressInfo.forEach((v)=>{
424 
-            if(!v.endTime){
446 
+          that.progressInfo.forEach((v) => {
447 
+            if (!v.endTime) {
425 448 
               v.endTime = 1;
426 449 
             }
427 450 
             v.startTime = new Date(v.startTime).getTime();
428 
-          })
451 
+          });
429 452 
           var kaishi = that.progressInfo.shift();
430 453 
           var jiedan = that.progressInfo.shift();
431 
-          that.progressInfo.sort(function(o,c){
454 
+          that.progressInfo.sort(function (o, c) {
432 455 
             return c.startTime - o.startTime;
433 456 
           });
434 
-          that.progressInfo.length && (that.progressInfo[0].endTime = '');
457 
+          that.progressInfo.length && (that.progressInfo[0].endTime = "");
435 458 
           that.progressInfo.push(jiedan);
436 459 
           that.progressInfo.push(kaishi);
437 
-          console.log(that.progressInfo)
438 
-        //处理日志end
460 
+          console.log(that.progressInfo);
461 
+          //处理日志end
439 462 
         });
440 463 
     },
441 464 
     //隐藏显示详情
 
@@ -448,7 +471,7 @@ export default {
448 471 
     proHides() {
449 472 
       if (!this.pro_hides) {
450 473 
         $("#progressBox").animate({
451 
-          height: $("#progressBox")[0].scrollHeight
474 
+          height: $("#progressBox")[0].scrollHeight,
452 475 
         });
453 476 
       } else {
454 477 
         $("#progressBox").animate({ height: "1.7rem" });
 
@@ -468,11 +491,11 @@ export default {
468 491 
           scrollTop:
469 492 
             $("#" + id).offset().top -
470 493 
             $(".header")[0].offsetHeight -
471 
-            $(".navBar")[0].offsetHeight
494 
+            $(".navBar")[0].offsetHeight,
472 495 
         },
473 496 
         260
474 497 
       );
475 
-    }
498 
+    },
476 499 
   },
477 500 
   created() {
478 501 
     // seimin
 
@@ -485,10 +508,10 @@ export default {
485 508 
       : JSON.parse(localStorage.getItem("modelData")).incident.id;
486 509 
     this.getParamsData();
487 510 
     this.getImgs();
488 
-    if(this.incidentWithConsumable == 1){
511 
+    if (this.incidentWithConsumable == 1) {
489 512 
       this.getHcBySj();
490 513 
     }
491 
-  }
514 
+  },
492 515 
 };
493 516 
 </script>
494 517 
 <style lang="less" scoped>

+ 72 - 47
src/views/grabSheet.vue
Dosyayı Görüntüle 

@@ -101,16 +101,29 @@
101 101 
               </p> -->
102 102 
               <p>
103 103 
                 <span class="fl">受理人</span>
104 
-                <span class="fr">{{model.incident.acceptUser?model.incident.acceptUser.name:''}}</span>
104 
+                <span class="fr">{{
105 
+                  model.incident.acceptUser
106 
+                    ? model.incident.acceptUser.name
107 
+                    : ""
108 
+                }}</span>
105 109 
               </p>
106 110 
               <p>
107 111 
                 <span class="fl">处理人</span>
108 
-                <span class="fr">{{model.incident.handlerUser?model.incident.handlerUser.name:''}}</span>
112 
+                <span class="fr">{{
113 
+                  model.incident.handlerUser
114 
+                    ? model.incident.handlerUser.name
115 
+                    : ""
116 
+                }}</span>
109 117 
               </p>
110 118 
               <p>
111 119 
                 <span class="fl">处理人电话</span>
112 120 
                 <span class="fr" v-if="!model.incident.handlerUser"></span>
113 
-                <span class="fr" v-if="model.incident.handlerUser"><a :href="'tel:' + model.incident.handlerUser.phone"><i class="iconfont dsit-shouji"></i>{{model.incident.handlerUser.phone}}</a></span>
121 
+                <span class="fr" v-if="model.incident.handlerUser"
122 
+                  ><a :href="'tel:' + model.incident.handlerUser.phone"
123 
+                    ><i class="iconfont dsit-shouji"></i
124 
+                    >{{ model.incident.handlerUser.phone }}</a
125 
+                  ></span
126 
+                >
114 127 
               </p>
115 128 
               <p>
116 129 
                 <span class="fl">优先级</span>
 
@@ -149,14 +162,18 @@
149 162 
                       <td>价格</td>
150 163 
                       <td>数量</td>
151 164 
                     </tr>
152 
-                    <tr v-for="(item,i) in hcsjList" :key="i">
153 
-                      <td>{{item.consumable.name}}</td>
154 
-                      <td>{{item.extra1}}</td>
155 
-                      <td>{{item.consumablesSum}}</td>
165 
+                    <tr v-for="(item, i) in hcsjList" :key="i">
166 
+                      <td>{{ item.consumable.name }}</td>
167 
+                      <td>{{ item.extra1 }}</td>
168 
+                      <td>{{ item.consumablesSum }}</td>
156 169 
                     </tr>
157 170 
                   </table>
158 171 
                 </div>
159 172 
               </div>
173 
+              <p class="boeder_B" v-if="wxIncidentWithCmdb == 1">
174 
+                <span class="fl">资产</span>
175 
+                <span class="fr">{{ model.incident.assetId || '无' }}</span>
176 
+              </p>
160 177 
             </div>
161 178 
             <p class="info_hide">
162 179 
               <span class="fl hide" @click="hides()" v-if="!item_hides"
 
@@ -171,11 +188,11 @@
171 188 
                 <img
172 189 
                   v-if="
173 190 
                     img.suffix == 'jpeg' ||
174 
-                      img.suffix == 'jpg' ||
175 
-                      img.suffix == 'gif' ||
176 
-                      img.suffix == 'png' ||
177 
-                      img.suffix == 'svg' ||
178 
-                      img.suffix == 'pdf'
191 
+                    img.suffix == 'jpg' ||
192 
+                    img.suffix == 'gif' ||
193 
+                    img.suffix == 'png' ||
194 
+                    img.suffix == 'svg' ||
195 
+                    img.suffix == 'pdf'
179 196 
                   "
180 197 
                   :src="img.previewUrl"
181 198 
                   v-for="(img, index) in imgs"
 
@@ -200,15 +217,15 @@
200 217 
                       :class="{
201 218 
                         iconfont: true,
202 219 
                         'dsit-icon_weizuo': item.endTime != '',
203 
-                        'dsit-icon_zhengzaijinx': item.endTime == ''
220 
+                        'dsit-icon_zhengzaijinx': item.endTime == '',
204 221 
                       }"
205 222 
                     ></i>
206 223 
                     <span class="text1">
207 
-                      {{item.startTime | timeFormat("MM-dd HH:mm:ss")}}
224 
+                      {{ item.startTime | timeFormat("MM-dd HH:mm:ss") }}
208 225 
                       <template v-if="item.userName">
209 
-                        ，{{item.userName}}
226 
+                        ，{{ item.userName }}
210 227 
                       </template>
211 
-                      </span>
228 
+                    </span>
212 229 
                   </div>
213 230 
                   <div :class="{ cont: true, blue: item.endTime != '' }">
214 231 
                     <p class="text2" v-if="item.desc" v-html="item.desc"></p>
 
@@ -242,17 +259,17 @@ export default {
242 259 
       valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
243 260 
       incidentWithConsumable: localStorage.getItem("incidentWithConsumable"), //是否绑定耗材
244 261 
       wxIncidentWithCmdb: localStorage.getItem("wxIncidentWithCmdb"), //是否绑定资产
245 
-      hcsjList:[],//绑定的耗材列表，展示
262 
+      hcsjList: [], //绑定的耗材列表，展示
246 263 
       selected: 1,
247 264 
       options: [
248 265 
         {
249 266 
           label: "接单",
250 
-          value: 1
267 
+          value: 1,
251 268 
         },
252 269 
         {
253 270 
           label: "重新指派",
254 
-          value: 2
255 
-        }
271 
+          value: 2,
272 
+        },
256 273 
       ],
257 274 
       resignComment: "", //重新指派原因
258 275 
       item_hides: false,
 
@@ -262,7 +279,7 @@ export default {
262 279 
       imgs: [], //图片
263 280 
       model: {}, //提交数据
264 281 
       jurisdiction: false, //是否有抢单权限
265 
-      pro_hides: false //展开/收起处理进度
282 
+      pro_hides: false, //展开/收起处理进度
266 283 
     };
267 284 
   },
268 285 
   methods: {
 
@@ -273,7 +290,7 @@ export default {
273 290 
           data: { type: 2, source: "1627", sourceId: this.id },
274 291 
         })
275 292 
         .then((result) => {
276 
-          if(result.data.status == 200){
293 
+          if (result.data.status == 200) {
277 294 
             this.hcsjList = result.data.data;
278 295 
           }
279 296 
         });
 
@@ -282,7 +299,7 @@ export default {
282 299 
     getParamsData() {
283 300 
       var that = this;
284 301 
       var groups = [];
285 
-      that.loginUser.group.forEach(element => {
302 
+      that.loginUser.group.forEach((element) => {
286 303 
         groups.push(element.id);
287 304 
       });
288 305 
       console.log(groups);
 
@@ -296,9 +313,12 @@ export default {
296 313 
             that.id,
297 314 
           {}
298 315 
         )
299 
-        .then(function(res) {
316 
+        .then(function (res) {
300 317 
           console.log(res.data);
301 318 
           that.model = res.data.model;
319 
+          if(that.$route.params.data){
320 
+            that.model.incident.assetId = that.$route.params.data.assetId;
321 
+          }
302 322 
           for (var i = 0; i < groups.length; i++) {
303 323 
             if (groups[i] == that.model.incident.candidateGroups) {
304 324 
               that.jurisdiction = true;
 
@@ -318,7 +338,7 @@ export default {
318 338 
             that.processInstanceId,
319 339 
           {}
320 340 
         )
321 
-        .then(function(res) {
341 
+        .then(function (res) {
322 342 
           console.log(res.data);
323 343 
           that.imgs = res.data.data.splice(0, 3);
324 344 
           console.log(that.imgs);
 
@@ -332,34 +352,39 @@ export default {
332 352 
           "/service/bpm/bpm/flowTracingCustom/" + that.processInstanceId,
333 353 
           {}
334 354 
         )
335 
-        .then(function(res) {
355 
+        .then(function (res) {
336 356 
           console.log(res.data);
337 357 
           that.progressInfo = res.data.data;
338 358 
           //处理日志startcaca
339 
-          if(that.model.incident.handlerLogs){
359 
+          if (that.model.incident.handlerLogs) {
340 360 
             //添加日志
341 
-            that.model.incident.handlerLogs.forEach(v=>{
342 
-              that.progressInfo.push({startTime:v.opTime,endTime:1,desc:v.opValue,userName:v.userName,activityName:'事件处理'});
343 
-            })
344 
-
361 
+            that.model.incident.handlerLogs.forEach((v) => {
362 
+              that.progressInfo.push({
363 
+                startTime: v.opTime,
364 
+                endTime: 1,
365 
+                desc: v.opValue,
366 
+                userName: v.userName,
367 
+                activityName: "事件处理",
368 
+              });
369 
+            });
345 370 
           }
346 371 
           //处理数据
347 
-          that.progressInfo.forEach((v)=>{
348 
-            if(!v.endTime){
372 
+          that.progressInfo.forEach((v) => {
373 
+            if (!v.endTime) {
349 374 
               v.endTime = 1;
350 375 
             }
351 376 
             v.startTime = new Date(v.startTime).getTime();
352 
-          })
377 
+          });
353 378 
           var kaishi = that.progressInfo.shift();
354 379 
           var jiedan = that.progressInfo.shift();
355 
-          that.progressInfo.sort(function(o,c){
380 
+          that.progressInfo.sort(function (o, c) {
356 381 
             return c.startTime - o.startTime;
357 382 
           });
358 
-          that.progressInfo.length && (that.progressInfo[0].endTime = '');
383 
+          that.progressInfo.length && (that.progressInfo[0].endTime = "");
359 384 
           that.progressInfo.push(jiedan);
360 385 
           that.progressInfo.push(kaishi);
361 
-          console.log(that.progressInfo)
362 
-        //处理日志end
386 
+          console.log(that.progressInfo);
387 
+          //处理日志end
363 388 
         });
364 389 
     },
365 390 
     //隐藏显示详情
 
@@ -371,7 +396,7 @@ export default {
371 396 
     proHides() {
372 397 
       if (!this.pro_hides) {
373 398 
         $("#progressBox").animate({
374 
-          height: $("#progressBox")[0].scrollHeight
399 
+          height: $("#progressBox")[0].scrollHeight,
375 400 
         });
376 401 
       } else {
377 402 
         $("#progressBox").animate({ height: "1.7rem" });
 
@@ -387,7 +412,7 @@ export default {
387 412 
             that.model.incident.taskId,
388 413 
           { receive_code: "handler", userId: that.loginUser.id }
389 414 
         )
390 
-        .then(function(res) {
415 
+        .then(function (res) {
391 416 
           console.log(res.data);
392 417 
           if (res.data.status == 200) {
393 418 
             $("#fade").fadeIn();
 
@@ -401,10 +426,10 @@ export default {
401 426 
                 icon: "cubeic-right",
402 427 
                 onConfirm: (e, promptValue) => {
403 428 
                   that.$router.push({ path: "/main" });
404 
-                }
429 
+                },
405 430 
               })
406 431 
               .show();
407 
-            setTimeout(function() {
432 
+            setTimeout(function () {
408 433 
               $("#fade").fadeOut();
409 434 
             }, 2000);
410 435 
           }
 
@@ -418,14 +443,14 @@ export default {
418 443 
           scrollTop:
419 444 
             $("#" + id).offset().top -
420 445 
             $(".header")[0].offsetHeight -
421 
-            $(".navBar")[0].offsetHeight
446 
+            $(".navBar")[0].offsetHeight,
422 447 
         },
423 448 
         260
424 449 
       );
425 
-    }
450 
+    },
426 451 
   },
427 452 
   components: {
428 
-    LoadIng
453 
+    LoadIng,
429 454 
   },
430 455 
   created() {
431 456 
     // seimin
 
@@ -438,10 +463,10 @@ export default {
438 463 
       : JSON.parse(localStorage.getItem("modelData")).incident.id;
439 464 
     this.getParamsData();
440 465 
     this.getImgs();
441 
-    if(this.incidentWithConsumable == 1){
466 
+    if (this.incidentWithConsumable == 1) {
442 467 
       this.getHcBySj();
443 468 
     }
444 
-  }
469 
+  },
445 470 
 };
446 471 
 </script>
447 472 
 <style lang="less" scoped>

+ 0 - 1
src/views/incidentList.vue
Dosyayı Görüntüle 

@@ -136,7 +136,6 @@ import LoadIng from "./../views/loading.vue";
136 136 
 export default {
137 137 
   data() {
138 138 
     return {
139 
-      //   items: _foods,
140 139 
       loginUser: JSON.parse(localStorage.getItem("loginUser")),
141 140 
       valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
142 141 
       items: [],

Dosya farkı çok büyük olduğundan ihmal edildi
+ 253 - 203
src/views/newIncident.vue


+ 72 - 47
src/views/order.vue
Dosyayı Görüntüle 

@@ -68,7 +68,7 @@
68 68 
                     daiqiangdan:
69 69 
                       model.incident.state.value == 'pending' &&
70 70 
                       !model.incident.handlerUser &&
71 
-                      model.incident.candidateGroups
71 
+                      model.incident.candidateGroups,
72 72 
                   }"
73 73 
                   >{{
74 74 
                     model.incident.state.value == "pending"
 
@@ -144,16 +144,29 @@
144 144 
               </p> -->
145 145 
               <p>
146 146 
                 <span class="fl">受理人</span>
147 
-                <span class="fr">{{model.incident.acceptUser?model.incident.acceptUser.name:''}}</span>
147 
+                <span class="fr">{{
148 
+                  model.incident.acceptUser
149 
+                    ? model.incident.acceptUser.name
150 
+                    : ""
151 
+                }}</span>
148 152 
               </p>
149 153 
               <p>
150 154 
                 <span class="fl">处理人</span>
151 
-                <span class="fr">{{model.incident.handlerUser?model.incident.handlerUser.name:''}}</span>
155 
+                <span class="fr">{{
156 
+                  model.incident.handlerUser
157 
+                    ? model.incident.handlerUser.name
158 
+                    : ""
159 
+                }}</span>
152 160 
               </p>
153 161 
               <p>
154 162 
                 <span class="fl">处理人电话</span>
155 163 
                 <span class="fr" v-if="!model.incident.handlerUser"></span>
156 
-                <span class="fr" v-if="model.incident.handlerUser"><a :href="'tel:' + model.incident.handlerUser.phone"><i class="iconfont dsit-shouji"></i>{{model.incident.handlerUser.phone}}</a></span>
164 
+                <span class="fr" v-if="model.incident.handlerUser"
165 
+                  ><a :href="'tel:' + model.incident.handlerUser.phone"
166 
+                    ><i class="iconfont dsit-shouji"></i
167 
+                    >{{ model.incident.handlerUser.phone }}</a
168 
+                  ></span
169 
+                >
157 170 
               </p>
158 171 
               <p>
159 172 
                 <span class="fl">优先级</span>
 
@@ -190,14 +203,18 @@
190 203 
                       <td>价格</td>
191 204 
                       <td>数量</td>
192 205 
                     </tr>
193 
-                    <tr v-for="(item,i) in hcsjList" :key="i">
194 
-                      <td>{{item.consumable.name}}</td>
195 
-                      <td>{{item.extra1}}</td>
196 
-                      <td>{{item.consumablesSum}}</td>
206 
+                    <tr v-for="(item, i) in hcsjList" :key="i">
207 
+                      <td>{{ item.consumable.name }}</td>
208 
+                      <td>{{ item.extra1 }}</td>
209 
+                      <td>{{ item.consumablesSum }}</td>
197 210 
                     </tr>
198 211 
                   </table>
199 212 
                 </div>
200 213 
               </div>
214 
+              <p class="boeder_B" v-if="wxIncidentWithCmdb == 1">
215 
+                <span class="fl">资产</span>
216 
+                <span class="fr">{{ model.incident.assetId || '无' }}</span>
217 
+              </p>
201 218 
               <!-- <p v-if="model.incident.synergeticReason">
202 219 
                 <span class="fl" >协同原因</span>
203 220 
                 <span class="fr">{{model.incident.synergeticReason}}</span>
 
@@ -224,11 +241,11 @@
224 241 
                 <img
225 242 
                   v-if="
226 243 
                     img.suffix == 'jpeg' ||
227 
-                      img.suffix == 'jpg' ||
228 
-                      img.suffix == 'gif' ||
229 
-                      img.suffix == 'png' ||
230 
-                      img.suffix == 'svg' ||
231 
-                      img.suffix == 'pdf'
244 
+                    img.suffix == 'jpg' ||
245 
+                    img.suffix == 'gif' ||
246 
+                    img.suffix == 'png' ||
247 
+                    img.suffix == 'svg' ||
248 
+                    img.suffix == 'pdf'
232 249 
                   "
233 250 
                   :src="img.previewUrl"
234 251 
                   v-for="(img, index) in imgs"
 
@@ -253,15 +270,15 @@
253 270 
                       :class="{
254 271 
                         iconfont: true,
255 272 
                         'dsit-icon_weizuo': item.endTime != '',
256 
-                        'dsit-icon_zhengzaijinx': item.endTime == ''
273 
+                        'dsit-icon_zhengzaijinx': item.endTime == '',
257 274 
                       }"
258 275 
                     ></i>
259 276 
                     <span class="text1">
260 
-                      {{item.startTime | timeFormat("MM-dd HH:mm:ss")}}
277 
+                      {{ item.startTime | timeFormat("MM-dd HH:mm:ss") }}
261 278 
                       <template v-if="item.userName">
262 
-                        ，{{item.userName}}
279 
+                        ，{{ item.userName }}
263 280 
                       </template>
264 
-                      </span>
281 
+                    </span>
265 282 
                   </div>
266 283 
                   <div :class="{ cont: true, blue: item.endTime != '' }">
267 284 
                     <p class="text2" v-if="item.desc" v-html="item.desc"></p>
 
@@ -315,18 +332,18 @@ export default {
315 332 
       valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
316 333 
       incidentWithConsumable: localStorage.getItem("incidentWithConsumable"), //是否绑定耗材
317 334 
       wxIncidentWithCmdb: localStorage.getItem("wxIncidentWithCmdb"), //是否绑定资产
318 
-      hcsjList:[],//绑定的耗材列表，展示
335 
+      hcsjList: [], //绑定的耗材列表，展示
319 336 
       selected: 1,
320 337 
       id: "",
321 338 
       options: [
322 339 
         {
323 340 
           label: "接单",
324 
-          value: 1
341 
+          value: 1,
325 342 
         },
326 343 
         {
327 344 
           label: "重新指派",
328 
-          value: 2
329 
-        }
345 
+          value: 2,
346 
+        },
330 347 
       ],
331 348 
       promptingConent: "",
332 349 
       promptingStatus: "",
 
@@ -337,7 +354,7 @@ export default {
337 354 
       progressInfo: [], //处理进度
338 355 
       imgs: [], //图片
339 356 
       model: {}, //提交数据
340 
-      pro_hides: false //展开/收起处理进度
357 
+      pro_hides: false, //展开/收起处理进度
341 358 
     };
342 359 
   },
343 360 
   components: {
 
@@ -353,7 +370,7 @@ export default {
353 370 
           data: { type: 2, source: "1627", sourceId: this.id },
354 371 
         })
355 372 
         .then((result) => {
356 
-          if(result.data.status == 200){
373 
+          if (result.data.status == 200) {
357 374 
             this.hcsjList = result.data.data;
358 375 
           }
359 376 
         });
 
@@ -371,9 +388,12 @@ export default {
371 388 
             that.id,
372 389 
           {}
373 390 
         )
374 
-        .then(function(res) {
391 
+        .then((res) => {
375 392 
           console.log(res.data);
376 393 
           that.model = res.data.model;
394 
+          if(that.$route.params.data){
395 
+            that.model.incident.assetId = that.$route.params.data.assetId;
396 
+          }
377 397 
           //seimin
378 398 
           localStorage.setItem("modelData", JSON.stringify(that.model));
379 399 
           that.getProgressInfo();
 
@@ -388,7 +408,7 @@ export default {
388 408 
             that.processInstanceId,
389 409 
           {}
390 410 
         )
391 
-        .then(function(res) {
411 
+        .then(function (res) {
392 412 
           console.log(res.data);
393 413 
           that.imgs = res.data.data.splice(0, 3);
394 414 
           console.log(that.imgs);
 
@@ -402,34 +422,39 @@ export default {
402 422 
           "/service/bpm/bpm/flowTracingCustom/" + that.processInstanceId,
403 423 
           {}
404 424 
         )
405 
-        .then(function(res) {
425 
+        .then(function (res) {
406 426 
           console.log(res.data);
407 427 
           that.progressInfo = res.data.data;
408 428 
           //处理日志startcaca
409 
-          if(that.model.incident.handlerLogs){
429 
+          if (that.model.incident.handlerLogs) {
410 430 
             //添加日志
411 
-            that.model.incident.handlerLogs.forEach(v=>{
412 
-              that.progressInfo.push({startTime:v.opTime,endTime:1,desc:v.opValue,userName:v.userName,activityName:'事件处理'});
413 
-            })
414 
-
431 
+            that.model.incident.handlerLogs.forEach((v) => {
432 
+              that.progressInfo.push({
433 
+                startTime: v.opTime,
434 
+                endTime: 1,
435 
+                desc: v.opValue,
436 
+                userName: v.userName,
437 
+                activityName: "事件处理",
438 
+              });
439 
+            });
415 440 
           }
416 441 
           //处理数据
417 
-          that.progressInfo.forEach((v)=>{
418 
-            if(!v.endTime){
442 
+          that.progressInfo.forEach((v) => {
443 
+            if (!v.endTime) {
419 444 
               v.endTime = 1;
420 445 
             }
421 446 
             v.startTime = new Date(v.startTime).getTime();
422 
-          })
447 
+          });
423 448 
           var kaishi = that.progressInfo.shift();
424 449 
           var jiedan = that.progressInfo.shift();
425 
-          that.progressInfo.sort(function(o,c){
450 
+          that.progressInfo.sort(function (o, c) {
426 451 
             return c.startTime - o.startTime;
427 452 
           });
428 
-          that.progressInfo.length && (that.progressInfo[0].endTime = '');
453 
+          that.progressInfo.length && (that.progressInfo[0].endTime = "");
429 454 
           that.progressInfo.push(jiedan);
430 455 
           that.progressInfo.push(kaishi);
431 
-          console.log(that.progressInfo)
432 
-        //处理日志end
456 
+          console.log(that.progressInfo);
457 
+          //处理日志end
433 458 
         });
434 459 
     },
435 460 
     //隐藏显示详情
 
@@ -441,7 +466,7 @@ export default {
441 466 
     proHides() {
442 467 
       if (!this.pro_hides) {
443 468 
         $("#progressBox").animate({
444 
-          height: $("#progressBox")[0].scrollHeight
469 
+          height: $("#progressBox")[0].scrollHeight,
445 470 
         });
446 471 
       } else {
447 472 
         $("#progressBox").animate({ height: "1.7rem" });
 
@@ -468,7 +493,7 @@ export default {
468 493 
           $("#fade").fadeIn();
469 494 
           that.promptingConent = "提交失败,请填写必填信息!";
470 495 
           that.promptingStatus = false;
471 
-          setTimeout(function() {
496 
+          setTimeout(function () {
472 497 
             $("#fade").fadeOut();
473 498 
           }, 2000);
474 499 
           return;
 
@@ -483,7 +508,7 @@ export default {
483 508 
             that.loginUser.id,
484 509 
           that.model
485 510 
         )
486 
-        .then(function(res) {
511 
+        .then(function (res) {
487 512 
           console.log(res.data);
488 513 
           if (res.data) {
489 514 
             $("#fade").fadeIn();
 
@@ -498,10 +523,10 @@ export default {
498 523 
                 icon: "cubeic-right",
499 524 
                 onConfirm: (e, promptValue) => {
500 525 
                   that.$router.push({ path: "/main" });
501 
-                }
526 
+                },
502 527 
               })
503 528 
               .show();
504 
-            setTimeout(function() {
529 
+            setTimeout(function () {
505 530 
               $("#fade").fadeOut();
506 531 
             }, 2000);
507 532 
           }
 
@@ -515,11 +540,11 @@ export default {
515 540 
           scrollTop:
516 541 
             $("#" + id).offset().top -
517 542 
             $(".header")[0].offsetHeight -
518 
-            $(".navBar")[0].offsetHeight
543 
+            $(".navBar")[0].offsetHeight,
519 544 
         },
520 545 
         260
521 546 
       );
522 
-    }
547 
+    },
523 548 
   },
524 549 
   created() {
525 550 
     // seimin
 
@@ -532,10 +557,10 @@ export default {
532 557 
       : JSON.parse(localStorage.getItem("modelData")).incident.id;
533 558 
     this.getParamsData();
534 559 
     this.getImgs();
535 
-    if(this.incidentWithConsumable == 1){
560 
+    if (this.incidentWithConsumable == 1) {
536 561 
       this.getHcBySj();
537 562 
     }
538 
-  }
563 
+  },
539 564 
 };
540 565 
 </script>
541 566 
 <style lang="less" scoped>

Dosya farkı çok büyük olduğundan ihmal edildi
+ 210 - 194
src/views/processing.vue


+ 83 - 66
src/views/solved.vue
Dosyayı Görüntüle 

@@ -60,7 +60,7 @@
60 60 
           <p class="desc">
61 61 
             <span class="fl">事件描述</span>
62 62 
             <span
63 
-              class="grayFont fr "
63 
+              class="grayFont fr"
64 64 
               v-html="model.incident.description"
65 65 
             ></span>
66 66 
           </p>
 
@@ -125,7 +125,12 @@
125 125 
             <p>
126 126 
               <span class="fl">处理人电话</span>
127 127 
               <span class="fr" v-if="!model.incident.handlerUser"></span>
128 
-              <span class="fr" v-if="model.incident.handlerUser"><a :href="'tel:' + model.incident.handlerUser.phone"><i class="iconfont dsit-shouji"></i>{{model.incident.handlerUser.phone}}</a></span>
128 
+              <span class="fr" v-if="model.incident.handlerUser"
129 
+                ><a :href="'tel:' + model.incident.handlerUser.phone"
130 
+                  ><i class="iconfont dsit-shouji"></i
131 
+                  >{{ model.incident.handlerUser.phone }}</a
132 
+                ></span
133 
+              >
129 134 
             </p>
130 135 
             <p>
131 136 
               <span class="fl">优先级</span>
 
@@ -154,22 +159,26 @@
154 159 
               }}</span>
155 160 
             </p>
156 161 
             <div v-if="hcsjList.length">
157 
-                <p>耗材</p>
158 
-                <div class="hcTable">
159 
-                  <table>
160 
-                    <tr>
161 
-                      <td>耗材名称</td>
162 
-                      <td>价格</td>
163 
-                      <td>数量</td>
164 
-                    </tr>
165 
-                    <tr v-for="(item,i) in hcsjList" :key="i">
166 
-                      <td>{{item.consumable.name}}</td>
167 
-                      <td>{{item.extra1}}</td>
168 
-                      <td>{{item.consumablesSum}}</td>
169 
-                    </tr>
170 
-                  </table>
171 
-                </div>
162 
+              <p>耗材</p>
163 
+              <div class="hcTable">
164 
+                <table>
165 
+                  <tr>
166 
+                    <td>耗材名称</td>
167 
+                    <td>价格</td>
168 
+                    <td>数量</td>
169 
+                  </tr>
170 
+                  <tr v-for="(item, i) in hcsjList" :key="i">
171 
+                    <td>{{ item.consumable.name }}</td>
172 
+                    <td>{{ item.extra1 }}</td>
173 
+                    <td>{{ item.consumablesSum }}</td>
174 
+                  </tr>
175 
+                </table>
172 176 
               </div>
177 
+            </div>
178 
+            <p class="boeder_B" v-if="wxIncidentWithCmdb == 1">
179 
+              <span class="fl">资产</span>
180 
+              <span class="fr">{{ model.incident.assetId || '无' }}</span>
181 
+            </p>
173 182 
           </div>
174 183 
           <p class="info_hide">
175 184 
             <span class="fl hide" @click="hides()" v-if="!item_hides"
 
@@ -184,11 +193,11 @@
184 193 
               <img
185 194 
                 v-if="
186 195 
                   img.suffix == 'jpeg' ||
187 
-                    img.suffix == 'jpg' ||
188 
-                    img.suffix == 'gif' ||
189 
-                    img.suffix == 'png' ||
190 
-                    img.suffix == 'svg' ||
191 
-                    img.suffix == 'pdf'
196 
+                  img.suffix == 'jpg' ||
197 
+                  img.suffix == 'gif' ||
198 
+                  img.suffix == 'png' ||
199 
+                  img.suffix == 'svg' ||
200 
+                  img.suffix == 'pdf'
192 201 
                 "
193 202 
                 :src="img.previewUrl"
194 203 
                 v-for="(img, index) in imgs"
 
@@ -270,15 +279,15 @@
270 279 
                     :class="{
271 280 
                       iconfont: true,
272 281 
                       'dsit-icon_weizuo': item.endTime != '',
273 
-                      'dsit-icon_zhengzaijinx': item.endTime == ''
282 
+                      'dsit-icon_zhengzaijinx': item.endTime == '',
274 283 
                     }"
275 284 
                   ></i>
276 285 
                   <span class="text1">
277 
-                      {{item.startTime | timeFormat("MM-dd HH:mm:ss")}}
278 
-                      <template v-if="item.userName">
279 
-                        ，{{item.userName}}
280 
-                      </template>
281 
-                      </span>
286 
+                    {{ item.startTime | timeFormat("MM-dd HH:mm:ss") }}
287 
+                    <template v-if="item.userName">
288 
+                      ，{{ item.userName }}
289 
+                    </template>
290 
+                  </span>
282 291 
                 </div>
283 292 
                 <div :class="{ cont: true, blue: item.endTime != '' }">
284 293 
                   <p class="text2" v-if="item.desc" v-html="item.desc"></p>
 
@@ -350,18 +359,18 @@ export default {
350 359 
       valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
351 360 
       incidentWithConsumable: localStorage.getItem("incidentWithConsumable"), //是否绑定耗材
352 361 
       wxIncidentWithCmdb: localStorage.getItem("wxIncidentWithCmdb"), //是否绑定资产
353 
-      hcsjList:[],//绑定的耗材列表，展示
362 
+      hcsjList: [], //绑定的耗材列表，展示
354 363 
       selected: 1,
355 364 
       isclose: "close", //是否已解决
356 365 
       iscloseArr: [
357 366 
         {
358 367 
           text: "已解决",
359 
-          value: "close"
368 
+          value: "close",
360 369 
         },
361 370 
         {
362 371 
           text: "未解决",
363 
-          value: "notsolved"
364 
-        }
372 
+          value: "notsolved",
373 
+        },
365 374 
       ],
366 375 
       handleResult: "", //结果类型
367 376 
       handleResultArr: [], //结果类型
 
@@ -375,7 +384,7 @@ export default {
375 384 
       processInstanceId: "",
376 385 
       progressInfo: [], //处理进度
377 386 
       imgs: [], //图片
378 
-      model: {} //提交数据
387 
+      model: {}, //提交数据
379 388 
     };
380 389 
   },
381 390 
   components: {
 
@@ -390,7 +399,7 @@ export default {
390 399 
           data: { type: 2, source: "1627", sourceId: this.id },
391 400 
         })
392 401 
         .then((result) => {
393 
-          if(result.data.status == 200){
402 
+          if (result.data.status == 200) {
394 403 
             this.hcsjList = result.data.data;
395 404 
           }
396 405 
         });
 
@@ -408,9 +417,12 @@ export default {
408 417 
             that.id,
409 418 
           {}
410 419 
         )
411 
-        .then(function(res) {
420 
+        .then(function (res) {
412 421 
           console.log(res.data);
413 422 
           that.model = res.data.model;
423 
+          if(that.$route.params.data){
424 
+            that.model.incident.assetId = that.$route.params.data.assetId;
425 
+          }
414 426 
           that.model.msgflag = "已解决";
415 427 
           //seimin
416 428 
           localStorage.setItem("modelData", JSON.stringify(that.model));
 
@@ -426,7 +438,7 @@ export default {
426 438 
             that.processInstanceId,
427 439 
           {}
428 440 
         )
429 
-        .then(function(res) {
441 
+        .then(function (res) {
430 442 
           console.log(res.data);
431 443 
           that.imgs = res.data.data.splice(0, 3);
432 444 
           console.log(that.imgs);
 
@@ -440,34 +452,39 @@ export default {
440 452 
           "/service/bpm/bpm/flowTracingCustom/" + that.processInstanceId,
441 453 
           {}
442 454 
         )
443 
-        .then(function(res) {
455 
+        .then(function (res) {
444 456 
           console.log(res.data);
445 457 
           that.progressInfo = res.data.data;
446 458 
           //处理日志startcaca
447 
-          if(that.model.incident.handlerLogs){
459 
+          if (that.model.incident.handlerLogs) {
448 460 
             //添加日志
449 
-            that.model.incident.handlerLogs.forEach(v=>{
450 
-              that.progressInfo.push({startTime:v.opTime,endTime:1,desc:v.opValue,userName:v.userName,activityName:'事件处理'});
451 
-            })
452 
-
461 
+            that.model.incident.handlerLogs.forEach((v) => {
462 
+              that.progressInfo.push({
463 
+                startTime: v.opTime,
464 
+                endTime: 1,
465 
+                desc: v.opValue,
466 
+                userName: v.userName,
467 
+                activityName: "事件处理",
468 
+              });
469 
+            });
453 470 
           }
454 471 
           //处理数据
455 
-          that.progressInfo.forEach((v)=>{
456 
-            if(!v.endTime){
472 
+          that.progressInfo.forEach((v) => {
473 
+            if (!v.endTime) {
457 474 
               v.endTime = 1;
458 475 
             }
459 476 
             v.startTime = new Date(v.startTime).getTime();
460 
-          })
477 
+          });
461 478 
           var kaishi = that.progressInfo.shift();
462 479 
           var jiedan = that.progressInfo.shift();
463 
-          that.progressInfo.sort(function(o,c){
480 
+          that.progressInfo.sort(function (o, c) {
464 481 
             return c.startTime - o.startTime;
465 482 
           });
466 
-          that.progressInfo.length && (that.progressInfo[0].endTime = '');
483 
+          that.progressInfo.length && (that.progressInfo[0].endTime = "");
467 484 
           that.progressInfo.push(jiedan);
468 485 
           that.progressInfo.push(kaishi);
469 
-          console.log(that.progressInfo)
470 
-        //处理日志end
486 
+          console.log(that.progressInfo);
487 
+          //处理日志end
471 488 
         });
472 489 
     },
473 490 
     // 获取结果类型
 
@@ -476,15 +493,15 @@ export default {
476 493 
       that.$http
477 494 
         .post("/service/common/common/getDictionary", {
478 495 
           type: "list",
479 
-          key: "incident_handleresult"
496 
+          key: "incident_handleresult",
480 497 
         })
481 
-        .then(function(res) {
498 
+        .then(function (res) {
482 499 
           console.log(res.data);
483 500 
           // that.handleResultArr = res.data;
484 
-          res.data.forEach(function(v, i) {
501 
+          res.data.forEach(function (v, i) {
485 502 
             that.handleResultArr.push({
486 503 
               text: v.name,
487 
-              value: v.id
504 
+              value: v.id,
488 505 
             });
489 506 
           });
490 507 
         });
 
@@ -495,15 +512,15 @@ export default {
495 512 
       that.$http
496 513 
         .post("/service/common/common/getDictionary", {
497 514 
           type: "list",
498 
-          key: "incident_degree"
515 
+          key: "incident_degree",
499 516 
         })
500 
-        .then(function(res) {
517 
+        .then(function (res) {
501 518 
           console.log(res.data);
502 519 
           // that.degreeArr = res.data;
503 
-          res.data.forEach(function(v, i) {
520 
+          res.data.forEach(function (v, i) {
504 521 
             that.degreeArr.push({
505 522 
               text: v.name,
506 
-              value: v.id
523 
+              value: v.id,
507 524 
             });
508 525 
           });
509 526 
         });
 
@@ -522,7 +539,7 @@ export default {
522 539 
     proHides() {
523 540 
       if (!this.pro_hides) {
524 541 
         $("#progressBox").animate({
525 
-          height: $("#progressBox")[0].scrollHeight
542 
+          height: $("#progressBox")[0].scrollHeight,
526 543 
         });
527 544 
       } else {
528 545 
         $("#progressBox").animate({ height: "1.7rem" });
 
@@ -537,7 +554,7 @@ export default {
537 554 
           scrollTop:
538 555 
             $("#" + id).offset().top -
539 556 
             $(".header")[0].offsetHeight -
540 
-            $(".navBar")[0].offsetHeight
557 
+            $(".navBar")[0].offsetHeight,
541 558 
         },
542 559 
         260
543 560 
       );
 
@@ -562,7 +579,7 @@ export default {
562 579 
         $("#fade").fadeIn();
563 580 
         that.promptingConent = "提交失败,请填写必填信息!";
564 581 
         that.promptingStatus = false;
565 
-        setTimeout(function() {
582 
+        setTimeout(function () {
566 583 
           $("#fade").fadeOut();
567 584 
         }, 2000);
568 585 
       }
 
@@ -575,7 +592,7 @@ export default {
575 592 
             that.loginUser.id,
576 593 
           that.model
577 594 
         )
578 
-        .then(function(res) {
595 
+        .then(function (res) {
579 596 
           if (res.data.status == 200) {
580 597 
             $("#fade").fadeIn();
581 598 
             that.promptingConent = "恭喜您,提交成功!";
 
@@ -588,15 +605,15 @@ export default {
588 605 
                 icon: "cubeic-right",
589 606 
                 onConfirm: (e, promptValue) => {
590 607 
                   that.$router.push({ path: "/main" });
591 
-                }
608 
+                },
592 609 
               })
593 610 
               .show();
594 
-            setTimeout(function() {
611 
+            setTimeout(function () {
595 612 
               $("#fade").fadeOut();
596 613 
             }, 2000);
597 614 
           }
598 615 
         });
599 
-    }
616 
+    },
600 617 
   },
601 618 
   created() {
602 619 
     // seimin
 
@@ -609,12 +626,12 @@ export default {
609 626 
       : JSON.parse(localStorage.getItem("modelData")).incident.id;
610 627 
     this.getParamsData();
611 628 
     this.getImgs();
612 
-    if(this.incidentWithConsumable == 1){
629 
+    if (this.incidentWithConsumable == 1) {
613 630 
       this.getHcBySj();
614 631 
     }
615 632 
     this.getHandlerRes();
616 633 
     this.getDegree();
617 
-  }
634 
+  },
618 635 
 };
619 636 
 </script>
620 637 
 <style lang="less" scoped>

+ 6 - 0
src/views/wxChartDetail.vue
Dosyayı Görüntüle 

@@ -48,6 +48,10 @@
48 48 
               <span>报修描述:</span>
49 49 
               <span class="grayFont" v-html="model.incidentDescription"></span>
50 50 
             </p>
51 
+            <p class="desc" v-if="wxIncidentWithCmdb == 1">
52 
+              <span>资产:</span>
53 
+              <span class="grayFont">{{model.assetId||'无'}}</span>
54 
+            </p>
51 55 
             <div class="label" v-if="imgs.length">报修图片</div>
52 56 
             <div class="imgs-container" v-if="imgs.length">
53 57 
               <div class="imgs-cont">
 
@@ -123,6 +127,8 @@ import HandlerLog from "./../views/handlerLog.vue";
123 127 
 export default {
124 128 
   data() {
125 129 
     return {
130 
+      incidentWithConsumable: localStorage.getItem("incidentWithConsumable"), //是否绑定耗材
131 
+      wxIncidentWithCmdb: localStorage.getItem("wxIncidentWithCmdb"), //是否绑定资产
126 132 
       loginUser: JSON.parse(localStorage.getItem("loginUser")),
127 133 
       promptingConent: "",
128 134 
       promptingStatus: "",

+ 12 - 7
src/views/wxChartList.vue
Dosyayı Görüntüle 

@@ -54,12 +54,16 @@
54 54 
                     }}</span>
55 55 
                   </p>
56 56 
                 </div>
57 
-                <div class="bottom">
58 
-                  <span class="fl">报修人: {{ item.requester.name }}</span>
59 
-                  <span class="fr">{{
57 
+                <div class="bottom noneBorder">
58 
+                  <span class="fl">报修人：{{ item.requester.name }}</span>
59 
+                  <span class="fr">报修时间：{{
60 60 
                     item.createTime | timeFormat("MM-dd HH:mm")
61 61 
                   }}</span>
62 62 
                 </div>
63 
+                <div class="bottom" v-if="wxIncidentWithCmdb == 1">
64 
+                  <span class="fl">资产：{{ item.assetId || '无' }}</span>
65 
+                  <span class="fr"></span>
66 
+                </div>
63 67 
               </div>
64 68 
               <div class="wushuju" v-show="wushuju">
65 69 
                 <img src="./../../static/images/quesheng.png" alt />
 
@@ -113,7 +117,8 @@ import http from "../request/http";
113 117 
 export default {
114 118 
   data() {
115 119 
     return {
116 
-      //   items: _foods,
120 
+      incidentWithConsumable: localStorage.getItem("incidentWithConsumable"), //是否绑定耗材
121 
+      wxIncidentWithCmdb: localStorage.getItem("wxIncidentWithCmdb"), //是否绑定资产
117 122 
       loginUser: JSON.parse(localStorage.getItem("loginUser")),
118 123 
       items: [],
119 124 
       pullDownRefresh: true,
 
@@ -307,9 +312,6 @@ export default {
307 312 
   .food-item {
308 313 
     display: flex;
309 314
310 
-    /* padding: 18px */
311 
-    /* border-bottom: 1px solid rgba(7, 17, 27, 0.1) */
312 
-    /* border-top: 1px solid rgba(7, 17, 27, 0.1)!important */
313 315 
     &:last-child {
314 316 
       border-none();
315 317 
       margin-bottom: 0;
 
@@ -576,6 +578,9 @@ export default {
576 578 
       color: #999;
577 579 
       padding: 0 0.32rem 0 0.48rem;
578 580 
     }
581 
+    .bottom.noneBorder{
582 
+      border:none;
583 
+    }
579 584 
   }
580 585 
 }
581 586 
 </style>

+ 539 - 0
static/font/seimin/demo.css
Dosyayı Görüntüle 

@@ -0,0 +1,539 @@
1 
+/* Logo 字体 */
2 
+@font-face {
3 
+  font-family: "iconfont logo";
4 
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
5 
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
6 
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
7 
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
8 
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
9 
+}
10 
+
11 
+.logo {
12 
+  font-family: "iconfont logo";
13 
+  font-size: 160px;
14 
+  font-style: normal;
15 
+  -webkit-font-smoothing: antialiased;
16 
+  -moz-osx-font-smoothing: grayscale;
17 
+}
18 
+
19 
+/* tabs */
20 
+.nav-tabs {
21 
+  position: relative;
22 
+}
23 
+
24 
+.nav-tabs .nav-more {
25 
+  position: absolute;
26 
+  right: 0;
27 
+  bottom: 0;
28 
+  height: 42px;
29 
+  line-height: 42px;
30 
+  color: #666;
31 
+}
32 
+
33 
+#tabs {
34 
+  border-bottom: 1px solid #eee;
35 
+}
36 
+
37 
+#tabs li {
38 
+  cursor: pointer;
39 
+  width: 100px;
40 
+  height: 40px;
41 
+  line-height: 40px;
42 
+  text-align: center;
43 
+  font-size: 16px;
44 
+  border-bottom: 2px solid transparent;
45 
+  position: relative;
46 
+  z-index: 1;
47 
+  margin-bottom: -1px;
48 
+  color: #666;
49 
+}
50 
+
51 
+
52 
+#tabs .active {
53 
+  border-bottom-color: #f00;
54 
+  color: #222;
55 
+}
56 
+
57 
+.tab-container .content {
58 
+  display: none;
59 
+}
60 
+
61 
+/* 页面布局 */
62 
+.main {
63 
+  padding: 30px 100px;
64 
+  width: 960px;
65 
+  margin: 0 auto;
66 
+}
67 
+
68 
+.main .logo {
69 
+  color: #333;
70 
+  text-align: left;
71 
+  margin-bottom: 30px;
72 
+  line-height: 1;
73 
+  height: 110px;
74 
+  margin-top: -50px;
75 
+  overflow: hidden;
76 
+  *zoom: 1;
77 
+}
78 
+
79 
+.main .logo a {
80 
+  font-size: 160px;
81 
+  color: #333;
82 
+}
83 
+
84 
+.helps {
85 
+  margin-top: 40px;
86 
+}
87 
+
88 
+.helps pre {
89 
+  padding: 20px;
90 
+  margin: 10px 0;
91 
+  border: solid 1px #e7e1cd;
92 
+  background-color: #fffdef;
93 
+  overflow: auto;
94 
+}
95 
+
96 
+.icon_lists {
97 
+  width: 100% !important;
98 
+  overflow: hidden;
99 
+  *zoom: 1;
100 
+}
101 
+
102 
+.icon_lists li {
103 
+  width: 100px;
104 
+  margin-bottom: 10px;
105 
+  margin-right: 20px;
106 
+  text-align: center;
107 
+  list-style: none !important;
108 
+  cursor: default;
109 
+}
110 
+
111 
+.icon_lists li .code-name {
112 
+  line-height: 1.2;
113 
+}
114 
+
115 
+.icon_lists .icon {
116 
+  display: block;
117 
+  height: 100px;
118 
+  line-height: 100px;
119 
+  font-size: 42px;
120 
+  margin: 10px auto;
121 
+  color: #333;
122 
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
123 
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
124 
+  transition: font-size 0.25s linear, width 0.25s linear;
125 
+}
126 
+
127 
+.icon_lists .icon:hover {
128 
+  font-size: 100px;
129 
+}
130 
+
131 
+.icon_lists .svg-icon {
132 
+  /* 通过设置 font-size 来改变图标大小 */
133 
+  width: 1em;
134 
+  /* 图标和文字相邻时，垂直对齐 */
135 
+  vertical-align: -0.15em;
136 
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
137 
+  fill: currentColor;
138 
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
139 
+      normalize.css 中也包含这行 */
140 
+  overflow: hidden;
141 
+}
142 
+
143 
+.icon_lists li .name,
144 
+.icon_lists li .code-name {
145 
+  color: #666;
146 
+}
147 
+
148 
+/* markdown 样式 */
149 
+.markdown {
150 
+  color: #666;
151 
+  font-size: 14px;
152 
+  line-height: 1.8;
153 
+}
154 
+
155 
+.highlight {
156 
+  line-height: 1.5;
157 
+}
158 
+
159 
+.markdown img {
160 
+  vertical-align: middle;
161 
+  max-width: 100%;
162 
+}
163 
+
164 
+.markdown h1 {
165 
+  color: #404040;
166 
+  font-weight: 500;
167 
+  line-height: 40px;
168 
+  margin-bottom: 24px;
169 
+}
170 
+
171 
+.markdown h2,
172 
+.markdown h3,
173 
+.markdown h4,
174 
+.markdown h5,
175 
+.markdown h6 {
176 
+  color: #404040;
177 
+  margin: 1.6em 0 0.6em 0;
178 
+  font-weight: 500;
179 
+  clear: both;
180 
+}
181 
+
182 
+.markdown h1 {
183 
+  font-size: 28px;
184 
+}
185 
+
186 
+.markdown h2 {
187 
+  font-size: 22px;
188 
+}
189 
+
190 
+.markdown h3 {
191 
+  font-size: 16px;
192 
+}
193 
+
194 
+.markdown h4 {
195 
+  font-size: 14px;
196 
+}
197 
+
198 
+.markdown h5 {
199 
+  font-size: 12px;
200 
+}
201 
+
202 
+.markdown h6 {
203 
+  font-size: 12px;
204 
+}
205 
+
206 
+.markdown hr {
207 
+  height: 1px;
208 
+  border: 0;
209 
+  background: #e9e9e9;
210 
+  margin: 16px 0;
211 
+  clear: both;
212 
+}
213 
+
214 
+.markdown p {
215 
+  margin: 1em 0;
216 
+}
217 
+
218 
+.markdown>p,
219 
+.markdown>blockquote,
220 
+.markdown>.highlight,
221 
+.markdown>ol,
222 
+.markdown>ul {
223 
+  width: 80%;
224 
+}
225 
+
226 
+.markdown ul>li {
227 
+  list-style: circle;
228 
+}
229 
+
230 
+.markdown>ul li,
231 
+.markdown blockquote ul>li {
232 
+  margin-left: 20px;
233 
+  padding-left: 4px;
234 
+}
235 
+
236 
+.markdown>ul li p,
237 
+.markdown>ol li p {
238 
+  margin: 0.6em 0;
239 
+}
240 
+
241 
+.markdown ol>li {
242 
+  list-style: decimal;
243 
+}
244 
+
245 
+.markdown>ol li,
246 
+.markdown blockquote ol>li {
247 
+  margin-left: 20px;
248 
+  padding-left: 4px;
249 
+}
250 
+
251 
+.markdown code {
252 
+  margin: 0 3px;
253 
+  padding: 0 5px;
254 
+  background: #eee;
255 
+  border-radius: 3px;
256 
+}
257 
+
258 
+.markdown strong,
259 
+.markdown b {
260 
+  font-weight: 600;
261 
+}
262 
+
263 
+.markdown>table {
264 
+  border-collapse: collapse;
265 
+  border-spacing: 0px;
266 
+  empty-cells: show;
267 
+  border: 1px solid #e9e9e9;
268 
+  width: 95%;
269 
+  margin-bottom: 24px;
270 
+}
271 
+
272 
+.markdown>table th {
273 
+  white-space: nowrap;
274 
+  color: #333;
275 
+  font-weight: 600;
276 
+}
277 
+
278 
+.markdown>table th,
279 
+.markdown>table td {
280 
+  border: 1px solid #e9e9e9;
281 
+  padding: 8px 16px;
282 
+  text-align: left;
283 
+}
284 
+
285 
+.markdown>table th {
286 
+  background: #F7F7F7;
287 
+}
288 
+
289 
+.markdown blockquote {
290 
+  font-size: 90%;
291 
+  color: #999;
292 
+  border-left: 4px solid #e9e9e9;
293 
+  padding-left: 0.8em;
294 
+  margin: 1em 0;
295 
+}
296 
+
297 
+.markdown blockquote p {
298 
+  margin: 0;
299 
+}
300 
+
301 
+.markdown .anchor {
302 
+  opacity: 0;
303 
+  transition: opacity 0.3s ease;
304 
+  margin-left: 8px;
305 
+}
306 
+
307 
+.markdown .waiting {
308 
+  color: #ccc;
309 
+}
310 
+
311 
+.markdown h1:hover .anchor,
312 
+.markdown h2:hover .anchor,
313 
+.markdown h3:hover .anchor,
314 
+.markdown h4:hover .anchor,
315 
+.markdown h5:hover .anchor,
316 
+.markdown h6:hover .anchor {
317 
+  opacity: 1;
318 
+  display: inline-block;
319 
+}
320 
+
321 
+.markdown>br,
322 
+.markdown>p>br {
323 
+  clear: both;
324 
+}
325 
+
326 
+
327 
+.hljs {
328 
+  display: block;
329 
+  background: white;
330 
+  padding: 0.5em;
331 
+  color: #333333;
332 
+  overflow-x: auto;
333 
+}
334 
+
335 
+.hljs-comment,
336 
+.hljs-meta {
337 
+  color: #969896;
338 
+}
339 
+
340 
+.hljs-string,
341 
+.hljs-variable,
342 
+.hljs-template-variable,
343 
+.hljs-strong,
344 
+.hljs-emphasis,
345 
+.hljs-quote {
346 
+  color: #df5000;
347 
+}
348 
+
349 
+.hljs-keyword,
350 
+.hljs-selector-tag,
351 
+.hljs-type {
352 
+  color: #a71d5d;
353 
+}
354 
+
355 
+.hljs-literal,
356 
+.hljs-symbol,
357 
+.hljs-bullet,
358 
+.hljs-attribute {
359 
+  color: #0086b3;
360 
+}
361 
+
362 
+.hljs-section,
363 
+.hljs-name {
364 
+  color: #63a35c;
365 
+}
366 
+
367 
+.hljs-tag {
368 
+  color: #333333;
369 
+}
370 
+
371 
+.hljs-title,
372 
+.hljs-attr,
373 
+.hljs-selector-id,
374 
+.hljs-selector-class,
375 
+.hljs-selector-attr,
376 
+.hljs-selector-pseudo {
377 
+  color: #795da3;
378 
+}
379 
+
380 
+.hljs-addition {
381 
+  color: #55a532;
382 
+  background-color: #eaffea;
383 
+}
384 
+
385 
+.hljs-deletion {
386 
+  color: #bd2c00;
387 
+  background-color: #ffecec;
388 
+}
389 
+
390 
+.hljs-link {
391 
+  text-decoration: underline;
392 
+}
393 
+
394 
+/* 代码高亮 */
395 
+/* PrismJS 1.15.0
396 
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
397 
+/**
398 
+ * prism.js default theme for JavaScript, CSS and HTML
399 
+ * Based on dabblet (http://dabblet.com)
400 
+ * @author Lea Verou
401 
+ */
402 
+code[class*="language-"],
403 
+pre[class*="language-"] {
404 
+  color: black;
405 
+  background: none;
406 
+  text-shadow: 0 1px white;
407 
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
408 
+  text-align: left;
409 
+  white-space: pre;
410 
+  word-spacing: normal;
411 
+  word-break: normal;
412 
+  word-wrap: normal;
413 
+  line-height: 1.5;
414 
+
415 
+  -moz-tab-size: 4;
416 
+  -o-tab-size: 4;
417 
+  tab-size: 4;
418 
+
419 
+  -webkit-hyphens: none;
420 
+  -moz-hyphens: none;
421 
+  -ms-hyphens: none;
422 
+  hyphens: none;
423 
+}
424 
+
425 
+pre[class*="language-"]::-moz-selection,
426 
+pre[class*="language-"] ::-moz-selection,
427 
+code[class*="language-"]::-moz-selection,
428 
+code[class*="language-"] ::-moz-selection {
429 
+  text-shadow: none;
430 
+  background: #b3d4fc;
431 
+}
432 
+
433 
+pre[class*="language-"]::selection,
434 
+pre[class*="language-"] ::selection,
435 
+code[class*="language-"]::selection,
436 
+code[class*="language-"] ::selection {
437 
+  text-shadow: none;
438 
+  background: #b3d4fc;
439 
+}
440 
+
441 
+@media print {
442 
+
443 
+  code[class*="language-"],
444 
+  pre[class*="language-"] {
445 
+    text-shadow: none;
446 
+  }
447 
+}
448 
+
449 
+/* Code blocks */
450 
+pre[class*="language-"] {
451 
+  padding: 1em;
452 
+  margin: .5em 0;
453 
+  overflow: auto;
454 
+}
455 
+
456 
+:not(pre)>code[class*="language-"],
457 
+pre[class*="language-"] {
458 
+  background: #f5f2f0;
459 
+}
460 
+
461 
+/* Inline code */
462 
+:not(pre)>code[class*="language-"] {
463 
+  padding: .1em;
464 
+  border-radius: .3em;
465 
+  white-space: normal;
466 
+}
467 
+
468 
+.token.comment,
469 
+.token.prolog,
470 
+.token.doctype,
471 
+.token.cdata {
472 
+  color: slategray;
473 
+}
474 
+
475 
+.token.punctuation {
476 
+  color: #999;
477 
+}
478 
+
479 
+.namespace {
480 
+  opacity: .7;
481 
+}
482 
+
483 
+.token.property,
484 
+.token.tag,
485 
+.token.boolean,
486 
+.token.number,
487 
+.token.constant,
488 
+.token.symbol,
489 
+.token.deleted {
490 
+  color: #905;
491 
+}
492 
+
493 
+.token.selector,
494 
+.token.attr-name,
495 
+.token.string,
496 
+.token.char,
497 
+.token.builtin,
498 
+.token.inserted {
499 
+  color: #690;
500 
+}
501 
+
502 
+.token.operator,
503 
+.token.entity,
504 
+.token.url,
505 
+.language-css .token.string,
506 
+.style .token.string {
507 
+  color: #9a6e3a;
508 
+  background: hsla(0, 0%, 100%, .5);
509 
+}
510 
+
511 
+.token.atrule,
512 
+.token.attr-value,
513 
+.token.keyword {
514 
+  color: #07a;
515 
+}
516 
+
517 
+.token.function,
518 
+.token.class-name {
519 
+  color: #DD4A68;
520 
+}
521 
+
522 
+.token.regex,
523 
+.token.important,
524 
+.token.variable {
525 
+  color: #e90;
526 
+}
527 
+
528 
+.token.important,
529 
+.token.bold {
530 
+  font-weight: bold;
531 
+}
532 
+
533 
+.token.italic {
534 
+  font-style: italic;
535 
+}
536 
+
537 
+.token.entity {
538 
+  cursor: help;
539 
+}

+ 280 - 0
static/font/seimin/demo_index.html
Dosyayı Görüntüle 

@@ -0,0 +1,280 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+<head>
4 
+  <meta charset="utf-8"/>
5 
+  <title>iconfont Demo</title>
6 
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
7 
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
8 
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
9 
+  <link rel="stylesheet" href="demo.css">
10 
+  <link rel="stylesheet" href="iconfont.css">
11 
+  <script src="iconfont.js"></script>
12 
+  <!-- jQuery -->
13 
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
14 
+  <!-- 代码高亮 -->
15 
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
16 
+  <style>
17 
+    .main .logo {
18 
+      margin-top: 0;
19 
+      height: auto;
20 
+    }
21 
+
22 
+    .main .logo a {
23 
+      display: flex;
24 
+      align-items: center;
25 
+    }
26 
+
27 
+    .main .logo .sub-title {
28 
+      margin-left: 0.5em;
29 
+      font-size: 22px;
30 
+      color: #fff;
31 
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
32 
+      -webkit-background-clip: text;
33 
+      -webkit-text-fill-color: transparent;
34 
+    }
35 
+  </style>
36 
+</head>
37 
+<body>
38 
+  <div class="main">
39 
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
40 
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
41 
+
42 
+    </a></h1>
43 
+    <div class="nav-tabs">
44 
+      <ul id="tabs" class="dib-box">
45 
+        <li class="dib active"><span>Unicode</span></li>
46 
+        <li class="dib"><span>Font class</span></li>
47 
+        <li class="dib"><span>Symbol</span></li>
48 
+      </ul>
49 
+
50 
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2879659" target="_blank" class="nav-more">查看项目</a>
51 
+
52 
+    </div>
53 
+    <div class="tab-container">
54 
+      <div class="content unicode" style="display: block;">
55 
+          <ul class="icon_lists dib-box">
56 
+
57 
+            <li class="dib">
58 
+              <span class="icon dash">&#xe8b5;</span>
59 
+                <div class="name">扫一扫</div>
60 
+                <div class="code-name">&amp;#xe8b5;</div>
61 
+              </li>
62 
+
63 
+            <li class="dib">
64 
+              <span class="icon dash">&#xe609;</span>
65 
+                <div class="name">fangdajing</div>
66 
+                <div class="code-name">&amp;#xe609;</div>
67 
+              </li>
68 
+
69 
+            <li class="dib">
70 
+              <span class="icon dash">&#xe7b7;</span>
71 
+                <div class="name">查号</div>
72 
+                <div class="code-name">&amp;#xe7b7;</div>
73 
+              </li>
74 
+
75 
+            <li class="dib">
76 
+              <span class="icon dash">&#xe6bf;</span>
77 
+                <div class="name">修改密码</div>
78 
+                <div class="code-name">&amp;#xe6bf;</div>
79 
+              </li>
80 
+
81 
+          </ul>
82 
+          <div class="article markdown">
83 
+          <h2 id="unicode-">Unicode 引用</h2>
84 
+          <hr>
85 
+
86 
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
87 
+          <ul>
88 
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
89 
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
90 
+          </ul>
91 
+          <blockquote>
92 
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
93 
+          </blockquote>
94 
+          <p>Unicode 使用步骤如下：</p>
95 
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
96 
+<pre><code class="language-css"
97 
+>@font-face {
98 
+  font-family: 'dash';
99 
+  src: url('iconfont.woff2?t=1641526164246') format('woff2'),
100 
+       url('iconfont.woff?t=1641526164246') format('woff'),
101 
+       url('iconfont.ttf?t=1641526164246') format('truetype');
102 
+}
103 
+</code></pre>
104 
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
105 
+<pre><code class="language-css"
106 
+>.dash {
107 
+  font-family: "dash" !important;
108 
+  font-size: 16px;
109 
+  font-style: normal;
110 
+  -webkit-font-smoothing: antialiased;
111 
+  -moz-osx-font-smoothing: grayscale;
112 
+}
113 
+</code></pre>
114 
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
115 
+<pre>
116 
+<code class="language-html"
117 
+>&lt;span class="dash"&gt;&amp;#x33;&lt;/span&gt;
118 
+</code></pre>
119 
+          <blockquote>
120 
+            <p>"dash" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
121 
+          </blockquote>
122 
+          </div>
123 
+      </div>
124 
+      <div class="content font-class">
125 
+        <ul class="icon_lists dib-box">
126 
+
127 
+          <li class="dib">
128 
+            <span class="icon dash dash-saoyisao"></span>
129 
+            <div class="name">
130 
+              扫一扫
131 
+            </div>
132 
+            <div class="code-name">.dash-saoyisao
133 
+            </div>
134 
+          </li>
135 
+
136 
+          <li class="dib">
137 
+            <span class="icon dash dash-fangdajing"></span>
138 
+            <div class="name">
139 
+              fangdajing
140 
+            </div>
141 
+            <div class="code-name">.dash-fangdajing
142 
+            </div>
143 
+          </li>
144 
+
145 
+          <li class="dib">
146 
+            <span class="icon dash dash-chahao"></span>
147 
+            <div class="name">
148 
+              查号
149 
+            </div>
150 
+            <div class="code-name">.dash-chahao
151 
+            </div>
152 
+          </li>
153 
+
154 
+          <li class="dib">
155 
+            <span class="icon dash dash-xiugaimima"></span>
156 
+            <div class="name">
157 
+              修改密码
158 
+            </div>
159 
+            <div class="code-name">.dash-xiugaimima
160 
+            </div>
161 
+          </li>
162 
+
163 
+        </ul>
164 
+        <div class="article markdown">
165 
+        <h2 id="font-class-">font-class 引用</h2>
166 
+        <hr>
167 
+
168 
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
169 
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
170 
+        <ul>
171 
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
172 
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
173 
+        </ul>
174 
+        <p>使用步骤如下：</p>
175 
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
176 
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
177 
+</code></pre>
178 
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
179 
+<pre><code class="language-html">&lt;span class="dash dash-xxx"&gt;&lt;/span&gt;
180 
+</code></pre>
181 
+        <blockquote>
182 
+          <p>"
183 
+            dash" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
184 
+        </blockquote>
185 
+      </div>
186 
+      </div>
187 
+      <div class="content symbol">
188 
+          <ul class="icon_lists dib-box">
189 
+
190 
+            <li class="dib">
191 
+                <svg class="icon svg-icon" aria-hidden="true">
192 
+                  <use xlink:href="#dash-saoyisao"></use>
193 
+                </svg>
194 
+                <div class="name">扫一扫</div>
195 
+                <div class="code-name">#dash-saoyisao</div>
196 
+            </li>
197 
+
198 
+            <li class="dib">
199 
+                <svg class="icon svg-icon" aria-hidden="true">
200 
+                  <use xlink:href="#dash-fangdajing"></use>
201 
+                </svg>
202 
+                <div class="name">fangdajing</div>
203 
+                <div class="code-name">#dash-fangdajing</div>
204 
+            </li>
205 
+
206 
+            <li class="dib">
207 
+                <svg class="icon svg-icon" aria-hidden="true">
208 
+                  <use xlink:href="#dash-chahao"></use>
209 
+                </svg>
210 
+                <div class="name">查号</div>
211 
+                <div class="code-name">#dash-chahao</div>
212 
+            </li>
213 
+
214 
+            <li class="dib">
215 
+                <svg class="icon svg-icon" aria-hidden="true">
216 
+                  <use xlink:href="#dash-xiugaimima"></use>
217 
+                </svg>
218 
+                <div class="name">修改密码</div>
219 
+                <div class="code-name">#dash-xiugaimima</div>
220 
+            </li>
221 
+
222 
+          </ul>
223 
+          <div class="article markdown">
224 
+          <h2 id="symbol-">Symbol 引用</h2>
225 
+          <hr>
226 
+
227 
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
228 
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
229 
+          <ul>
230 
+            <li>支持多色图标了，不再受单色限制。</li>
231 
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
232 
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
233 
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
234 
+          </ul>
235 
+          <p>使用步骤如下：</p>
236 
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
237 
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
238 
+</code></pre>
239 
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
240 
+<pre><code class="language-html">&lt;style&gt;
241 
+.icon {
242 
+  width: 1em;
243 
+  height: 1em;
244 
+  vertical-align: -0.15em;
245 
+  fill: currentColor;
246 
+  overflow: hidden;
247 
+}
248 
+&lt;/style&gt;
249 
+</code></pre>
250 
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
251 
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
252 
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
253 
+&lt;/svg&gt;
254 
+</code></pre>
255 
+          </div>
256 
+      </div>
257 
+
258 
+    </div>
259 
+  </div>
260 
+  <script>
261 
+  $(document).ready(function () {
262 
+      $('.tab-container .content:first').show()
263 
+
264 
+      $('#tabs li').click(function (e) {
265 
+        var tabContent = $('.tab-container .content')
266 
+        var index = $(this).index()
267 
+
268 
+        if ($(this).hasClass('active')) {
269 
+          return
270 
+        } else {
271 
+          $('#tabs li').removeClass('active')
272 
+          $(this).addClass('active')
273 
+
274 
+          tabContent.hide().eq(index).fadeIn()
275 
+        }
276 
+      })
277 
+    })
278 
+  </script>
279 
+</body>
280 
+</html>

+ 31 - 0
static/font/seimin/iconfont.css
Dosyayı Görüntüle 

@@ -0,0 +1,31 @@
1 
+@font-face {
2 
+  font-family: "dash"; /* Project id 2879659 */
3 
+  src: url('iconfont.woff2?t=1641526164246') format('woff2'),
4 
+       url('iconfont.woff?t=1641526164246') format('woff'),
5 
+       url('iconfont.ttf?t=1641526164246') format('truetype');
6 
+}
7 
+
8 
+.dash {
9 
+  font-family: "dash" !important;
10 
+  font-size: 16px;
11 
+  font-style: normal;
12 
+  -webkit-font-smoothing: antialiased;
13 
+  -moz-osx-font-smoothing: grayscale;
14 
+}
15 
+
16 
+.dash-saoyisao:before {
17 
+  content: "\e8b5";
18 
+}
19 
+
20 
+.dash-fangdajing:before {
21 
+  content: "\e609";
22 
+}
23 
+
24 
+.dash-chahao:before {
25 
+  content: "\e7b7";
26 
+}
27 
+
28 
+.dash-xiugaimima:before {
29 
+  content: "\e6bf";
30 
+}
31 
+

Dosya farkı çok büyük olduğundan ihmal edildi
+ 1 - 0
static/font/seimin/iconfont.js


+ 37 - 0
static/font/seimin/iconfont.json
Dosyayı Görüntüle 

@@ -0,0 +1,37 @@
1 
+{
2 
+  "id": "2879659",
3 
+  "name": "ITSM（微信新）",
4 
+  "font_family": "dash",
5 
+  "css_prefix_text": "dash-",
6 
+  "description": "引入一个新的字体图标",
7 
+  "glyphs": [
8 
+    {
9 
+      "icon_id": "11372685",
10 
+      "name": "扫一扫",
11 
+      "font_class": "saoyisao",
12 
+      "unicode": "e8b5",
13 
+      "unicode_decimal": 59573
14 
+    },
15 
+    {
16 
+      "icon_id": "463375",
17 
+      "name": "fangdajing",
18 
+      "font_class": "fangdajing",
19 
+      "unicode": "e609",
20 
+      "unicode_decimal": 58889
21 
+    },
22 
+    {
23 
+      "icon_id": "1788495",
24 
+      "name": "查号",
25 
+      "font_class": "chahao",
26 
+      "unicode": "e7b7",
27 
+      "unicode_decimal": 59319
28 
+    },
29 
+    {
30 
+      "icon_id": "6282784",
31 
+      "name": "修改密码",
32 
+      "font_class": "xiugaimima",
33 
+      "unicode": "e6bf",
34 
+      "unicode_decimal": 59071
35 
+    }
36 
+  ]
37 
+}

BIN
static/font/seimin/iconfont.ttf
Dosyayı Görüntüle


BIN
static/font/seimin/iconfont.woff
Dosyayı Görüntüle


BIN
static/font/seimin/iconfont.woff2
Dosyayı Görüntüle