GanttChart.vue 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <!-- 事项甘特图 -->
  2. <template>
  3. <div class="gantt-chart">
  4. <div class="condition-legend-bar">
  5. <Select
  6. class="system-select"
  7. width="217"
  8. :isReadOnly="true"
  9. tipPlace="top"
  10. caption="系统名称:"
  11. @change="testClick"
  12. v-model="systemName"
  13. :selectdata="systemList"
  14. :placeholder="'请选择'"
  15. />
  16. <div class="legend-container">
  17. <div v-for="(item) in legends" :key="'key_' + item.id" class="item-legend">
  18. <div :style="{'background': item.backgroundColor, 'border-color': item.borderColor}"></div>
  19. <div>{{item.text}}</div>
  20. </div>
  21. </div>
  22. </div>
  23. <div class="main-gantt-container">
  24. </div>
  25. </div>
  26. </template>
  27. <script>
  28. export default {
  29. data () {
  30. return {
  31. systemList: [], // 系统列表
  32. systemName: '', // 系统名称
  33. legends: [
  34. {id: 1, text: '按时完成', backgroundColor: '#E7E9EA', borderColor: '#C3C7CB'},
  35. {id: 2, text: '未开始/进行中', backgroundColor: 'rgba(91, 143, 249, 0.2)', borderColor: '#5B8FF9'},
  36. {id: 3, text: '按时完成', backgroundColor: '#FBCE99', borderColor: '#F58300'},
  37. {id: 4, text: '按时完成', backgroundColor: '#FBB8B5', borderColor: '#F54E45'},
  38. ]
  39. }
  40. },
  41. components: {},
  42. computed: {},
  43. mounted() {},
  44. methods: {}
  45. }
  46. </script>
  47. <style lang='less' scoped>
  48. .gantt-chart{
  49. padding-left: 16px;
  50. padding-right: 16px;
  51. padding-top: 12px;
  52. padding-bottom: 16px;
  53. width: 100%;
  54. height: 100%;
  55. background: #fff;
  56. .condition-legend-bar{
  57. margin-bottom: 12px;
  58. display: flex;
  59. justify-content: space-between;
  60. }
  61. .legend-container{
  62. display: flex;
  63. .item-legend{
  64. padding-left: 18px;
  65. position: relative;
  66. font-size: 14px;
  67. color: #646C73;
  68. line-height: 32px;
  69. &:not(:nth-of-type(4)){
  70. margin-right: 20px;
  71. }
  72. >div:first-child{
  73. position: absolute;
  74. left: 0;
  75. top: calc(50% - 6px);
  76. width: 12px;
  77. height: 12px;
  78. border: 1px solid;
  79. }
  80. &:nth-of-type(4){
  81. margin-right: 32px;
  82. }
  83. }
  84. }
  85. .main-gantt-container{
  86. width: 100%;
  87. height: calc(100% - 44px);
  88. background: #F2F5F7;
  89. }
  90. }
  91. </style>