精华内容
下载资源
问答
  • vue实现甘特图,动态展示数据

    千次阅读 2019-10-14 11:08:59
    1.在开发一个后台系统时,遇到一个甘特图的需求 2.通过特定的数据结构和vue的循环判断加上table原生表格的合并行列实现需求 效果 <template> <div class="hello"> <!--Echarts图表盒子--> &...

    场景:
    1.在开发一个后台系统时,遇到一个甘特图的需求
    2.通过特定的数据结构和vue的循环判断加上table原生表格的合并行列实现需求

    效果
    在这里插入图片描述

    <template>
      <div class="hello">
    
        <!--Echarts图表盒子-->
        <div id="myChart" :style="{width: '1633px', height: '300px'}"></div>
        <!--表格-->
        <div style="margin-left: 3px;width: 1633px;">
          <table style="border: 1px solid blue;" id="infotableid">
            <!--住院天数-->
            <!--<tr>-->
            <!--<td style="text-align: right;" colspan="2">住院天数</td>-->
            <!--<td v-for="dayS in dayS" style="width: 142px;text-align: center;font-size: 12px;">{{dayS}}</td>-->
            <!--</tr>-->
            <tr>
              <td style="text-align: right;" colspan="2">疼痛评分</td>
              <td v-for="dayS in FixedGuardianshipChartInfoList" style="width: 142px;text-align: center;font-size: 12px;"><span v-for="PainLevelListdata in dayS.PainLevelList">{{PainLevelListdata}}&nbsp;</span></td>
            </tr>
            <tr>
              <td style="text-align: right;" colspan="2">住院天数</td>
              <td v-for="dayS in FixedGuardianshipChartInfoList" style="width: 142px;text-align: center;font-size: 12px;">{{dayS.InhsopCount}}</td>
            </tr>
            <tr>
              <td colspan="2"  style="text-align: right;">呼吸(次/分)</td>
              <td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length>0" v-for="Breathings in FixedGuardianshipChartInfoList" style="width: 135px;">{{Breathings.Breathing}}</td>
              <td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length==0" v-for="cellength in [1,2,3,4,5,6,7,8,9,10]"></td>
            </tr>
    
    
            <tr>
              <td rowspan="4">
                出量
              </td>
              <td style="text-align: right;">小便量(ml)</td>
              <td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length>0" v-for="OuputClss in FixedGuardianshipChartInfoList" style="">{{OuputClss.OuputCls.UrineVolume}}</td>
              <td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length==0" v-for="cellength in [1,2,3,4,5,6,7,8,9,10]"></td>
            </tr>
            <tr>
              <td style="text-align: right;">大便(次)</td>
              <td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length>0"  v-for="OuputClss in FixedGuardianshipChartInfoList" style="">{{OuputClss.OuputCls.StoolTimes}}</td>
              <td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length==0" v-for="cellength in [1,2,3,4,5,6,7,8,9,10]"></td>
            </tr>
            <tr>
              <td style="text-align: right;">引流量(ml)</td>
              <td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length>0"  v-for="OuputClss in FixedGuardianshipChartInfoList" style="">{{OuputClss.OuputCls.InducedFlow}}</td>
              <td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length==0" v-for="cellength in [1,2,3,4,5,6,7,8,9,10]"></td>
            </tr>
            <tr>
              <td style="text-align: right;">其他(ml)</td>
              <td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length>0"  v-for="OuputClss in FixedGuardianshipChartInfoList" style="">{{OuputClss.OuputCls.Other}}</td>
              <td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length==0" v-for="cellength in [1,2,3,4,5,6,7,8,9,10]"></td>
            </tr>
    
            <!--入量-->
            <tr>
              <td rowspan="2">
                入量
              </td>
              <td style="text-align: right;">饮入量(ml)</td>
              <td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length>0"  v-for="InputClsobject in FixedGuardianshipChartInfoList" style="">{{InputClsobject.InputCls.Intake}}</td>
              <td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length==0" v-for="cellength in [1,2,3,4,5,6,7,8,9,10]"></td>
            </tr>
            <tr>
              <td style="text-align: right;">输入量(ml)</td>
              <td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length>0"  v-for="InputClsobject in FixedGuardianshipChartInfoList" style="">{{InputClsobject.InputCls.Input}}</td>
              <td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length==0" v-for="cellength in [1,2,3,4,5,6,7,8,9,10]"></td>
            </tr>
    
            <!--血压-->
            <tr>
              <td rowspan="2">
                血压
              </td>
              <td style="text-align: right;">收缩压(mmHg)</td>
              <td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length>0"  v-for="BloodPressureDetailobj in FixedGuardianshipChartInfoList" style="">{{BloodPressureDetailobj.BloodPressureDetail.SystolicPressure}}</td>
              <td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length==0" v-for="cellength in [1,2,3,4,5,6,7,8,9,10]"></td>
            </tr>
            <tr>
              <td style="text-align: right;">舒张压(mmHg)</td>
              <td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length>0"  v-for="BloodPressureDetailobj in FixedGuardianshipChartInfoList" style="">{{BloodPressureDetailobj.BloodPressureDetail.DiastolicPressure}}</td>
              <td v-if="FixedGuardianshipChartInfoList.length!==undefined && FixedGuardianshipChartInfoList.length==0" v-for="cellength in [1,2,3,4,5,6,7,8,9,10]"></td>
            </tr>
    
            <!--手术-->
            <!--<tr>-->
              <!--<td  style="text-align: right;" colspan="2">手术</td>-->
              <!--<td  v-for="OperationInfoListinfo in OperationInfoList" style="">-->
                    <!--<span class="iconcolor OperationBacImg" v-if="OperationInfoListinfo.IsUse">-->
                      <!--<p class="tdtip">-->
                        <!--<span  v-for="OprLists in OperationInfoListinfo.OprList" v-if="OprLists.IsUse">{{OprLists.OprInfo}}<br></span>-->
                      <!--</p>-->
                    <!--</span>-->
              <!--</td>-->
              <!--<td v-if="OperationInfoList.length!==undefined && OperationInfoList.length==0" v-for="cellength in [1,2,3,4,5,6,7,8,9,10]"></td>-->
            <!--</tr>-->
    
            <!--病原学送检申请-->
            <!--<tr>-->
              <!--<td  style="text-align: right;" colspan="2">病原学送检申请</td>-->
              <!--<td  v-for="PathogenicExaminationListinfo in PathogenicExaminationList" style="">-->
                    <!--<span class="PEiconcolor" v-if="PathogenicExaminationListinfo.IsUse" style="color: green">-->
                      <!---->
                      <!--<p class="PEtdtip">-->
                        <!--<span  v-for="PElist in PathogenicExaminationListinfo.ExamList" v-if="PElist.IsUse">-->
                          <!--{{PElist.RequestNo}}&nbsp;-->
                          <!--{{PElist.SamplingTime}}&nbsp;-->
                          <!--{{PElist.LabName}}&nbsp;-->
                          <!--{{PElist.ReportTime}}&nbsp;-->
                          <!--{{PElist.LabResult}}&nbsp;-->
                          <!--<br></span>-->
                      <!--</p>-->
                    <!--</span>-->
              <!--</td>-->
              <!--<td v-if="PathogenicExaminationList.length!==undefined && PathogenicExaminationList.length==0" v-for="cellength in [1,2,3,4,5,6,7,8,9,10]"></td>-->
            <!--</tr>-->
    
            <!--药品-->
            <tr v-for="DrugNameArrays in YAntibacterialDrugList">
              <td  style="text-align: right;" colspan="2">{{DrugNameArrays.DrugName}}</td>
              <td  v-for="tableDatainfo in AntibacterialDrugList">
                              <span class="Drugiconcolor" v-for="drugs in tableDatainfo.AntibacterialDrugList" v-if="drugs.DrugCode==DrugNameArrays.DrugCode&&drugs.IsUse">
                                <span class="Drugtdtip">
                                  <!--<span v-if="drugs.IsTemp==1">【临】&nbsp;&nbsp;</span>-->
                                  <!--<span v-if="drugs.IsTemp==0">【长】&nbsp;&nbsp;</span>-->
                                  {{drugs.DrugInfo}}
                                </span>
                              </span>
              </td>
            </tr>
    
            <!--自定义项目检验结果项目-->
            <tr v-for="defineLabNameArrays in YUserDefineLabList">
              <td  style="text-align: right;" colspan="2">{{defineLabNameArrays.ItemName}}</td>
              <td  v-for="UserDefineLabListinfo in UserDefineLabList">
                              <span class="Drugiconcolor" v-for="DefineLabS in UserDefineLabListinfo.UserDefineLabList" v-if="DefineLabS.ItemCode==defineLabNameArrays.ItemCode&&DefineLabS.IsUse">
                                <!--<span class="Drugtdtip">{{DefineLabS.LabInfo}}</span>-->
                                <span class="Drugtdtip">
                                  <span>{{DefineLabS.TakeTime}}&nbsp;</span>
                                  <!--<span>{{DefineLabS.LabResult}}&nbsp;</span>-->
                                  <span v-if="DefineLabS.ResultFlag=='H'" style="color: red;">{{DefineLabS.LabResult}}&nbsp;&nbsp; </span>
                                  <span v-if="DefineLabS.ResultFlag=='M'">{{DefineLabS.LabResult}}</span>
                                  <span v-if="DefineLabS.ResultFlag=='L'" style="color: red;">{{DefineLabS.LabResult}}&nbsp;&nbsp; </span>
                                  <span v-if="DefineLabS.ResultFlag=='P'" style="color: red;">{{DefineLabS.LabResult}}&nbsp;阳性&nbsp; </span>
                                  <span v-if="DefineLabS.ResultFlag=='Q'" style="color: red;">{{DefineLabS.LabResult}}&nbsp;弱阳性&nbsp; </span>
                                  <span v-if="DefineLabS.ResultFlag=='N'" style="color: red;">{{DefineLabS.LabResult}}&nbsp;阴性&nbsp; </span>
                                  <span v-if="DefineLabS.ResultFlag=='E'" style="color: red;">{{DefineLabS.LabResult}}&nbsp;错误&nbsp; </span>
                                  <span>{{DefineLabS.Range}}&nbsp; </span>
                                  <span>{{DefineLabS.Unit}}&nbsp; </span>
                                </span>
                              </span>
              </td>
            </tr>
    
            <!--自定义项目药品-->
            <tr v-for="YUserDefineDrugListNameArrays in YUserDefineDrugList">
              <td style="" colspan="2">{{YUserDefineDrugListNameArrays.DrugName}}</td>
              <td  v-for="UserDefineLabListinfo in UserDefineDrugList">
                              <span class="Drugiconcolor" v-for="UserDefineDrugListS in UserDefineLabListinfo.UserDefineDrugList" v-if="UserDefineDrugListS.DrugCode==YUserDefineDrugListNameArrays.DrugCode&&UserDefineDrugListS.IsUse">
                                <span class="Drugtdtip">{{UserDefineDrugListS.DrugInfo}}</span>
                              </span>
              </td>
            </tr>
    
          </table>
        </div>
    
      </div>
    </template>
    
    <script>
      export default {
        name: 'hello',
        data () {
          return {
            AntibacterialDrugList: [],
            YAntibacterialDrugList: [],//药品y轴
            /*每天固定所有数据*/
            FixedGuardianshipChartInfoList: [
                {
              Date: "2019-09-28",//日期
              InhsopCount: "40",//住院天数
              Pulse: "100",//脉搏
              Breathing: "20",//呼吸
              Temperature: "36",//体温
              /*出量*/
              OuputCls: {
                UrineVolume: "10",
                StoolTimes: "20",
                InducedFlow: "30",
                Other: "40"
              },
              /*入量*/
              InputCls: {
                Intake: "50",
                Input: "60"
              },
              /*血压*/
              BloodPressureDetail: {
                SystolicPressure: "70",
                DiastolicPressure: "80"
              },
              PainLevelList: [3]//疼痛评分
            }, {
              Date: "2019-09-29",
              InhsopCount: "41",
              Pulse: "90",
              Breathing: "63",
              Temperature: "40",
                  /*出量*/
                  OuputCls: {
                    UrineVolume: "10",
                    StoolTimes: "20",
                    InducedFlow: "30",
                    Other: "40"
                  },
                  /*入量*/
                  InputCls: {
                    Intake: "50",
                    Input: "60"
                  },
                  /*血压*/
                  BloodPressureDetail: {
                    SystolicPressure: "70",
                    DiastolicPressure: "80"
                  },
                  PainLevelList: [3]//疼痛评分
            }, {
              Date: "2019-09-30",
              InhsopCount: "42",
              Pulse: "80",
              Breathing: "62",
              Temperature: "38",
                  /*出量*/
                  OuputCls: {
                    UrineVolume: "10",
                    StoolTimes: "20",
                    InducedFlow: "30",
                    Other: "40"
                  },
                  /*入量*/
                  InputCls: {
                    Intake: "50",
                    Input: "60"
                  },
                  /*血压*/
                  BloodPressureDetail: {
                    SystolicPressure: "70",
                    DiastolicPressure: "80"
                  },
                  PainLevelList: [3]//疼痛评分
            }, {
              Date: "2019-10-01",
              InhsopCount: "43",
              Pulse: "80",
              Breathing: "15",
              Temperature: "35",
                  /*出量*/
                  OuputCls: {
                    UrineVolume: "10",
                    StoolTimes: "20",
                    InducedFlow: "30",
                    Other: "40"
                  },
                  /*入量*/
                  InputCls: {
                    Intake: "50",
                    Input: "60"
                  },
                  /*血压*/
                  BloodPressureDetail: {
                    SystolicPressure: "70",
                    DiastolicPressure: "80"
                  },
                  PainLevelList: [3]//疼痛评分
            }, {
              Date: "2019-10-02",
              InhsopCount: "44",
              Pulse: "120",
              Breathing: "14",
              Temperature: "37",
                  /*出量*/
                  OuputCls: {
                    UrineVolume: "10",
                    StoolTimes: "20",
                    InducedFlow: "30",
                    Other: "40"
                  },
                  /*入量*/
                  InputCls: {
                    Intake: "50",
                    Input: "60"
                  },
                  /*血压*/
                  BloodPressureDetail: {
                    SystolicPressure: "70",
                    DiastolicPressure: "80"
                  },
                  PainLevelList: [3]//疼痛评分
            }, {
              Date: "2019-10-03",
              InhsopCount: "45",
              Pulse: "80",
              Breathing: "36",
              Temperature: "37",
                  /*出量*/
                  OuputCls: {
                    UrineVolume: "10",
                    StoolTimes: "20",
                    InducedFlow: "30",
                    Other: "40"
                  },
                  /*入量*/
                  InputCls: {
                    Intake: "50",
                    Input: "60"
                  },
                  /*血压*/
                  BloodPressureDetail: {
                    SystolicPressure: "70",
                    DiastolicPressure: "80"
                  },
                  PainLevelList: [3]//疼痛评分
            }, {
              Date: "2019-10-04",
              InhsopCount: "46",
              Pulse: "90",
              Breathing: "33",
              Temperature: "35",
                  /*出量*/
                  OuputCls: {
                    UrineVolume: "10",
                    StoolTimes: "20",
                    InducedFlow: "30",
                    Other: "40"
                  },
                  /*入量*/
                  InputCls: {
                    Intake: "50",
                    Input: "60"
                  },
                  /*血压*/
                  BloodPressureDetail: {
                    SystolicPressure: "70",
                    DiastolicPressure: "80"
                  },
                  PainLevelList: [3]//疼痛评分
            }, {
              Date: "2019-10-05",
              InhsopCount: "47",
              Pulse: "80",
              Breathing: "34",
              Temperature: "38",
                  /*出量*/
                  OuputCls: {
                    UrineVolume: "10",
                    StoolTimes: "20",
                    InducedFlow: "30",
                    Other: "40"
                  },
                  /*入量*/
                  InputCls: {
                    Intake: "50",
                    Input: "60"
                  },
                  /*血压*/
                  BloodPressureDetail: {
                    SystolicPressure: "70",
                    DiastolicPressure: "80"
                  },
                  PainLevelList: [3]//疼痛评分
            }, {
              Date: "2019-10-06",
              InhsopCount: "48",
              Pulse: "70",
              Breathing: "52",
              Temperature: "35",
                  /*出量*/
                  OuputCls: {
                    UrineVolume: "10",
                    StoolTimes: "20",
                    InducedFlow: "30",
                    Other: "40"
                  },
                  /*入量*/
                  InputCls: {
                    Intake: "50",
                    Input: "60"
                  },
                  /*血压*/
                  BloodPressureDetail: {
                    SystolicPressure: "70",
                    DiastolicPressure: "80"
                  },
                  PainLevelList: [3]//疼痛评分
            }, {
              Date: "2019-10-07",
              InhsopCount: "49",
              Pulse: "110",
              Breathing: "11",
              Temperature: "37",
                  /*出量*/
                  OuputCls: {
                    UrineVolume: "10",
                    StoolTimes: "20",
                    InducedFlow: "30",
                    Other: "40"
                  },
                  /*入量*/
                  InputCls: {
                    Intake: "50",
                    Input: "60"
                  },
                  /*血压*/
                  BloodPressureDetail: {
                    SystolicPressure: "70",
                    DiastolicPressure: "80"
                  },
                  PainLevelList: [3]//疼痛评分
            }, {
              Date: "2019-10-08",
              InhsopCount: "50",
              Pulse: "90",
              Breathing: "12",
              Temperature: "36",
                  /*出量*/
                  OuputCls: {
                    UrineVolume: "10",
                    StoolTimes: "20",
                    InducedFlow: "30",
                    Other: "40"
                  },
                  /*入量*/
                  InputCls: {
                    Intake: "50",
                    Input: "60"
                  },
                  /*血压*/
                  BloodPressureDetail: {
                    SystolicPressure: "70",
                    DiastolicPressure: "80"
                  },
                  PainLevelList: [3]//疼痛评分
            }, {
              Date: "2019-10-09",
              InhsopCount: "51",
              Pulse: "70",
              Breathing: "14",
              Temperature: "38.8",
                  /*出量*/
                  OuputCls: {
                    UrineVolume: "10",
                    StoolTimes: "20",
                    InducedFlow: "30",
                    Other: "40"
                  },
                  /*入量*/
                  InputCls: {
                    Intake: "50",
                    Input: "60"
                  },
                  /*血压*/
                  BloodPressureDetail: {
                    SystolicPressure: "70",
                    DiastolicPressure: "80"
                  },
                  PainLevelList: [3]//疼痛评分
            }, {
              Date: "2019-10-10",
              InhsopCount: "52",
              Pulse: "70",
              Breathing: "15",
              Temperature: "36",
                  /*出量*/
                  OuputCls: {
                    UrineVolume: "10",
                    StoolTimes: "20",
                    InducedFlow: "30",
                    Other: "40"
                  },
                  /*入量*/
                  InputCls: {
                    Intake: "50",
                    Input: "60"
                  },
                  /*血压*/
                  BloodPressureDetail: {
                    SystolicPressure: "70",
                    DiastolicPressure: "80"
                  },
                  PainLevelList: [3]//疼痛评分
            }, {
              Date: "2019-10-11",
              InhsopCount: "53",
              Pulse: "90",
              Breathing: "30",
              Temperature: "36.5",
                  /*出量*/
                  OuputCls: {
                    UrineVolume: "10",
                    StoolTimes: "20",
                    InducedFlow: "30",
                    Other: "40"
                  },
                  /*入量*/
                  InputCls: {
                    Intake: "50",
                    Input: "60"
                  },
                  /*血压*/
                  BloodPressureDetail: {
                    SystolicPressure: "70",
                    DiastolicPressure: "80"
                  },
                  PainLevelList: [3]//疼痛评分
            }, {
              Date: "2019-10-12",
              InhsopCount: "54",
              Pulse: "80",
              Breathing: "25",
              Temperature: "36.5",
                  /*出量*/
                  OuputCls: {
                    UrineVolume: "10",
                    StoolTimes: "20",
                    InducedFlow: "30",
                    Other: "40"
                  },
                  /*入量*/
                  InputCls: {
                    Intake: "50",
                    Input: "60"
                  },
                  /*血压*/
                  BloodPressureDetail: {
                    SystolicPressure: "70",
                    DiastolicPressure: "80"
                  },
                  PainLevelList: [3]//疼痛评分
            }],
            /*手术*/
            OperationInfoList: [],
            /*病原学送检申请*/
            PathogenicExaminationList: [],
            /*自定义药品X轴药品使用数据情况循环,加hover标注了用药途径*/
            UserDefineDrugList: [
              {
                Date: "2019-09-28",
                UserDefineDrugList: [
                {
                  DrugCode: "Y00000000668",
                  DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: false//是否显示划线背景
                }, {
                  DrugCode: "Y00000000532",
                  DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: true
                },
                  {
                    DrugCode: "Y00000000667",
                    DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                    IsTemp: 0,
                    IsUse: false
                  }, {
                    DrugCode: "Y00000000537",
                    DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                    IsTemp: 0,
                    IsUse: true
                  }
                ]
            }, {
              Date: "2019-09-29",
              UserDefineDrugList: [{
                DrugCode: "Y00000000668",
                DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                IsTemp: 0,
                IsUse: false
              }, {
                DrugCode: "Y00000000537",
                DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                IsTemp: 0,
                IsUse: true
              },
                {
                  DrugCode: "Y00000000667",
                  DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: false
                }, {
                  DrugCode: "Y00000000532",
                  DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: true
                }]
            }, {
              Date: "2019-09-30",
              UserDefineDrugList: [{
                DrugCode: "Y00000000668",
                DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                IsTemp: 0,
                IsUse: false
              }, {
                DrugCode: "Y00000000532",
                DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                IsTemp: 0,
                IsUse: true
              },
                {
                  DrugCode: "Y00000000667",
                  DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: false
                }, {
                  DrugCode: "Y00000000537",
                  DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: true
                }]
            }, {
              Date: "2019-10-01",
              UserDefineDrugList: [{
                DrugCode: "Y00000000668",
                DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                IsTemp: 0,
                IsUse: false
              }, {
                DrugCode: "Y00000000532",
                DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                IsTemp: 0,
                IsUse: false
              },
                {
                  DrugCode: "Y00000000667",
                  DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: false
                }, {
                  DrugCode: "Y00000000537",
                  DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: false
                }]
            }, {
              Date: "2019-10-02",
              UserDefineDrugList: [{
                DrugCode: "Y00000000668",
                DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                IsTemp: 0,
                IsUse: true
              }, {
                DrugCode: "Y00000000532",
                DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                IsTemp: 0,
                IsUse: false
              },
                {
                  DrugCode: "Y00000000667",
                  DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: true
                }, {
                  DrugCode: "Y00000000537",
                  DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: false
                }]
            }, {
              Date: "2019-10-03",
              UserDefineDrugList: [{
                DrugCode: "Y00000000668",
                DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                IsTemp: 0,
                IsUse: true
              }, {
                DrugCode: "Y00000000532",
                DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                IsTemp: 0,
                IsUse: false
              },
                {
                  DrugCode: "Y00000000667",
                  DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: true
                }, {
                  DrugCode: "Y00000000537",
                  DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: false
                }]
            }, {
              Date: "2019-10-04",
              UserDefineDrugList: [{
                DrugCode: "Y00000000668",
                DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                IsTemp: 0,
                IsUse: true
              }, {
                DrugCode: "Y00000000532",
                DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                IsTemp: 0,
                IsUse: false
              },
                {
                  DrugCode: "Y00000000667",
                  DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: true
                }, {
                  DrugCode: "Y00000000537",
                  DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: false
                }]
            }, {
              Date: "2019-10-05",
              UserDefineDrugList: [{
                DrugCode: "Y00000000668",
                DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                IsTemp: 0,
                IsUse: false
              }, {
                DrugCode: "Y00000000532",
                DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                IsTemp: 0,
                IsUse: false
              },
                {
                  DrugCode: "Y00000000667",
                  DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: false
                }, {
                  DrugCode: "Y00000000537",
                  DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: false
                }]
            }, {
              Date: "2019-10-06",
              UserDefineDrugList: [{
                DrugCode: "Y00000000668",
                DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                IsTemp: 0,
                IsUse: false
              }, {
                DrugCode: "Y00000000532",
                DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                IsTemp: 0,
                IsUse: true
              },
                {
                  DrugCode: "Y00000000667",
                  DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: false
                }, {
                  DrugCode: "Y00000000537",
                  DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: true
                }]
            }, {
              Date: "2019-10-07",
              UserDefineDrugList: [{
                DrugCode: "Y00000000668",
                DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                IsTemp: 0,
                IsUse: false
              }, {
                DrugCode: "Y00000000532",
                DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                IsTemp: 0,
                IsUse: true
              },
                {
                  DrugCode: "Y00000000667",
                  DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: false
                }, {
                  DrugCode: "Y00000000537",
                  DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: true
                }]
            }, {
              Date: "2019-10-08",
              UserDefineDrugList: [{
                DrugCode: "Y00000000668",
                DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                IsTemp: 0,
                IsUse: false
              }, {
                DrugCode: "Y00000000532",
                DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                IsTemp: 0,
                IsUse: true
              },
                {
                  DrugCode: "Y00000000667",
                  DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: false
                }, {
                  DrugCode: "Y00000000537",
                  DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: true
                }]
            }, {
              Date: "2019-10-09",
              UserDefineDrugList: [{
                DrugCode: "Y00000000668",
                DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                IsTemp: 0,
                IsUse: false
              }, {
                DrugCode: "Y00000000532",
                DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                IsTemp: 0,
                IsUse: false
              },
                {
                  DrugCode: "Y00000000667",
                  DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: false
                }, {
                  DrugCode: "Y00000000537",
                  DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: false
                }]
            }, {
              Date: "2019-10-10",
              UserDefineDrugList: [{
                DrugCode: "Y00000000668",
                DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                IsTemp: 0,
                IsUse: true
              }, {
                DrugCode: "Y00000000532",
                DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                IsTemp: 0,
                IsUse: true
              },
                {
                  DrugCode: "Y00000000667",
                  DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: true
                }, {
                  DrugCode: "Y00000000537",
                  DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: true
                }]
            }, {
              Date: "2019-10-11",
              UserDefineDrugList: [{
                DrugCode: "Y00000000668",
                DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                IsTemp: 0,
                IsUse: true
              }, {
                DrugCode: "Y00000000532",
                DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                IsTemp: 0,
                IsUse: true
              },
                {
                  DrugCode: "Y00000000667",
                  DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: true
                }, {
                  DrugCode: "Y00000000537",
                  DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: true
                }]
            }, {
              Date: "2019-10-12",
              UserDefineDrugList: [{
                DrugCode: "Y00000000668",
                DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                IsTemp: 0,
                IsUse: true
              }, {
                DrugCode: "Y00000000532",
                DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                IsTemp: 0,
                IsUse: true
              },
                {
                  DrugCode: "Y00000000667",
                  DrugInfo: "【长】08-29 11:07:59  10mg/QD/im  注射用胸腺五肽  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: true
                }, {
                  DrugCode: "Y00000000537",
                  DrugInfo: "【长】10-07 16:07:59  2.5mg/ST/P.O  来曲唑片  (孔翔宇)",
                  IsTemp: 0,
                  IsUse: true
                }]
            }],
            /*自定义药品y轴数据循环*/
            YUserDefineDrugList: [
              {
              DrugName: "青霉素",
              DrugCode: "Y00000000668"
            }, {
              DrugName: "来曲唑片",
              DrugCode: "Y00000000532"
            },{
                DrugName: "葡萄糖",
                DrugCode: "Y00000000667"
              }, {
                DrugName: "阿莫西林",
                DrugCode: "Y00000000537"
              }],
            /*自定义项目检验结果项目*/
            UserDefineLabList: [],
            /*自定义项目检验结果项目Y轴*/
            YUserDefineLabList: [],
    
    
            //图表体温脉搏静态数据
            // newdaydates:'',
            // ISBTN:'',
            // //体温,脉搏,呼吸,出量,入量,血压数据
            // FixedGuardianshipChartInfoList:[],
            // //手术名称数组
            // YOprList:[],
            // //手术数据
            // OperationInfoList:[],
            // //药品名称数组
            // YAntibacterialDrugList:[],
            // //药品数据
            // AntibacterialDrugList: [],
            // //自定义项目检验结果名称数组
            // YUserDefineLabList:[],
            // //自定义项目检验结果数据
            // UserDefineLabList:[],
            //自定义项目药品名称数组
            // YUserDefineDrugList:[],
            // //自定义项目药品数据
            // UserDefineDrugList:[],
            // //病原学送检
            // PathogenicExaminationList:[],
            //住院天数Array
            // dayS:[1,2,3,4,5,6,7,8,9,10],
    
    
            //异常检验结果每行内容弹出框静态
            // ShowTestresult:false,
            // LabDetailList:[],//详情表格数据
            //
            // CaseId:'',
            // isInHospital:'',
            // IEndDate:'',
    
          }
        },
        methods: {
          drawLine(){
            // 基于准备好的dom,初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('myChart'));
            //处理数据赋值到echarts
            var dateArray=[];
            var twArray=[];
            var mbArray=[];
            for(var i=0;i<this.FixedGuardianshipChartInfoList.length;i++){
              dateArray.push(this.FixedGuardianshipChartInfoList[i].Date);
              twArray.push(this.FixedGuardianshipChartInfoList[i].Temperature);
              mbArray.push(this.FixedGuardianshipChartInfoList[i].Pulse);
            }
            // 绘制图表
            myChart.setOption({
              title: {
                text: '',
                x: 'center',
                align: 'right',
                textStyle:{
                  color:'#000',
                  fontSize:14,
                  fontWeight:'bold',
                },
              },
              tooltip: {
                trigger: 'axis'
              },
              yAxis : [
                {
                  name:'脉搏(次/分)',
                  type: 'value',
                  position:'left',
                  offset:80,//y轴偏移
                  min: 30,
                  max: 150,
                  interval: 10,
                  axisLabel: {
                    textStyle: {
                      color: '#1369a6'
                    }
                  },
                  axisLine: {
                    lineStyle: {
                      type: 'solid',
                      color:'#1369a6',
                      width:'1'
                    }
                  },
                },
                {
                  name:'体温(℃)',
                  type: 'value',
                  min: 35.0,
                  max: 41.0,
                  interval:0.5 ,
    
                  position:'left',//y轴位置
                  axisLabel: {
                    formatter: '           {value}',
                    textStyle: {
                      color: 'red'
                    }
                  },
                  axisLine: {
                    lineStyle: {
                      type: 'solid',
                      color:'red',
                      width:'1'
                    }
                  },
                },
              ],
              legend: {
                show:true,
                data:['脉搏','体温'],
                left:"center"
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              toolbox: {
                show: true, //是否显示
                orient: 'horizontal', //水平显示(vertical为垂直显示)
                x: '1533px', //距离X轴多远
                feature: {
                  saveAsImage: {
                    name:'体温脉搏图'
                  }
                }
              },
              xAxis: {
                type: 'category',
                data: dateArray,
                axisLabel:{//间隔
                  interval:0,
                }
              },
              series: [{
                name:"体温",
                data: twArray,
                type: 'line',
                yAxisIndex:1,//数据对应y轴
                lineStyle: {
                  type: 'solid',
                  color:'red',
                  width:'1'
                }
              },
                {
                  name:"脉搏",
                  data: mbArray,
                  type: 'line',
                  yAxisIndex:0,//数据对应y轴
                  lineStyle: {
                    type: 'solid',
                    color:'#1369a6',
                    width:'1'
                  }
                }
              ]
            })
          },
          //第一次进入页面表格传递时间数据获取十天//获取图表数据函数
          // echartsCreated(){
          //
          //   const loading= this.$loading({//加载中loading
          //     lock: true,
          //     text: '努力加载中',
          //     spinner: 'el-icon-loading',
          //     background: 'rgba(250,250,250,1)',
          //     target: document.querySelector('#lodingIdTable')
          //   });//loading.close();//关闭加载中loading
          //   // 获取入院时间时间格式的时间戳
          //   var stringTime = this.$route.params.StartDate;
          //
          //   var now = new Date(stringTime);
          //   //时间戳转为字符串格式
          //   var year = now.getFullYear();
          //   var month = now.getMonth() + 1;
          //   var date = now.getDate();
          //   if (month >= 0 && month <= 9) {
          //     month = "0" + month;
          //   }
          //   if (date >= 0 && date <= 9) {
          //     date = "0" + date;
          //   }
          //   var oneDay = year + "-" + month + "-" + date;//当前开头第一天日期传回后台
          //   var IsInhospIS=this.isInHospital;//判断一下布尔
          //   this.$axios({
          //     method:'get',
          //     url:window.apiUrl+'/pc/patguardianshipchart/GetContinueFixedGuardianshipChart',
          //     params: {
          //       CaseId:this.CaseId,
          //       PatType:IsInhospIS,
          //       IEndDate:this.IEndDate,
          //       StartDate:oneDay,
          //       TotalDays:10
          //     },
          //   }).then(res => {
          //     if(res.data.Errs.length==0){
          //       let echartsdata=res.data.Result.FixedGuardianshipChartInfoList;//拿到数据处理渲染图表echarts
          //       this.FixedGuardianshipChartInfoList=res.data.Result.FixedGuardianshipChartInfoList;
          //       this.YOprList=res.data.Result.YOprList;//放出手术信息即可
          //       this.OperationInfoList=res.data.Result.OperationInfoList;//放出手术信息即可
          //       this.YAntibacterialDrugList=res.data.Result.YAntibacterialDrugList;//放出药品信息即可
          //       this.AntibacterialDrugList=res.data.Result.AntibacterialDrugList;//放出药品信息即可
          //       this.PathogenicExaminationList=res.data.Result.PathogenicExaminationList;//病原学送检数据
          //       var ISBTN='';
          //       for(var i=0;i<echartsdata.length;i++){
          //         ISBTN=echartsdata[0].Date
          //       };
          //       this.drawLine();//调用echarts函数
          //       this.ISBTN=ISBTN;
          //     }else{
          //       var Errs=res.data.Errs;
          //       var errs2=Errs[0];
          //       this.$message({
          //         type: "error",
          //         message: errs2
          //       });
          //     }
          //   }).catch(err => { //请求失败就会捕获报错信息
          //     //err.response可拿到服务器返回的报错数据
          //     //console.log(res.data.errs)
          //   });
          //
          //   //调用自定义项目接口并赋值
          //   this.$axios({
          //     method:'get',
          //     url:window.apiUrl+'/pc/patguardianshipchart/GetContinueUserDefineGuardianshipChart',
          //     params: {
          //       CaseId:this.CaseId,
          //       PatType:IsInhospIS,
          //       IEndDate:this.IEndDate,
          //       StartDate:oneDay,
          //       TotalDays:10
          //     },
          //   }).then(res => {
          //     //console.log(res)//拿到数据处理渲染图表echarts
          //     this.YUserDefineLabList=res.data.Result.YUserDefineLabList;//放出检验结果信息即可
          //     this.UserDefineLabList=res.data.Result.UserDefineLabList;//放出检验结果信息即可
          //     this.YUserDefineDrugList=res.data.Result.YUserDefineDrugList;//自定义药品
          //     this.UserDefineDrugList=res.data.Result.UserDefineDrugList;//自定义药品
          //     loading.close();//关闭加载中loading
          //   }).catch(err => { //请求失败就会捕获报错信息
          //     //err.response可拿到服务器返回的报错数据
          //     //console.log(res.data.errs)
          //   });
          // },
        },
        mounted(){
          this.drawLine();//调用echarts函数
          /*调用*/
          // this.echartsCreated()
        },
      }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    
    
      .borderLeft{
        border-left: 5px solid #1369a6;
        padding-left: 20px;
      }
    
      .btnfive{
        border: solid 1px #dcdfe6;
        border-radius: 4px;
        height: 22px;
        line-height: 22px;
        display: inline-block;
        width: 50px;
        text-align: center;
        font-weight: initial!important;
        cursor: pointer;
        color: #666666;
      }
      /*手术*/
      .iconcolor{
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-top: 4px;
        position:relative;
        z-index:2;
        /*background-color: pink;*/
      }
      .iconcolor:hover{
        z-index:3;
        /*background:none;*/
      }
      .iconcolor .tdtip  {
        display: none;
      }
      .iconcolor:hover .tdtip  {
        display: block;
        width: 400px;
        max-height: 80px;
        overflow-y: auto;
        position: absolute;
        top: 8px;
        border-radius: 20px;
        /*hover背景色*/
        background-color:  #1369a6;
        opacity:0.8;
        color: #ffffff;
        /*word-break: break-all;*/
      }
    
    
      /*病原学送检*/
      .PEiconcolor{
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-top: 4px;
        position:relative;
        z-index:2;
        /*background-color: pink;*/
      }
      .PEiconcolor:hover{
        z-index:3;
        /*background:none;*/
      }
      .PEiconcolor .PEtdtip  {
        display: none;
      }
      .PEiconcolor:hover .PEtdtip  {
        display: block;
        width: 400px;
        max-height: 80px;
        overflow-y: auto;
        position: absolute;
        top: 8px;
        border-radius: 20px;
        /*hover背景色*/
        background-color:  #1369a6;
        opacity:0.8;
        color: #ffffff;
        /*word-break: break-all;*/
      }
    
    
      .ADDbackground{
        background-color:  #1369a6;
        color: #ffffff;
        border: solid 1px #1369a6!important;
      }
    
    
      /*药品*/
      .Drugiconcolor{
        display: inline-block;
        width: 100%;
        height: 10px;
        margin-top: 4px;
        position:relative;
        z-index:2;
        background-color: #1369a6;
      }
      .Drugiconcolor:hover{
        z-index:3;
        /*background:none;*/
      }
      .Drugiconcolor .Drugtdtip  {
        display: none;
      }
      .Drugiconcolor:hover .Drugtdtip  {
        display: block;
        width: 400px;
        max-height: 80px;
        overflow-y: auto;
        border-radius: 20px;
        position: absolute;
        top: 8px;
        /*hover背景色*/
        background-color: #1369a6;
        opacity:0.8;
        color: #ffffff;
        word-break: break-all;
      }
    
    
    
      .specialheader{
        /*border-left: 5px solid #136aa7;*/
        height: 28px;
        line-height: 28px;
      }
      .specialheader>span{
        font-size: 14px;
        font-weight: bold;
        margin-left: 20px;
      }
    
      #infotableid,#infotableid tr th, #infotableid tr td {
        border:1px solid #e5e5e5;
      }
      #infotableid {
        width: 1568px;
        min-height: 25px;
        line-height: 25px;
        text-align: center;
        border-collapse: collapse;
        /*padding:2px;*/
        margin-left: -1px;
      }
      /*特殊提示*/
      #thereinfo{
        display: flex;
        margin-top: 10px;
      }
      .ADRinfo{
        /*border: 1px solid red;*/
        min-width: 300px;
        height: 200px;
        background-color: #ffffff;
        box-shadow: 2px 4px 30px 6px
        rgba(219, 225, 231, 0.8);
        border-radius: 6px;
        margin-right: 8px;
        margin-bottom: 8px;
        /*float: left;*/
        cursor: pointer;
        padding: 10px;
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 15px;
        /*flex: 1;*/
      }
      .ADRinfo>p{
        margin-bottom: 15px;
      }
      .LabPromptListBox{
        padding: 10px;
        width: 300px;
        height: 200px;
        background-color: #ffffff;
        box-shadow: 2px 4px 30px 6px
        rgba(219, 225, 231, 0.8);
        border-radius: 6px;
        margin-right: 8px;
        margin-bottom: 8px;
        /*float: left;*/
        cursor: pointer;
      }
      .PASSBox{
        width: 300px;
        height: 200px;
        background-color: #ffffff;
        box-shadow: 2px 4px 30px 6px
        rgba(219, 225, 231, 0.8);
        border-radius: 6px;
        margin-right: 8px;
        margin-bottom: 8px;
        /* float: left; */
        cursor: pointer;
        padding: 10px;
      }
    
    
    
      /*弹出框*/
      .modalshow{
        width: 100%;
        height: 100%;
        z-index: 30;
        background-color: rgba(0,0,0,0.8);
        position: fixed;
        top:0;
        left: 0;
        right: 0;
        bottom: 0;
    
      }
      .modalsize{
        padding: 50px;
        width: 1100px;
        height: 300px;
        background-color: #ffffff;
        overflow-y: auto;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
      .modalsizexz{
        padding: 50px;
        width: 580px;
        height: 400px;
        background-color: #ffffff;
        overflow-y: auto;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
      .btnbox{
        text-align: right;
        margin-top: 25px;
      }
      .btnboxxz{
        text-align: center;
        margin-top: 50px;
      }
    
      .outdel{
        display: inline-block;
      }
      .adddel{
        display: inline-block;
        margin-left: 20px;
      }
      /*#modalshow{*/
      /*z-index: 1000!important;*/
      /*}*/
      /*监护图表*/
      .jhtable{
        width: 100%;
        /*height: 500px;*/
        /*border: 1px solid #ebeef5;*/
      }
      .jhtbsx{
        /*padding-left: 20px;*/
      }
      .jhtbsx>p{
        margin-top: 10px;
      }
      .titlecustom{
        background-color: #ecf5ff;
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: #000000;
        font-weight: bold;
        font-size: 16px;
        position: relative;
        /*margin-bottom: 5px;*/
      }
      .titlecustom span{
        display: inline-block;
        /*margin-left: 20px;*/
      }
      /*s手术背景图片*/
      .OperationBacImg{
        /*background-image: url('../../../../static/PC/img/lampIcon/OperationIcon.png');*/
        /*background-color: none;*/
      }
    
      #TestresultChart{
        width: 900px;
        height: 300px;
      }
      .Testresultoutdelbtnclass{
        text-align: center;
        margin-top: 30px;
        /*position: absolute;*/
        /*bottom: 0px;*/
      }
    </style>
    
    

    //欢迎大家评论提出意见

    展开全文
  • 原型如下,如何简单的实现甘特图? 谢谢各位了   <p><img alt="" height="457" src="https://img-ask.csdnimg.cn/upload/1623394207953.png" width="1587" /></p>
  • 基于vue实现甘特图实现上下拖拽,达到排班的要求,之前困于没有好的方案,在我研究两周后最终实现甘特图的拖拽效果
  • 基于vue cli3实现甘特图拖拽

    千次阅读 2019-11-14 17:27:31
    基于vue cli3实现甘特图拖拽 因为工作中要用到甘特图,所以我在网上搜索可以用的甘特图,搜索了好多,但是网上搜到大多数都很鸡肋,不能直接使用,最后我在github上搜索到一个相对成熟的甘特图。附上链接...

    基于vue cli3实现甘特图拖拽

    因为工作中要用到甘特图,所以我在网上搜索可以用的甘特图,搜索了好多,但是网上搜到大多数都很鸡肋,不能直接使用,最后我在github上搜索到一个相对成熟的甘特图。附上链接https://github.com/w1301625107/Vue-Gantt-chart
    刚开始我看不懂这个博主写的代码,于是想自己写,但是尝试了几天,最后还是以失败告终。没办法活是我自己的,总得想办法弄出来啊,所以我硬着头皮改造代码。先附上博主的甘特图,我感觉这是我见过颜值最高的甘特图了。
    ,
    因为需求要求做到可拖拽,以下是我实现拖拽的过程。
    在这里插入图片描述
    JS部分
    首先介绍第一个mousedown,当我按下鼠标,我会记录当前块的索引。draggable设为可拖拽。
    在这里插入图片描述
    接着介绍drop,也就是移动到该行触发的事件,这里我用val传参(拖动到指定行的数据)和所有数据对比较,获取该行的索引,接着我会判断拖动的块与该行的块是否冲突。

    附上源码:

    <template>
      <div class="gantt-blocks"
           :style="{height:blockHeight+'px'}">
        <div class="gantt-block gantt-block-top-space"
             :style="{height:topSpace+'px'}">
        </div>
        <div class="gantt-block"
             :style="blockStyle"
             v-for="(data,index) in showDatas"
             @drop="drop($event,data,index)"
             @dragover.prevent
             @click="clickRow(index)"
             :class="[index === rowIndex ? 'rowColor':'']"
             :key="dataKey?data[dataKey]:index">
    <!--      整个数据列表-->
          <template v-if="!customGenerateBlocks">
    <!---->
            <div class="gantt-block-item block"
                 @mousedown="mousedown(data,item,index)"
                 draggable="true"
                 @contextmenu="showMenu(data,item,index)"
                 v-for="(item,index) in concatArray(data)"
                 v-show="isInRenderingTimeRange(item.start)||isInRenderingTimeRange(item.end)"
                 :key="itemKey?item[itemKey]:index"
                 :class="[blockState && (item === data.gtArray[operationIndex]) ? groundFloor : superstratum]"
                 :style="{left:getPosition(item)+'px',width:getWidth(item)+'px'}">
              <slot :data="data"
                    :item="item">
                <div class="gantt-block-defaultBlock">need slot</div>
              </slot>
            </div>
          </template>
    
          <template v-else>
            <slot :data="data"
                  :getPositonOffset="getPositonOffset"
                  :getWidthAbout2Times="getWidthAbout2Times"
                  :isInRenderingTimeRange="isInRenderingTimeRange">need slot</slot>
          </template>
        </div>
      </div>
    </template>
    
    <script>
    import dayjs from "dayjs";
    import dr from "../dynamic-render.js";
    import { isUndef, warn } from "../../utils/tool.js";
    
    export default {
      name: "Blocks",
      mixins: [dr],
      data () {
        return {
          handleIndex:0,//行角标
          handleItem:{},
          handleData:{},//当前行数据
          dataCorner:0,//当前行角标
          dialogVisible: false,
          content: {},
          blockIndex: -1,//行内航班所在行角标
          operationIndex:null,
          blockState:false,
          groundFloor:'groundFloor',
          superstratum:'superstratum'
        }
      },
      props: {
        dataKey: String,
        itemKey: String,
        arrayKeys: {
          type: Array
        },
        scrollLeft: Number,
        cellWidth: {
          type: Number,
          required: true
        },
        scale: {
          type: Number,
          required: true
        },
        widthOfRenderAera: {
          type: Number,
          required: true
        },
        endTimeOfRenderArea: [Number, null],
        startTimeOfRenderArea: [Number, null],
        getPositonOffset: Function,
        getWidthAbout2Times: Function,
        customGenerateBlocks: Boolean,
        editStart: {
          type:Date
        },
        editEnd: {
          type:Date
        },
        state:{
          type:Boolean
        },
        uninstall:{
          type:Boolean
        },
        rowIndex: {
          type:Number
        }
      },
      computed: {
        renderAarrys() {
          let { arrayKeys } = this;
          if (arrayKeys.length > 0) {
            return arrayKeys;
          }
          return ["gtArray"];
        },
        blockStyle() {
          return {
            backgroundSize: `${this.cellWidth}px ${this.cellHeight}px`,
            height: `${this.cellHeight}px`
          };
        }
      },
        watch:{
          state () {
            if(this.state){
              if((Number(dayjs(this.editStart).valueOf())>=Number(this.showDatas[this.dataCorner].gtArray[this.blockIndex-1].end)) &&
                (Number(dayjs(this.editEnd).valueOf())<=Number(this.showDatas[this.dataCorner].gtArray[this.blockIndex+1].start))) {
                this.showDatas[this.dataCorner].gtArray[this.blockIndex].start = dayjs(this.editStart).valueOf()
                this.showDatas[this.dataCorner].gtArray[this.blockIndex].end = dayjs(this.editEnd).valueOf()
              } else {
                this.$emit('creatDialog', true)
              }
            }
          },
          uninstall () {
            if (this.uninstall) {
              this.showDatas[0].gtArray.push(this.handleItem)
              this.showDatas[this.dataCorner].gtArray.splice(this.handleIndex, 1)
              let arr = []
              arr = this.showDatas[0].gtArray
              this.$emit('changeUninstall', false, arr)
            }
            this.$emit('detailsItem', this.handleItem)
          }
        },
      methods: {
        /**
         * 根据renderAarrys拼接需要渲染的数组
         *
         * @param {*} data
         * @returns {[]} 该data中所有需要渲染的数据
         */
        concatArray(data) {
          return this.renderAarrys.reduce((prev, curr) => {
            if (Array.isArray(data[curr])) {
              return prev.concat(data[curr]);
            } else {
              return prev;
            }
          }, []);
        },
        /**
         * 判定数据是否在渲染的时间范围内
         *
         * @param {{time:string}} item
         * @returns {boolean} 该
         */
        isInRenderingTimeRange(time) {
          if (this.heightOfRenderAera === 0) {
            return false;
          }
    
          let { startTimeOfRenderArea, endTimeOfRenderArea } = this;
          if (isUndef(startTimeOfRenderArea) || isUndef(endTimeOfRenderArea)) {
            return false;
          }
          let timeToMs = new Date(time).getTime();
          if (startTimeOfRenderArea <= timeToMs || timeToMs >= endTimeOfRenderArea) {
            return true;
          }
          return false;
        },
        /**
         * 计算时间块长度
         *
         * @param {{start:string,end:string}} block
         * @returns {number}
         */
        getWidth(block) {
          if (isUndef(block.start) || isUndef(block.end)) {
            // warn(`错误,该数据项不含start值 与 end 值 ${JSON.stringify(block)},无法计算宽度值。`)
            return 0;
          }
    
          return this.getWidthAbout2Times(block.start, block.end);
        },
        /**
         * 计算时间块偏移
         *
         * @param {{start:string}} block
         * @returns {number}
         */
        getPosition(block) {
          if (isUndef(block.start)) {
            warn(
              `错误,该数据项不含start 值 ${JSON.stringify(
                block
              )},无法计算偏移值。`
            );
            return 0;
          }
          return this.getPositonOffset(block.start);
        },
        mousedown (data,item, index) {
          this.$emit('showTime', true)
          this.handleItem = item
          this.handleData = data
          this.blockIndex = index
          for(let i = 0;i<this.showDatas.length;i++) {
            if(this.showDatas[i] === data){
              this.dataCorner = i
            }
          }
          this.$emit('nowRow', this.dataCorner)
        },
        drop (event) {
          console.log('event.y', event,Math.ceil((event.y-100)/this.cellHeight-1)-1)
          var endy=Math.ceil((event.y-100)/this.cellHeight-1)-1;
          let data = this.showDatas[endy].gtArray
          //判断是否重叠(不重叠)
          let blockStart = Number(this.handleItem.start)
          let blockEnd = Number(this.handleItem.end)
          let x = 0
          if (Number(endy) === 0) {
            this.$emit('creatState', true)
          } else {
            for(let i=0; i < data.length; i++) {
              if (((blockEnd >= Number(data[i].end)) && (blockStart >= Number(data[i].end))) ||
                ((blockEnd <= Number(data[i].start)) && (blockStart <= Number(data[i].start)))) {
                ++x
              }
            }
            if(x === data.length) {
              data.push(this.handleItem)
              this.showDatas[this.dataCorner].gtArray.splice(this.blockIndex, 1)
              this.$emit('nowRow', endy)
              console.log('this.dataCorner', this.dataCorner, 'this.handleIndex', this.handleIndex)
            } else {
              this.$emit('creatDialog', true)
            }
          }
        },
        newData () {
          console.log('newdata!',this.dataCorner,this.blockState)
          this.operationIndex = this.blockIndex
          this.blockState = true
        },
        clickRow (data) {
          this.$emit('nowRow', data)
        }
      }
    };
    </script>
    
    <style lang="scss">
        .block{
            cursor: move;
            position: fixed;
        }
        .groundFloor{
            z-index: 0;
            position:absolute;
        }
        .superstratum{
            z-index: 1;
            position:absolute;
        }
        .rowColor{
            background-color: #edf3ef;
        }
        .creatColor{
            background-color: #dfe5e1 !important;
        }
    </style>
    
    

    以上就是我的分享,如果有什么问题,欢迎大家留言。
    最后附上我上传的源码,如有需要可自行下载,链接: 甘特图链接.

    展开全文
  • vue中echarts实现甘特图

    千次阅读 2018-12-24 19:55:10
    vue中使用echarts实现甘特图,在网上找了很多代码都不完整,大家可以尝试下面这个从官网搬运过来的阶梯瀑布图,做了小更改 效果如下: &lt;template&gt; &lt;div id="myChart" ref=&...

    vue中使用echarts实现甘特图,在网上找了很多代码都不完整,大家可以尝试下面这个从官网搬运过来的阶梯瀑布图,做了小更改

    效果如下:

    <template>
     <div id="myChart" ref="chart" ></div>
    </template>
    <script>
      export default {
      updated(){
          this.changeView();
        },
        methods: {
          drawLine () {
            // 基于准备好的dom,初始化echarts实例
            // var bar_dv = document.getElementById('bar_dv');
            var barDv = this.$refs.chart;
            if (barDv) {
              console.log('bar_dv不为空');
              let myChart = this.$echarts.init(barDv)
              // 基于准备好的dom,初始化echarts实例
              // let myChart = this.$echarts.init(document.getElementById('myChart'))
              // 绘制图表
              var option = {
                title: {
                  text: '阶梯瀑布图',
                  subtext: 'From ExcelHome',
                  sublink: 'http://e.weibo.com/1341556070/Aj1J2x5a5'
                },
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {            // 坐标轴指示器,坐标轴触发有效
                    type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                  },
                  formatter: function (params) {
                    var tar;
                    if (params[1].value != '-') {
                      tar = params[1];
                    }
                    else {
                      tar = params[0];
                    }
                    return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
                  }
                },
                legend: {
                  data: ['支出', '收入']
                },
                grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
                },
                yAxis: {
                  type: 'category',
                  splitLine: { show: false },
                  data: function () {
                    var list = [];
                    for (var i = 1; i <= 11; i++) {
                      list.push('11月' + i + '日');
                    }
                    return list;
                  }()
                },
                xAxis: {
                  type: 'value'
                },
                series: [
                  {
                    name: '辅助',
                    type: 'bar',
                    stack: '总量',
                    itemStyle: {
                      normal: {
                        barBorderColor: 'rgba(0,0,0,0)',
                        color: 'rgba(0,0,0,0)'
                      },
                      emphasis: {
                        barBorderColor: 'rgba(0,0,0,0)',
                        color: 'rgba(0,0,0,0)'
                      }
                    },
                    data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292]
                  },
                  {
                    name: '收入',
                    type: 'bar',
                    stack: '总量',
                    label: {
                      normal: {
                        show: true,
                        position: 'top'
                      }
                    },
                    data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-']
                  },
                  {
                    name: '支出',
                    type: 'bar',
                    stack: '总量',
                    label: {
                      normal: {
                        show: true,
                        position: 'bottom'
                      }
                    },
                    data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203]
                  }
                ]
              };
              myChart.setOption(option);
            } else {
              console.log('bar_dv为空!');
            }
          }
        }
      }
    </script>
    

     

    展开全文
  • Vue 甘特图

    千次阅读 热门讨论 2020-10-12 14:07:11
    vue甘特图,先大致介绍下核心功能: (1)横轴、纵轴拖拽; (2)自定义监听点击事件(双击、右键等)(3)任务之间显示父子层级关系;(4)左侧列表信息,右侧时间轴表示任务;(5)每个任务可以订制样式,并且...

    vue做甘特图,先大致介绍下核心功能: (1)横轴、纵轴拖拽; (2)自定义监听点击事件(双击、右键等)(3)任务之间显示父子层级关系;(4)左侧列表信息,右侧时间轴表示任务;(5)每个任务可以订制样式,并且可以动态修改样式;(6)自定义时间粒度显示(小时、天、星期、月、年);(7)支持大批量数据渲染;(8) 支持同行多节点渲染;(9)支持选中,以及批量选中;(9)优秀的扩展性,支持第三方插件。等等还有其他的一些功能。这里先看一下效果图:

     

     

     

     

      接下来会介绍用什么实现的,怎么使用,怎么添加拖拽、点击等各种功能,我以vue为例进行开发。

    1、使用GSTC做甘特图开发

      Git项目地址:https://github.com/neuronetio/gantt-schedule-timeline-calendar#weekendhighlight-plugin

      官方vue实例:https://github.com/neuronetio/vue-gantt-schedule-timeline-calendar

      npm指令: npm i gantt-schedule-timeline-calendar

      官方做了 3 大主流框架的封装,具体看Git链接,这里我也附上了vue版本的 npm 包地址。

      基本使用如下:  ps:文章末尾我会贴一个完整的代码,如果是vue项目可以直接复制查看效果。下边这个是个极度阉割的。

    <template>
        <GSTC :config="config" />
    </template>
    <script>
    import GSTC from "vue-gantt-schedule-timeline-calendar";
    export default {
      data(){
        return {
          config: {
            height: 500,
            list: {
              rows: {
                "1": { id: "1", order: '订单1', },
              },
              columns: {
                data: {
                  id: { id: "id", data: "id", width: 50, header: { content: "序号" } },
                }
              }
            },
            chart: {
              items: {
                "1": { id: "1", rowId: "1", time: { start: new Date().getTime() + 1 * 24 * 60 * 60 * 1000, end: new Date().getTime() + 2 * 24 * 60 * 60 * 1000 } }
              }
            },
          },
          subs: []
        }
      },
      beforeDestroy() { this.subs.forEach(unsub => unsub()); }
    }
    </script>
    <style lang="less" scoped>
      .wrapper .gantt-elastic__grid-line-time {
        display: none;
      }
    </style>
    
     

     

    基础使用已经贴代码了,不做赘述,不清楚的查看官方示例,接下来主要说核心功能如何配置,这方面官方描述的不是很清楚,但是Git的 issues 好多问题都关闭了,基本大部分问题都可以查到。

    1、基础展示,左侧多列表格展示

            

     

     

     这个主要配置config中的 list 属性,

      rows 代表左侧表格的行属性,key值是每行的id,多个key就有多行,通常都以数字做key值, 内部 具体属性是列信息。比如 order label line 等都是列信息,这个会一一对应到指定列。

        parentID 是父节点配置,一般配置了父节点,就会在 甘特图 中展示出父子层级来。

        expanded 是展开属性,默认false,父子层级是合上的,折叠隐藏子节点。如果想默认展示需要每个节点都加上这个属性。

      columns 代表左侧表格的列属性,key唯一就是列关键字。

        data 属性,是列,可以有多个属性,每个代表一列

          id 当前列的id

          data 列标识,和rows中每行的数据的字段唯一对应,比如  order、line 等

          isHTML 是否要展示HTML,默认false。  这个直接关系到content、html字段用哪个

          width 当前列宽度

          expander 是否显示层级,默认false不展示,设置为true,会展示出父子层级来,一般我们仅设置一列,当然设置多列也行。

          header 配置表头内容的

            content 表头想显示的内容

            html 写HTML,用来订制表头样式的,内容就是HTML,行内css

        percent 是左侧表格总宽度占甘特图的百分比,0就直接隐藏表格

        minWidth:是左侧表格的最小宽度

    list: {
              rows: {
                "1": {
                  id: "1",
                  order: '订单1',
                  label: "压缩机",
                  line: '线体1',
                  expanded: true
                },
                "3": {
                  id: "3",
                  order: '订单3',
                  label: "箱体",
                  line: '线体3',
                  parentId: '2',
                }
              },
              columns: {
                data: {
                  id: {
                    id: "id",
                    data: "id",
                    width: 50,
                    expander: true,
                    header: { content: "序号" }
                  },
                  order: {
                    id: "order",
                    data: "order",
                    header: { content: "生产订单" }
                  },
                  label: {
                    id: "label",
                    data: "label",
                    header: { content: "描述" }
                  }
                }
              }
            }

     

    2、右侧任务排列显示(包括订制样式)

          

     

    这个主要配置config中的 chart 属性,

       time 配置时间轴

        from 左侧开始时间,填写毫秒数

        to 右侧结束时间,填写毫秒数

        zoom 显示层级,10-22,越大,时间粒度展示的越大,越小,显示越精细,最小到5分钟

      items 任务快配置,注意这个可以同行若干任务展示

        id 当前任务的id

        rowId 左侧表格 rows 的id,通过这个关联,渲染到某一行

        label 当前任务的名称,会默认展示在任务中

        time 任务的开始、结束时间

          start 开始时间,填写毫秒数

          end 结束时间, 填写毫秒数

        style 订制样式,是个对象,写过jsx写法,写过react 、vue jsx 的应该都不默认,这里举个简单的例子,订制任务div的背景色 圆角等样式  { background: 'red', borderRadius: '3px' }

    chart: {
              time: {
                from: new Date().getTime() - 2 * 24 * 60 * 60 * 1000,
                to: new Date().getTime() + 8 * 24 * 60 * 60 * 1000,
                zoom: 22,    
              },
              items: {
                "1": {
                  id: "1",
                  rowId: "1",
                  label: "Item 1",
                  time: {
                    start: new Date().getTime() + 1 * 24 * 60 * 60 * 1000,
                    end: new Date().getTime() + 2 * 24 * 60 * 60 * 1000
                  },
                  style: {  // 每个块的样式
                    background: 'blue'
                  }
                },
                "21": {
                  id: "21",
                  rowId: "2",
                  label: "Item 2-1",
                  time: {
                    start: new Date().getTime() + 2 * 24 * 60 * 60 * 1000,
                    end: new Date().getTime() + 3 * 24 * 60 * 60 * 1000
                  }
                }
              }
            }

     

    3、配置右侧横轴的时间显示

         

     

     这个主要配置config中的 locale 属性,时间的语言环境配置,这里看文档详细些,下面只详说2个属性,

      weekdays 配置 每周显示的文案   主要是做国际化用的

      months 配置月的,也是做国际化的

    locale: {
              name: "zh",
              Now: "Now",
              weekdays:["周日","周一","周二","周三","周四","周五","周六"],
              months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
            }

     

    4、监听鼠标右击事件

          

     

     这个主要配置config中的 actions 属性,他是对象,以下是他所有能监听dom,很多,这篇博客就只介绍人物块的事件监听,其他的不做一一赘述了

    • main
    • list
    • list-column
    • list-column-header
    • list-column-header-resizer
    • list-column-header-resizer-dots
    • list-column-row
    • list-column-row-expander
    • list-column-row-expander-toggle
    • list-toggle
    • chart
    • chart-calendar
    • chart-calendar-date
    • chart-timeline
    • chart-timeline-grid
    • chart-timeline-grid-row
    • chart-timeline-grid-row-block
    • chart-timeline-items
    • chart-timeline-items-row
    • chart-timeline-items-row-item

      这个监听函数会接收2个参数,element  和 data ,一个是dom,另一个是 任务节点的数据。根据官方要求,监听函数必须返回一个对象,此对象必须包含 update  destroy 2个方法,分别是位置更新和销毁时需要执行的方法。具体写法请见如下代码:

    actions: {
          'chart-timeline-items-row-item': [this.addListenClick] // 监听右击事件
    }
    
    methods:{
        addListenClick(element, data) {
          const onClick = (e) => {
            e.preventDefault()
            // console.log(data)
            this.modal = {
              visible: true,
              title: data.item.label,
              data
            }
            return false
          }
          element.addEventListener('contextmenu', onClick);
          return {
            update(element, newData) {
              data = newData;
            },
            destroy(element, data) {
              element.removeEventListener('click', onClick);
            }
          };
        },
        closeModal() {
          this.modal = {
            visible: false,
            title: '',
            data: {}
          }
        }
      },

    5、任务的横轴、纵轴拖动

           

     

     

    这个主要配置config中的 plugins 属性,

      ItemMovement 插件,这个是官方开发的用来拖拽任务的插件。这个包的插件系统做的很好,官方提供了几种不错的插件,同时还支持其他的第三方插件,有兴趣的可以自己试试,这里先介绍拖拽插件,

         moveable 拖拽的方向, x 支持横轴拖拽;   y 支持纵轴拖拽;  true 横轴、纵轴都可以拖拽; false 禁止拖拽

        resizeable 是否可以拖拽,true开启拖拽

        resizerContent 拖拽的图标,直接写HTML,可以自己定制拖拽图标的样式

        collisionDetection: 拖拽过程中是否允许元素重叠, true 不允许重叠

        ghostNode  false 不展示重影节点

        snapStart 拖拽开始时间点回调,这个比较机制特殊,拖拽位置的时候触发这个方法,参数接收开始时间  时间变化 当前节点数据,默认是毫秒级的刷新,会卡,我们做if判断1小时拖拽

        snapEnd 拖拽结束时间点回调,这个是拖动任务块大小时触发,接收结束时间 时间段。用法同上。具体请看如下代码:

    plugins: [
              // 拖动 x 横向, y 纵向
              ItemMovement({
                moveable: 'x',
                resizerContent: '<div class="resizer">-></div>',
                ghostNode: false,
                snapStart(time, diff, item) {
                  if(Math.abs(diff) > 14400000) {
                    return time + diff
                  }
                  return time
                },
                snapEnd(time, diff, item) {
                  if(Math.abs(diff) > 14400000) {
                    return time + diff
                  }
                  return time
                }
              })
            ]

     

    6、选中任务

          

     

     

    这个主要配置config中的 plugins 属性,

      Selection插件,单个选中、批量选中插件。

        grid 能否选中单元格

        items  能否选中任务

        rows  能否选中行

        rectStyle 矩形样式

        selected 选中的回调

        deselected  取消选中的回调

        canSelected  可选中的的回调,用来过滤哪些可以选中

        canDeselected 可取消选中的回调,用来过滤哪些可以取消选中

    plugins: [
              Selection({
                items: false,
                rows: false,
                grid: true,
                rectStyle: { opacity: '0.0' }, 
                canSelect(type, currentlySelecting) {
                  if (type === 'chart-timeline-grid-row-block') {
                    return currentlySelecting.filter(selected => {
                      if (!selected.row.canSelect) return false;
                      for (const item of selected.row._internal.items) {
                        if (
                          (item.time.start >= selected.time.leftGlobal && item.time.start <= selected.time.rightGlobal) ||
                          (item.time.end >= selected.time.leftGlobal && item.time.end <= selected.time.rightGlobal) ||
                          (item.time.start <= selected.time.leftGlobal && item.time.end >= selected.time.rightGlobal)
                        ) {
                          return false;
                        }
                      }
                      return true;
                    });
                  }
                  return currentlySelecting;
                },
                canDeselect(type, currently, all) {
                  if (type === 'chart-timeline-grid-row-blocks') {
                    return all.selecting['chart-timeline-grid-row-blocks'].length ? [] : currently;
                  }
                  return [];
                }
              })
            ]

    小结:

      以上就是整个甘特图的使用了,这是我用过最符合项目需求的甘特图,他的开发团队也在持续的维护这个项目,很赞。

      最后贴一段完整的 vue 示例代码:

    <template>
      <div class="wrapper">
        <GSTC :config="config" />
        <infor-modal
          :visible="modal.visible"
          :title="modal.title"
          :dataSource="modal.data"
          @handleModal="closeModal"
        />
      </div>
    </template>
    
    <script>
    import GSTC from "vue-gantt-schedule-timeline-calendar";
    import ItemMovement from "gantt-schedule-timeline-calendar/dist/ItemMovement.plugin.js"
    import Selection from "gantt-schedule-timeline-calendar/dist/Selection.plugin.js"
    import inforModal from "./inforModal"
    
    export default {
      components:{
        GSTC,
        inforModal
      },
      props:{},
      data(){
        return {
          config: {
            height: 500,
            list: {
              // 行属性
              rows: {
                "1": {
                  id: "1",
                  order: '订单1',
                  label: "压缩机",
                  line: '线体1',
                  expanded: true
                },
                "3": {
                  id: "3",
                  order: '订单3',
                  label: "箱体",
                  line: '线体3',
                  parentId: '2',
                },
                "4": {
                  id: "4",
                  order: '订单4',
                  label: "空调总装",
                  line: '线体4',
                },
                "2": {
                  id: "2",
                  order: '订单2',
                  label: "门体",
                  parentId: '1',
                  line: '线体2',
                  expanded: true
                },
                "5": {
                  id: "5",
                  order: '订单5',
                  label: "冰箱总装",
                  line: '线体5',
                },
                "6": {
                  id: "6",
                  order: '订单6',
                  label: "洗衣机总装",
                  line: '线体6',
                },
              },
              // 列定义
              columns: {
                data: {
                  id: {
                    id: "id",
                    data: "id",
                    width: 50,
                    header: {
                      content: "序号"
                    }
                  },
                  order: {
                    id: "order",
                    data: "order",
                    width: 120,
                    header: {
                      content: "生产订单"
                    }
                  },
                  label: {
                    id: "label",
                    data: "label",
                    width: 120,
                    expander: true,
                    header: {
                      content: "描述"
                    }
                  },
                  line: {
                    id: "line",
                    data: "line",
                    width: 120,
                    header: {
                      content: "线体"
                    }
                  },
                }
              }
            },
            chart: {
              time: {  // 时间轴开始截至,
                from: new Date().getTime() - 2 * 24 * 60 * 60 * 1000,
                to: new Date().getTime() + 8 * 24 * 60 * 60 * 1000,
                zoom: 22,    // 10-22 缩放,默认 Shift + 滚轮, 默认缩放展示时间粒度, 一共有 小时、天、周、月、年
              },
              items: {
                "1": {
                  id: "1",
                  rowId: "1",
                  label: "Item 1",
                  time: {
                    start: new Date().getTime() + 1 * 24 * 60 * 60 * 1000,
                    end: new Date().getTime() + 2 * 24 * 60 * 60 * 1000
                  },
                  style: {  // 每个块的样式
                    background: 'blue'
                  }
                },
                "21": {
                  id: "21",
                  rowId: "2",
                  label: "Item 2-1",
                  time: {
                    start: new Date().getTime() + 2 * 24 * 60 * 60 * 1000,
                    end: new Date().getTime() + 3 * 24 * 60 * 60 * 1000
                  }
                },
                "22": {
                  id: "22",
                  rowId: "2",
                  label: "Item 2-2",
                  time: {
                    start: new Date().getTime() + 3 * 24 * 60 * 60 * 1000,
                    end: new Date().getTime() + 4 * 24 * 60 * 60 * 1000
                  }
                },
                "3": {
                  id: "3",
                  rowId: "3",
                  label: "Item 3",
                  time: {
                    start: new Date().getTime() + 3 * 24 * 60 * 60 * 1000,
                    end: new Date().getTime() + 5 * 24 * 60 * 60 * 1000
                  }
                },
                "4": {
                  id: "4",
                  rowId: "4",
                  label: "Item 4",
                  time: {
                    start: new Date().getTime() + 2 * 24 * 60 * 60 * 1000,
                    end: new Date().getTime() + 5 * 24 * 60 * 60 * 1000
                  }
                },
                "5": {
                  id: "5",
                  rowId: "5",
                  label: "Item 5",
                  time: {
                    start: new Date().getTime() + 3 * 24 * 60 * 60 * 1000,
                    end: new Date().getTime() + 5 * 24 * 60 * 60 * 1000
                  }
                },
                "6": {
                  id: "6",
                  rowId: "6",
                  label: "Item 6",
                  time: {
                    start: new Date().getTime() + 5 * 24 * 60 * 60 * 1000,
                    end: new Date().getTime() + 6 * 24 * 60 * 60 * 1000
                  }
                },
              }
            },
            locale: {
              name: "zh",
              Now: "Now",
              weekdays:["周日","周一","周二","周三","周四","周五","周六"],
              months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
            },
            actions: {
              'chart-timeline-items-row-item': [this.addListenClick] // 监听右击事件
            },
            plugins: [
              // 拖动 x 横向, y 纵向
              ItemMovement({
                moveable: 'x',
                resizerContent: '<div class="resizer">-></div>',
                ghostNode: false,
                collisionDetection: false,
                snapStart(time, diff, item) {
                  if(Math.abs(diff) > 14400000) {
                    return time + diff
                  }
                  return time
                },
                snapEnd(time, diff, item) {
                  if(Math.abs(diff) > 14400000) {
                    return time + diff
                  }
                  return time
                }
              }),
              Selection({
                items: false,
                rows: false,
                grid: true,
                rectStyle: { opacity: '0.0' }, 
                canSelect(type, currentlySelecting) {
                  if (type === 'chart-timeline-grid-row-block') {
                    return currentlySelecting.filter(selected => {
                      if (!selected.row.canSelect) return false;
                      for (const item of selected.row._internal.items) {
                        if (
                          (item.time.start >= selected.time.leftGlobal && item.time.start <= selected.time.rightGlobal) ||
                          (item.time.end >= selected.time.leftGlobal && item.time.end <= selected.time.rightGlobal) ||
                          (item.time.start <= selected.time.leftGlobal && item.time.end >= selected.time.rightGlobal)
                        ) {
                          return false;
                        }
                      }
                      return true;
                    });
                  }
                  return currentlySelecting;
                },
                canDeselect(type, currently, all) {
                  if (type === 'chart-timeline-grid-row-blocks') {
                    return all.selecting['chart-timeline-grid-row-blocks'].length ? [] : currently;
                  }
                  return [];
                }
              })
            ]
          },
          modal: {
            visible: false,
            title: '',
            data: {}
          },
          subs: []
        }
      },
      watch:{},
      computed:{},
      methods:{
        addListenClick(element, data) {
          const onClick = (e) => {
            e.preventDefault()
            // console.log(data)
            this.modal = {
              visible: true,
              title: data.item.label,
              data
            }
            return false
          }
          element.addEventListener('contextmenu', onClick);
          return {
            update(element, newData) {
              data = newData;
            },
            destroy(element, data) {
              element.removeEventListener('click', onClick);
            }
          };
        },
        closeModal() {
          this.modal = {
            visible: false,
            title: '',
            data: {}
          }
        }
      },
      created(){},
      mounted(){
      },
      beforeDestroy() {
        this.subs.forEach(unsub => unsub());
      }
    }
    </script>
    <style lang="less" scoped>
      .wrapper .gantt-elastic__grid-line-time {
        display: none;
      }
    </style>

    转自:https://www.cnblogs.com/pengfei-nie/p/13092159.html

    展开全文
  • echarts vue 甘特图实现

    2018-09-30 11:08:00
    厂家机型故障分析 ...--柱状为例 --> <script src="/static/js/component/dateType.js"></script> <script src="/static/js/component/chart-wrapper.js"></script> ...
  • 基于Vue-Gantt-chart组件实现可拖拽甘特图甘特图需求总结甘特图组件评估(含github地址)收费免费评估总结甘特图可拖拽可拉伸拖拽demo实现高级拖拽动画的思路:拉伸demo甘特图最终效果 甘特图需求总结 项目中要用到...
  • echarts实现甘特图

    千次阅读 2020-06-30 15:57:31
    以8号餐桌为例,甘特数据为阴影部分,表示不同时间段客人用餐占用的时间。如果时间段有交集则说明有时间冲突,应做时间调整。 vue 部分代码: <template> <div id="gt-chart" ref="gt-chart">&...
  • echarts + vue 实现项目进度不同颜色柱形甘特图

    千次阅读 热门讨论 2020-02-29 18:29:10
    template 里代码 已完成超时待完成 注意: gantt-chart 一定要设置宽高,否则无法显示 script代码 import echarts from 'echarts' // 注意echarts版本,高版本不支持透明度rgba,以下代码版本为3.8.5 export ...
  • 满足计划、实际时间甘特图对比需求
  • Vue实现项目的可视化,借助Echarts实现,直接上图进行说明。 其中,柱状图和折线图的实现大致相同。 二、具体实现 2.1 甘特图 <template> <el-card class="q-pa-sm"> <g...
  • 1.在开发一个后台系统时,遇到一个甘特图的需求 2.通过特定的数据结构和vue的循环判断加上table原生表格的合并行列实现需求 效果 < template > < div class = "hello" > < ! -- Echarts图表盒子 -- >...
  • 最近的项目要求甘特图在elementui中实现,在此做出总结。 性能限制,不能传入太多的数据。 需要条件: 时间:计划开始时间、计划结束时间、开始时间、结束时间 最大时间和最小时间。 思维: 渲染表格头、渲染天数、...
  • 有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右...列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能...
  • vue-i18n vue实现国际化

    2020-11-30 10:11:56
    有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右...列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能...
  • dhtmlxGantt 在vue中使用样例,实现了自定义弹窗、设置横道颜色、修改列表样式、表单验证等。 官网样例:https://docs.dhtmlx.com/gantt/samples/ 官方文档:https://docs.dhtmlx.com/gantt/api__refs__gantt.html...
  • Vue实现购物小球抛物线

    千次阅读 多人点赞 2020-11-20 17:26:27
    有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右...列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能...
  • 这里写自定义目录标题如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的...

空空如也

空空如也

1 2 3 4
收藏数 72
精华内容 28
关键字:

vue实现甘特图

vue 订阅