Skip to content

Commit 0bc5c3d

Browse files
CS6CS6
committed
add skeleton
1 parent 806e24c commit 0bc5c3d

File tree

4 files changed

+117
-31
lines changed

4 files changed

+117
-31
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"vue-axios": "^2.1.5",
2222
"vue-chartjs": "^3.5.0",
2323
"vue-cli-plugin-s3-deploy": "^4.0.0-rc4",
24+
"vue-content-loader": "^0.2.3",
2425
"vue-date-fns": "^2.0.1",
2526
"vue-loading-overlay": "^3.3.2",
2627
"vue-router": "^3.3.4",

‎src/Layout/T1B2.vue‎

Lines changed: 42 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
<template >
2+
3+
4+
25
<div id="T1B2" style="width: 100%;">
36
<div id="Top10">
47
<LogChart msg="LogChart Plugins" />
@@ -118,23 +121,29 @@
118121
</div>
119122
</div>
120123
</div>
124+
121125
</template>
122126

123127
<script>
124128
import LogChart from "../components/LogChart.vue";
125129
import SymptomTable from "../components/SymptomTable.vue";
126130
import CalendarSweet from "../components/CalendarSweet.vue";
131+
// import { ContentLoader } from "vue-content-loader";
127132
128133
export default {
129134
name: "T1B2",
130135
components: {
131136
LogChart,
132137
SymptomTable,
133-
CalendarSweet
138+
CalendarSweet,
139+
// ContentLoader,
134140
},
135141
created() {},
136142
watch: {
137-
storageRaw_Data: function() {
143+
skeleton: function () {
144+
console.log("skeleton change", this.skeleton);
145+
},
146+
storageRaw_Data: function () {
138147
console.log("storageRaw_Data change", this.storageRaw_Data);
139148
this.$store.commit("ChangisLoading", false);
140149
@@ -149,13 +158,16 @@ export default {
149158
// console.log("storageRaw_photo change", this.storageRaw_photo);
150159
// // this.fillData();
151160
// }
152-
storagePopUp_id: function() {
161+
storagePopUp_id: function () {
153162
console.log("storagePopUp_id change", this.storagePopUp_id);
154163
this.$store.dispatch("fetchRawDataApi");
155164
// this.fillData();
156-
}
165+
},
157166
},
158167
computed: {
168+
skeleton() {
169+
return this.$store.state.isLoading;
170+
},
159171
storageRaw_Data() {
160172
console.log("storageRaw_Data change", this.$store.state.storeRAWData);
161173
return this.$store.state.storeRAWData;
@@ -168,13 +180,13 @@ export default {
168180
// },
169181
storagePopUp_id() {
170182
return this.$store.state.PopUpidList;
171-
}
183+
},
172184
},
173185
methods: {
174186
off() {
175187
// this.$store.commit("ChangDisplayPopUp", false);
176188
this.$store.commit("ChangDisplayPopUp", { display: false, index: -1 });
177-
}
189+
},
178190
},
179191
data() {
180192
return {
@@ -188,11 +200,11 @@ export default {
188200
label: "二级 1-1",
189201
children: [
190202
{
191-
label: "三级 1-1-1"
192-
}
193-
]
194-
}
195-
]
203+
label: "三级 1-1-1",
204+
},
205+
],
206+
},
207+
],
196208
},
197209
{
198210
label: "一级 2",
@@ -201,19 +213,19 @@ export default {
201213
label: "二级 2-1",
202214
children: [
203215
{
204-
label: "三级 2-1-1"
205-
}
206-
]
216+
label: "三级 2-1-1",
217+
},
218+
],
207219
},
208220
{
209221
label: "二级 2-2",
210222
children: [
211223
{
212-
label: "三级 2-2-1"
213-
}
214-
]
215-
}
216-
]
224+
label: "三级 2-2-1",
225+
},
226+
],
227+
},
228+
],
217229
},
218230
{
219231
label: "一级 3",
@@ -222,23 +234,23 @@ export default {
222234
label: "二级 3-1",
223235
children: [
224236
{
225-
label: "三级 3-1-1"
226-
}
227-
]
237+
label: "三级 3-1-1",
238+
},
239+
],
228240
},
229241
{
230242
label: "二级 3-2",
231243
children: [
232244
{
233-
label: "三级 3-2-1"
234-
}
235-
]
236-
}
237-
]
238-
}
239-
]
245+
label: "三级 3-2-1",
246+
},
247+
],
248+
},
249+
],
250+
},
251+
],
240252
};
241-
}
253+
},
242254
};
243255
</script>
244256

‎src/pages/CAMP.vue‎

