<!DOCTYPE html>
|
<html lang="en">
|
|
<head>
|
<meta charset="UTF-8" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<title>月度排行榜</title>
|
<script src="/customer_list/ch/ai_html/views/demo/js/tailwind.js"></script>
|
<script src="/customer_list/ch/ai_html/views/demo/js/vue.global.js"></script>
|
<script src="/customer_list/ch/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script>
|
<!-- <script src="/customer_list/ch/ai_html/views/demo/js/index.full.js"></script> -->
|
<link href="/customer_list/ch/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css">
|
</link>
|
<!-- <link href="/customer_list/ch/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css">
|
</link> -->
|
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
|
<script src="//unpkg.com/element-plus"></script>
|
<script src="/customer_list/ch/ai_html/views/demo/js/echarts.min.js"></script>
|
<style type="text/css">
|
.item_title {
|
height: 38px;
|
line-height: 38px;
|
width: 100%;
|
color: #31abe3;
|
text-align: center;
|
position: relative;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.leader_left {
|
width: 58px;
|
height: 14px;
|
background-image: url('/customer_list//ch/static/images/demo/leader_left.png');
|
}
|
|
.leader_right {
|
width: 58px;
|
height: 14px;
|
background-image: url('/customer_list//ch/static/images/demo/leader_right.png');
|
transform: rotate(180deg);
|
}
|
|
.title-inner {
|
font-weight: 900;
|
letter-spacing: 2px;
|
background-color: #31abe3;
|
/* background: linear-gradient(92deg, #fff9 0%, #fff9 48.8525390625%, #fff9 100%); */
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div class="w-full h-full bg-[#f2f4f8] " id="leaderBoard">
|
<div class=" mx-[5px] my-[5px] space-y-1 bg-[rgb(242,244,248)]">
|
<div class="bg-white">
|
<div class="item_title ">
|
<div class="leader_left"></div>
|
<span>月度缴费金额排行</span>
|
<div class="leader_right"></div>
|
</div>
|
<!-- <div class="w-full h-full justify-center" v-for="(item, index) in state.leaderBoardList" :key="index">
|
<div class="w-[300px] h-10 flex justify-between items-center mx-[auto] my-[10px]">
|
<span class="title-inner">{{item.Name}}</span>
|
<span>{{item.Amount}}</span>
|
<span>{{item.CompanyName}}</span>
|
<span>{{item.NewRecord}}</span>
|
</div> -->
|
<!-- </div> -->
|
|
<el-table :data="state.leaderBoardList">
|
<el-table-column prop="Name" label="营业所" width="180"></el-table-column>
|
<el-table-column prop="Amount" label="测薄号" width="180"></el-table-column>
|
<el-table-column prop="NewRecord" label="时间"></el-table-column>
|
<el-table-column prop="CompanyName" label="网格员"></el-table-column>
|
</el-table>
|
</div>
|
|
<div class="w-full bg-white h-[270px] mt-[10px]" id="leaderChart"></div>
|
<div class="w-full bg-white h-[320px] " id="leaderBarChart"></div>
|
</div>
|
|
|
|
</div>
|
</body>
|
<script>
|
const { createApp, onMounted, ref, reactive } = Vue;
|
const App = createApp({
|
setup() {
|
let state = reactive({
|
leaderBoardList: [
|
{
|
Name: '厦门营业所',
|
Amount: '10000',
|
NewRecord: '2022-01-01',
|
CompanyName: '张三'
|
},
|
{
|
Name: '二供营业所',
|
Amount: '4354363',
|
NewRecord: '2022-01-01',
|
CompanyName: '张三'
|
},
|
{
|
Name: '同安营业所',
|
Amount: '435233',
|
NewRecord: '2022-01-01',
|
CompanyName: '李四'
|
},
|
{
|
Name: '集美营业所',
|
Amount: '54545',
|
NewRecord: '2023-01-01',
|
CompanyName: '王二'
|
},
|
{
|
Name: '翔美营业所',
|
Amount: '577887',
|
NewRecord: '2024-01-01',
|
CompanyName: '张三'
|
},
|
{
|
Name: '海沧营业所',
|
Amount: '5478786',
|
NewRecord: '2022-01-01',
|
CompanyName: '张三'
|
},
|
|
]
|
});
|
const initLeaderBoardChart = () => {
|
var chartDom = document.getElementById('leaderChart');
|
var leaderChartDom = echarts.init(chartDom);
|
var option = {
|
title: {
|
text: '近12月缴费金额',
|
textStyle: {
|
fontSize: 13
|
}
|
},
|
xAxis: {
|
type: 'category',
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: [
|
{
|
data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147],
|
type: 'line'
|
}
|
]
|
};
|
|
option && leaderChartDom.setOption(option);
|
}
|
const initLeaderBoardBarChart = () => {
|
const barXData = state.leaderBoardList.map(item => item.Name)
|
var chartDom = document.getElementById('leaderBarChart');
|
var leaderBarChartDom = echarts.init(chartDom);
|
var option = {
|
|
xAxis: {
|
type: 'category',
|
data: barXData
|
},
|
yAxis: {
|
name: '评分',
|
type: 'value'
|
},
|
series: [
|
{
|
data: [120, 200, 150, 80, 70, 110],
|
type: 'bar',
|
showBackground: true,
|
backgroundStyle: {
|
color: 'rgba(180, 180, 180, 0.2)'
|
}
|
}
|
]
|
}
|
|
option && leaderBarChartDom.setOption(option);
|
}
|
onMounted(() => {
|
initLeaderBoardChart();
|
initLeaderBoardBarChart()
|
});
|
|
return { state };
|
},
|
})
|
App.use(ElementPlus)
|
App.mount('#leaderBoard');
|
</script>
|
|
</html>
|
