<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
<title>经销商概况及总达成</title>
|
</head>
|
|
<body>
|
<script type="text/javascript">
|
var pageVue = null;
|
function loadJsCss(callback) {
|
var jscss_urls = [
|
{id: "js6", type: "js", url: "root/js/echarts.js"},
|
{id: "js7", type: "js", url: "root/js/calendar.js"},
|
{id: "js8", type: "js", url: "root/js/China.js"},
|
];
|
window.top.initJsCss(document, jscss_urls, callback);
|
}
|
|
function initVue() {
|
new BasicsVue({
|
el: "#hbody",
|
data: {
|
dataRequest: [
|
{
|
name: "pfo_nation",
|
url: "root/chart/countryImplantShowPFO",
|
paramsobj: {year: "2023"},
|
isnotoption: true, //true:不是选项
|
},
|
],
|
dataRequestObj: {},
|
|
dataCharts: {
|
"toPlatform": [
|
{
|
qty: "5",
|
amount: "555",
|
},
|
],
|
"toT1": [
|
{
|
qty: "18",
|
amount: "1818",
|
},
|
],
|
"toT2": [
|
{
|
qty: "11",
|
amount: "1111",
|
},
|
],
|
"T2toHospitals": [
|
{
|
qty: "490",
|
},
|
],
|
"T1toHospitals": [
|
{
|
qty: "32",
|
},
|
],
|
},
|
|
//Year
|
options_year: [
|
{
|
value: '2021',
|
label: '2021'
|
},
|
{
|
value: '2022',
|
label: '2022'
|
},
|
{
|
value: '2023',
|
label: '2023'
|
},
|
],
|
year: '2023',
|
|
tableFields_target: [
|
{isshow: "T",field: "customer_name",name: "主要绩效指标",width: "150",align: "left",isminwidth: true},
|
{isshow: "T",field: "PTQ",name: "PFO",width: "100"},
|
{isshow: "T",field: "YoY_Growth",name: "先心",width: "100"},
|
{isshow: "T",field: "cover",name: "输送系统",width: "100"},
|
{isshow: "T",field: "Non_active",name: "配件",width: "100"},
|
],
|
tableData_target: [
|
{
|
customer_name: 'YTD经销商销售金额',
|
PTQ: '4564322',
|
YoY_Growth: '6343635',
|
cover: '43646',
|
Non_active: '2542',
|
},
|
{
|
customer_name: 'YTD经销商报量金额',
|
PTQ: '4564322',
|
YoY_Growth: '6343635',
|
cover: '43646',
|
Non_active: '2542',
|
},
|
{
|
customer_name: 'YTD经销商销售金额',
|
PTQ: '4564322',
|
YoY_Growth: '6343635',
|
cover: '43646',
|
Non_active: '2542',
|
},
|
{
|
customer_name: '经销商报量金额',
|
PTQ: '4564322',
|
YoY_Growth: '6343635',
|
cover: '43646',
|
Non_active: '2542',
|
},
|
],
|
|
tableFields_sum: [
|
{isshow: "T",field: "customer_name",name: "分类",width: "250",align: "left",isminwidth: true},
|
{isshow: "T",field: "PTQ",name: "数量",width: "100"},
|
],
|
tableData_sum: [
|
{
|
customer_name: '有效经销商(合同有效期内)数量',
|
PTQ: '285',
|
},
|
{
|
customer_name: '新引进经销商(当月)数量',
|
PTQ: '19',
|
},
|
{
|
customer_name: '不活跃经销商(6个月无进货)数量',
|
PTQ: '75',
|
},
|
{
|
customer_name: '终止经销商(当月)数量',
|
PTQ: '9',
|
},
|
],
|
},
|
|
created() {
|
var me = this;
|
|
},
|
|
mounted() {
|
var me = this;
|
//预加载数据
|
if (this.dataRequest && this.dataRequest.length) {
|
var result = {};
|
this.loadRequestData(this.dataRequest, result, function(data) {
|
me.dataRequestObj = data;
|
if (me.dataRequestObj.pfo_nation) {
|
for (var k in me.dataCharts) {
|
if (k != 'T2toHospitals' && k != 'T1toHospitals') {
|
me.dataCharts[k][0].qty += "家";
|
me.dataCharts[k][0].amount = "金额：" + me.dataCharts[k][0].amount;
|
} else {
|
me.dataCharts[k][0].qty += " Hospitals";
|
}
|
}
|
console.log(me.dataCharts);
|
|
me.$nextTick(() => {
|
hideLoading();
|
let clientHeight = document.documentElement.clientHeight;
|
me.initData();
|
})
|
}
|
});
|
} else {
|
me.$nextTick(() => {
|
hideLoading();
|
let clientHeight = document.documentElement.clientHeight;
|
me.initData();
|
})
|
}
|
},
|
|
methods: {
|
initData() {
|
var me = this;
|
|
},
|
|
query_filter() {
|
var me = this;
|
let param = {
|
year: me.year,
|
};
|
Server.call("root/chart/dealerOverviewReach", param, function(result) {
|
console.log(result);
|
if(result.data.keytarget) {
|
var data = result.data.keytarget;
|
|
} else {
|
|
}
|
me.initData();
|
});
|
},
|
},
|
});
|
};
|
|
loadJsCss(function() {
|
initVue();
|
});
|
</script>
|
|
<style>
|
[v-cloak] {
|
display: none !important;
|
}
|
|
.v_header .v_header_query{
|
padding: 0px 36px;
|
box-sizing: border-box;
|
}
|
|
.v_main {
|
background:linear-gradient(rgba(246, 247, 248, 0.878), rgba(170, 207, 243, 0.785));
|
background-size: contain;
|
background-position: bottom left;
|
}
|
|
/* 筛选 */
|
.selectors {
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
}
|
.selectors el-select {
|
flex: 1;
|
}
|
|
/* 筛选器下的整体图表 */
|
.charts {
|
width: 99%;
|
height: 85%;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-around;
|
}
|
|
/* 左右图表 */
|
.chart {
|
width: 45%;
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
/* line和文字块box */
|
.part {
|
width: 100%;
|
height: 13%;
|
display: flex;
|
flex-wrap: wrap;
|
/* line垂直居中 */
|
align-items: center;
|
}
|
|
/* dotted line */
|
.line {
|
width: 25%;
|
height:1px;
|
border-top:dotted rgb(177, 176, 180);
|
}
|
|
/* 文字块文字 */
|
.block-words {
|
width: 75%;
|
height: 100%;
|
color:rgba(246, 247, 248, 0.878);
|
text-align: center;
|
font-weight: 600;
|
font-size: medium;
|
}
|
|
/* 文字箭头box */
|
.part-gap {
|
width: 100%;
|
height: 16%;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-around;
|
}
|
|
/* 箭头box 或者 子类block */
|
.block-box {
|
width: 75%;
|
height:100%;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
}
|
|
/* 箭头block */
|
.block-gap {
|
width: 40%;
|
height:100%;
|
/* background-color: #db6ac6; */
|
display: flex;
|
justify-content: space-around;
|
}
|
|
.group {
|
width: 10%;
|
height: 100%;
|
/* background-color: #23647d; */
|
}
|
|
.slim {
|
width: 5%;
|
height: 100%;
|
/* background-color: #23647d; */
|
}
|
|
.bar {
|
width: 50%;
|
height: 75%;
|
margin:0 auto;
|
}
|
.triangle {
|
/* width: 100%;
|
height: 25%;
|
margin:0 auto; */
|
|
width: 0;
|
height: 0;
|
border-style: solid;
|
border-width: 13.05px 8.655px 0 8.655px;
|
}
|
|
.slim .bar {
|
width: 50%;
|
height: 85%;
|
margin:0 auto;
|
}
|
|
.slim .triangle {
|
/* width: 100%;
|
height: 15%;
|
margin:0 auto; */
|
|
width: 0;
|
height: 0;
|
border-style: solid;
|
border-width: 7.83px 4.325px 0 4.325px;
|
}
|
|
.bar-long {
|
width: 5%;
|
height: 100%;
|
margin:0 auto;
|
}
|
|
/* 箭头word */
|
.word {
|
width: 25%;
|
height: 100%;
|
/* background-color: #81687d; */
|
text-align: left;
|
color:Navy;
|
font-size: small;
|
font-weight: 600;
|
}
|
|
/* 子类block */
|
.block {
|
width: 40%;
|
height:100%;
|
background-color: RoyalBlue;
|
text-align: center;
|
color:Black;
|
font-size: small;
|
font-weight: 600;
|
}
|
|
.light {
|
background-color: LightSkyBlue;
|
}
|
|
.main-color {
|
background-color: Navy;
|
|
}
|
|
.hospital-color {
|
background-color: FireBrick;
|
}
|
|
.mark {
|
width: 40%;
|
height: 100%;
|
font-size: small;
|
}
|
|
.left {
|
text-align: left;
|
}
|
|
.right {
|
text-align: right;
|
}
|
|
.arrow-purple {
|
background-color: LightSteelBlue;
|
}
|
|
.arrow-green {
|
background-color: ForestGreen;
|
}
|
|
.arrow-blue {
|
background-color: Aqua;
|
}
|
|
.arrow-purple-t {
|
border-color: LightSteelBlue transparent transparent transparent;
|
}
|
|
.arrow-green-t {
|
border-color: ForestGreen transparent transparent transparent;
|
}
|
|
.arrow-blue-t {
|
border-color: Aqua transparent transparent transparent;
|
}
|
</style>
|
|
<div v-cloak id="hbody" class="h_body" style="margin: 0;padding: 0;">
|
<div id="page_root" ref="ref_main" class="v_main" style="padding: 0px 0px 0px 10px">
|
<div style="width: 100%; height: 100%; overflow-y: hidden;">
|
<div>
|
<h3 style="font-weight: 600;color: #045c24;text-align: center;">经销商概况及总达成</h3>
|
</div>
|
|
<div class="selectors">
|
<el-select
|
placeholder="Year"
|
v-model="year"
|
clearable
|
@change="query_filter"
|
>
|
<el-option
|
v-for="item in options_year"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
|
<div class="charts">
|
<div class="chart" style="height: 85%; margin-top: 3%;">
|
<div style="width: 100%;">
|
<h-table
|
v-if="tableFields_target"
|
ref="table_target"
|
:table-fields="tableFields_target"
|
:table-data="tableData_target"
|
|
:is-pagination="false"
|
>
|
</h-table>
|
</div>
|
|
<div style="width: 100%;">
|
<h-table
|
v-if="tableFields_sum"
|
ref="table_sum"
|
:table-fields="tableFields_sum"
|
:table-data="tableData_sum"
|
|
:is-pagination="false"
|
>
|
</h-table>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div id="page_loading" style="position: absolute; top:0px; width: 100vw; height: 50vh;">
|
<div class="spinner">
|
<div class="cube1"></div>
|
<div class="cube2"></div>
|
</div>
|
</div>
|
</div>
|
</body>
|
</html>
|