Lines changed: 72 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,72 @@
11
<template>
22
<div id="CAMP">
3+
<!-- <content-loader
4+
:width="800"
5+
:height="600"
6+
:speed="2"
7+
primaryColor="#ffafff"
8+
secondaryColor="#ecebeb"
9+
>
10+
<rect x="112" y="40" rx="3" ry="3" width="88" height="6" />
11+
<rect x="112" y="58" rx="3" ry="3" width="52" height="6" />
12+
<rect x="64" y="88" rx="3" ry="3" width="410" height="6" />
13+
<rect x="64" y="104" rx="3" ry="3" width="380" height="6" />
14+
<rect x="64" y="120" rx="3" ry="3" width="178" height="6" />
15+
<circle cx="20" cy="20" r="20" />
16+
</content-loader>-->
17+
318
<h1>健康聲明表</h1>
419
{{uuid}}
20+
<content-loader
21+
v-if="skeleton==true"
22+
:width="1000"
23+
:height="600"
24+
:speed="3"
25+
primaryColor="#000000"
26+
secondaryColor="#ecebeb"
27+
>
28+
<rect x="17" y="23" rx="29" ry="29" width="310" height="310" />
29+
<rect x="346" y="102" rx="3" ry="3" width="288" height="26" />
30+
<rect x="345" y="132" rx="3" ry="3" width="288" height="8" />
31+
<rect x="346" y="146" rx="3" ry="3" width="288" height="26" />
32+
<rect x="346" y="176" rx="3" ry="3" width="288" height="8" />
33+
<rect x="346" y="190" rx="3" ry="3" width="288" height="26" />
34+
<rect x="346" y="221" rx="3" ry="3" width="288" height="8" />
35+
<rect x="350" y="245" rx="29" ry="29" width="87" height="87" />
36+
<rect x="448" y="245" rx="29" ry="29" width="87" height="87" />
37+
<rect x="543" y="244" rx="29" ry="29" width="87" height="87" />
38+
<rect x="345" y="63" rx="3" ry="3" width="121" height="26" />
39+
<rect x="511" y="63" rx="3" ry="3" width="121" height="26" />
40+
<rect x="347" y="26" rx="24" ry="24" width="288" height="26" />
41+
<rect x="27" y="439" rx="3" ry="3" width="288" height="26" />
42+
<rect x="26" y="469" rx="3" ry="3" width="288" height="8" />
43+
<rect x="27" y="483" rx="3" ry="3" width="288" height="26" />
44+
<rect x="27" y="513" rx="3" ry="3" width="288" height="8" />
45+
<rect x="27" y="527" rx="3" ry="3" width="288" height="26" />
46+
<rect x="27" y="558" rx="3" ry="3" width="288" height="8" />
47+
<rect x="31" y="582" rx="29" ry="29" width="87" height="87" />
48+
<rect x="129" y="582" rx="29" ry="29" width="87" height="87" />
49+
<rect x="224" y="581" rx="29" ry="29" width="87" height="87" />
50+
<rect x="26" y="400" rx="3" ry="3" width="121" height="26" />
51+
<rect x="192" y="400" rx="3" ry="3" width="121" height="26" />
52+
<rect x="28" y="363" rx="24" ry="24" width="288" height="26" />
53+
<rect x="344" y="364" rx="29" ry="29" width="310" height="310" />
54+
<rect x="669" y="18" rx="29" ry="29" width="310" height="310" />
55+
<rect x="679" y="434" rx="3" ry="3" width="288" height="26" />
56+
<rect x="678" y="464" rx="3" ry="3" width="288" height="8" />
57+
<rect x="679" y="478" rx="3" ry="3" width="288" height="26" />
58+
<rect x="679" y="508" rx="3" ry="3" width="288" height="8" />
59+
<rect x="679" y="522" rx="3" ry="3" width="288" height="26" />
60+
<rect x="679" y="553" rx="3" ry="3" width="288" height="8" />
61+
<rect x="683" y="577" rx="29" ry="29" width="87" height="87" />
62+
<rect x="781" y="577" rx="29" ry="29" width="87" height="87" />
63+
<rect x="876" y="576" rx="29" ry="29" width="87" height="87" />
64+
<rect x="678" y="395" rx="3" ry="3" width="121" height="26" />
65+
<rect x="844" y="395" rx="3" ry="3" width="121" height="26" />
66+
<rect x="680" y="358" rx="24" ry="24" width="288" height="26" />
67+
</content-loader>
568
<!-- <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"></el-switch> -->
6-
<div v-if="CardData!=[]" id="HealthCardList">
69+
<div v-if="CardData!=[]" id="HealthCardList">
770
<!-- <HealthCard v-for="item in card" :key="item.date" v-bind:data="item" /> -->
871
<!-- <HealthCard v-for="item in card" :key="item.date" v-bind:data="item" /> -->
972
<HealthCard v-for="item in CardData" :key="item.date" v-bind:data="item" />
@@ -64,12 +127,14 @@
64127
<script>
65128
import HealthForm from "../components/HealthForm.vue";
66129
import HealthCard from "../components/HealthCard.vue";
130+
import { ContentLoader } from "vue-content-loader";
67131
68132
export default {
69133
name: "CAMP",
70134
components: {
71135
HealthForm,
72136
HealthCard,
137+
ContentLoader,
73138
},
74139
created() {
75140
if (this.selectTemplate == "healthDeclaration") {
@@ -150,6 +215,9 @@ export default {
150215
// this.fillData();
151216
console.log("porcessing change", this.porcessing);
152217
},
218+
skeleton: function () {
219+
console.log("skeleton change", this.skeleton);
220+
},
153221
storageChartDatasets: function () {
154222
// console.log("bodyTemperature change", this.storageChartDatasets);
155223
// console.log("bodyTemperature change", this.storageChartDatasets);
@@ -168,6 +236,9 @@ export default {
168236
},
169237
},
170238
computed: {
239+
skeleton() {
240+
return this.$store.state.isLoading;
241+
},
171242
storageChartLabels() {
172243
return this.$store.state.storeChartLabels;
173244
},

‎src/store/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,8 @@ export default new Vuex.Store({
248248
console.log("fetchSummaryApi_200")
249249
if (response.data.date[0] != null) {
250250
commit('updateDateformat', [response.data.date[0], response.data.date[response.data.date.length - 1]]);
251+
commit('ChangisLoading', true);
252+
251253
} else {
252254
commit('ChangisLoading', false);
253255
alert("本資料包無此紀錄，請見諒")

0 commit comments

Comments
 (0)