|
@@ -15,22 +15,34 @@
|
|
|
</report-header>
|
|
|
<div class="page-main">
|
|
|
<div class="scroll-content">
|
|
|
- <div class="card">
|
|
|
+ <div class="card card1">
|
|
|
<div class="title">库存监控</div>
|
|
|
- <div class="chart-wrap">
|
|
|
- <my-chart :options="options1"></my-chart>
|
|
|
+ <div class="flex" style="height: calc(100% - 36px)">
|
|
|
+ <div class="chart-wrap">
|
|
|
+ <my-chart :options="options1"></my-chart>
|
|
|
+ </div>
|
|
|
+ <div class="table-wrap1">
|
|
|
+ <t-table
|
|
|
+ size="small"
|
|
|
+ row-key="index"
|
|
|
+ :columns="columns"
|
|
|
+ :data="tableData1"
|
|
|
+ bordered
|
|
|
+ v-loading="loading2"
|
|
|
+ >
|
|
|
+ </t-table>
|
|
|
+ <t-pagination
|
|
|
+ v-if="pagination1.total > 0"
|
|
|
+ style="margin-top: 15px"
|
|
|
+ v-model="pagination1.current"
|
|
|
+ v-model:pageSize="pagination1.pageSize"
|
|
|
+ :total="pagination1.total"
|
|
|
+ :showPageSize="false"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <t-table
|
|
|
- size="small"
|
|
|
- row-key="index"
|
|
|
- :columns="columns"
|
|
|
- :data="tableData"
|
|
|
- bordered
|
|
|
- v-loading="loading2"
|
|
|
- >
|
|
|
- </t-table>
|
|
|
</div>
|
|
|
- <div class="card m-t-10px">
|
|
|
+ <div class="card card2 m-t-10px">
|
|
|
<div class="title">资源预警监控</div>
|
|
|
<div class="detail">
|
|
|
总配额:{{ result3?.DEVICES }} | 总差额空闲比:{{
|
|
@@ -48,6 +60,14 @@
|
|
|
v-loading="loading4"
|
|
|
>
|
|
|
</t-table>
|
|
|
+ <t-pagination
|
|
|
+ v-if="pagination2.total > 0"
|
|
|
+ style="margin-top: 15px"
|
|
|
+ v-model="pagination2.current"
|
|
|
+ v-model:pageSize="pagination2.pageSize"
|
|
|
+ :total="pagination2.total"
|
|
|
+ :showPageSize="false"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -55,7 +75,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup name="DeviceAnalysis">
|
|
|
-import { ref, computed, onMounted, watch } from 'vue';
|
|
|
+import { ref, computed, onMounted, watch, reactive } from 'vue';
|
|
|
import { useRequest } from 'vue-request';
|
|
|
import { createCakePieOption } from '@/utils/chart';
|
|
|
import {
|
|
@@ -116,27 +136,49 @@ onMounted(() => {
|
|
|
run3();
|
|
|
run4();
|
|
|
});
|
|
|
-const tableData = computed(() => {
|
|
|
+const pagination1 = reactive({
|
|
|
+ current: 1,
|
|
|
+ pageSize: 3,
|
|
|
+ total: 0,
|
|
|
+});
|
|
|
+const tableData1 = computed(() => {
|
|
|
+ let data = [];
|
|
|
if (!model.value) {
|
|
|
- return result2.value || [];
|
|
|
+ data = result2.value || [];
|
|
|
} else {
|
|
|
- return result2.value
|
|
|
- ?.filter((item) => item.MODEL == model.value)
|
|
|
- .map((item, index) => {
|
|
|
- item.index = index + '';
|
|
|
- item.occupyRate =
|
|
|
- item.TOTAL == (0 ? 0 : (item.ISOUT / item.TOTAL) * 100) + '%';
|
|
|
- return item;
|
|
|
- });
|
|
|
+ data = (result2.value || [])?.filter((item) => item.MODEL == model.value);
|
|
|
}
|
|
|
+ data = data.map((item, index) => {
|
|
|
+ item.index = index + '';
|
|
|
+ item.occupyRate =
|
|
|
+ item.TOTAL == 0 ? 0 : ((item.ISOUT / item.TOTAL) * 100).toFixed(2) + '%';
|
|
|
+ return item;
|
|
|
+ });
|
|
|
+ pagination1.total = data.length;
|
|
|
+ return data.slice(
|
|
|
+ pagination1.pageSize * (pagination1.current - 1),
|
|
|
+ pagination1.pageSize * (pagination1.current - 1) + pagination1.pageSize
|
|
|
+ );
|
|
|
+});
|
|
|
+
|
|
|
+const pagination2 = reactive({
|
|
|
+ current: 1,
|
|
|
+ pageSize: 4,
|
|
|
+ total: 0,
|
|
|
});
|
|
|
const tableData2 = computed(() => {
|
|
|
- return result4?.value?.map((item) => {
|
|
|
+ let data = (result4?.value || []).map((item) => {
|
|
|
item.difference = (item.devices || 0) - item.OUTS;
|
|
|
item.rate = division(item?.OUTS, item?.devices || 0) + '%';
|
|
|
return item;
|
|
|
});
|
|
|
+ pagination2.total = data.length;
|
|
|
+ return data.slice(
|
|
|
+ pagination2.pageSize * (pagination2.current - 1),
|
|
|
+ pagination2.pageSize * (pagination2.current - 1) + pagination2.pageSize
|
|
|
+ );
|
|
|
});
|
|
|
+
|
|
|
const columns = [
|
|
|
{ colKey: 'ISIN', title: '空闲' },
|
|
|
{ colKey: 'BREAK_DOWN', title: '故障' },
|
|
@@ -196,6 +238,13 @@ const options1 = computed(() => {
|
|
|
background-color: #fff;
|
|
|
border: 1px solid #e5e5e5;
|
|
|
border-radius: 4px;
|
|
|
+
|
|
|
+ &.card1 {
|
|
|
+ height: calc(45% - 5px);
|
|
|
+ }
|
|
|
+ &.card2 {
|
|
|
+ height: calc(55% - 5px);
|
|
|
+ }
|
|
|
.detail {
|
|
|
color: #8c8c8c;
|
|
|
font-size: 12px;
|
|
@@ -213,8 +262,14 @@ const options1 = computed(() => {
|
|
|
}
|
|
|
}
|
|
|
.chart-wrap {
|
|
|
- height: 180px;
|
|
|
- width: 300px;
|
|
|
+ height: 100%;
|
|
|
+ width: 310px;
|
|
|
+ }
|
|
|
+ .table-wrap1 {
|
|
|
+ width: calc(100% - 360px);
|
|
|
+ margin-left: 50px;
|
|
|
+ height: 100%;
|
|
|
+ overflow: auto;
|
|
|
}
|
|
|
}
|
|
|
}
|