<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="main.aspx.cs" Inherits="FineUIPro.Web.common.main" %>
<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
<link href="../res/css/common.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery-3.7.1.min.js"></script>
<script src="../Scripts/layer/layer.js"></script>
<script src="../Scripts/echarts/echarts.js"></script>
<style>
.f-grid-row.color1,
.f-grid-row.color1 .f-icon,
.f-grid-row.color1 a {
color: #A52A2A;
}
.f-grid-row.color2,
.f-grid-row.color2 .f-icon,
.f-grid-row.color2 a {
color: #A9A9A9;
}
.colorRed {
color: #FF0000;
}
</style>
</head>
<body class="f-body-bgcolor">
<form id="form1" runat="server">
<f:PageManager ID="PageManager1" runat="server" AutoSizePanelID="Panel2" />
<f:Panel ID="Panel2" CssClass="blockpanel" Margin="0px" runat="server" ShowBorder="false" ShowHeader="false" Layout="Region">
<Items>
<f:Panel runat="server" ID="panelTopRegion" RegionPosition="Center"
Title="中间面板" ShowBorder="false" ShowHeader="false" Layout="VBox">
<Items>
<f:HiddenField runat="server" ID="hidVendor_Name"></f:HiddenField>
<f:HiddenField runat="server" ID="hidFO_NO"></f:HiddenField>
<f:Grid ID="Grid1" ShowBorder="true" ShowHeader="false" EnableCollapse="true" runat="server"
BoxFlex="1" DataKeyNames="ID" AllowCellEditing="true" ClicksToEdit="2" DataIDField="ID"
AllowSorting="true" SortField="FO_NO" SortDirection="DESC" OnSort="Grid1_Sort"
AllowPaging="true" IsDatabasePaging="true" PageSize="15" OnPageIndexChange="Grid1_PageIndexChange" EnableRowSelectEvent="true" EnableRowClickEvent="true" OnRowClick="Grid1_RowClick" AllowFilters="true"
OnFilterChange="Grid1_FilterChange" OnRowDataBound="Grid1_RowDataBound">
<Toolbars>
<f:Toolbar ID="Toolbar1" Position="Top" runat="server">
<Items>
<f:DropDownList ID="drpValidContracts" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList_SelectedIndexChanged">
<f:ListItem Value="1" Text="Valid Contracts" />
<f:ListItem Value="2" Text="All Contracts" />
</f:DropDownList>
<f:TextBox ID="txtDescription" runat="server" EmptyText="Description" AutoPostBack="true" OnTextChanged="DropDownList_SelectedIndexChanged"></f:TextBox>
<f:TextBox ID="txtContractor" runat="server" EmptyText="Contractor" AutoPostBack="true" OnTextChanged="DropDownList_SelectedIndexChanged"></f:TextBox>
<f:ToolbarFill ID="ToolbarFill1" runat="server"></f:ToolbarFill>
<f:Button ID="btnSearch" runat="server" Icon="SystemSearch" Text="Search" OnClick="btnSearch_Click"></f:Button>
<f:HiddenField ID="hdKeyword" runat="server"></f:HiddenField>
<f:HiddenField ID="hdContractNo" runat="server"></f:HiddenField>
<f:HiddenField ID="hdContractAdmin" runat="server"></f:HiddenField>
<f:HiddenField ID="hdPricingScheme" runat="server"></f:HiddenField>
<f:HiddenField ID="hdItemsString" runat="server"></f:HiddenField>
</Items>
</f:Toolbar>
</Toolbars>
<Columns>
<f:TemplateField Width="40px">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Container.DataItemIndex + 1 %>'></asp:Label>
</ItemTemplate>
</f:TemplateField>
<f:RenderField Width="100px" ColumnID="FO_NO" DataField="FO_NO" SortField="FO_NO"
FieldType="String" HeaderText="FO No." HeaderTextAlign="Center" EnableFilter="true">
<Filter EnableMultiFilter="true" ShowMatcher="true">
<Operator>
<f:DropDownList ID="DropDownList4" runat="server">
<f:ListItem Text="equal to" Value="equal" />
<f:ListItem Text="include" Value="contain" Selected="true" />
</f:DropDownList>
</Operator>
</Filter>
</f:RenderField>
<f:RenderField Width="150px" ColumnID="Discipline" DataField="Discipline" SortField="Discipline"
FieldType="String" HeaderText="Discipline" HeaderTextAlign="Center" EnableFilter="true">
<Filter EnableMultiFilter="true" ShowMatcher="true">
<Operator>
<f:DropDownList ID="DropDownList1" runat="server">
<f:ListItem Text="equal to" Value="equal" />
<f:ListItem Text="include" Value="contain" Selected="true" />
</f:DropDownList>
</Operator>
</Filter>
</f:RenderField>
<f:RenderField Width="130px" ColumnID="Contractor" DataField="Contractor" SortField="Contractor"
FieldType="String" HeaderText="Contractor" HeaderTextAlign="Center" EnableFilter="true">
<Filter EnableMultiFilter="true" ShowMatcher="true">
<Operator>
<f:DropDownList ID="DropDownList2" runat="server">
<f:ListItem Text="equal to" Value="equal" />
<f:ListItem Text="include" Value="contain" Selected="true" />
</f:DropDownList>
</Operator>
</Filter>
</f:RenderField>
<f:RenderField Width="120px" ColumnID="Pricing_Scheme" DataField="Pricing_Scheme"
FieldType="String" HeaderText="Pricing Scheme" HeaderTextAlign="Center" EnableFilter="true">
<Filter EnableMultiFilter="true" ShowMatcher="true">
<Operator>
<f:DropDownList ID="DropDownList3" runat="server">
<f:ListItem Text="equal to" Value="equal" />
<f:ListItem Text="include" Value="contain" Selected="true" />
</f:DropDownList>
</Operator>
</Filter>
</f:RenderField>
<f:RenderField Width="100px" ColumnID="Original_WC" DataField="Original_WC" SortField="Original_WC"
FieldType="String" HeaderText="Work Center" HeaderTextAlign="Center" EnableFilter="true">
<Filter EnableMultiFilter="true" ShowMatcher="true">
<Operator>
<f:DropDownList ID="DropDownList5" runat="server">
<f:ListItem Text="equal to" Value="equal" />
<f:ListItem Text="include" Value="contain" Selected="true" />
</f:DropDownList>
</Operator>
</Filter>
</f:RenderField>
<f:RenderField Width="100px" ColumnID="Contract_Admin" DataField="Contract_Admin" SortField="Contract_Admin"
FieldType="String" HeaderText="Contract<br/>Admin" HeaderTextAlign="Center" EnableFilter="true">
<Filter EnableMultiFilter="true" ShowMatcher="true">
<Operator>
<f:DropDownList ID="DropDownList7" runat="server">
<f:ListItem Text="equal to" Value="equal" />
<f:ListItem Text="include" Value="contain" Selected="true" />
</f:DropDownList>
</Operator>
</Filter>
</f:RenderField>
<f:RenderField Width="100px" ColumnID="Buyer" DataField="Buyer"
FieldType="String" HeaderText="Buyer" HeaderTextAlign="Center" EnableFilter="true">
<Filter EnableMultiFilter="true" ShowMatcher="true">
<Operator>
<f:DropDownList ID="DropDownList11" runat="server">
<f:ListItem Text="equal to" Value="equal" />
<f:ListItem Text="include" Value="contain" Selected="true" />
</f:DropDownList>
</Operator>
</Filter>
</f:RenderField>
<f:RenderField Width="100px" ColumnID="Main_Coordinator" DataField="Main_Coordinator"
FieldType="String" HeaderText="Main<br/>Coordinator" HeaderTextAlign="Center" EnableFilter="true">
<Filter EnableMultiFilter="true" ShowMatcher="true">
<Operator>
<f:DropDownList ID="DropDownList12" runat="server">
<f:ListItem Text="equal to" Value="equal" />
<f:ListItem Text="include" Value="contain" Selected="true" />
</f:DropDownList>
</Operator>
</Filter>
</f:RenderField>
<f:RenderField Width="100px" ColumnID="User_Representative" DataField="User_Representative"
FieldType="String" HeaderText="User<br/>Representative" HeaderTextAlign="Center" EnableFilter="true">
<Filter EnableMultiFilter="true" ShowMatcher="true">
<Operator>
<f:DropDownList ID="DropDownList13" runat="server">
<f:ListItem Text="equal to" Value="equal" />
<f:ListItem Text="include" Value="contain" Selected="true" />
</f:DropDownList>
</Operator>
</Filter>
</f:RenderField>
<f:RenderField Width="130px" ColumnID="Contract_Person" DataField="Contract_Person"
FieldType="String" HeaderText="Contract_Person" HeaderTextAlign="Center" EnableFilter="true">
<Filter EnableMultiFilter="true" ShowMatcher="true">
<Operator>
<f:DropDownList ID="DropDownList14" runat="server">
<f:ListItem Text="equal to" Value="equal" />
<f:ListItem Text="include" Value="contain" Selected="true" />
</f:DropDownList>
</Operator>
</Filter>
</f:RenderField>
<f:RenderField Width="120px" ColumnID="Contract_Tel" DataField="Contract_Tel"
FieldType="String" HeaderText="Tel." HeaderTextAlign="Center" EnableFilter="true">
<Filter EnableMultiFilter="true" ShowMatcher="true">
<Operator>
<f:DropDownList ID="DropDownList15" runat="server">
<f:ListItem Text="equal to" Value="equal" />
<f:ListItem Text="include" Value="contain" Selected="true" />
</f:DropDownList>
</Operator>
</Filter>
</f:RenderField>
<f:RenderField Width="110px" ColumnID="Validate_Date" DataField="Validate_Date"
FieldType="Date" Renderer="Date" HeaderText="Valid Date" HeaderTextAlign="Center" EnableFilter="true">
<Filter EnableMultiFilter="true" ShowMatcher="true">
<Operator>
<f:DropDownList ID="DropDownList16" runat="server">
<f:ListItem Text="equal to" Value="equal" />
<f:ListItem Text="include" Value="contain" Selected="true" />
</f:DropDownList>
</Operator>
</Filter>
</f:RenderField>
<f:RenderField Width="100px" ColumnID="Expire_Date" DataField="Expire_Date"
FieldType="Date" Renderer="Date" HeaderText="Expiry Date" HeaderTextAlign="Center" EnableFilter="true">
<Filter EnableMultiFilter="true" ShowMatcher="true">
<Operator>
<f:DropDownList ID="DropDownList17" runat="server">
<f:ListItem Text="equal to" Value="equal" />
<f:ListItem Text="include" Value="contain" Selected="true" />
</f:DropDownList>
</Operator>
</Filter>
</f:RenderField>
<f:RenderField Width="90px" ColumnID="Remaining_Budget_Rate" DataField="Remaining_Budget_Rate"
FieldType="String" HeaderText="Remaining<br/>Budget%" HeaderTextAlign="Center" EnableFilter="true">
<Filter EnableMultiFilter="true" ShowMatcher="true">
<Operator>
<f:DropDownList ID="DropDownList8" runat="server">
<f:ListItem Text="equal to" Value="equal" />
<f:ListItem Text="include" Value="contain" Selected="true" />
</f:DropDownList>
</Operator>
</Filter>
</f:RenderField>
<f:RenderField Width="90px" ColumnID="Remaining_Duration_Rate" DataField="Remaining_Duration_Rate"
FieldType="String" HeaderText="Remaining<br/>Duration%" HeaderTextAlign="Center" EnableFilter="true">
<Filter EnableMultiFilter="true" ShowMatcher="true">
<Operator>
<f:DropDownList ID="DropDownList9" runat="server">
<f:ListItem Text="equal to" Value="equal" />
<f:ListItem Text="include" Value="contain" Selected="true" />
</f:DropDownList>
</Operator>
</Filter>
</f:RenderField>
</Columns>
<PageItems>
<f:ToolbarSeparator ID="ToolbarSeparator1" runat="server">
</f:ToolbarSeparator>
<f:ToolbarText ID="ToolbarText1" runat="server" Text="Number of records per page：">
</f:ToolbarText>
<f:DropDownList runat="server" ID="ddlPageSize" Width="80px" AutoPostBack="true"
OnSelectedIndexChanged="ddlPageSize_SelectedIndexChanged">
<f:ListItem Text="15" Value="15" />
<f:ListItem Text="20" Value="20" />
<f:ListItem Text="25" Value="25" />
<f:ListItem Text="30" Value="30" />
</f:DropDownList>
</PageItems>
</f:Grid>
</Items>
</f:Panel>
<f:Panel runat="server" ID="panelBottomRegion" RegionPosition="Bottom" RegionSplit="true" RegionSplitWidth="20px" EnableCollapse="true" Height="380px"
Title="底部面板" ShowBorder="false" ShowHeader="false" BodyPadding="1px">
<Items>
<f:Panel ID="Panel3" runat="server" Layout="Fit" Height="370px" EnableCollapse="false" ShowBorder="false" ShowHeader="true" Title="Deduction">
<Items>
<f:Panel runat="server" BlockMD="12"
Layout="Block" BlockConfigSpace="5px" ShowBorder="false" ShowHeader="false">
<Items>
<%--左--%>
<f:Panel CssClass="blockpanel" BlockMD="6" Height="370px"
runat="server" ShowBorder="true" ShowHeader="false">
<Toolbars>
<f:Toolbar ID="Toolbar3" runat="server">
<Items>
<f:DatePicker runat="server" BlockMD="5" Label="Time Range" LabelAlign="Right" DateFormatString="yyyy-MM" ID="StartTime" DisplayType="Month"></f:DatePicker>
<f:DatePicker ID="EndTime" Readonly="false" BlockMD="5" DateFormatString="yyyy-MM" runat="server" DisplayType="Month" ShowTodayButton="false"></f:DatePicker>
<f:Button ID="btnSubmit" runat="server" BlockMD="2" ValidateForms="SimpleForm1" Text="Submit" OnClientClick="return btnSubmit()">
</f:Button>
</Items>
</f:Toolbar>
</Toolbars>
<Items>
<f:TabStrip ID="TabStrip4" IsFluid="true" BlockMD="12" CssClass="blockpanel" Height="370px" ShowBorder="true" TabPosition="Right" ActiveTabIndex="0" runat="server">
<Tabs>
<f:Tab Title="KPI1" BodyPadding="1px" BlockMD="12" runat="server">
<Items>
<f:ContentPanel runat="server" BlockMD="12" ShowHeader="false" ShowBorder="false">
<div id="kpi1" style="width: 100%; height: 300px;"></div>
</f:ContentPanel>
</Items>
</f:Tab>
<f:Tab Title="KPI2" BodyPadding="1px" BlockMD="12" runat="server">
<Items>
<f:ContentPanel runat="server" BlockMD="12" ShowHeader="false" ShowBorder="false">
<div id="kpi2" style="width: 100%; height: 300px;"></div>
</f:ContentPanel>
</Items>
</f:Tab>
<f:Tab Title="KPI3" BodyPadding="1px" BlockMD="12" runat="server">
<Items>
<f:ContentPanel runat="server" BlockMD="12" ShowHeader="false" ShowBorder="false">
<div id="kpi3" style="width: 100%; height: 300px;"></div>
</f:ContentPanel>
</Items>
</f:Tab>
</Tabs>
</f:TabStrip>
</Items>
</f:Panel>
<%--右--%>
<f:Panel CssClass="blockpanel" BlockMD="6" Height="370px"
runat="server" ShowBorder="true" ShowHeader="false">
<Toolbars>
<f:Toolbar ID="Toolbar2" runat="server">
<Items>
<f:DatePicker runat="server" BlockMD="5" Label="Time Range" LabelAlign="Right" DateFormatString="yyyy-MM-dd" ID="rStartTime"></f:DatePicker>
<f:DatePicker ID="rEndTime" Readonly="false" BlockMD="5" CompareControl="rStartTime" DateFormatString="yyyy-MM-dd" CompareOperator="GreaterThan" runat="server" ShowTodayButton="false"></f:DatePicker>
<f:Button ID="Button1" runat="server" BlockMD="2" ValidateForms="SimpleForm1" Text="Submit" OnClientClick="return KPIR()">
</f:Button>
</Items>
</f:Toolbar>
</Toolbars>
<Items>
<f:ContentPanel runat="server" BlockMD="12" ShowHeader="false" ShowBorder="false">
<div id="kpir" style="width: 650px; height: 300px;"></div>
</f:ContentPanel>
</Items>
</f:Panel>
</Items>
</f:Panel>
</Items>
</f:Panel>
</Items>
</f:Panel>
</Items>
</f:Panel>
<f:Window ID="Window1" Title="Search" Hidden="true" EnableIFrame="true" EnableMaximize="false"
Target="Parent" EnableResize="true" runat="server" IsModal="true" Width="600px"
Height="300px" OnClose="Window1_Close">
</f:Window>
</form>
<script type="text/javascript">
//点击合同加载执行方法
function PagePostBank() {
KPIR();
btnSubmit();
}
//KPIR
function KPIR() {
var Contractor = $("#Panel2_panelTopRegion_hidVendor_Name-inputEl").val();
var FO_NO = $("#Panel2_panelTopRegion_hidFO_NO-inputEl").val();
if (FO_NO == "" || FO_NO == undefined || FO_NO == null) {
layer.alert("Please select Fo No.!");
return false;
}
var rStartId = '<%= rStartTime.ClientID %>';
var rEndId = '<%= rEndTime.ClientID %>';
var kpirlegend = "";
var kpirxAxis = "";
var kpirDateEnd = "";
$.ajax({
type: "POST",
dataType: "text",
url: "main.ashx",
data: { "action": "kpir", "startTime": (F(rStartId) == null || F(rStartId) == undefined) ? "" : F(rStartId).ollO1, "endTime": (F(rEndId) == null || F(rEndId) == undefined) ? "" : F(rEndId).ollO1, "Contractor": Contractor, "FO_NO": FO_NO },
async: false,
success: function (result) {
var data = jQuery.parseJSON(result);
kpirlegend = data.kpirJson.split('||')[0];
kpirxAxis = data.kpirJson.split('||')[1];
kpirDateEnd = data.kpirJson.split('||')[2];
kpirUser = data.kpirJson.split('||')[3];
kpirDep = data.kpirJson.split('||')[4];
kpirAll = data.kpirJson.split('||')[5];
}
});
if ($("#Panel2_panelBottomRegion_Panel3_TabStrip1_ctl00_ctl00_ctl01").width() != undefined) {
$("#kpir").css('width', $("#Panel2_panelBottomRegion_Panel3_TabStrip1_ctl00_ctl00_ctl01").width());
}
var KPIR = echarts.init(document.getElementById("kpir"));
var optionKpiR = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: kpirlegend.split(',')
},
grid: {
left: '3%',
right: '4%',
containLabel: true
},
xAxis: {
type: 'category',
data: kpirxAxis.split(',')
},
yAxis: {
type: 'value'
},
series: [
{
name: "User",
type: "bar",
stack: "tb",
barWidth: "30",
data: kpirUser.split(','),
itemStyle: {
normal: {
color: '#94AF0a'
}
}
},
{
name: "Dep",
type: "bar",
stack: "tb",
barWidth: "30",
data: kpirDep.split(','),
itemStyle: {
normal: {
color: 'blue'
}
}
},
{
name: "All",
type: "line",
stack: "tb",
barWidth: "30",
data: kpirAll.split(','),
itemStyle: {
normal: {
label: {
show: true, //开启显示
formatter: '{c}',
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 12,
}
}
}
}
}
],
dataZoom: [{
show: true,
start: 0,
end: parseInt(kpirDateEnd)
}],
};
KPIR.setOption(optionKpiR);
}
function btnSubmit() {
var Contractor = $("#Panel2_panelTopRegion_hidVendor_Name-inputEl").val();
var FO_NO = $("#Panel2_panelTopRegion_hidFO_NO-inputEl").val();
if (FO_NO == "" || FO_NO == undefined || FO_NO == null) {
layer.alert("Please select Fo No.!");
return false;
}
var StartId = '<%= StartTime.ClientID %>';
var EndId = '<%= EndTime.ClientID %>';
//KPI1
var kpi1xAxis = "";
var kpi1serieshze = "";
var kpi1serieshzl = "";
var kpi1DateEnd = "";
//KPI2
var kpi2series = "";
//KPI3
var kpi3xAxis = "";
var kpi3seriesSsr = "";
var kpi3serieshzl = "";
var kpi3DateEnd = "";
$.ajax({
type: "POST",
dataType: "text",
url: "main.ashx",
data: { "action": "mainkpi", "startTime": (F(StartId) == null || F(StartId) == undefined) ? "" : F(StartId).ollO1, "endTime": (F(EndId) == null || F(EndId) == undefined) ? "" : F(EndId).ollO1, "Contractor": Contractor, "FO_NO": FO_NO },
async: false,
success: function (result) {
var data = jQuery.parseJSON(result);
//kpi1
kpi1xAxis = data.Kpi1json.split('||')[0];
kpi1serieshze = data.Kpi1json.split('||')[1];
kpi1serieshzl = data.Kpi1json.split('||')[2];
kpi1DateEnd = data.Kpi1json.split('||')[3];
//kpi2
kpi2series = data.Kpi2json;
//kpi3
kpi3xAxis = data.Kpi3json.split('||')[0];
kpi3seriesSsr = data.Kpi3json.split('||')[1];
kpi3serieshzl = data.Kpi3json.split('||')[2];
kpi3DateEnd = data.Kpi3json.split('||')[3];
}
});
Kpi1(kpi1xAxis, kpi1serieshze, kpi1serieshzl, kpi1DateEnd, Contractor);
Kpi2(kpi2series, Contractor);
KPI3(kpi3xAxis, kpi3seriesSsr, kpi3serieshzl, kpi3DateEnd, Contractor);
return true;
}
//KPI1
function Kpi1(kpi1xAxis, kpi1serieshze, kpi1serieshzl, kpi1DateEnd, Contractor) {
if ($("#Panel2_panelBottomRegion_Panel3_ctl00_ctl00_TabStrip4_ctl00_ctl00").width() != undefined) {
$("#kpi1").css('width', $("#Panel2_panelBottomRegion_Panel3_ctl00_ctl00_TabStrip4_ctl00_ctl00").width());
}
var KPI1 = echarts.init(document.getElementById("kpi1"));
var optionKpi1 = {
tooltip: {
trigger: 'axis'
},
grid: {
left: '15%',
},
title: {
left: 'center',
text: Contractor,
top: '5%',
textStyle: {
//头部字体大小
fontSize: 12
}
},
legend: {
data: ['Deduction Cost(RMB)', 'Deduction Rate(%)'],
},
xAxis: [
{
type: 'category',
data: kpi1xAxis.split(','),
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: 'Deduction Cost(RMB)',
},
{
type: 'value',
name: 'Deduction Rate(%)',
max: 100,
axisLabel: {
formatter: '{value} %'
}
}
],
dataZoom: [
{
show: true,
start: 0,
end: parseInt(kpi1DateEnd)
}
],
series: [
{
name: 'Deduction Cost(RMB)',
type: 'bar',
data: kpi1serieshze.split(','),
itemStyle: {
normal: {
color: '#94AF0a',
label: {
show: false, //开启显示
formatter: '{c}',
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 12
}
}
}
}
},
{
name: 'Deduction Rate(%)',
type: 'line',
yAxisIndex: 1,
data: kpi1serieshzl.split(','),
itemStyle: {
normal: {
label: {
show: true, //开启显示
formatter: '{c}%',
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 12,
}
}
}
}
}
]
};
KPI1.setOption(optionKpi1);
}
//KPI2
function Kpi2(kpi2series, Contractor) {
if (parseInt($("#kpi1").width()) > 0) {
$("#kpi2").css('width', $("#kpi1").width());
}
var kpi2hze = kpi2series.split('||')[0];
var kpi2hzl = kpi2series.split('||')[1];
var kpi2ses = kpi2series.split('||')[2];
var series = [];
for (var i = 0; i < kpi2hze.split(',').length; i++) {
var arr = [];
arr.push(parseFloat(kpi2hze.split(',')[i]), parseFloat(kpi2hzl.split(',')[i]));
series.push(arr);
}
var KPI2 = echarts.init(document.getElementById("kpi2"));
var optionKpi2 = {
tooltip: {
/*返回需要的信息*/
formatter: function (param) {
var value = param.value;
return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 16px;padding-bottom: 7px;margin-bottom: 7px;">' + kpi2ses.split(',')[param.dataIndex] + '[' + value[0] + ',' + value[1] + ']' + '</div>';
}
},
title: {
left: 'center',
text: Contractor,
top: '5%',
textStyle: {
//头部字体大小
fontSize: 12
}
},
xAxis: {
scale: true,
name: 'Deduction Cost（RMB）',
position: 'left',//位置靠左
nameLocation: 'middle', //位置居中
nameGap: 30, //与y轴距离
nameRotate: 0, //角度
nameTextStyle: {
fontSize: 14,
fontWeight: 'bolder'
}
},
yAxis: {
scale: true,
name: 'Deduction Rate（%）',
position: 'left',//位置靠左
nameLocation: 'middle', //位置居中
nameGap: 30, //与y轴距离
nameRotate: 90, //角度
nameTextStyle: {
fontSize: 14,
fontWeight: 'bolder'
}
},
series: [{
type: 'effectScatter',
symbolSize: 20
}, {
type: 'scatter',
data: series,
}]
};
KPI2.setOption(optionKpi2);
}
//KPI3
function KPI3(kpi3xAxis, kpi3seriesSsr, kpi3serieshzl, kpi3DateEnd, Contractor) {
if (parseInt($("#kpi1").width()) > 0) {
$("#kpi3").css('width', $("#kpi1").width());
}
var KPI3 = echarts.init(document.getElementById("kpi3"));
var optionKpi3 = {
tooltip: {
trigger: 'axis'
},
title: {
left: 'center',
text: Contractor,
top: '5%',
textStyle: {
//头部字体大小
fontSize: 12
}
},
legend: {
data: ['Cost(RMB)', 'Deduction Rate(%)']
},
grid: {
left: '15%',
},
xAxis: [
{
type: 'category',
data: kpi3xAxis.split(','),
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: 'Cost(RMB)'
},
{
type: 'value',
name: 'Deduction Rate(%)',
axisLabel: {
formatter: '{value} %'
}
}
],
dataZoom: [
{
show: true,
start: 0,
end: parseInt(kpi3DateEnd)
}
],
series: [
{
name: 'Cost(RMB)',
type: 'bar',
data: kpi3seriesSsr.split(','),
itemStyle: {
normal: {
color: '#94AF0a'
}
}
},
{
name: 'Deduction Rate(%)',
type: 'line',
yAxisIndex: 1,
data: kpi3serieshzl.split(','),
itemStyle: {
normal: {
label: {
show: true, //开启显示
formatter: '{c}%',
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 12,
}
}
}
}
}
]
};
KPI3.setOption(optionKpi3);
}
</script>
<script>
function renderSalary(value) {
return F.addCommas(value.toFixed(0));
}
</script>
</body>
</html>