DisplayResults.vue 2.27 KB
Newer Older
Quentin David's avatar
Quentin David committed
1
2
<template>
    <v-container fluid>
Quentin David's avatar
Quentin David committed
3
4
5
6
7
8
9
10
11
12
        <v-row no-gutters>
            <v-col cols="3">
              <v-treeview
              class="fixed24"
              :items="items"
              activatable
              return-object
              :active.sync="selection"
              >
              </v-treeview>
Quentin David's avatar
Quentin David committed
13
14
            </v-col>
            <v-col cols="6">
Quentin David's avatar
Quentin David committed
15
16
17
18
19
20
21
22
23
              <div
              class="pa-5 fixed"
              >
              <h1> {{ selection }} </h1>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
              Quaerat, quam! Ipsam et eum beatae cupiditate exercitationem, 
              fugit porro nihil nostrum, nesciunt, 
              fuga natus reiciendis facilis mollitia! Ea iste ex quisquam?
              </div>
Quentin David's avatar
Quentin David committed
24
25
            </v-col>
            <v-col cols="3">
Quentin David's avatar
Quentin David committed
26
27
              <v-treeview
              class="fixed24"
Quentin David's avatar
Quentin David committed
28
              :items="items_annotation"
Quentin David's avatar
Quentin David committed
29
30
31
32
              color="white"
              activatable
              >
              </v-treeview>
Quentin David's avatar
Quentin David committed
33
34
35
36
37
38
39
            </v-col>
        </v-row>
    </v-container>
</template>
<script>
  export default {
    data: () => ({
Quentin David's avatar
Quentin David committed
40
      selection: null,
Quentin David's avatar
Quentin David committed
41
42
43
44
45
46
47
48
49
50
51
      items_annotation: [
        {
          id: 1,
          name: 'Entités nommées',
          children: [
            { id: 2, name: 'Nom'},
            { id: 3, name: 'Lieu'},
            { id: 4, name: 'Date'}
          ]
        }
      ],
Quentin David's avatar
Quentin David committed
52
53
54
      items: [
        {
          id: 1,
Quentin David's avatar
Quentin David committed
55
          name: 'Documents source :',
Quentin David's avatar
Quentin David committed
56
          children: [
Quentin David's avatar
Quentin David committed
57
58
59
            { id: 2, name: 'Fichier1' },
            { id: 3, name: 'Fichier2' },
            { id: 4, name: 'Fichier3' },
Quentin David's avatar
Quentin David committed
60
61
62
63
          ],
        },
        {
          id: 5,
Quentin David's avatar
Quentin David committed
64
          name: 'Néoveille :',
Quentin David's avatar
Quentin David committed
65
66
67
          children: [
            {
              id: 6,
Quentin David's avatar
Quentin David committed
68
69
              name: 'Résultats de Néoveille'
            }
Quentin David's avatar
Quentin David committed
70
71
72
73
          ],
        },
        {
          id: 15,
Quentin David's avatar
Quentin David committed
74
          name: 'SDMC :',
Quentin David's avatar
Quentin David committed
75
          children: [
Quentin David's avatar
Quentin David committed
76
            { id: 16, name: 'Résultats de SDMC' }
Quentin David's avatar
Quentin David committed
77
          ],
Quentin David's avatar
Quentin David committed
78
        }
Quentin David's avatar
Quentin David committed
79
80
81
      ],
    }),
  }
Quentin David's avatar
Quentin David committed
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
</script>
<style>
.fixed24 {
  background-color: lightblue;
  position: absolute;
  overflow-y: scroll;
  height: 82%;
  width: 24%;
  border-radius: 5px;
}
.fixed {
  border: 2px solid #00598f;
  position: fixed;
  overflow-y: scroll;
  height: 82%;
  width: 48%;
  
  border-radius: 5px;
}
</style>