594 lines
19 KiB
JavaScript
594 lines
19 KiB
JavaScript
|
||
|
||
var initTimeType = '1'; //初始化时间类型
|
||
|
||
var purchaseType = [
|
||
'1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22'
|
||
]
|
||
|
||
var purchaseData = [
|
||
120, 200, 150, 80, 70, 110, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130, 130
|
||
]
|
||
|
||
var rankingList = [
|
||
{ name: '220kvxxxxxxxxxxxxxxxxxx工程220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
|
||
{ name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
|
||
{ name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
|
||
{ name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
|
||
{ name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
|
||
{ name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
|
||
{ name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
|
||
{ name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
|
||
{ name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
|
||
{ name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
|
||
{ name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' }
|
||
]
|
||
|
||
var supplierList = [
|
||
{ name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
|
||
{ name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
|
||
{ name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
|
||
{ name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
|
||
{ name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
|
||
{ name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
|
||
{ name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
|
||
{ name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
|
||
{ name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
|
||
{ name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
|
||
{ name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
|
||
{ name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
|
||
{ name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' },
|
||
{ name: '220kvxxxxxxxxxxxxxxxxxx工程', ly: '50', th: '10', cq: '35' }
|
||
]
|
||
|
||
// 页面初始化
|
||
$(function () {
|
||
console.log('DOM is ready!');
|
||
$(`#time-${initTimeType}`).addClass('time-select-item-ac');
|
||
initDelivery()
|
||
initPurchase()
|
||
initBalance()
|
||
initPlan()
|
||
initInstrument()
|
||
rankingDom()
|
||
supplierDom()
|
||
layui.use('laydate', function () {
|
||
var laydate = layui.laydate;
|
||
//执行一个laydate实例
|
||
laydate.render({
|
||
elem: '#time_range_id', //指定元素
|
||
type: 'datetime',
|
||
range: true
|
||
});
|
||
});
|
||
});
|
||
|
||
|
||
function overviewClick(type) {
|
||
console.log(type)
|
||
let title = '', content = '', width = '95%', height = '95%';
|
||
if (type === '0') {
|
||
title = '工程详情';
|
||
content = '../../page/welconme_child/engineer.html';
|
||
}
|
||
else if (type === '1') {
|
||
title = '需求计划详情';
|
||
content = '../../page/welconme_child/demand.html';
|
||
}
|
||
else if (type === '2') {
|
||
title = '库存详情';
|
||
content = '../../page/welconme_child/inventory.html';
|
||
}
|
||
else if (type === '3') {
|
||
title = '采购详情';
|
||
content = '../../page/welconme_child/purchase.html';
|
||
}
|
||
else if (type === '4') {
|
||
title = '利库详情';
|
||
content = '../../page/welconme_child/liKu.html';
|
||
}
|
||
else if (type === '5') {
|
||
title = '退回详情';
|
||
content = '../../page/welconme_child/goBack.html';
|
||
}
|
||
openIframeByParamObj("engineerDetail", title, content, width, height);
|
||
}
|
||
|
||
// 页面刷新事件
|
||
function refreshClick() {
|
||
$(`#refresh_id`).addClass('layui-anim-rotate');
|
||
}
|
||
|
||
function rankingDom() {
|
||
var dom_nav = document.getElementById('table_body_id')
|
||
rankingList.forEach((item, index) => {
|
||
var dom = ''
|
||
var color = ''
|
||
if (index == 0) {
|
||
color = 'rgb(244, 138, 139)'
|
||
} else if (index == 1 || index == 2) {
|
||
color = '#eae13c'
|
||
} else {
|
||
color = '#999999'
|
||
}
|
||
dom += `
|
||
<div style="width: 10%;">
|
||
<div class="serialNumber" style="background:${color}">${index + 1}</div>
|
||
</div>
|
||
<div style="width: 40%;" title="${item.name}">${item.name}</div>
|
||
<div style="width: 16.6%;font-weight: 700;">${item.ly}</div>
|
||
<div style="width: 16.6%;font-weight: 700;color: rgb(68, 206, 66);">${item.th}</div>
|
||
<div style="width: 16.6%;font-weight: 700;color: rgb(244, 138, 139);">${item.cq}</div>
|
||
`
|
||
var itemDom = document.createElement("div");
|
||
itemDom.setAttribute('class', `table_body_item`);
|
||
itemDom.innerHTML = dom;
|
||
dom_nav.appendChild(itemDom);
|
||
})
|
||
rankingScrollTo()
|
||
}
|
||
|
||
function supplierDom() {
|
||
//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
|
||
layui.use('element', function () {
|
||
var element = layui.element;
|
||
});
|
||
var dom_nav = document.getElementById('supplier_table_body_id')
|
||
rankingList.forEach((item, index) => {
|
||
var dom = ''
|
||
dom += `
|
||
<div class="table_img_nav" style="width: 34%;">
|
||
<img src="../images/logo.png" alt="">
|
||
<div class="table_img_txt">
|
||
<div style="font-size: 18px;color: #666666;font-weight: 700;">Axxxxxxxxxx供应商名称供应商名称供应商名称
|
||
</div>
|
||
<div style="color: #999999;margin-top: 4px;">合同占比：40 % （1,600,000）</div>
|
||
</div>
|
||
</div>
|
||
<div style="width: 18%;">56,2305656</div>
|
||
<div style="width: 18%;">800,000.00</div>
|
||
<div style="width: 15%;">
|
||
<div class="layui-progress layui-progress-big" lay-showPercent="yes" style="width: 100%;">
|
||
<div class="layui-progress-bar" lay-percent="20%" style="width:20%;">
|
||
<span class="layui-progress-text">20%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="width: 15%;">
|
||
<i class="layui-icon layui-icon-time" style="margin-right: 4px;"></i>
|
||
2024-10-21
|
||
</div>
|
||
`
|
||
var itemDom = document.createElement("div");
|
||
itemDom.setAttribute('class', `supplier_table_body_item`);
|
||
itemDom.innerHTML = dom;
|
||
dom_nav.appendChild(itemDom);
|
||
})
|
||
}
|
||
|
||
// 排名自动滚动
|
||
var rankingTimer = null
|
||
var offset = 0
|
||
|
||
function clearIntervalEvent() {
|
||
clearInterval(rankingTimer)
|
||
rankingTimer = null
|
||
}
|
||
|
||
function startIntervalEvent() {
|
||
let ranking_dom = document.getElementById('table_body_id')
|
||
offset = ranking_dom.scrollTop
|
||
rankingScrollTo()
|
||
}
|
||
|
||
function rankingScrollTo() {
|
||
var dom_nav = document.getElementById('table_body_id')
|
||
dom_nav.addEventListener('mouseenter',clearIntervalEvent)
|
||
dom_nav.addEventListener('mouseleave',startIntervalEvent)
|
||
// 元素可滚动高度
|
||
var scrollHeight = dom_nav.scrollHeight- dom_nav.clientHeight
|
||
// console.dir(dom_nav)
|
||
// console.log(scrollHeight)
|
||
rankingTimer = setInterval(() => {
|
||
offset += 1
|
||
if (offset >= scrollHeight) {
|
||
offset = 0
|
||
dom_nav.scrollTo({
|
||
top: offset
|
||
})
|
||
clearIntervalEvent()
|
||
rankingScrollTo()
|
||
} else {
|
||
dom_nav.scrollTo({
|
||
top: offset
|
||
})
|
||
}
|
||
}, 40)
|
||
}
|
||
|
||
|
||
function initInstrument() {
|
||
var dataArr = 80;
|
||
var colorSet = {
|
||
color: "#468EFD",
|
||
};
|
||
var myChart = echarts.init(document.getElementById('instrument_id'));
|
||
var option = {
|
||
tooltip: {
|
||
formatter: "{a} <br/>{b} : {c}%",
|
||
},
|
||
series: [
|
||
{
|
||
name: "内部进度条",
|
||
type: "gauge",
|
||
center: ['50%', '60%'],
|
||
radius: "100%",
|
||
|
||
splitNumber: 10,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: [
|
||
[dataArr / 100, colorSet.color],
|
||
[1, "#111F42"],
|
||
],
|
||
width: 8,
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
show: false,
|
||
},
|
||
detail: {
|
||
formatter: function (value) {
|
||
if (value !== 0) {
|
||
var num = Math.round(value);
|
||
return parseInt(num).toFixed(0) + "%";
|
||
} else {
|
||
return 0;
|
||
}
|
||
},
|
||
offsetCenter: [0, 82],
|
||
textStyle: {
|
||
padding: [0, 0, 0, 0],
|
||
fontSize: 18,
|
||
fontWeight: "700",
|
||
color: colorSet.color,
|
||
},
|
||
},
|
||
title: {
|
||
//标题
|
||
show: true,
|
||
offsetCenter: [0, 46], // x, y，单位px
|
||
textStyle: {
|
||
color: "#999999",
|
||
fontSize: 14, //表盘上的标题文字大小
|
||
fontWeight: 400,
|
||
fontFamily: "PingFangSC",
|
||
marginTop: '20px'
|
||
},
|
||
},
|
||
data: [
|
||
{
|
||
name: "￥3,400,000.00",
|
||
value: dataArr,
|
||
},
|
||
],
|
||
pointer: {
|
||
show: true,
|
||
length: "75%",
|
||
radius: "30%",
|
||
width: 10, //指针粗细
|
||
},
|
||
animationDuration: 4000,
|
||
},
|
||
{
|
||
name: "外部刻度",
|
||
type: "gauge",
|
||
center: ['50%', '60%'],
|
||
radius: "90%",
|
||
min: 0, //最小刻度
|
||
max: 100, //最大刻度
|
||
splitNumber: 10, //刻度数量
|
||
startAngle: 225,
|
||
endAngle: -45,
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 1,
|
||
color: [[1, "rgba(0,0,0,0)"]],
|
||
},
|
||
}, //仪表盘轴线
|
||
axisLabel: {
|
||
show: true,
|
||
color: "#4d5bd1",
|
||
distance: 25,
|
||
formatter: function (v) {
|
||
switch (v + "") {
|
||
case "0":
|
||
return "0";
|
||
case "10":
|
||
return "10";
|
||
case "20":
|
||
return "20";
|
||
case "30":
|
||
return "30";
|
||
case "40":
|
||
return "40";
|
||
case "50":
|
||
return "50";
|
||
case "60":
|
||
return "60";
|
||
case "70":
|
||
return "70";
|
||
case "80":
|
||
return "80";
|
||
case "90":
|
||
return "90";
|
||
case "100":
|
||
return "100";
|
||
}
|
||
},
|
||
}, //刻度标签。
|
||
axisTick: {
|
||
show: true,
|
||
splitNumber: 7,
|
||
lineStyle: {
|
||
color: colorSet.color, //用颜色渐变函数不起作用
|
||
width: 1,
|
||
},
|
||
length: -8,
|
||
}, //刻度样式
|
||
splitLine: {
|
||
show: true,
|
||
length: -20,
|
||
lineStyle: {
|
||
color: colorSet.color, //用颜色渐变函数不起作用
|
||
},
|
||
}, //分隔线样式
|
||
detail: {
|
||
show: false,
|
||
},
|
||
pointer: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
};
|
||
myChart.setOption(option);
|
||
}
|
||
|
||
function initPlan() {
|
||
var myChart = echarts.init(document.getElementById('plan_id'));
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
graphic: {
|
||
type: 'text',
|
||
left: 'center',
|
||
top: 'center',
|
||
style: {
|
||
text: '完成率50%', // 要显示的文字
|
||
textAlign: 'center',
|
||
fill: '#0cd68d', // 文字颜色
|
||
fontSize: 20
|
||
// 其他样式配置...
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
top: '14%',
|
||
containLabel: true
|
||
},
|
||
series: [
|
||
{
|
||
name: '需求计划',
|
||
type: 'pie',
|
||
radius: ['60%', '80%'],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{ value: 1100, name: '已完成', itemStyle: { color: '#0cd68d' } },
|
||
{ value: 1048, name: '未完成', itemStyle: { color: '#eef2f3' } },
|
||
]
|
||
}
|
||
]
|
||
};
|
||
myChart.setOption(option);
|
||
}
|
||
|
||
function initBalance() {
|
||
var myChart = echarts.init(document.getElementById('balance_id'));
|
||
var option = {
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
type: 'value'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: ['采购金额', '已付金额']
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
top: '14%',
|
||
containLabel: true
|
||
},
|
||
series: [
|
||
{
|
||
name: '采购金额',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#3983fe', // 点的颜色
|
||
lineStyle: {
|
||
color: '#3983fe' // 线的颜色
|
||
}
|
||
}
|
||
},
|
||
areaStyle: {},
|
||
data: [120, 132, 101, 134, 90, 230, 210, 210, 210, 210, 210, 210]
|
||
},
|
||
{
|
||
name: '已付金额',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#877de3', // 点的颜色
|
||
lineStyle: {
|
||
color: '#877de3' // 线的颜色
|
||
}
|
||
}
|
||
},
|
||
areaStyle: {},
|
||
data: [220, 182, 191, 234, 290, 330, 310, 210, 210, 210, 210, 210]
|
||
}
|
||
]
|
||
};
|
||
myChart.setOption(option);
|
||
}
|
||
|
||
function initPurchase() {
|
||
var myChart = echarts.init(document.getElementById('purchase_id'));
|
||
var option = {
|
||
xAxis: {
|
||
type: 'category',
|
||
data: purchaseType
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
top: '5%',
|
||
containLabel: true
|
||
},
|
||
dataZoom: {
|
||
type: "inside",
|
||
xAxisIndex: [0],
|
||
show: false,
|
||
startValue: 0, // 从头开始
|
||
endValue: 12, // 一次性展示几个
|
||
},
|
||
series: [
|
||
{
|
||
data: purchaseData,
|
||
type: 'bar',
|
||
showBackground: true,
|
||
label: {
|
||
show: true, // 显示数值
|
||
position: 'top' // 数值显示的位置
|
||
},
|
||
backgroundStyle: {
|
||
color: 'rgba(180, 180, 180, 0.2)'
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
setInterval(function () {
|
||
// 每次向左滑动一个，最后一个从头开始。
|
||
if (option.dataZoom.endValue == purchaseType.length) {
|
||
option.dataZoom.startValue = 0;
|
||
option.dataZoom.endValue = 12;
|
||
} else {
|
||
option.dataZoom.endValue = option.dataZoom.endValue + 1;
|
||
option.dataZoom.startValue = option.dataZoom.startValue + 1;
|
||
}
|
||
myChart.setOption(option);
|
||
}, 2000);
|
||
|
||
myChart.setOption(option);
|
||
}
|
||
|
||
function initDelivery() {
|
||
var myChart = echarts.init(document.getElementById('delivery_id'));
|
||
var option = {
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
type: 'value'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: ['采购量', '利库量', '退还量']
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
top: '14%',
|
||
containLabel: true
|
||
},
|
||
series: [
|
||
{
|
||
name: '采购量',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: [120, 132, 101, 134, 90, 230, 210, 210, 210, 210, 210, 210]
|
||
},
|
||
{
|
||
name: '利库量',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: [220, 182, 191, 234, 290, 330, 310, 210, 210, 210, 210, 210]
|
||
},
|
||
{
|
||
name: '退还量',
|
||
type: 'line',
|
||
stack: 'Total',
|
||
data: [150, 232, 201, 154, 190, 330, 410, 210, 210, 210, 210, 210]
|
||
}
|
||
]
|
||
};
|
||
myChart.setOption(option);
|
||
}
|
||
|
||
function timeClick(type) {
|
||
$(`#time-${type}`).addClass('time-select-item-ac');
|
||
$(`#time-${initTimeType}`).removeClass('time-select-item-ac');
|
||
initTimeType = type
|
||
console.log(initTimeType)
|
||
if(initTimeType == 2) {
|
||
document.getElementById('time_range_nav').style.display = 'block'
|
||
}else {
|
||
document.getElementById('time_range_nav').style.display = 'none'
|
||
}
|
||
} |