<template>
<el-row :gutter="3">
<el-col :span="24" class="table-title">{{ title }}</el-col>
<el-col :span="24">
<el-table :data="tableData" style="width: 100%">
<el-table-column
prop="date"
label="序号"
align="center"
v-if="number == 3"
>
</el-table-column>
<el-table-column
prop="date"
label="资产名称"
align="center"
v-if="number == 3 || number == 4 || number == 5"
>
</el-table-column>
<el-table-column
prop="date"
label="资产类型"
align="center"
v-if="number == 3 || number == 4 || number == 5"
>
</el-table-column>
<el-table-column
label="排名"
width="180"
align="center"
v-if="number == 1 || number == 2"
>
<template slot-scope="scope">
<img
:src="mgImgs[scope.$index].img"
alt=""
width="83px"
height="30px"
/>
</template>
</el-table-column>
<el-table-column
prop="name"
label="所在位置"
align="center"
v-if="number == 1 || number == 2 || number == 3"
>
</el-table-column>
<el-table-column
prop="address"
:label="label2"
align="center"
v-if="number == 3"
>
</el-table-column>
<el-table-column
prop="address"
label="报废原因"
align="center"
v-if="number == 4"
>
</el-table-column>
<el-table-column
prop="address"
label="资产编码"
align="center"
v-if="number == 5"
>
</el-table-column>
<el-table-column
prop="address"
label="闲置天数"
align="center"
v-if="number == 5"
>
</el-table-column>
<el-table-column
prop="number"
:label="label"
align="center"
v-if="number == 1 || number == 2"
>
<template slot-scope="scope">
<el-progress
:percentage="scope.row.number"
:format="format"
:class="`progress${scope.$index}`"
></el-progress>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
</template>
<script>
export default {
name: "manageTable",
props: {
number: {
type: Number,
default: () => 1,
},
title: {
type: String,
default: () => "",
},
tableData: {
type: Array,
default: () => [],
},
},
data() {
return {
label: "",
label2: "",
progress0: "progress0",
progress1: "progress1",
progress2: "progress2",
progress3: "progress3",
progress4: "progress4",
mgImgs: [
{
img: require("../../../assets/images/top1.png"),
},
{
img: require("../../../assets/images/top2.png"),
},
{
img: require("../../../assets/images/top3.png"),
},
{
img: require("../../../assets/images/top4.png"),
},
{
img: require("../../../assets/images/top5.png"),
},
],
};
},
mounted() {
this.label = this.title.substring(0, 2) + "数量";
this.label2 = this.title.substring(0, 2) + "次数";
},
methods: {
oddRowClass({ row, rowIndex }) {
if (rowIndex % 2 == 0) {
return "even";
} else {
return "odd";
}
},
evenRowClass({ row, rowIndex }) {
if (rowIndex % 2 == 0) {
return "even2";
} else {
return "odd2";
}
},
format(percentage) {
return `${percentage}`;
},
},
};
</script>
<style lang="scss" scoped>
.table-title {
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 20px;
color: #666666;
line-height: 28px;
text-align: left;
font-style: normal;
}
.el-table .odd {
background: #f7faff;
}
.el-table .even {
background: #ffffff;
}
.el-table .odd2 {
background: #fff2db;
}
.el-table .even2 {
background: #ffffff;
}
::v-deep {
.progress0 {
.el-progress-bar__inner {
background: linear-gradient(270deg, #fe9c8f 0%, #fc6356 100%);
}
}
.progress1 {
.el-progress-bar__inner {
background: linear-gradient(270deg, #ffab49 0%, #ff7323 100%);
}
}
.progress2 {
.el-progress-bar__inner {
background: linear-gradient(270deg, #7eda87 0%, #25c835 100%);
}
}
.progress3 {
.el-progress-bar__inner {
background: llinear-gradient(270deg, #6d99e4 0%, #165bd3 100%);
}
}
.progress4 {
.el-progress-bar__inner {
background: linear-gradient(270deg, #6d99e4 0%, #165bd3 100%);
}
}
.el-progress__text {
margin-left: 20px;
}
}
</style>
