新增组件及页面

dgtis-ui/src/assets/js/fishBone.js

@@ -0,0 +1,148 @@
+import html2canvas from "html2canvas"
+import $ from "jquery";
+(function(window,$,html2canvas){
+      var fishBone = {};
+      fishBone.gapStep = 250; // 两块的间隙
+      fishBone.style = '#038dc5';// 颜色设定
+      fishBone.option = {};
+      fishBone.dowload = true; //是否提供下载
+      fishBone.axisTpl = `<div class="fish-bone-axis"></div><div class="fish-bone-node dateNodeEnd"></div><div class="zhanwei"></div>`;
+      fishBone.blockTpl = `
+      <div class="fish-bone-block">
+
+        <div class="fish-bone-line upper-line"></div>
+        <div class="fish-bone-line lower-line"></div>
+        <div class="fish-bone-node active-node"></div>
+        <div class="fish-bone-content active-content label-content">
+
+        </div>
+        <div class="fish-bone-content date-conent active-content">
+
+        </div>
+      </div>
+      `;
+      /**line left 21
+       * node left 20
+       * label-content left 9
+       * date-content left 14
+       *
+       * left should be increased by gapStep
+       *
+       * upperline bottom 50
+       * lowerline top 50
+       * node top 49.5
+       * label-content bottom 54
+       * date-content 54
+       *
+      */
+      // 各元素的位置
+      var lineLeft = 147,nodeLeft = 140,labelContentLeft = 50,
+      dateContentLeft = 108,upperLineBottom = 206,lowerLineTop = 211,
+      nodeTop1 = 197,nodeTop2 = 195,labelContentBottom = 230,dateContentTop = 210;
+      //初始化插件
+      fishBone.init = function(container,option){
+        this.style = option.color?option.color:this.style;
+        this.dowload = option.dowload?option.dowload:this.dowload;
+        var data = option.data;
+        var len = data.length;
+        var tpl = '';
+        tpl+=this.axisTpl;
+        for(var i=0;i<len;i++){
+          tpl+='<div class="fish-bone-block">';
+          // tpl+='<div class="fish-bone-line upper-line" style="left:'+(lineLeft+this.gapStep*i)+'px;bottom:'+upperLineBottom+'px;"></div>';
+          // tpl+='<div class="fish-bone-line lower-line" style="left:'+(lineLeft+this.gapStep*i)+'px;top:'+lowerLineTop+'px;"></div>';
+          // tpl+='<div class="fish-bone-node" style="top:'+nodeTop+'px;left:'+(nodeLeft+this.gapStep*i)+'px;"></div>'
+
+          if(i%2==0){
+            var pos1 = 'top';
+            var pos2 = 'bottom';
+            var line = 'topline'
+          }else{
+            var pos1 = 'bottom';
+            var pos2 = 'top';
+            var line = 'bottomLine'
+          }
+
+          // if(data[i].label){
+            tpl+='<div class="fish-bone-content label-content" style="left:'+(labelContentLeft+this.gapStep*i)+'px;'+pos1+':'+labelContentBottom+'px;background-color:'+data[i].backgroundColor+'">';
+            tpl+=data[i].label;
+            tpl+='</div>'
+            tpl+='<div class="fish-bone-node labelNode" style="top:'+nodeTop2+'px;left:'+(nodeLeft+this.gapStep*i)+'px;border-color:'+data[i].lineColor+'"></div>'
+            if(i%2==0){
+              tpl+='<div class="fish-bone-line fish-bone-line1 lower-line" style="left:'+(lineLeft+this.gapStep*i)+'px;top:'+lowerLineTop+'px;background-color:'+data[i].lineColor+'"></div>';
+            }else{
+              tpl+='<div class="fish-bone-line fish-bone-line2 upper-line" style="left:'+(lineLeft+this.gapStep*i)+'px;bottom:'+upperLineBottom+'px;background-color:'+data[i].lineColor+'"></div>';
+            }
+          // }
+          // if(data[i].date){
+          //   tpl+='<div class="fish-bone-node dateNode" style="top:'+nodeTop1+'px;left:'+(nodeLeft+this.gapStep*i)+'px;background-color:'+data[i].lineColor+'"></div>'
+            tpl+='<div class=" date-conent" style="left:'+(dateContentLeft+this.gapStep*i)+'px;'+pos2+':'+dateContentTop+'px;">';
+            tpl+=data[i].date;
+            tpl+='</div>';
+          // }
+          tpl+='</div>';
+        }
+        tpl+='<div class="fish-bone-node dateNode"></div>';
+        tpl+='<div class="start">Start</div>';
+        $(container).html(tpl);
+        // 增加轴的长度
+        var scale = Math.ceil(len/3);
+        $(".fish-bone-axis").css({"width":(660*scale+"px")});
+        $(".dateNodeEnd").css({"left":((660*scale+44)+"px")});
+        $(".zhanwei").css({"left":((660*scale+60)+"px")});
+        //设置节点的边框颜色
+        var color = this.style;
+        // $(".fish-bone-node").css({"border-color":color});
+        //插入下载按钮
+       // if(this.dowload){
+
+       //   var $dowload = $('<span class="icon fish-bone-download">&#xe87b;</span>')
+       //     .css({"left":"850px","top":"15px"});
+       //   $(container).append($dowload);
+       // }
+        this.attachClickEvent(container);
+      }
+      // 绑定点击事件
+      fishBone.attachClickEvent = function(container){
+        var color = this.style;
+        $(".fish-bone-block").on("click",function(){
+          $(".fish-bone-content").css({"background-color":"#f5f5f5"});
+          $(".fish-bone-node").removeClass("active-node");
+          $(this).find(".fish-bone-content").css({"background-color":color});
+          $(this).find(".fish-bone-node").addClass("active-node");
+
+        });
+        $(container+" .fish-bone-download").on("click",function(){
+          $(container+" .fish-bone-content").removeClass("active-content").css({"background-color":"#f5f5f5"});
+          $(container+" .fish-bone-node").removeClass("active-node");
+          html2pic(container);
+        });
+
+      }
+      // 转图片
+      function html2pic(container){
+        var el = $(container).get(0);
+        var copy = $(container).clone();
+        if(html2canvas){
+          $width = $(".fish-bone-axis").width()
+          // $(container).width($width);
+          copy.width($width);
+          // $height = $(container).parent().height()
+          // $(container).height($height)
+          $('body').append(copy);
+          el = copy.get(0)
+          html2canvas(el, {
+            onrendered: function(canvas) {
+
+                var url = canvas.toDataURL();
+
+                var triggerDownload = $("<a>").attr("href", url).attr("download", "下载.png").appendTo("body");
+                triggerDownload[0].click();
+                triggerDownload.remove();
+                copy.remove();
+            }
+          });
+        }
+      }
+      window.fishBone = fishBone;
+    })(window,$,html2canvas);

dgtis-ui/src/assets/styles/fishBone.css

@@ -0,0 +1,120 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+body {
+    overflow: visible;
+    /*background-color: #262626;*/
+}
+.wrapper {
+    width: 95%;
+    height: auto;
+    border: 1px solid #eee;
+    position: relative;
+    margin: 0 auto;
+    overflow: auto;
+	/*margin-top: 100px;*/
+}
+.fish-bone-axis, .fish-bone-content, .fish-bone-node, .fish-bone-line {
+    position: absolute;
+    background-color: #F69900;
+}
+
+.fish-bone-axis {
+    top: 200px;
+    height: 3px;
+    width: 95%;
+    left: 50px;
+    border-radius: 5px;
+}
+.fish-bone-content {
+    padding: 16px;
+    width: 201px;
+    color: #3965A6;
+    text-align: justify;
+    border-radius: 4px;
+    border: 1px solid #f5f5f5;
+    font-size: 14px;
+}
+.fish-bone-node {
+    height: 15px;
+    width: 15px;
+    border-radius: 50%;
+    background-color: #fff;
+    /*border: 1px solid #038DC5;*/
+}
+.fish-bone-block {
+    cursor: pointer;
+}
+.fish-bone-line {
+    /*height: 40px;*/
+    width: 2px;
+    background-color: #F69900;
+}
+.fish-bone-line1 {
+    height: 18px;
+}
+.fish-bone-line2 {
+    height: 24px;
+}
+.fish-bone {
+    /* overflow: hidden; */
+    position: relative;
+    height: 400px;
+    width: 1000px;
+}
+.active-node {
+    border-width: 3px;
+    border-style: solid;
+}
+.date-conent {
+    width: 50px;
+    position: absolute;
+    color: #F69900;
+}
+/*@font-face {
+    font-family: 'fishBoneDownload';
+    src: url('fishBoneDownload.eot');
+    src: url('fishBoneDownload.eot?#iefix') format('embedded-opentype'),  url('fishBoneDownload.woff2') format('woff2'),  url('fishBoneDownload.woff') format('woff'),  url('fishBoneDownload.ttf') format('truetype'),  url('fishBoneDownload.svg#fishBoneDownload') format('svg');
+}*/
+.fish-bone-download {
+    font-family: 'fishBoneDownload';
+    font-size: 28px;
+    position: absolute;
+    cursor: pointer;
+    display: inline-block;
+}
+.fish-bone-download:hover {
+    color: #038dc5;
+}
+.dateNode{
+    height: 8px;
+    width: 8px;
+    background: #F69900;
+    left: 44px;
+    top: 198px;
+}
+.dateNodeEnd{
+  height: 8px;
+  width: 8px;
+  background: #F69900;
+  /*right: 44px;*/
+  top: 198px;
+}
+.start{
+  color: #F69900;
+  position: absolute;
+  left: 8px;
+  top: 192px;
+}
+.zhanwei{
+  position: absolute;
+  height: 40px;
+  width: 40px;
+  opacity: 0;
+  top: 198px;
+}
+.labelNode{
+    border: 3px solid #F69900;
+    box-sizing: border-box;
+}