|
|
@@ -2,6 +2,35 @@
|
|
|
<div>
|
|
|
<a-row type="flex" justify="space-between">
|
|
|
<a-col :span="17">
|
|
|
+ <div class="assetReport">
|
|
|
+ <a-card :bordered="false" title="Asset Report">
|
|
|
+ <div class="reportContent">
|
|
|
+ <div class="left">
|
|
|
+ <a-list :data-source="groupsList" :split="false">
|
|
|
+ <a-list-item slot="renderItem" slot-scope="item, index" @click="clickItem(item)">
|
|
|
+ <div :class="asset_id == item.id ? 'active' : ''">
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ </a-list-item>
|
|
|
+ </a-list>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <a-row type="flex" justify="space-around">
|
|
|
+ <a-col :span="12" style="text-align: center">
|
|
|
+ <div class="Requirments">
|
|
|
+ <div class="tile-title">Total Requirments</div>
|
|
|
+ <div class="tile-amount">0</div>
|
|
|
+ <a-button type="primary"> See all </a-button>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <div class="product-info"></div>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-card>
|
|
|
+ </div>
|
|
|
<div>
|
|
|
<a-card :bordered="false" title="Asset Plans">
|
|
|
<a-table
|
|
|
@@ -13,17 +42,6 @@
|
|
|
showPagination="auto"
|
|
|
childrenColumnName="list"
|
|
|
>
|
|
|
- <!-- <span slot="action" slot-scope="text, record">
|
|
|
- <a @click="projectClick(record.id)">Create Project</a>
|
|
|
- <a-divider type="vertical" />
|
|
|
- <a @click="lickClick(record.id)">Link Requirement</a>
|
|
|
- <a-divider type="vertical" />
|
|
|
- <a @click="childClick(record.id)">Child Plan</a>
|
|
|
- <a-divider type="vertical" />
|
|
|
- <a @click="editClick(record.id)">Edit</a>
|
|
|
- <a-divider type="vertical" />
|
|
|
- <a @click="delClick(record.id)">Delete</a>
|
|
|
- </span> -->
|
|
|
</a-table>
|
|
|
</a-card>
|
|
|
</div>
|
|
|
@@ -59,6 +77,7 @@ export default {
|
|
|
|
|
|
data() {
|
|
|
return {
|
|
|
+ asset_id: null,
|
|
|
loading: false,
|
|
|
list: [],
|
|
|
queryParam: {
|
|
|
@@ -96,6 +115,10 @@ export default {
|
|
|
this.getAssetList()
|
|
|
},
|
|
|
methods: {
|
|
|
+ clickItem(item) {
|
|
|
+ console.log(item)
|
|
|
+ this.asset_id = item.id
|
|
|
+ },
|
|
|
getList() {
|
|
|
this.loading = true
|
|
|
assetPlansList(this.queryParam).then((res) => {
|
|
|
@@ -106,6 +129,7 @@ export default {
|
|
|
getAssetList() {
|
|
|
assetList().then((res) => {
|
|
|
this.groupsList = res.data
|
|
|
+ this.asset_id = this.groupsList[0].id
|
|
|
})
|
|
|
},
|
|
|
handleAdd() {
|
|
|
@@ -150,9 +174,51 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
+.assetReport {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
.progress-content {
|
|
|
display: flex;
|
|
|
justify-content: space-around;
|
|
|
align-items: center;
|
|
|
}
|
|
|
+.reportContent {
|
|
|
+ display: flex;
|
|
|
+ .left {
|
|
|
+ overflow: auto;
|
|
|
+ max-height: 220px;
|
|
|
+ border-right: 1px solid #ebf2fb;
|
|
|
+ width: 260px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+.active {
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ display: inline-block;
|
|
|
+ width: 5px;
|
|
|
+ height: 10px;
|
|
|
+ margin-left: -9px;
|
|
|
+ background: #000 linear-gradient(to left, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
|
|
|
+ }
|
|
|
+}
|
|
|
+.Requirments {
|
|
|
+ color: #a0a4b2;
|
|
|
+ .tile-amount {
|
|
|
+ color: #3c4353;
|
|
|
+ font-size: 32px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep {
|
|
|
+ .ant-list-item {
|
|
|
+ padding: 12px !important;
|
|
|
+ }
|
|
|
+ .ant-list-item:hover {
|
|
|
+ background: #ebf2fb;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
