100 lines
1.8 KiB
Vue
100 lines
1.8 KiB
Vue
<!--
|
|
* @Author: zwq
|
|
* @Date: 2024-07-02 15:56:48
|
|
* @LastEditors: zwq
|
|
* @LastEditTime: 2024-07-02 16:55:43
|
|
* @Description:
|
|
-->
|
|
<template>
|
|
<div class="app-container">
|
|
<div class="flexDiv">
|
|
<div v-for="i in wareName" :key="i + 'a'" class="divClass up">
|
|
{{ i }}
|
|
</div>
|
|
</div>
|
|
<div class="flexDiv">
|
|
<div v-for="i in stockNum" :key="i + 'b'" class="divClass down">
|
|
<span v-if="i === '库存数量'">{{ i }}</span>
|
|
<el-link v-else :underline="false" type="primary" @click="toPage(i)">
|
|
{{ i }}
|
|
</el-link>
|
|
</div>
|
|
</div>
|
|
<barChart
|
|
style="margin-top: 50px"
|
|
ref="barChart"
|
|
height="600px"
|
|
:title="'库存数量'"
|
|
v-if="barData.length"
|
|
:bar-data="barData" />
|
|
<!-- 没有数据 -->
|
|
<div class="no-data-bg" v-else></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import barChart from './BarChart.vue';
|
|
export default {
|
|
data() {
|
|
return {
|
|
wareName: ['仓库名称'],
|
|
stockNum: ['库存数量'],
|
|
barData: [],
|
|
};
|
|
},
|
|
components: {
|
|
barChart,
|
|
},
|
|
created() {
|
|
for (let i = 0; i < 5; i++) {
|
|
this.wareName.push('仓库' + i);
|
|
this.stockNum.push(i * 100 + i);
|
|
}
|
|
},
|
|
methods: {
|
|
toPage(i) {
|
|
console.log(i);
|
|
for (let i = 1; i < 6; i++) {
|
|
const obj = {
|
|
name: this.wareName[i],
|
|
value: this.stockNum[i],
|
|
};
|
|
this.barData.push(obj);
|
|
}
|
|
console.log(this.barData);
|
|
this.$nextTick(() => {
|
|
this.$refs.barChart.initChart();
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.flexDiv {
|
|
display: flex;
|
|
}
|
|
.divClass {
|
|
width: 120px;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
text-align: center;
|
|
border: 1px solid #ededed;
|
|
font-size: 14px;
|
|
color: #606266;
|
|
}
|
|
.up:nth-child(n) {
|
|
border-bottom: none;
|
|
border-right: none;
|
|
}
|
|
.up:last-child {
|
|
border-right: 1px solid #ededed;
|
|
}
|
|
.down:nth-child(n) {
|
|
border-right: none;
|
|
}
|
|
.down:last-child {
|
|
border-right: 1px solid #ededed;
|
|
}
|
|
</style>
|