1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 |
- <!-- 事项甘特图 -->
- <template>
- <div class="gantt-chart">
- <div class="condition-legend-bar">
- <Select
- class="system-select"
- width="217"
- :isReadOnly="true"
- tipPlace="top"
- caption="系统名称:"
- @change="testClick"
- v-model="systemName"
- :selectdata="systemList"
- :placeholder="'请选择'"
- />
- <div class="legend-container">
- <div v-for="(item) in legends" :key="'key_' + item.id" class="item-legend">
- <div :style="{'background': item.backgroundColor, 'border-color': item.borderColor}"></div>
- <div>{{item.text}}</div>
- </div>
- </div>
- </div>
- <div class="main-gantt-container">
- </div>
- </div>
- </template>
- <script>
- export default {
- data () {
- return {
- systemList: [],
- systemName: '',
- legends: [
- {id: 1, text: '按时完成', backgroundColor: '#E7E9EA', borderColor: '#C3C7CB'},
- {id: 2, text: '未开始/进行中', backgroundColor: 'rgba(91, 143, 249, 0.2)', borderColor: '#5B8FF9'},
- {id: 3, text: '按时完成', backgroundColor: '#FBCE99', borderColor: '#F58300'},
- {id: 4, text: '按时完成', backgroundColor: '#FBB8B5', borderColor: '#F54E45'},
- ]
- }
- },
- components: {},
- computed: {},
- mounted() {},
- methods: {}
- }
- </script>
- <style lang='less' scoped>
- .gantt-chart{
- padding-left: 16px;
- padding-right: 16px;
- padding-top: 12px;
- padding-bottom: 16px;
- width: 100%;
- height: 100%;
- background: #fff;
- .condition-legend-bar{
- margin-bottom: 12px;
- display: flex;
- justify-content: space-between;
- }
- .legend-container{
- display: flex;
- .item-legend{
- padding-left: 18px;
- position: relative;
- font-size: 14px;
- color: #646C73;
- line-height: 32px;
- &:not(:nth-of-type(4)){
- margin-right: 20px;
- }
- >div:first-child{
- position: absolute;
- left: 0;
- top: calc(50% - 6px);
- width: 12px;
- height: 12px;
- border: 1px solid;
- }
- &:nth-of-type(4){
- margin-right: 32px;
- }
- }
- }
- .main-gantt-container{
- width: 100%;
- height: calc(100% - 44px);
- background: #F2F5F7;
- }
- }
- </style>
|