<template>
|
<div class="chart-wrapper">
|
<div class="demo-form-inline">
|
<div class="haocai-title">剩余货位实时图</div>
|
<el-select v-model="formData.storage_Id" placeholder="请选择" class="w-200" @change="changeDay()">
|
<el-option v-for="item in storageNames" :key="item.storage_Id" :label="item.storageName" :value="item.storage_Id">
|
</el-option>
|
</el-select>
|
</div>
|
<div class="haocai-title"></div>
|
<el-row :gutter="10">
|
<el-col v-for="item in dataInfo" :xs="24" :sm="12" :lg="8" :key="item">
|
<ring-chart ref="ringchartOne" :ring-color="'#ff6699'" :ring-value="item.blankCount" :data1="(100.0 * dataInfo.data2/dataInfo.data1)" :data2="100-(100.0 * dataInfo.data2/dataInfo.data1)" />
|
<div class="haocai-title">{{ item.AreaCode }}</div>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
import RingChart from "../components/RingChart";
|
|
export default {
|
components: {
|
RingChart
|
},
|
data() {
|
return {
|
formData: {
|
storage_Id: null, // 仓库id
|
storageName: null
|
},
|
// 仓库 列表
|
storageNames: null,
|
dataInfo: []
|
};
|
},
|
mounted() {
|
this.getRingData();
|
this.getStorageList();
|
},
|
methods: {
|
getRingData(refresh) {
|
const id = this.formData.storage_Id;
|
const url = "/api/dashboard/wms/getRingData";
|
const params = {
|
refresh: refresh,
|
id: id
|
};
|
var callback = res => {
|
if (res.result) {
|
this.dataInfo = res.data;
|
}
|
};
|
this.common.ajax(url, params, callback, true);
|
},
|
changeDay() {
|
this.getRingData(true);
|
},
|
// 获取仓库
|
getStorageList() {
|
const url = "/api/basicInfo/base/storage/getList";
|
const params = {};
|
var callback = res => {
|
if (res.result) {
|
this.storageNames = res.data;
|
}
|
};
|
this.common.ajax(url, params, callback);
|
}
|
}
|
};
|
</script>
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
.chart-wrapper {
|
background: #fff;
|
padding: 16px 16px;
|
margin-bottom: 10px;
|
.haocai-title {
|
text-align: center;
|
color: #888;
|
font-size: 18px;
|
}
|
}
|
</style>
|
