|
|
|
@ -2,50 +2,12 @@ |
|
|
|
<a-card :loading="loading" :bordered="false" :body-style="{ padding: '0' }"> |
|
|
|
<a-card :loading="loading" :bordered="false" :body-style="{ padding: '0' }"> |
|
|
|
<div class="salesCard"> |
|
|
|
<div class="salesCard"> |
|
|
|
<a-tabs default-active-key="1" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }"> |
|
|
|
<a-tabs default-active-key="1" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }"> |
|
|
|
<template #rightExtra> |
|
|
|
<a-tab-pane loading="true" tab="能力分布" key="1"> |
|
|
|
<div class="extra-wrapper"> |
|
|
|
|
|
|
|
<div class="extra-item"> |
|
|
|
|
|
|
|
<a>今日</a> |
|
|
|
|
|
|
|
<a>本周</a> |
|
|
|
|
|
|
|
<a>本月</a> |
|
|
|
|
|
|
|
<a>本年</a> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<a-range-picker :style="{ width: '256px' }" /> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
<a-tab-pane loading="true" tab="受理监管" key="1"> |
|
|
|
|
|
|
|
<a-row> |
|
|
|
<a-row> |
|
|
|
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24"> |
|
|
|
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24"> |
|
|
|
<Bar :chartData="barData" :option="{ title: { text: '受理量统计', textStyle: { fontWeight: 'lighter' } } }" height="40vh" /> |
|
|
|
<Bar :chartData="barData" :option="{ title: { text: '能力分布', textStyle: { fontWeight: 'lighter' } } }" height="40vh" /> |
|
|
|
</a-col> |
|
|
|
|
|
|
|
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24"> |
|
|
|
|
|
|
|
<QuickNav :loading="loading" class="enter-y" :bordered="false" :body-style="{ padding: 0 }" /> |
|
|
|
|
|
|
|
</a-col> |
|
|
|
|
|
|
|
</a-row> |
|
|
|
|
|
|
|
</a-tab-pane> |
|
|
|
|
|
|
|
<a-tab-pane tab="交互监管" key="2"> |
|
|
|
|
|
|
|
<a-row> |
|
|
|
|
|
|
|
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24"> |
|
|
|
|
|
|
|
<BarMulti |
|
|
|
|
|
|
|
:chartData="barMultiData" |
|
|
|
|
|
|
|
:option="{ title: { text: '平台与部门交互量统计', textStyle: { fontWeight: 'lighter' } } }" |
|
|
|
|
|
|
|
height="40vh" |
|
|
|
|
|
|
|
/> |
|
|
|
|
|
|
|
</a-col> |
|
|
|
|
|
|
|
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24"> |
|
|
|
|
|
|
|
<QuickNav :loading="loading" class="enter-y" :bordered="false" :body-style="{ padding: 0 }" /> |
|
|
|
|
|
|
|
</a-col> |
|
|
|
|
|
|
|
</a-row> |
|
|
|
|
|
|
|
</a-tab-pane> |
|
|
|
|
|
|
|
<a-tab-pane tab="存储监管" key="3"> |
|
|
|
|
|
|
|
<a-row> |
|
|
|
|
|
|
|
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24" style="display: flex"> |
|
|
|
|
|
|
|
<Gauge :chartData="{ name: 'C盘', value: 70 }" height="30vh"></Gauge> |
|
|
|
|
|
|
|
<Gauge :chartData="{ name: 'D盘', value: 50 }" height="30vh"></Gauge> |
|
|
|
|
|
|
|
</a-col> |
|
|
|
|
|
|
|
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24"> |
|
|
|
|
|
|
|
<QuickNav :loading="loading" class="enter-y" :bordered="false" :body-style="{ padding: 0 }" /> |
|
|
|
|
|
|
|
</a-col> |
|
|
|
</a-col> |
|
|
|
|
|
|
|
|
|
|
|
</a-row> |
|
|
|
</a-row> |
|
|
|
</a-tab-pane> |
|
|
|
</a-tab-pane> |
|
|
|
</a-tabs> |
|
|
|
</a-tabs> |
|
|
|
@ -54,10 +16,10 @@ |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<script lang="ts" setup> |
|
|
|
<script lang="ts" setup> |
|
|
|
import { ref } from 'vue'; |
|
|
|
import { ref } from 'vue'; |
|
|
|
|
|
|
|
import { defHttp } from '/@/utils/http/axios'; |
|
|
|
import Bar from '/@/components/chart/Bar.vue'; |
|
|
|
import Bar from '/@/components/chart/Bar.vue'; |
|
|
|
import BarMulti from '/@/components/chart/BarMulti.vue'; |
|
|
|
const ruleBaseURL = '/admin/inde/'; |
|
|
|
import Gauge from '/@/components/chart/Gauge.vue'; |
|
|
|
const url = ruleBaseURL + 'studentindex'; |
|
|
|
import QuickNav from './QuickNav.vue'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
defineProps({ |
|
|
|
defineProps({ |
|
|
|
loading: { |
|
|
|
loading: { |
|
|
|
@ -65,21 +27,26 @@ |
|
|
|
}, |
|
|
|
}, |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
const rankList = []; |
|
|
|
|
|
|
|
for (let i = 0; i < 7; i++) { |
|
|
|
|
|
|
|
rankList.push({ |
|
|
|
|
|
|
|
name: '白鹭岛 ' + (i + 1) + ' 号店', |
|
|
|
|
|
|
|
total: 1234.56 - i * 100, |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const barData = []; |
|
|
|
const barData = []; |
|
|
|
for (let i = 0; i < 12; i += 1) { |
|
|
|
const getOrderNum = () => { |
|
|
|
|
|
|
|
defHttp.get({ url }, { isTransformResponse: false }).then((res) => { |
|
|
|
|
|
|
|
// 执行成功，获取返回的值，并赋到页面上 |
|
|
|
|
|
|
|
if (res.success) { |
|
|
|
|
|
|
|
for (let i = 0; i < res.result.length; i += 1){ |
|
|
|
barData.push({ |
|
|
|
barData.push({ |
|
|
|
name: `${i + 1}月`, |
|
|
|
name :res.result[i].capacityName, |
|
|
|
value: Math.floor(Math.random() * 1000) + 200, |
|
|
|
value: res.result[i].value, |
|
|
|
}); |
|
|
|
}) |
|
|
|
|
|
|
|
/* console.log("---------------------") |
|
|
|
|
|
|
|
console.log(barData) |
|
|
|
|
|
|
|
console.log("---------------------")*/ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const barMultiData = []; |
|
|
|
const barMultiData = []; |
|
|
|
for (let j = 0; j < 2; j++) { |
|
|
|
for (let j = 0; j < 2; j++) { |
|
|
|
for (let i = 0; i < 12; i += 1) { |
|
|
|
for (let i = 0; i < 12; i += 1) { |
|
|
|
@ -90,6 +57,10 @@ |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 在 setup 函数最后自动调用 getOrderNum 函数 |
|
|
|
|
|
|
|
getOrderNum(); |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped> |
|
|
|
<style lang="less" scoped> |
|
|
|
|
