dai
4 years ago
8 changed files with 408 additions and 23 deletions
@ -0,0 +1,68 @@ |
|||||
|
<template> |
||||
|
<div class="screen-loading"> |
||||
|
<svg width="50px" |
||||
|
height="50px"> |
||||
|
<circle cx="25" |
||||
|
cy="25" |
||||
|
r="20" |
||||
|
fill="transparent" |
||||
|
stroke-width="3" |
||||
|
stroke-dasharray="31.415, 31.415" |
||||
|
stroke="#29cdff" |
||||
|
stroke-linecap="round"> |
||||
|
<animateTransform attributeName="transform" |
||||
|
type="rotate" |
||||
|
values="0, 25 25;360, 25 25" |
||||
|
dur="1.5s" |
||||
|
repeatCount="indefinite" /> |
||||
|
<animate attributeName="stroke" |
||||
|
values="#02bcfe;#3be6cb;#02bcfe" |
||||
|
dur="3s" |
||||
|
repeatCount="indefinite" /> |
||||
|
</circle> |
||||
|
|
||||
|
<circle cx="25" |
||||
|
cy="25" |
||||
|
r="10" |
||||
|
fill="transparent" |
||||
|
stroke-width="3" |
||||
|
stroke-dasharray="15.7, 15.7" |
||||
|
stroke="#29cdff" |
||||
|
stroke-linecap="round"> |
||||
|
<animateTransform attributeName="transform" |
||||
|
type="rotate" |
||||
|
values="360, 25 25;0, 25 25" |
||||
|
dur="1.5s" |
||||
|
repeatCount="indefinite" /> |
||||
|
<animate attributeName="stroke" |
||||
|
values="#3be6cb;#02bcfe;#3be6cb" |
||||
|
dur="3s" |
||||
|
repeatCount="indefinite" /> |
||||
|
</circle> |
||||
|
</svg> |
||||
|
<div class="loading-tip"> |
||||
|
<slot></slot> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'DvLoading' |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.screen-loading { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
.loading-tip { |
||||
|
font-size: 14px; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,184 @@ |
|||||
|
<template> |
||||
|
<div class="m-table"> |
||||
|
<table class="table" border="0" cellspacing="0" cellpadding="0"> |
||||
|
<tr class="table-header"> |
||||
|
<th class="table-header-th" v-for="item in header" :key="item"> |
||||
|
{{ item }} |
||||
|
</th> |
||||
|
</tr> |
||||
|
<tbody class="table-body"> |
||||
|
<tr class="table-body-tr" v-for="(value, index) in list" :key="index"> |
||||
|
<td class="td" v-for="(item, indexs) in value" :key="indexs"> |
||||
|
<span v-if="typeof item === 'string' || typeof item === 'number'">{{ |
||||
|
item |
||||
|
}}</span> |
||||
|
<span v-if="typeof item === 'object' && item.type == 'index'">{{ |
||||
|
index + 1 |
||||
|
}}</span> |
||||
|
<a |
||||
|
v-else-if="typeof item === 'object' && item.type == 'operate'" |
||||
|
v-for="btn in item.list" |
||||
|
:key="'operate' + index + btn" |
||||
|
@click="handleClickBtn(index, btn)" |
||||
|
>{{ btn }}</a |
||||
|
> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</table> |
||||
|
|
||||
|
<div class="table-status" v-if="loading"> |
||||
|
<screen-loading>加载中</screen-loading> |
||||
|
</div> |
||||
|
|
||||
|
<div class="table-status" v-if="list.length == 0 && !loading"> |
||||
|
<div class="no-data"> |
||||
|
<img |
||||
|
src="../../../../assets/img/modules/visual/noData.png" |
||||
|
class="no-data-img" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import ScreenLoading from "./loading"; |
||||
|
import Vue from "vue"; |
||||
|
|
||||
|
export default { |
||||
|
name: "table", |
||||
|
components: { |
||||
|
ScreenLoading, |
||||
|
}, |
||||
|
props: { |
||||
|
header: { |
||||
|
type: Array, |
||||
|
required: false, |
||||
|
default: () => { |
||||
|
return [ |
||||
|
// "序号", "所属网格", "操作" |
||||
|
]; |
||||
|
}, |
||||
|
}, |
||||
|
list: { |
||||
|
type: Array, |
||||
|
required: false, |
||||
|
default: () => { |
||||
|
return [ |
||||
|
// [ |
||||
|
// 1, |
||||
|
// "商丘路社区第一网格", |
||||
|
// { |
||||
|
// type: "operate", |
||||
|
// list: ["查看"], |
||||
|
// }, |
||||
|
// ], |
||||
|
// [ |
||||
|
// 2, |
||||
|
// "商丘路社区第一网格", |
||||
|
// { |
||||
|
// type: "operate", |
||||
|
// list: ["查看"], |
||||
|
// }, |
||||
|
// ], |
||||
|
]; |
||||
|
}, |
||||
|
}, |
||||
|
loading: { |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return {}; |
||||
|
}, |
||||
|
watch: {}, |
||||
|
|
||||
|
mounted() {}, |
||||
|
|
||||
|
created() {}, |
||||
|
|
||||
|
methods: { |
||||
|
handleClickBtn(index, type) { |
||||
|
this.$emit("operate", index, type); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.m-table { |
||||
|
.table { |
||||
|
box-sizing: border-box; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
border: none; |
||||
|
|
||||
|
&-header { |
||||
|
width: 100%; |
||||
|
height: 50px; |
||||
|
background: rgba(8, 37, 134, 0.85); |
||||
|
font-size: 16px; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
|
||||
|
&-th { |
||||
|
text-align: center; |
||||
|
border: none; |
||||
|
// width: calc(100% / 5); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&-body { |
||||
|
box-sizing: border-box; |
||||
|
width: 100%; |
||||
|
font-size: 18px; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
|
||||
|
&-tr { |
||||
|
width: 100%; |
||||
|
height: 50px; |
||||
|
.td { |
||||
|
text-align: center; |
||||
|
border: none; |
||||
|
a { |
||||
|
font-size: 18px; |
||||
|
font-weight: 400; |
||||
|
color: #e4dc00; |
||||
|
position: relative; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&-tr:nth-child(2n) { |
||||
|
background: rgba(16, 75, 164, 0.24); |
||||
|
} |
||||
|
|
||||
|
&-tr:hover { |
||||
|
background: url("../../../../assets/img/modules/visual/hover-bac.png") |
||||
|
no-repeat center; |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.table-status { |
||||
|
height: 200px; |
||||
|
|
||||
|
// 暂无数据 |
||||
|
.no-data { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
&-img { |
||||
|
width: 249px; |
||||
|
height: 172px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue