修改界面

master
夜笙歌 4 years ago
parent 7eb710fb7f
commit 4b5921be80

@ -18,7 +18,7 @@ $(() => {
autoUpdate(url + "/selectMonthNumberQaS", INTERVAL, data => {
multipleVerticalBarChartTwo({
xName:data.map(val => `${val.monthName}`),
xName: data.map(val => `${val.monthName}`),
yDataOne: data.map(val => val.bhNumber),
yDataOneName: '闭环数',
yDataTwo: data.map(val => val.qaNumber),
@ -26,8 +26,8 @@ $(() => {
}, document.getElementById("safe"), '')
})
autoUpdate(url + "/selectMonthQANumber", INTERVAL, data => {
pieChart(data.map((val,index) => {
if (index == 0 ) {
pieChart(data.map((val, index) => {
if (index == 0) {
return {
name: val.name,
value: val.rate,
@ -50,7 +50,7 @@ $(() => {
value: val.rate
}
}), document.getElementById("abnormal"),'%');
}), document.getElementById("abnormal"), '%');
})
autoUpdate(url + "/selectProductInStoreGroupMonth", INTERVAL, data => {
@ -62,13 +62,13 @@ $(() => {
})
autoUpdate(url + "/selectHighlightProducts", 40000, data => {
let url = data.map(val => val.picturePath)
$('#HighlightOne').attr("src" , `http://10.100.70.5:9090/${url[0]}`)
$('#HighlightTwo').attr("src" , `http://10.100.70.5:9090/${url[1]}`)
$('#HighlightThree').attr("src" , `http://10.100.70.5:9090/${url[2]}`)
$('#HighlightFour').attr("src" , `http://10.100.70.5:9090/${url[3]}`)
$('#HighlightOne').attr("src", `http://10.100.70.5:9090/${url[0]}`)
$('#HighlightTwo').attr("src", `http://10.100.70.5:9090/${url[1]}`)
$('#HighlightThree').attr("src", `http://10.100.70.5:9090/${url[2]}`)
$('#HighlightFour').attr("src", `http://10.100.70.5:9090/${url[3]}`)
let options = {
navButton:false,
sideButton:false,
navButton: false,
sideButton: false,
effects: ['fade', 'slideX', 'slideY', 'page', 'circle', 'rollingX', 'rollingY', 'blindsX', 'blindsY'],
data: [
{
@ -88,25 +88,29 @@ $(() => {
$('#slide').vmcSlide(options);
})
autoUpdate(url + "/selectBaseQilist", 40000, data => {
console.log(data)
lineChart({
xName: data[0].list.map(val => val.name),
yData: data[0].list.map(val => val.rate),
yDataName: data[0].code,
}, document.getElementById("quality"),'%')
let yData = data.map(val => {
return {
name: val.code,
data: val.list.map(e=>e.rate),
}
})
lineChartTwo({
xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"].splice(0,Math.ceil(Math.max(...data.map(val => val.list.length)))),
yData: yData,
}, document.getElementById("quality"), '%')
})
autoUpdate(url + "/selectDtNenglist", INTERVAL, data => {
let month = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
let value = []
let target = []
for (let i = 1; i <= 12; i++) {
if(data[0][`month${i}`]){
if (data[0][`month${i}`]) {
value.push(data[0][`month${i}`])
target.push(data[0][`target`])
}
}
lineChart({
xName: month.splice(0,value.length),
xName: month.splice(0, value.length),
yData: value,
yDataName: "单台能耗(元/台)",
yDataTwo: target,

@ -946,7 +946,7 @@ const barChartAndLineChartFour = function (data, id) {
}
// 折线图
const lineChart = function (data, id,unit='') {
const lineChart = function (data, id, unit = '') {
let charts = echarts.init(id);
if (!data) {
data = {
@ -1096,6 +1096,134 @@ const lineChart = function (data, id,unit='') {
charts.setOption(option);
$(window).resize(charts.resize);
}
const lineChartTwo = function (data, id, unit = '') {
let charts = echarts.init(id);
let color = ['#3094ea','#f3454b']
if (!data) {
data = {
xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
yData: [
{
name: "提升百分比",
data: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],
},
{
name: "百分比",
data: [60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60],
},
],
}
}
let num = data.yData.map(val => val.data).flat(Infinity)
let min = Math.ceil(Math.min(...num))
let max = Math.ceil(Math.max(...num))
let series = data.yData.map((val,index) => {
return {
name: val.name,
type: 'line',
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 4, //标记的大小
itemStyle: {
//折线拐点标志的样式
color: color[index % color.length],
borderWidth: '2',
borderColor: color[index % color.length],
},
lineStyle: {
color: color[index % color.length],
},
label: {
//图形上的文本标签
normal: {
formatter: `{c}${unit}`,
show: true,
position: "top",
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.5 * vw,
},
},
},
data: val.data,
}
})
let option = {
grid: {
top: '20%',
left: '5%',
right: '5%',
bottom: '8%',
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true,
},
},
},
legend: {
top: '5%',
textStyle: {
fontSize: 0.75 * vw,
color: '#90cb5e',
},
},
xAxis: {
type: 'category',
data: data.xName,
axisLine: {
show: true,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: '#ffffff', //X轴文字颜色
},
},
},
yAxis: [
{
min: (min - 2 < 0) ? 0 : min - 2,
max: (max + 2 > 100) ? 100 : max + 2,
type: 'value',
nameTextStyle: {
color: '#393939',
},
splitLine: {
show: false,
lineStyle: {
color: '#eeeeee',
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: '#ffffff',
},
},
},
],
series: series,
};
charts.setOption(option);
$(window).resize(charts.resize);
}
// 饼图

@ -52,6 +52,7 @@
<!--能耗-->
<div class="energyConsumption" id="energyConsumption"></div>
<ifarme src="https://api.vvhan.com/api/60s"></ifarme>
<!--异常-->
<div class="abnormal" id="abnormal"></div>
<span style="position: absolute;transform: translateX(-50%);top: 7.9%;left: 28.8%;font-size: 0.8vw;font-weight: 800;color: red;">品牌赋能</span>

Loading…
Cancel
Save