<!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>
|
<script src="/customer_list/ch/ai_html/views/demo/js/customInstruction.js"></script>
|
<link href="/customer_list/ch/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
|
<link href="/customer_list/ch/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" />
|
<script src="/customer_list/ch/ai_html/views/demo/js/echarts.min.js"></script>
|
</head>
|
|
<body>
|
<div class="w-full h-full bg-[#f2f4f8] px-[5px] py-[5px]" id="stockToUseBoard">
|
<div class="bg-[rgb(242,244,248)] space-y-1">
|
<div v-resize="chartContainerResize" class="w-full h-full bg-white">
|
<div class="flex items-center">
|
<div class="w-[500px] text-center"><el-progress type="circle" :percentage="25" /></div>
|
<div class="min-w-[600px] h-full ml-[5px] w-full">
|
<div class="text-[16px] mb-5">销量前四的品规和数量(条)</div>
|
<div v-for="(item,index) in state.productSpecificationList" :key="item.ID">
|
<div class="text-[15px] text-[#000] w-[200px]">{{ item.Name }}</div>
|
<div class="flex">
|
<el-progress
|
:stroke-width="20"
|
:percentage="item.Value/100"
|
class="mb-[15px] w-full"
|
:text-inside="true"
|
></el-progress>
|
<div class="text-[12px] text-[#000] w-[70px] ml-[10px]">{{ item.Value }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</body>
|
<script>
|
const { createApp, onMounted, ref, reactive } = Vue;
|
const activateCustomerLineChartDomRef = ref(null);
|
const App = createApp({
|
setup() {
|
let state = reactive({
|
productSpecificationList: [
|
{
|
ID: 1,
|
Name: '南京',
|
Value: 8043,
|
},
|
{
|
ID: 2,
|
Name: '中华',
|
Value: 5023,
|
},
|
{
|
ID: 3,
|
Name: '玉溪',
|
Value: 2023,
|
},
|
{
|
ID: 4,
|
Name: '芙蓉王',
|
Value: 1032,
|
},
|
],
|
});
|
const chartContainerResize = ({ width, height }) => {
|
activateCustomerLineChartDomRef.value.resize();
|
};
|
return { state, chartContainerResize };
|
},
|
});
|
App.use(ElementPlus);
|
elementResizeDirective(App);
|
App.mount('#stockToUseBoard');
|
</script>
|
</html>
|
